برنامه نویسی

PHP برای مبتدیان: ساختن اولین برنامه وب مبتنی بر پایگاه داده

اگر به تازگی با PHP شروع کرده اید، یکی از هیجان انگیزترین پروژه هایی که می توانید انجام دهید، ساختن یک برنامه وب مبتنی بر پایگاه داده است. این یک راه عالی برای درک نحوه عملکرد backend، تعامل با پایگاه داده و ارائه محتوای پویا به کاربران است.

برنامه نویسی عزیزم

در این آموزش، یک ساده می سازیم برنامه لیست کارها با استفاده از PHP و MySQL در پایان، یک برنامه کاربردی خواهید داشت که کاربران می توانند وظایف را اضافه، مشاهده و حذف کنند.


پیش نیازها

قبل از شیرجه رفتن، مطمئن شوید که:

  • PHP (نسخه 7.4 یا بالاتر)
  • MySQL (یا MariaDB)
  • یک سرور محلی مانند XAMPP یا Laragon
  • یک ویرایشگر کد مانند VS Code

مرحله 1: محیط خود را تنظیم کنید

  1. سرور محلی خود (به عنوان مثال، XAMPP) را نصب کنید.
  2. سرویس های Apache و MySQL را راه اندازی کنید.
  3. به فهرست اصلی وب خود بروید (htdocs برای XAMPP) و یک پوشه جدید به نام ایجاد کنید todo_app.

مرحله 2: ایجاد پایگاه داده

  1. phpMyAdmin را باز کنید.
  2. یک پایگاه داده جدید به نام ایجاد کنید todo_app.
  3. پرس و جوی SQL زیر را برای ایجاد a اجرا کنید tasks جدول:
sql
CREATE TABLE tasks (
    id INT AUTO_INCREMENT PRIMARY KEY,
    task VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید


مرحله 3: HTML Frontend را بسازید

ایجاد کنید index.php فایل در todo_app پوشه و HTML زیر را اضافه کنید:




    
    
    To-Do List App
    


    
    query("SELECT * FROM tasks ORDER BY created_at DESC"); while ($row = $result->fetch_assoc()) { echo "
  • " . $row['task'] . " Delete
  • "; } $conn->close(); ?>
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید


مرحله 4: اضافه کردن وظایف را مدیریت کنید

یک فایل جدید به نام ایجاد کنید add_task.php و کد زیر را اضافه کنید:

prepare("INSERT INTO tasks (task) VALUES (?)");
    $stmt->bind_param("s", $task);
    $stmt->execute();

    $stmt->close();
    $conn->close();

    // Redirect back to the main page
    header("Location: index.php");
    exit();
}
?>
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید


مرحله 5: وظایف حذف را مدیریت کنید

یک فایل جدید به نام ایجاد کنید delete_task.php:

prepare("DELETE FROM tasks WHERE id = ?");
    $stmt->bind_param("i", $id);
    $stmt->execute();

    $stmt->close();
    $conn->close();

    // Redirect back to the main page
    header("Location: index.php");
    exit();
}
?>
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید


مرحله 6: اضافه کردن مقداری CSS (اختیاری)

ایجاد یک styles.css برای استایل دادن به برنامه خود، در همان پوشه فایل کنید:

body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    color: #333;
    margin: 0;
    padding: 0;
}

.container {
    width: 50%;
    margin: 50px auto;
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

h1 {
    text-align: center;
}

form {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

form input {
    flex: 1;
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

form button {
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

form button:hover {
    background-color: #218838;
}

ul {
    list-style-type: none;
    padding: 0;
}

ul li {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

ul li a {
    color: #dc3545;
    text-decoration: none;
}
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید


مرحله 7: برنامه خود را اجرا کنید

  1. مرورگر خود را باز کنید و به http://localhost/todo_app/index.php.
  2. برخی از کارها را اضافه کنید، آنها را مشاهده کنید و آنها را حذف کنید. 🎉

تبریک می گویم! شما به تازگی اولین برنامه وب مبتنی بر پایگاه داده خود را با PHP و MySQL ساخته اید. این پروژه ساده پایه و اساس ایجاد برنامه های کاربردی پیچیده تر را می گذارد. افزودن ویژگی‌هایی مانند اولویت‌بندی کار یا احراز هویت کاربر را آزمایش کنید.

اگر از این آموزش لذت بردید، نظر خود را بگذارید یا آن را با توسعه دهندگان همکار خود به اشتراک بگذارید. کد نویسی مبارک! 🚀

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا