مشروع نظام تسجيل دخول كامل وتسجيل حساب

بلوجر فيومي

مشروع نظام تسجيل دخول كامل وتسجيل حساب

في مشروع النهاردة هنعمل نظام تسجيل دخول كامل باستخدام PHP وMySQL. النظام ده هيتيح للمستخدمين تسجيل حساب جديد وتسجيل الدخول لحساباتهم. هنستخدم قاعدة بيانات لتخزين بيانات المستخدمين وهنعمل واجهة بسيطة للمستخدم.



1. إنشاء قاعدة البيانات

أول حاجة نبدأ بها هي إنشاء قاعدة بيانات جديدة. هننشئ قاعدة بيانات باسم login_system_db وجدول باسم users لتخزين بيانات المستخدمين.

CREATE DATABASE login_system_db;

USE login_system_db;

CREATE TABLE users (

    id INT AUTO_INCREMENT PRIMARY KEY,

    username VARCHAR(50) NOT NULL,

    password VARCHAR(255) NOT NULL,

    email VARCHAR(100) NOT NULL,

    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP

);

    

2. إعداد بيئة العمل

بعد ما أنشأنا قاعدة البيانات، هنحتاج نعمل ملف PHP للاتصال بقاعدة البيانات. هننشئ ملف باسم db.php:

<?php

$host = 'localhost';

$dbname = 'login_system_db';

$username = 'ahmed'; // اسم المستخدم الخاص بقاعدة البيانات

$password = 'your_password'; // كلمة المرور الخاصة بقاعدة البيانات

try {

    $conn = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);

    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch (PDOException $e) {

    echo "Connection failed: " . $e->getMessage();

}

?>

    

3. إنشاء واجهة تسجيل حساب جديد

هنبدأ بإنشاء واجهة لتسجيل حساب جديد. هننشئ ملف باسم register.php:

<?php include 'db.php'; ?>

<!DOCTYPE html>

<html>

<head>

    <title>تسجيل حساب</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <h1>تسجيل حساب جديد</h1>

    <form method="POST">

        <input type="text" name="username" placeholder="اسم المستخدم" required>

        <input type="email" name="email" placeholder="البريد الإلكتروني" required>

        <input type="password" name="password" placeholder="كلمة المرور" required>

        <button type="submit">تسجيل</button>

    </form>

    <?php

    if ($_SERVER['REQUEST_METHOD'] == 'POST') {

        $username = $_POST['username'];

        $email = $_POST['email'];

        $password = password_hash($_POST['password'], PASSWORD_DEFAULT); // تشفير كلمة المرور

        // إضافة المستخدم لقاعدة البيانات

        $stmt = $conn->prepare("INSERT INTO users (username, password, email) VALUES (?, ?, ?)");

        if ($stmt->execute([$username, $password, $email])) {

            echo "<p>تم تسجيل حسابك بنجاح! يمكنك الآن تسجيل الدخول.</p>";

        } else {

            echo "<p>حدث خطأ أثناء التسجيل. حاول مرة أخرى.</p>";

        }

    }

    ?>

</body>

</html>

    

4. إنشاء واجهة تسجيل الدخول

بعد كده، هنحتاج واجهة لتسجيل الدخول. هننشئ ملف باسم login.php:

<?php include 'db.php'; ?>

<!DOCTYPE html>

<html>

<head>

    <title>تسجيل الدخول</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <h1>تسجيل الدخول</h1>

    <form method="POST">

        <input type="text" name="username" placeholder="اسم المستخدم" required>

        <input type="password" name="password" placeholder="كلمة المرور" required>

        <button type="submit">تسجيل الدخول</button>

    </form>

    <?php

    if ($_SERVER['REQUEST_METHOD'] == 'POST') {

        $username = $_POST['username'];

        $password = $_POST['password'];

        // التحقق من بيانات المستخدم

        $stmt = $conn->prepare("SELECT * FROM users WHERE username = ?");

        $stmt->execute([$username]);

        $user = $stmt->fetch();

        if ($user && password_verify($password, $user['password'])) {

            echo "<p>مرحباً بك، $username! تم تسجيل دخولك بنجاح.</p>";

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

        } else {

            echo "<p>اسم المستخدم أو كلمة المرور غير صحيحة.</p>";

        }

    }

    ?>

</body>

</html>

    

5. إضافة تصميم بسيط

وأخيرًا، هنضيف شوية تصميم للصفحات. هننشئ ملف باسم style.css:

body {

    font-family: Arial, sans-serif;

    background-color: #f4f4f4;

    margin: 0;

    padding: 20px;

}

h1 {

    color: #333;

}

form {

    margin-bottom: 20px;

}

input[type="text"],

input[type="email"],

input[type="password"] {

    padding: 10px;

    width: 80%;

    border: 1px solid #ddd;

    margin-bottom: 10px;

}

button {

    padding: 10px;

    background-color: #5cb85c;

    color: white;

    border: none;

    cursor: pointer;

}

button:hover {

    background-color: #4cae4c;

}

    

6. الخاتمة

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

إرسال تعليق

شاهد أيضاً :-
Cookie Consent
تعريف الارتباط

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

Oops!
يبدو أن هناك مشكلة في اتصالك بالإنترنت. يرجى الاتصال بالإنترنت والمحاولة مرة أخرى.
AdBlock Detected!
لقد اكتشفنا أنك تستخدم إضافة حظر الإعلانات في متصفحك.
يتم استخدام الإيرادات التي نحصل عليها من الإعلانات لإدارة هذا الموقع، لذا نرجو منك إضافة موقعنا إلى القائمة البيضاء في إضافة حظر الإعلانات الخاصة بك.
Site is Blocked
Sorry! This site is not available in your country.