ساخت فرم‌ساز PHP حرفه‌ای تک-فایلی: راهنمای جامع شما

ایجاد فرم‌های پویا با عنوان، فیلدهای متنوع و ذخیره‌سازی در MySQL با استفاده از PHP، MySQLi و jQuery AJAX در یک فایل.

شما درخواست یک فرم‌ساز حرفه‌ای در قالب یک فایل PHP واحد را دارید که امکانات کاملی برای ایجاد و مدیریت فرم‌ها فراهم کند. این فرم‌ساز باید به شما اجازه دهد فرم‌های نامحدود با عنوان و شناسه منحصربه‌فرد بسازید و سپس فیلدهای متنوعی مانند دکمه‌های رادیویی (Radio Button)، چک‌باکس (Checkbox)، فیلد متنی (Text)، ناحیه متنی (Textarea/توصیفی) و آپلود فایل (File) به آن‌ها اضافه کنید. تمام این منطق باید در یک فایل PHP پیاده‌سازی شود و از jQuery برای درخواست‌های AJAX و MySQLi برای تعامل با پایگاه داده MySQL استفاده کند. همچنین، روند کار باید با دریافت عنوان فرم آغاز شده و سپس امکان افزودن فیلدها به صورت تک‌به‌تک فراهم شود و از <input type="submit"> استفاده گردد.

✨ نکات برجسته راهنما

ساختار تک-فایلی: تمام کدهای HTML، CSS، JavaScript (jQuery) و PHP (MySQLi) در یک فایل واحد برای سادگی پیاده‌سازی و مدیریت اولیه قرار گرفته‌اند.
رابط کاربری پویا با AJAX: استفاده از jQuery و AJAX برای ایجاد فرم و افزودن فیلدها بدون نیاز به بارگذاری مجدد صفحه، تجربه‌ی کاربری روان‌تری را فراهم می‌کند.
امنیت پایه با Prepared Statements: استفاده از Prepared Statements در MySQLi برای جلوگیری از حملات رایج SQL Injection در عملیات پایگاه داده.

معماری فرم‌ساز تک-فایلی

ترکیب فرانت‌اند و بک‌اند

برای تحقق درخواست شما، فایل PHP ما به دو بخش اصلی تقسیم می‌شود:

بخش PHP (Backend): این بخش در ابتدای فایل قرار می‌گیرد و مسئولیت‌های زیر را بر عهده دارد:
- اتصال به پایگاه داده MySQL با استفاده از MySQLi.
- پردازش درخواست‌های AJAX ارسال شده از سمت کاربر (مانند ایجاد فرم جدید یا افزودن فیلد).
- اعتبارسنجی داده‌های ورودی (هرچند به صورت پایه).
- اجرای کوئری‌های SQL برای ذخیره اطلاعات در جداول atienew_forms و atienew_fields.
- ارسال پاسخ‌های JSON به درخواست‌های AJAX.
بخش HTML، CSS و JavaScript (Frontend): این بخش بدنه اصلی صفحه وب را تشکیل می‌دهد و شامل موارد زیر است:
- ساختار HTML برای نمایش رابط کاربری (فرم دریافت عنوان، بخش افزودن فیلد، لیست فیلدهای اضافه شده).
- استایل‌دهی اولیه با CSS برای خوانایی بهتر.
- کدهای JavaScript با استفاده از کتابخانه jQuery برای:
  - مدیریت رویدادهای کاربر (کلیک روی دکمه‌ها).
  - ارسال درخواست‌های AJAX به بخش PHP.
  - دریافت پاسخ‌های JSON و به‌روزرسانی پویای صفحه (نمایش/پنهان کردن بخش‌ها، افزودن عناصر به لیست).
  - مدیریت نمایش فیلد گزینه‌ها (Options) برای انواع فیلد رادیو و چک‌باکس.

ساختار پایگاه داده مورد نیاز

قبل از اجرای کد، اطمینان حاصل کنید که سه جدول زیر در پایگاه داده MySQL شما با ساختار مشخص شده وجود دارند:

جدول `atienew_forms`

این جدول اطلاعات کلی هر فرم را نگهداری می‌کند.

id: شناسه یکتای فرم (INT, Primary Key, Auto Increment)
title: عنوان فرم (VARCHAR)
(می‌توانید ستون‌های دیگری مانند created_at اضافه کنید)

جدول `atienew_fields`

این جدول مشخصات هر فیلد متعلق به یک فرم را ذخیره می‌کند.

