طراحی UI اولیه با بوت‌استرپ

در قسمت قبلی فریم ورک را تمیز کردیم و پایگاه داده مربوط به برنامه SharePosts را هم راه اندازی کردیم بنابراین در حال حاضر به پایگاه داده متصل هستیم. از آنجایی که تمرکز این دوره روی طراحی UI و به طور کل front-end نیست، نمی خواهیم UI پیچیده و حرفه ای داشته باشیم بلکه با کمک bootstrap ظاهر مناسب و ساده ای برای برنامه خود تعریف می کنیم.

برای شروع طراحی UI با بوت استرپ به وب سایت bootstrap.com رفته و روی گزینه get started کلیک می کنیم تا CDN های مربوطه را از آن بگیریم؛ یکی از CND ها حاوی فایل CSS است که در تگ link قرار داده شده است و دیگری (که شامل 2 وابستگی است) مربوط به عملیات های جاوا اسکریپت در بوت استرپ است. ابتدا فایل header.php را از پوشه inc باز کرده و CDN مربوط به CSS را بالاتر از فایل styles شخصی خودتان بارگذاری کنید. ما می خواهیم از کتابخانه FontAwesome نیز استفاده کنیم بنابراین با جست و جویی ساده در گوگل CDN مربوط به آن را نیز پیدا می کنیم و پس از CDN بوت استرپ قرار می دهیم. بنابراین تا این لحظه محتوای ما بدین شکل است:

<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <link rel="stylesheet" href="<?php echo URLROOT; ?>/css/style.css">
  <title><?php echo SITENAME; ?></title>

همچنین تمام view های ما باید درون یک container باشند چرا که بوت استرپ یک کلاس container می گیرد که همه چیز را به وسط می آورد تا بهتر دیده شود. بنابراین یک div با کلاس container ایجاد می کنیم:

<div class="container">

اما تگ پایانی div را در footer.php قرار می دهیم تا تمام view درون این container قرار بگیرد. یادتان باشد که تمام فایل های header و footer و ... در یک فایل جمع می شوند و سپس این فایل است که به کاربر داده خواهد شد. پس وارد فایل footer.php شده و یک تگ <div/> به اول آن اضافه کنید. حالا دوباره به صفحه CND های بوت استرپ برگردید و موارد مربوط به جاوا اسکریپت را نیز پس از تگ <div/> اضافه کنید. محتوای فایل footer.php باید به این شکل در آمده باشد:

  </div>
  
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>

برای تست کردن کار به آدرس localhost/shareposts بروید. باید متوجه تغییر استایل (مثلا تغییر فونت و جابجایی title) شوید.

اگر بخواهید می توانید بوت استرپ را از همان ابتدا به فریم ورک اضافه کنید اما از آنجایی که بسیاری از افراد از سنگین بودن بوت استرپ می نالند بهتر است مواد خام را به آن ها بدهیم تا خودشان تصمیم بگیرند.

در پوشه inc از پوشه views یک فایل جدید به نام navbar.php ایجاد کنید. حالا به وب سایت bootstrap.com برگشته و به قسمت examples بروید. از میان مثال ها یک مثال را که با سلیقه شما جور در میاید انتخاب کرده و سورس کد آن را با کلیدهای Ctrl + U باز کنید. سپس منوی navigation آن را برای navbar.php کپی کنید (محتویات درون تگ nav). ما از قالب starter template بوت استرپ استفاده کرده ایم:

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

از کلاس های تگ nav، کلاس navbar-expand-md را به کلاس navbar-expand-lg (مخفف large) تغییر داده و کلاس fixed-top را نیز حذف کنید (کلاس fixed-top منو را به بالای صفحه میچسباند). در آخر نیز کلاس mb-3 را به عنصر nav اضافه کنید (مخفف margin-bottom از نوع 3) تا بقیه عناصر به navbar نچسبند.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3">

حالا در تگ لینک زیر تگ nav باید نام سایت خود را نمایش دهیم و مقدار آن را روی صفحه اصلی (URLROOT) تنظیم کنیم:

<a class="navbar-brand" href="<?php echo URLROOT; ?>"><?php echo SITENAME; ?></a>

در لینک مربوط به home تگ span را نیز حذف کرده و مقدار لینک را روی URLROOT تنظیم کنید:

