ساخت فرم با انتخاب شماره تلفن و پردازش با PHP

در این مقاله، به بررسی نحوه ساخت یک فرم HTML برای دریافت شماره تلفن و پردازش آن با استفاده از زبان PHP می‌پردازیم. هدف، ایجاد یک فرم کاربردی و امن است که بتواند شماره تلفن‌های ورودی را اعتبارسنجی کرده و در صورت لزوم، آن‌ها را در پایگاه داده ذخیره کند. این مقاله شامل طراحی فرم HTML، اعتبارسنجی سمت کاربر (Client-Side Validation) با استفاده از JavaScript، پردازش سمت سرور (Server-Side Processing) با PHP و ملاحظات امنیتی است.

بخش اول: طراحی فرم HTML

فرم HTML پایه برای دریافت شماره تلفن به شکل زیر است:

<form action="process_phone_number.php" method="post">
  <label for="phone_number">شماره تلفن:</label>
  <input type="tel" id="phone_number" name="phone_number" pattern="[0-9]{11}" required>
  <button type="submit">ارسال</button>
</form>

در این فرم:

• `action=”process_phone_number.php”`: مشخص می‌کند که فرم پس از ارسال، به فایل `process_phone_number.php` ارسال شود.
• `method=”post”`: مشخص می‌کند که داده‌ها با استفاده از متد POST ارسال شوند.
• `<label for=”phone_number”>`: یک برچسب برای فیلد شماره تلفن ایجاد می‌کند.
• `<input type=”tel” id=”phone_number” name=”phone_number”>`: یک فیلد ورودی از نوع تلفن ایجاد می‌کند.
• `type=”tel”`: نوع فیلد را به عنوان تلفن مشخص می‌کند. این کار باعث می‌شود که در دستگاه‌های موبایل، صفحه کلید مناسب برای وارد کردن شماره تلفن نمایش داده شود.
• `id=”phone_number”`: یک شناسه یکتا برای فیلد تعیین می‌کند.
• `name=”phone_number”`: نام فیلد را تعیین می‌کند. این نام برای دسترسی به داده‌های وارد شده در PHP استفاده می‌شود.
• `pattern=”[0-9]{11}”`: یک الگوی regex برای اعتبارسنجی شماره تلفن تعریف می‌کند. این الگو اطمینان حاصل می‌کند که فقط 11 رقم وارد شده باشد.
• `required`: مشخص می‌کند که فیلد شماره تلفن اجباری است و کاربر باید آن را پر کند.
• `<button type=”submit”>`: یک دکمه ارسال ایجاد می‌کند.

بخش دوم: اعتبارسنجی سمت کاربر (Client-Side Validation) با JavaScript

اعتبارسنجی سمت کاربر به منظور بهبود تجربه کاربری و کاهش بار سرور انجام می‌شود. با استفاده از JavaScript می‌توان اعتبارسنجی‌های اولیه را قبل از ارسال فرم به سرور انجام داد. به عنوان مثال، می‌توان بررسی کرد که آیا شماره تلفن وارد شده، فرمت صحیح را دارد یا خیر.

<script>
  const form = document.querySelector('form');
  const phoneNumberInput = document.getElementById('phone_number');

  form.addEventListener('submit', function(event) {
    if (!phoneNumberInput.value.match(/^09d{9}$/)) {
      event.preventDefault();
      alert('شماره تلفن وارد شده معتبر نیست. لطفا شماره تلفن خود را به فرمت 09XXXXXXXXX وارد کنید.');
    }
  });
</script>

در این کد JavaScript:

• `document.querySelector(‘form’)`: فرم را انتخاب می‌کند.
• `document.getElementById(‘phone_number’)`: فیلد شماره تلفن را انتخاب می‌کند.
• `form.addEventListener(‘submit’, function(event) { … })`: یک شنونده رویداد به فرم اضافه می‌کند که هنگام ارسال فرم اجرا می‌شود.
• `phoneNumberInput.value.match(/^09d{9}$/)`: بررسی می‌کند که آیا شماره تلفن وارد شده با الگوی `^09d{9}$` مطابقت دارد یا خیر. این الگو اطمینان حاصل می‌کند که شماره تلفن با `09` شروع شده و 9 رقم دیگر داشته باشد.
• `event.preventDefault()`: از ارسال فرم جلوگیری می‌کند اگر شماره تلفن معتبر نباشد.
• `alert(…)`: یک پیام هشدار به کاربر نمایش می‌دهد.

