ساخت UI برای فرم پست‌نویسی

حالا که صفحه index را برای پست هایمان ساخته ایم و کاربران می توانند پست های یکدیگر را ببینند، باید مسئله دیگری را نیز حل کنیم. تا این لحظه هیچ فرمی برای نوشتن پست وجود ندارد بلکه خود ما به صورت دستی و در محیط PHPMyAdmin پست ها را اضافه کرده ایم. بنابراین لازم است فرم مخصوص به پست ها را نیز به سورس کد اضافه کنیم. منظور ما از UI نوشتن کدهای HTML است.

از پوشه controller وارد فایل Posts.php شوید. می خواهیم تابع جدیدی به نام add برای اضافه کردن پست ها بنویسیم:

public function add(){
      $data = [
        'title' => '',
        'body' => ''
      ];

      $this->view('posts/add', $data);
    }

اما هنوز view ای به نام add نداریم. بنابراین به پوشه views و سپس پوشه posts رفته و فایل جدیدی به نام add.php بسازید. این فایل حاوی فرم ما و کدهای HTML آن خواهد بود و از آنجایی که محتویات آن بسیار شبیه به محتوایات فرم login است، تمام کدهای login.php را درون آن کپی می کنیم. محتویات فایل login.php به این صورت است:

<?php require APPROOT . '/views/inc/header.php'; ?>
  <div class="row">
    <div class="col-md-6 mx-auto">
      <div class="card card-body bg-light mt-5">
        <?php flash('register_success'); ?>
        <h2>Login</h2>
        <p>Please fill in your credentials to log in</p>
        <form action="<?php echo URLROOT; ?>/users/login" method="post">
          <div class="form-group">
            <label for="email">Email: <sup>*</sup></label>
            <input type="email" name="email" class="form-control form-control-lg <?php echo (!empty($data['email_err'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['email']; ?>">
            <span class="invalid-feedback"><?php echo $data['email_err']; ?></span>
          </div>
          <div class="form-group">
            <label for="password">Password: <sup>*</sup></label>
            <input type="password" name="password" class="form-control form-control-lg <?php echo (!empty($data['password_err'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['password']; ?>">
            <span class="invalid-feedback"><?php echo $data['password_err']; ?></span>
          </div>
          <div class="row">
            <div class="col">
              <input type="submit" value="Login" class="btn btn-success btn-block">
            </div>
            <div class="col">
              <a href="<?php echo URLROOT; ?>/users/register" class="btn btn-light btn-block">No account? Register</a>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
<?php require APPROOT . '/views/inc/footer.php'; ?>

اما باید کمی تغییرش دهیم:

• div پایین صفحه با کلاس row را به همراه تمام محتویات داخلش حذف کنید (دو عدد row داریم. row پایینی که حاوی "input="submit است را حذف کنید).
• row کلاس اول (بالای صفحه) را نیز حذف کنید اما محتویات آن را باقی بگذارید (فقط تگ های div حذف شوند).
• div با کلاس col-md-6 را نیز حذف کنید (بدون حذف محتویات).
• حذف این موارد (دو row و ستون col-md-6) به این دلیل است که نمی خواهیم فرم ما مانند فرم لاگین مربعی شکل باشید بلکه می خواهیم کشیده نمایش داده شود تا کاربر هنگام نوشتن پست خود راحت تر باشد.
• تابع flash را نیز حذف کنید چرا که نیازی به نمایش پیام ورود و ... را نداریم.
• مقدار h2 را به مقدار دلخواه خود تغییر دهید (ما add post می گذاریم، شما می توانید از عباراتی مثل «نوشتن پست جدید» و... استفاده کنید).
• در تگ <p> بعد از h2 نیز توضیحات خود را اضافه کنید (ما Create a post with this form را نوشته ایم).
• attribute ای به نام action برای فرم ها وجود دارد که صفحه پردازشی فرم را مشخص می کند. مقدار آن را روی posts/add تنظیم کنید تا فرم به این صفحه ارسال شود.
• input اول را از email به title تغییر دهید. ملزومات آن را نیز تغییر دهید (مثلا آرایه data باید title و خطای title_err را بگیرد و ...).
• input دوم را به textarea تغییر دهید و ملزومات آن را بر اساس نیاز تغییر دهید (password_err باید به خطای دیگری تغییر پیدا کند و ...).
• یک input سوم از نوع submit ایجاد کنید تا دکمه ثبت پست باشد. کلاس های btn و btn-success مربوط به کتابخانه bootstrap است که باید با آن آشنا باشید.
• حالا بالاتر از div با کلاس card بروید (بالای صفحه) یک لینک ایجاد کنید تا به عنوان دکمه back ما عمل کند. برای دکمه back از یک تگ <i> استفاده کرده ایم و به آن کلاس fa را داده ایم. این کار برای استفاده از کتابخانه Font awesome است. در صورتی که با این کتابخانه آشنایی ندارید به این لینک مراجعه کنید.

کد تکمیل شده ما به این شکل خواهد بود:

<?php require APPROOT . '/views/inc/header.php'; ?>
  <a href="<?php echo URLROOT; ?>/posts" class="btn btn-light"><i class="fa fa-backward"></i> Back</a>
  <div class="card card-body bg-light mt-5">
    <h2>Add Post</h2>
    <p>Create a post with this form</p>
    <form action="<?php echo URLROOT; ?>/posts/add" method="post">
      <div class="form-group">
        <label for="title">Title: <sup>*</sup></label>
        <input type="text" name="title" class="form-control form-control-lg <?php echo (!empty($data['title_err'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['title']; ?>">
        <span class="invalid-feedback"><?php echo $data['title_err']; ?></span>
      </div>
      <div class="form-group">
        <label for="body">Body: <sup>*</sup></label>
        <textarea name="body" class="form-control form-control-lg <?php echo (!empty($data['body_err'])) ? 'is-invalid' : ''; ?>"><?php echo $data['body']; ?></textarea>
        <span class="invalid-feedback"><?php echo $data['body_err']; ?></span>
      </div>
      <input type="submit" class="btn btn-success" value="Submit">
    </form>
  </div>
<?php require APPROOT . '/views/inc/footer.php'; ?>

کار دیگری نیز باید انجام دهیم. اگر دقت کرده باشید زمانی که وارد سایتی مانند فیسبوک می شوید با کلیک روی گزینه home به صفحه ثبت نام یا welcome نمی روید بلکه مستقیما به صفحه پست ها منتقل می شوید. ما هم می خواهیم همین کار را انجام دهیم تا فقط کاربرانی صفحه خوشامدگویی را ببینند که login نشده باشند. بنابراین به فایل Pages.php در پوشه controller بروید و درون تابع index کد زیر را اضافه می کنیم:

if(isLoggedIn()){
        redirect('posts');
      }

بنابراین شکل تابع index به صورت زیر می شود:

public function index(){
      if(isLoggedIn()){
        redirect('posts');
      }

      $data = [
        'title' => 'SharePosts',
        'description' => 'Simple social network built on the TraversyMVC PHP framework'
      ];
     
      $this->view('pages/index', $data);
    }

اگر حالا روی دکمه Home از navbar کلیک کنیم (در صورتی که login باشیم) باید مستقیما به صفحه پست ها منتقل شویم.

دانلود فایل های پروژه تا این قسمت

امیدوارم از این قسمت لذت برده باشید. در قسمت بعدی فرم را تکمیل می کنیم (مواردی مانند insert شدن به پایگاه داده و پاک سازی داده های فرم).