id: شناسه یکتای فیلد (INT, Primary Key, Auto Increment)
form_id: شناسه فرمی که این فیلد به آن تعلق دارد (INT, Foreign Key referencing atienew_forms.id)
title: عنوان نمایشی فیلد (VARCHAR)
field_type: نوع فیلد ('text', 'textarea', 'radio', 'checkbox', 'file') (VARCHAR)
options: گزینه‌های فیلد (برای 'radio' و 'checkbox'). می‌تواند به صورت JSON یا رشته جدا شده با کاما ذخیره شود. (TEXT, Nullable)
(می‌توانید ستون‌های دیگری مانند is_required, order اضافه کنید)

جدول `atienew_form_data`

این جدول داده‌های ثبت شده توسط کاربران برای هر فیلد از هر فرم را ذخیره می‌کند.

id: شناسه یکتای داده ثبت شده (INT, Primary Key, Auto Increment)
form_id: شناسه فرم مربوطه (INT, Foreign Key referencing atienew_forms.id)
field_id: شناسه فیلد مربوطه (INT, Foreign Key referencing atienew_fields.id)
user_id: شناسه کاربر ثبت کننده (INT, Nullable - اگر سیستم لاگین دارید)
value: مقدار وارد شده توسط کاربر (TEXT یا VARCHAR بسته به نیاز)
created_at: زمان ثبت داده (TIMESTAMP or DATETIME)

کد کامل فرم‌ساز (فایل `form_builder.php`)

کد زیر شامل تمام بخش‌های مورد نیاز برای پیاده‌سازی فرم‌ساز در یک فایل PHP است. لطفاً مقادیر مربوط به اتصال پایگاه داده (your_db_host, your_db_user, your_db_password, your_db_name) را با مقادیر صحیح خود جایگزین کنید.

<?php
// --- بخش PHP (Backend Logic) ---

// اطلاعات اتصال به پایگاه داده (لطفا با مقادیر خود جایگزین کنید)
$db_host = "localhost"; // معمولا localhost
$db_user = "your_db_user"; // نام کاربری پایگاه داده شما
$db_password = "your_db_password"; // رمز عبور پایگاه داده شما
$db_name = "your_db_name"; // نام پایگاه داده شما

// ایجاد اتصال با MySQLi
$mysqli = new mysqli($db_host, $db_user, $db_password, $db_name);

// بررسی وضعیت اتصال
if ($mysqli->connect_error) {
    // در حالت واقعی، بهتر است خطا را لاگ کنید و پیام عمومی‌تری نمایش دهید
    die(json_encode(['success' => false, 'message' => 'خطا در اتصال به پایگاه داده: (' . $mysqli->connect_errno . ') ' . $mysqli->connect_error]));
}

// تنظیم انکودینگ ارتباط به utf8mb4 برای پشتیبانی کامل از فارسی
$mysqli->set_charset("utf8mb4");

// تابع کمکی برای ارسال پاسخ JSON و خروج
function respond($success, $message = '', $data = []) {
    header('Content-Type: application/json; charset=utf-8'); // تنظیم هدر برای JSON با UTF-8
    echo json_encode(['success' => $success, 'message' => $message, 'data' => $data], JSON_UNESCAPED_UNICODE);
    exit;
}