بخش سوم: پردازش سمت سرور (Server-Side Processing) با PHP

فایل `process_phone_number.php` مسئول دریافت داده‌های ارسالی از فرم، اعتبارسنجی مجدد داده‌ها و ذخیره آن‌ها در پایگاه داده است. در اینجا یک مثال ساده از نحوه پردازش شماره تلفن با PHP آورده شده است:

<?php
  if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $phone_number = $_POST["phone_number"];

    // اعتبارسنجی مجدد شماره تلفن
    if (preg_match("/^09d{9}$/", $phone_number)) {
      // اتصال به پایگاه داده (مثال)
      $servername = "localhost";
      $username = "username";
      $password = "password";
      $dbname = "database_name";

      $conn = new mysqli($servername, $username, $password, $dbname);

      if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
      }

      // ذخیره شماره تلفن در پایگاه داده (مثال)
      $sql = "INSERT INTO phone_numbers (phone_number) VALUES ('$phone_number')";

      if ($conn->query($sql) === TRUE) {
        echo "شماره تلفن با موفقیت ذخیره شد.";
      } else {
        echo "Error: " . $sql . "
" . $conn->error;
      }

      $conn->close();
    } else {
      echo "شماره تلفن وارد شده معتبر نیست.";
    }
  } else {
    echo "دسترسی غیرمجاز.";
  }
?>

در این کد PHP:

• `$_SERVER[“REQUEST_METHOD”] == “POST”`: بررسی می‌کند که آیا فرم با متد POST ارسال شده است یا خیر.
• `$_POST[“phone_number”]`: داده‌های ارسالی از فیلد `phone_number` را دریافت می‌کند.
• `preg_match(“/^09d{9}$/”, $phone_number)`: اعتبارسنجی مجدد شماره تلفن را انجام می‌دهد.
• بخش مربوط به اتصال به پایگاه داده و ذخیره شماره تلفن، یک مثال ساده است و باید با توجه به ساختار پایگاه داده و نیازهای پروژه، تغییر کند.

بخش چهارم: ملاحظات امنیتی

امنیت فرم و داده‌های ارسالی از اهمیت بالایی برخوردار است. در اینجا چند نکته امنیتی که باید در نظر گرفته شوند، آورده شده است:

• اعتبارسنجی سمت سرور: همیشه داده‌های ورودی را در سمت سرور اعتبارسنجی کنید. اعتبارسنجی سمت کاربر فقط برای بهبود تجربه کاربری است و نباید به آن تکیه کرد.
• جلوگیری از SQL Injection: از Prepared Statements یا Escaping برای جلوگیری از حملات SQL Injection استفاده کنید.
• محافظت در برابر XSS: داده‌های ورودی را قبل از نمایش در خروجی، Sanitizing کنید تا از حملات Cross-Site Scripting (XSS) جلوگیری شود.
• استفاده از HTTPS: از پروتکل HTTPS برای رمزنگاری ارتباط بین کاربر و سرور استفاده کنید.
• محدود کردن دسترسی: دسترسی به فایل‌های PHP و پایگاه داده را محدود کنید.

بخش پنجم: بهبود رابط کاربری

برای بهبود رابط کاربری فرم، می‌توان از موارد زیر استفاده کرد:

• استفاده از Placeholder: از ویژگی `placeholder` در فیلد شماره تلفن برای نمایش فرمت مورد انتظار استفاده کنید.
• نمایش پیام‌های خطا: پیام‌های خطا را به صورت واضح و قابل فهم به کاربر نمایش دهید.
• استفاده از ماسک ورودی: از ماسک ورودی (Input Mask) برای کمک به کاربر در وارد کردن شماره تلفن به فرمت صحیح استفاده کنید.
• طراحی واکنش‌گرا: فرم را به گونه‌ای طراحی کنید که در دستگاه‌های مختلف (موبایل، تبلت، دسکتاپ) به درستی نمایش داده شود.

با رعایت این نکات، می‌توان یک فرم دریافت شماره تلفن کاربردی، امن و با رابط کاربری مناسب ایجاد کرد.