visitor_registration/
├── index.html # الصفحة الرئيسية مع نموذج التسجيل
├── styles.css # أنماط CSS لتنسيق الصفحة
├── script.js # سكربت JavaScript لمعالجة التسجيل
└── register.php # ملف PHP لمعالجة البيانات وإدخالها في قاعدة البيانات
خطوات الإعداد:
إنشاء مجلد المشروع:
أنشئ مجلدًا باسم visitor_registration على خادمك المحلي
إنشاء الملفات:
أنشئ الملفات المذكورة أعلاه (index.html, styles.css, script.js, register.php)
وضع المحتوى المناسب في كل منها
إعداد قاعدة البيانات:
استخدم phpMyAdmin لإنشاء قاعدة البيانات visitor_registration وإنشاء جدول
visitors باستخدام الاستعلامات SQL السابقة
تشغيل الخادم المحلي:
تأكد من تشغيل خادم الويب (مثل XAMPP أو MAMP)
افتح المتصفح وانتقل إلى http://localhost/visitor_registration/index.html
بهذا، سيكون لديك نظام تسجيل زوار بسيط ومنظم. إذا كان لديك أي استفسارات أو تحتاج
إلى مزيد من المساعدة، فلا تتردد في السؤال!
index.html الكود
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>نظام تسجيل الزوار</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>تسجيل الزوار</h1>
<form id="registrationForm" action="register.php" method="POST">
<input type="text" name="name" placeholder="اسمك" required>
<input type="email" name="email" placeholder="بريدك الإلكتروني" required>
<input type="text" name="phone" placeholder="رقم الهاتف">
<button type="submit">تسجيل</button>
</form>
<div id="message"></div>
</div>
<script src="script.js"></script>
</body>
</html>
styles.css الكود
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h1 {
text-align: center;
}
input {
width: 100%;
padding: 10px;
margin: 10px 0;
}
button {
width: 100%;
padding: 10px;
background: #007BFF;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background: #0056b3;
}
#message {
margin-top: 10px;
text-align: center;
color: green;
}
script.js الكود
document.getElementById('registrationForm').onsubmit = function(event) {
event.preventDefault(); // منع الإرسال الافتراضي للنموذج
const formData = new FormData(this);
fetch('register.php', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
document.getElementById('message').innerText = data;
document.getElementById('registrationForm').reset();
})
.catch(error => {
console.error('خطأ:', error);
});
};
register.php الكود
<?php
$servername = "localhost";
$username = "username"; // اسم المستخدم الخاص بك
$password = "password"; // كلمة المرور الخاصة بك
$dbname = "visitor_registration";
// إنشاء الاتصال
$conn = new mysqli($servername, $username, $password, $dbname);
// التحقق من الاتصال
if ($conn->connect_error) {
die("فشل الاتصال: " . $conn->connect_error);
}
// الحصول على البيانات من النموذج
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
// إدخال البيانات في قاعدة البيانات
$sql = "INSERT INTO visitors (name, email, phone) VALUES ('$name', '$email', '$phone')";
if ($conn->query($sql) === TRUE) {
echo "تم التسجيل بنجاح!";
} else {
echo "خطأ: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>
وسلامتكم