// بررسی اینکه آیا درخواست از نوع POST و دارای پارامتر action است (نشانه درخواست AJAX)
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['action'])) {
    $action = $_POST['action'];

    // عملیات مربوط به ایجاد فرم جدید
    if ($action === 'create_form') {
        $form_title = trim($_POST['form_title'] ?? '');

        if (empty($form_title)) {
            respond(false, 'لطفاً عنوان فرم را وارد کنید.');
        }

        // استفاده از Prepared Statement برای امنیت
        $stmt = $mysqli->prepare("INSERT INTO atienew_forms (title) VALUES (?)");
        if (!$stmt) {
             respond(false, 'خطا در آماده‌سازی کوئری ایجاد فرم: ' . $mysqli->error);
        }

        $stmt->bind_param('s', $form_title);
        if ($stmt->execute()) {
            $new_form_id = $stmt->insert_id; // دریافت ID فرم تازه ایجاد شده
            respond(true, 'فرم با موفقیت ایجاد شد.', ['form_id' => $new_form_id]);
        } else {
            respond(false, 'خطا در اجرای کوئری ایجاد فرم: ' . $stmt->error);
        }
        $stmt->close();
    }
    // عملیات مربوط به افزودن فیلد جدید
    elseif ($action === 'add_field') {
        $form_id = intval($_POST['form_id'] ?? 0);
        $field_title = trim($_POST['field_title'] ?? '');
        $field_type = trim($_POST['field_type'] ?? '');
        $field_options_raw = trim($_POST['field_options'] ?? '');
        $options_json = null; // مقدار پیش‌فرض برای options

        // اعتبارسنجی اولیه
        if (empty($form_id) || empty($field_title) || empty($field_type)) {
            respond(false, 'اطلاعات فیلد ناقص است. لطفاً عنوان و نوع فیلد را مشخص کنید.');
        }

        // پردازش گزینه‌ها برای فیلدهای رادیو و چک‌باکس
        if (in_array($field_type, ['radio', 'checkbox'])) {
            if (empty($field_options_raw)) {
                respond(false, 'برای فیلدهای رادیو و چک‌باکس، وارد کردن گزینه‌ها الزامی است.');
            }
            // تبدیل رشته گزینه‌های جدا شده با کاما به آرایه و سپس به JSON
            $options_array = array_filter(array_map('trim', explode(',', $field_options_raw)));
            if (empty($options_array)) {
                 respond(false, 'فرمت گزینه‌ها صحیح نیست یا گزینه‌ای وارد نشده است.');
            }
            $options_json = json_encode($options_array, JSON_UNESCAPED_UNICODE); // ذخیره به صورت JSON
        }

        // استفاده از Prepared Statement برای امنیت
        $stmt = $mysqli->prepare("INSERT INTO atienew_fields (form_id, title, field_type, options) VALUES (?, ?, ?, ?)");
         if (!$stmt) {
             respond(false, 'خطا در آماده‌سازی کوئری افزودن فیلد: ' . $mysqli->error);
        }

        $stmt->bind_param('isss', $form_id, $field_title, $field_type, $options_json);
        if ($stmt->execute()) {
            respond(true, 'فیلد با موفقیت به فرم اضافه شد.');
        } else {
            respond(false, 'خطا در اجرای کوئری افزودن فیلد: ' . $stmt->error);
        }
        $stmt->close();
    }
     // در اینجا می‌توانید case های دیگری برای نمایش فرم به کاربر نهایی
     // و ذخیره داده‌های ارسالی (atienew_form_data) اضافه کنید.
     // else if ($action === 'load_form_for_user') { ... }
     // else if ($action === 'submit_user_data') { ... }

    else {
        respond(false, 'عملیات درخواستی نامعتبر است.');
    }

    // بستن اتصال پس از اتمام کار با درخواست AJAX
    $mysqli->close();
    exit; // خروج از اسکریپت پس از پردازش درخواست AJAX
}

// اگر درخواست از نوع POST و AJAX نبود، ادامه می‌دهد و HTML را نمایش می‌دهد.
// بستن اتصال در انتهای اسکریپت اگر هنوز باز است (برای نمایش اولیه صفحه)
// این کار ضروری نیست اگر فقط برای AJAX باز شده باشد
// $mysqli->close();
?>