<a class="nav-link" href="<?php echo URLROOT; ?>">Home</a>

آیتم بعدی که یک لینک است را برای صفحه about (درباره ما) می خواهیم بنابراین متن آن را از link به about تغییر داده و href آن را برای صفحه about قرار دهیم (بعدا آن را خواهیم ساخت):

<a class="nav-link" href="<?php echo URLROOT; ?>/pages/about">About</a>

در آخر دو تگ <li> بعدی (به همراه dropdown) و تگ form را حذف می کنیم.

حالا یک بار تمامی <ul> را (که کلاس navbar-nav و mr-auto دارد) کپی کرده و همانجا paste کنید. البته کلاس mr-auto را به ml-auto تغییر دهید تا این قسمت را به سمت راست ببریم. قرار است این قسمت مربوط به ثبت نام و ورود باشد بنابراین به جای home باید بنویسیم Register:

<a class="nav-link" href="<?php echo URLROOT; ?>/users/register">Register</a>

ما هنوز این صفحات را نساختیم اما نگران نباشد بعدا این کار را خواهیم کرد. لینک بعدی نیز برای login است:

<a class="nav-link" href="<?php echo URLROOT; ?>/users/login">Login</a>

محتویات کامل فایل navbar.php تا این لحظه بدین شکل است:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3">
      <a class="navbar-brand" href="<?php echo URLROOT; ?>"><?php echo SITENAME; ?></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="<?php echo URLROOT; ?>">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="<?php echo URLROOT; ?>/pages/about">About</a>
          </li>
        </ul>
        
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="<?php echo URLROOT; ?>/users/register">Register</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="<?php echo URLROOT; ?>/users/login">Login</a>
          </li>
        </ul>
      </div>
    </nav>

برای اینکه navbar در برنامه ما نمایش داده شود باید آن را در header.php بارگذاری کنیم بنابراین به این فایل رفته و بالاتر از تگ container می گوییم:

<body>
  <?php require APPROOT . '/views/inc/navbar.php'; ?>
  <div class="container">
  

اگر الان به صفحه about بروید (آدرس localhost/shareposts/pages/about) دیگر navbar را نمی بینید. آیا می دانید چرا؟ به دلیل اینکه فایل htaccess. را ویرایش نکرده ایم! خط مربوط به RewriteBase را باید به شکل زیر تغییر دهید:

RewriteBase /shareposts/public

از پوشه views>pages فایل index.php را باز کرده و تگ h1 را درون ساختار زیر قرار دهید:

<div class="jumbotron jumbotron-flud text-center">
    <div class="container">
    <h1 class="display-3"><?php echo $data['title']; ?></h1>
    <p class="lead"><?php echo $data['description']; ?></p>
    </div>
  </div>

description قرار است توضیحات سایت ما را داشته باشد بنابراین باید آن را به Pages.php اضافه کنیم:

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

عبارت Simple social network built on the TraversyMVC PHP framework فقط توضیحات سایت ما است و شما می توانید طبق سلیقه خودتان آن را تغییر دهید.

دوباره به فایل Pages.php رفته و برای متد about یک Description اضافه می کنیم:

public function about(){
      $data = [
        'title' => 'About Us',
        'description' => 'App to share posts with other users'
      ];

      $this->view('pages/about', $data);
    }

حالا به صفحه about.php در پوشه pages بروید و آن را به شکل زیر ویرایش کنید:

<?php require APPROOT . '/views/inc/header.php'; ?>
  <h1><?php echo $data['title']; ?></h1>
  <p><?php echo $data['description']; ?></p>
  <p>Version: <strong><?php echo APPVERSION; ?></strong></p>
<?php require APPROOT . '/views/inc/footer.php'; ?>

description و title که در صفحه Pages.php نوشته شدند. APPVERSION نیز قرار است نسخه برنامه ما باشد که برای راحتی کار آن را در فایل Config اضافه می کنیم:

// App Version
  define('APPVERSION', '1.0.0');

حالا اگر به صفحه about بروید (آدرس localhost/shareposts/pages/about) باید تمام این موارد را مشاهده کنید.

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

در قسمت های بعدی می خواهیم روی ساخت یک کنترلر برای کاربران و مباحث login کار کنیم. امیدوارم از درس طراحی UI با بوت استرپ لذت برده باشید.