<!DOCTYPE html>
<html lang="fa" dir="rtl"> <!-- تنظیم زبان و جهت برای فارسی -->
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>فرم ساز حرفه‌ای PHP</title>
    <!-- بارگذاری jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <!-- استایل‌های CSS -->
    <style>
        body {
            font-family: 'Tahoma', 'Arial', sans-serif; /* فونت مناسب فارسی */
            direction: rtl;
            background-color: #f4f7f6;
            margin: 0;
            padding: 20px;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: 20px auto;
            background-color: #ffffff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        h2, h3, h4 {
            color: #388278; /* رنگ سازمانی */
            border-bottom: 2px solid #e0e0e0;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        h2 { color: #cc9900; } /* رنگ هدر اصلی */
        h3 { color: #388278; } /* رنگ ساب‌هدر */
        h4 { color: #7FA86E; font-size: 1.1em; border-bottom: 1px dashed #ccc; padding-bottom: 5px; margin-top: 25px; }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #555;
        }
        input[type="text"],
        select,
        textarea {
            width: calc(100% - 22px); /* تطابق عرض با padding و border */
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 1em;
            box-sizing: border-box; /* محاسبه padding و border در عرض کلی */
        }
        input[type="submit"] { /* استایل دکمه submit */
            background-color: #5cb85c;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1.1em;
            transition: background-color 0.3s ease;
        }
        input[type="submit"]:hover {
            background-color: #4cae4c;
        }
        .hidden {
            display: none; /* مخفی کردن عناصر */
        }
        .fields-container {
            margin-top: 30px;
            border: 1px solid #e0e0e0;
            padding: 20px;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        #fields_list {
            list-style-type: none;
            padding: 0;
        }
        #fields_list li {
            background-color: #ffffff;
            border: 1px solid #ddd;
            padding: 10px 15px;
            margin-bottom: 10px;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
         #fields_list li strong {
             color: #388278;
         }
        .message {
            padding: 10px;
            margin-top: 15px;
            border-radius: 4px;
            font-weight: bold;
        }
        .message.success {
            background-color: #dff0d8;
            color: #3c763d;
            border: 1px solid #d6e9c6;
        }
        .message.error {
            background-color: #f2dede;
            color: #a94442;
            border: 1px solid #ebccd1;
        }
    </style>
</head>
<body>

<div class="container">
    <h2>ساخت فرم جدید</h2>

    <!-- مرحله 1: دریافت عنوان فرم -->
    <div id="form-creation-step1">
        <form id="createForm" method="POST" action=""> <!-- action خالی یعنی ارسال به همین صفحه -->
            <input type="hidden" name="action" value="create_form"> <!-- پارامتر action برای PHP -->
            <label for="form_title">عنوان فرم را وارد کنید:</label>
            <input type="text" id="form_title" name="form_title" required>
            <input type="submit" id="create_form_btn" value="ایجاد فرم و رفتن به مرحله بعد">
        </form>
        <div id="form_create_msg" class="message hidden"></div> <!-- نمایش پیام‌های وضعیت -->
    </div>

    <!-- مرحله 2: افزودن فیلدها به فرم (ابتدا مخفی است) -->
    <div id="form-creation-step2" class="hidden">
        <h3>افزودن فیلد به فرم: <span id="form_title_display" style="color: #cc9900;"></span></h3>
        <input type="hidden" id="current_form_id" value="0"> <!-- ذخیره ID فرم جاری -->

        <form id="addFieldsForm" method="POST" action="">
             <input type="hidden" name="action" value="add_field">
             <input type="hidden" id="add_field_form_id" name="form_id" value=""> <!-- ID فرم به صورت داینامیک تنظیم می‌شود -->

             <h4>جزئیات فیلد جدید:</h4>
             <label for="field_title">عنوان فیلد:</label>
             <input type="text" id="field_title" name="field_title" required>

             <label for="field_type">نوع فیلد:</label>
             <select id="field_type" name="field_type" required>
                 <option value="" disabled selected>-- نوع را انتخاب کنید --</option>
                 <option value="text">متن (Text)</option>
                 <option value="textarea">متن طولانی/توصیفی (Textarea)</option>
                 <option value="radio">دکمه رادیویی (Radio Button)</option>
                 <option value="checkbox">چک‌باکس (Checkbox)</option>
                 <option value="file">انتخاب فایل (File Upload)</option>
                 <!-- سایر انواع فیلد مانند email, number, date و ... را می‌توانید اضافه کنید -->
             </select>

             <!-- فیلد گزینه‌ها، فقط برای رادیو و چک‌باکس نمایش داده می‌شود -->
             <div id="options_container" class="hidden">
                 <label for="field_options">گزینه‌ها (با کاما ',' جدا کنید):</label>
                 <input type="text" id="field_options" name="field_options" placeholder="مثال: گزینه ۱, گزینه ۲, گزینه ۳">
             </div>

             <input type="submit" class="btn btn-add" id="add_field_btn" value="افزودن این فیلد به فرم">
        </form>
         <div id="add_field_msg" class="message hidden"></div> <!-- پیام وضعیت افزودن فیلد -->

        <!-- نمایش فیلدهای اضافه شده -->
        <div class="fields-container">
            <h4>فیلدهای فعلی فرم:</h4>
            <ul id="fields_list">
                <!-- فیلدها به صورت پویا اینجا اضافه می‌شوند -->
                <li id="no-fields">هنوز فیلدی به این فرم اضافه نشده است.</li>
            </ul>
        </div>
    </div>

</div> <!-- end .container -->

<!-- بخش JavaScript (jQuery) -->
<script>
$(document).ready(function() {

    // تابع کمکی برای نمایش پیام
    function showMessage(selector, type, text) {
        $(selector).removeClass('hidden success error').addClass(type).text(text).slideDown();
        // مخفی کردن پیام بعد از چند ثانیه
        setTimeout(function() {
            $(selector).slideUp();
        }, 5000);
    }

    // نمایش یا پنهان کردن فیلد گزینه‌ها بر اساس نوع فیلد انتخابی
    $('#field_type').on('change', function() {
        const selectedType = $(this).val();
        if (selectedType === 'radio' || selectedType === 'checkbox') {
            $('#options_container').removeClass('hidden');
            $('#field_options').prop('required', true); // الزامی کردن گزینه‌ها
        } else {
            $('#options_container').addClass('hidden');
            $('#field_options').val(''); // پاک کردن مقدار قبلی
             $('#field_options').prop('required', false);
        }
    });

    // رویداد submit برای فرم ایجاد عنوان (مرحله 1)
    $('#createForm').on('submit', function(e) {
        e.preventDefault(); // جلوگیری از ارسال عادی فرم و رفرش صفحه
        let title = $('#form_title').val().trim();
        $('#form_create_msg').addClass('hidden'); // مخفی کردن پیام قبلی

        if (!title) {
            showMessage('#form_create_msg', 'error', 'لطفاً عنوان فرم را وارد کنید.');
            return;
        }

        // غیرفعال کردن دکمه برای جلوگیری از ارسال مجدد
        $('#create_form_btn').prop('disabled', true).val('در حال ایجاد...');

        $.ajax({
            url: '', // ارسال به همین فایل PHP
            method: 'POST',
            data: $(this).serialize(), // ارسال داده‌های فرم (شامل action=create_form و form_title)
            dataType: 'json', // انتظار پاسخ JSON
            success: function(response) {
                if (response.success) {
                    // موفقیت آمیز بود
                    $('#form-creation-step1').slideUp(); // مخفی کردن مرحله 1
                    $('#form-creation-step2').slideDown(); // نمایش مرحله 2
                    $('#current_form_id').val(response.data.form_id); // ذخیره ID فرم جدید
                    $('#add_field_form_id').val(response.data.form_id); // تنظیم ID فرم در فرم افزودن فیلد
                    $('#form_title_display').text(title); // نمایش عنوان فرم در مرحله 2
                    $('#fields_list').empty().append('<li id="no-fields">هنوز فیلدی به این فرم اضافه نشده است.</li>'); // پاک کردن لیست فیلدها
                } else {
                    // خطا در سمت سرور
                    showMessage('#form_create_msg', 'error', 'خطا: ' + response.message);
                     $('#create_form_btn').prop('disabled', false).val('ایجاد فرم و رفتن به مرحله بعد'); // فعال کردن مجدد دکمه
                }
            },
            error: function(xhr, status, error) {
                // خطای کلی AJAX
                console.error("AJAX Error:", status, error, xhr.responseText);
                showMessage('#form_create_msg', 'error', 'خطای ارتباط با سرور. لطفاً دوباره تلاش کنید.');
                 $('#create_form_btn').prop('disabled', false).val('ایجاد فرم و رفتن به مرحله بعد'); // فعال کردن مجدد دکمه
            }
        });
    });

    // رویداد submit برای فرم افزودن فیلد (مرحله 2)
    $('#addFieldsForm').on('submit', function(e) {
        e.preventDefault();
        $('#add_field_msg').addClass('hidden'); // مخفی کردن پیام قبلی

        let field_title = $('#field_title').val().trim();
        let field_type = $('#field_type').val();
        let field_options = $('#field_options').val().trim();

        // اعتبارسنجی اولیه سمت کلاینت
        if (!field_title || !field_type) {
             showMessage('#add_field_msg', 'error', 'لطفاً عنوان و نوع فیلد را مشخص کنید.');
            return;
        }
        if ((field_type === 'radio' || field_type === 'checkbox') && !field_options) {
            showMessage('#add_field_msg', 'error', 'برای فیلدهای رادیو و چک‌باکس، وارد کردن گزینه‌ها الزامی است.');
            return;
        }

         // غیرفعال کردن دکمه
        $('#add_field_btn').prop('disabled', true).val('در حال افزودن...');


        $.ajax({
            url: '', // ارسال به همین فایل PHP
            method: 'POST',
            data: $(this).serialize(), // ارسال داده‌های فرم (action=add_field, form_id, title, type, options)
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    showMessage('#add_field_msg', 'success', 'فیلد با موفقیت اضافه شد.');

                    // حذف پیام "هنوز فیلدی اضافه نشده" اگر وجود داشت
                    $('#no-fields').remove();

                    // افزودن فیلد به لیست نمایش
                    let optionsDisplay = '';
                    if (field_type === 'radio' || field_type === 'checkbox') {
                        optionsDisplay = <code> <small>(گزینه‌ها: ${field_options})</small>;
                    }
                    let fieldTypeText = $('#field_type option:selected').text(); // گرفتن متن فارسی نوع فیلد
                    $('#fields_list').append(<li><span><strong>${field_title}</strong> - ${fieldTypeText}${optionsDisplay}</span></li>);

                    // پاک کردن فرم افزودن فیلد برای ورود فیلد بعدی
                    $('#field_title').val('');
                    $('#field_type').val('');
                    $('#field_options').val('');
                    $('#options_container').addClass('hidden');
                     $('#field_type').trigger('change'); // اطمینان از پنهان شدن بخش گزینه‌ها


                } else {
                    showMessage('#add_field_msg', 'error', 'خطا در افزودن فیلد: ' + response.message);
                }
                 // فعال کردن مجدد دکمه
                 $('#add_field_btn').prop('disabled', false).val('افزودن این فیلد به فرم');
            },
            error: function(xhr, status, error) {
                 console.error("AJAX Error:", status, error, xhr.responseText);
                showMessage('#add_field_msg', 'error', 'خطای ارتباط با سرور هنگام افزودن فیلد.');
                 // فعال کردن مجدد دکمه
                 $('#add_field_btn').prop('disabled', false).val('افزودن این فیلد به فرم');
            }
        });
    });

});
</script>

</body>
</html>

نحوه استفاده و توضیحات کد

ذخیره فایل: کد بالا را در یک فایل با نام form_builder.php (یا هر نام دلخواه دیگر با پسوند .php) در وب سرور خود (مانند Apache یا Nginx با PHP فعال) ذخیره کنید.
تنظیم پایگاه داده: مقادیر $db_host, $db_user, $db_password, و $db_name را در ابتدای بخش PHP با اطلاعات صحیح پایگاه داده خود جایگزین کنید. اطمینان حاصل کنید که جداول atienew_forms و atienew_fields با ساختار مورد نیاز وجود دارند.
اجرا: فایل را از طریق مرورگر وب خود باز کنید (مثلاً http://localhost/form_builder.php).
ایجاد فرم: در مرحله اول، عنوان فرم مورد نظر خود را وارد کرده و روی دکمه "ایجاد فرم و رفتن به مرحله بعد" کلیک کنید.
افزودن فیلدها: پس از ایجاد موفقیت‌آمیز فرم، به مرحله دوم هدایت می‌شوید. در این مرحله، می‌توانید عنوان فیلد، نوع آن (متن، رادیو، چک‌باکس و...) را انتخاب کنید. اگر نوع فیلد رادیو یا چک‌باکس باشد، فیلد وارد کردن گزینه‌ها (جدا شده با کاما) ظاهر می‌شود. پس از تکمیل اطلاعات، روی دکمه "افزودن این فیلد به فرم" کلیک کنید.
مشاهده فیلدها: هر فیلدی که با موفقیت اضافه شود، در لیست "فیلدهای فعلی فرم" در پایین صفحه نمایش داده می‌شود.
ادامه افزودن: می‌توانید به تعداد دلخواه فیلد به فرم خود اضافه کنید.

مقایسه رویکردها: فرم‌ساز سفارشی در مقابل کتابخانه‌های آماده

ساخت فرم‌ساز سفارشی مانند این نمونه، کنترل کاملی بر روی فرآیند و ویژگی‌ها به شما می‌دهد، اما نیازمند زمان توسعه و نگهداری است. در مقابل، استفاده از کتابخانه‌ها یا پلتفرم‌های فرم‌ساز آماده می‌تواند سریع‌تر باشد اما ممکن است محدودیت‌هایی در سفارشی‌سازی یا هزینه داشته باشد. نمودار راداری زیر مقایسه‌ای کلی بین این دو رویکرد ارائه می‌دهد:

نمودار مقایسه‌ای بین ساخت فرم‌ساز سفارشی و استفاده از ابزارهای آماده. مقادیر تخمینی هستند و بر اساس پیچیدگی پروژه می‌توانند متفاوت باشند.

نقشه ذهنی جریان کار فرم‌ساز

این نقشه ذهنی، جریان داده و تعامل بین اجزای مختلف فرم‌ساز تک-فایلی ما را به تصویر می‌کشد:

mindmap root["فرم ساز PHP تک فایلی"] id1["رابط کاربری (Frontend)"] id1_1["HTML (ساختار صفحه)"] id1_1_1["فرم ایجاد عنوان"] id1_1_2["فرم افزودن فیلد"] id1_1_3["لیست نمایش فیلدها"] id1_2["CSS (استایل دهی)"] id1_3["JavaScript (jQuery)"] id1_3_1["مدیریت رویدادها (کلیک)"] id1_3_2["ارسال درخواست AJAX"] id1_3_3["به روزرسانی DOM (پویا)"] id2["بخش سرور (Backend - همان فایل PHP)"] id2_1["پردازش درخواست های AJAX"] id2_1_1["تشخیص 'action' (ایجاد فرم، افزودن فیلد)"] id2_2["تعامل با پایگاه داده (MySQLi)"] id2_2_1["اتصال به دیتابیس"] id2_2_2["اجرای کوئری ها (INSERT)"] id2_2_3["Prepared Statements (امنیت)"] id2_3["ارسال پاسخ JSON"] id3["پایگاه داده (MySQL)"] id3_1["جدول atienew_forms (ذخیره فرم ها)"] id3_2["جدول atienew_fields (ذخیره فیلدها)"] id3_3["جدول atienew_form_data (ذخیره داده های ورودی - *در این کد پیاده نشده*)"]

نقشه ذهنی نشان‌دهنده معماری و جریان داده در فرم‌ساز تک-فایلی.

جزئیات جداول پایگاه داده

درک دقیق ساختار جداول پایگاه داده برای کار با فرم‌ساز ضروری است. جدول زیر جزئیات ستون‌ها و کاربرد هر جدول را نشان می‌دهد:

نام جدول	نام ستون	نوع داده	توضیحات
atienew_forms	id	INT (AUTO_INCREMENT, PRIMARY KEY)	شناسه یکتای فرم
atienew_forms	title	VARCHAR(255)	عنوان فرم
atienew_fields	id	INT (AUTO_INCREMENT, PRIMARY KEY)	شناسه یکتای فیلد
	form_id	INT (FOREIGN KEY -> atienew_forms.id)	شناسه فرمی که فیلد به آن تعلق دارد
	title	VARCHAR(255)	عنوان نمایشی فیلد
	field_type	VARCHAR(50)	نوع فیلد (text, textarea, radio, checkbox, file, ...)
	options	TEXT (Nullable)	گزینه‌های فیلد برای radio/checkbox (ذخیره به صورت JSON یا رشته جدا شده با کاما)
atienew_form_data	id	INT (AUTO_INCREMENT, PRIMARY KEY)	شناسه یکتای داده ثبت شده
	form_id	INT (FOREIGN KEY -> atienew_forms.id)	شناسه فرم مربوطه
	field_id	INT (FOREIGN KEY -> atienew_fields.id)	شناسه فیلد مربوطه
	user_id	INT (Nullable)	شناسه کاربر ثبت کننده (در صورت وجود سیستم کاربری)
	value	TEXT	مقدار وارد شده توسط کاربر برای فیلد
	created_at	TIMESTAMP / DATETIME	زمان ثبت داده

جدول ساختار پایگاه داده مورد استفاده در فرم‌ساز.

نمونه‌ای از رابط کاربری فرم‌ساز

تصویر زیر نمونه‌ای از ظاهر یک فرم‌ساز پویا را نشان می‌دهد که کاربر می‌تواند فیلدهای مختلف را به فرم خود اضافه کند. رابط کاربری پیاده‌سازی شده در کد بالا، عملکرد مشابهی را ارائه می‌دهد.

تصویر نمونه از یک رابط کاربری برای ساخت فرم‌های پویا. (منبع: Simfatic Forms)

پرسش‌های متداول (FAQ)

چگونه می‌توانم فرم ساخته شده را به کاربران نمایش دهم تا آن را پر کنند؟

کد ارائه شده فقط بخش ساخت فرم (Form Builder) را پیاده‌سازی می‌کند. برای نمایش فرم به کاربران نهایی، شما باید یک بخش PHP و JavaScript جداگانه (یا یک تابع/action جدید در همین فایل) ایجاد کنید که:

شناسه فرم (form_id) را دریافت کند (مثلاً از طریق URL یا یک انتخابگر).
با استفاده از form_id، اطلاعات فرم (از atienew_forms) و تمام فیلدهای آن (از atienew_fields) را از پایگاه داده بخواند.
به صورت پویا، با استفاده از PHP یا JavaScript، عناصر HTML فرم (input, textarea, select, radio, checkbox, file) را بر اساس اطلاعات خوانده شده تولید کند.
یک دکمه <input type="submit"> برای ارسال فرم قرار دهد.
منطق PHP و AJAX دیگری برای دریافت داده‌های ارسالی کاربر و ذخیره آن‌ها در جدول atienew_form_data بنویسید (مشابه actionهای create_form و add_field).

چگونه می‌توان امنیت این فرم‌ساز را افزایش داد؟

امنیت در برنامه‌های وب بسیار مهم است. کد نمونه از Prepared Statements برای جلوگیری از SQL Injection استفاده می‌کند که قدم خوبی است. اقدامات امنیتی دیگری که باید در نظر بگیرید:

اعتبارسنجی ورودی‌ها (Input Validation): هم در سمت کلاینت (JavaScript) و هم به طور کامل در سمت سرور (PHP)، تمام داده‌های دریافتی از کاربر (عنوان فرم، عنوان فیلد، نوع فیلد، گزینه‌ها و ...) را اعتبارسنجی کنید تا مطمئن شوید مطابق انتظار هستند (مثلاً طول مجاز، نوع داده، کاراکترهای مجاز).
جلوگیری از XSS (Cross-Site Scripting): هنگام نمایش داده‌های ورودی کاربر (مانند عنوان فرم یا فیلد در لیست)، از توابعی مانند `htmlspecialchars()` در PHP استفاده کنید تا از اجرای کدهای مخرب در مرورگر کاربران جلوگیری شود.
محافظت در برابر CSRF (Cross-Site Request Forgery): برای فرم‌هایی که عملیات حساس انجام می‌دهند (مانند ایجاد یا حذف فرم/فیلد)، از توکن‌های CSRF استفاده کنید.
مدیریت آپلود فایل: اگر قابلیت آپلود فایل را پیاده‌سازی می‌کنید، حتماً محدودیت‌هایی برای نوع فایل، اندازه فایل اعمال کنید و فایل‌ها را در مکانی امن و خارج از دسترس مستقیم وب ذخیره کنید. نام فایل‌ها را نیز ضدعفونی کنید.
کنترل دسترسی: اگر این فرم‌ساز بخشی از یک سیستم بزرگتر است، مطمئن شوید که فقط کاربران مجاز به ساخت و مدیریت فرم‌ها دسترسی دارند.

آیا می‌توانم انواع فیلد بیشتری اضافه کنم؟

بله، به راحتی می‌توانید انواع فیلد بیشتری مانند ایمیل، شماره تلفن، تاریخ، انتخابگر رنگ، رتبه بندی ستاره‌ای و غیره را اضافه کنید.

برای این کار:

مقادیر جدید را به لیست کشویی `<select id="field_type">` در بخش HTML اضافه کنید (مثلاً `ایمیل`).
در بخش PHP (داخل `action === 'add_field'`)، نیاز نیست تغییر خاصی بدهید مگر اینکه نوع فیلد جدید نیاز به پردازش خاصی مانند `options` داشته باشد.
مهم‌ترین بخش، هنگام نمایش فرم به کاربر نهایی (که در کد بالا پیاده‌سازی نشده) است. در آنجا باید بر اساس `field_type` خوانده شده از دیتابیس، تگ HTML مناسب را ایجاد کنید (مثلاً برای `email` از `<input type="email">` استفاده کنید).
ممکن است نیاز به اعتبارسنجی خاص برای انواع فیلد جدید در سمت سرور و کلاینت داشته باشید (مثلاً بررسی فرمت ایمیل).

چرا همه چیز در یک فایل PHP قرار گرفته؟ آیا این روش خوبی است؟

قرار دادن تمام کدها (PHP، HTML، CSS، JS) در یک فایل واحد، طبق درخواست شما انجام شده و می‌تواند برای پروژه‌های کوچک، نمونه‌های اولیه یا اهداف آموزشی مفید باشد، زیرا مدیریت فایل‌ها ساده‌تر است.

اما برای پروژه‌های بزرگتر و حرفه‌ای، این روش توصیه نمی‌شود. دلایل اصلی عبارتند از:

خوانایی و نگهداری سخت‌تر: ترکیب منطق‌های مختلف در یک فایل، خواندن، درک و به‌روزرسانی کد را دشوار می‌کند.
تفکیک مسئولیت‌ها (Separation of Concerns): اصول مهندسی نرم‌افزار بر جداسازی بخش‌های مختلف برنامه (مانند رابط کاربری، منطق تجاری، دسترسی به داده) تأکید دارند. این کار توسعه تیمی، تست و نگهداری را آسان‌تر می‌کند.
استفاده مجدد از کد (Code Reusability): در ساختار تک-فایلی، استفاده مجدد از بخش‌های کد در قسمت‌های دیگر برنامه سخت‌تر است.
مقیاس‌پذیری (Scalability): با بزرگ شدن پروژه، مدیریت یک فایل عظیم بسیار چالش‌برانگیز می‌شود.

در عمل، معمولاً از ساختارهای MVC (Model-View-Controller) یا معماری‌های مشابه استفاده می‌شود که کدها را به فایل‌ها و پوشه‌های مجزا بر اساس وظایفشان تقسیم می‌کنند.