102- آموزش جاوااسکریپت | پروژه عملی قسمت 3 از 8: ساخت رابط کاربری پروژه Micro Posts با Bootstrap

در بخش قبل، فقط با مفهوم ماژول‌ها آشنا شدیم و آن بخش هنوز بخشی از پروژه اصلی نبود. حالا وارد پیاده‌سازی پروژه می‌شویم.

ابتدا فایل JavaScript اصلی را پاک‌سازی می‌کنیم و دو فایل ماژولی که برای نمونه ساخته بودیم حذف می‌کنیم. بعد از این مرحله، آماده طراحی رابط کاربری پروژه هستیم.

شروع ساخت رابط کاربری

در این پروژه، رابط کاربری را داخل فایل index.html می‌سازیم. برای داشتن ظاهر بهتر، از Bootswatch استفاده می‌کنیم و قالب Cosmo را به پروژه اضافه می‌کنیم. همچنین برای استفاده از چند آیکن، Font Awesome را هم از طریق CDN وارد می‌کنیم.

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

<link rel="stylesheet" href="BOOTSWATCH_COSMO_CSS_LINK" />
<link rel="stylesheet" href="FONT_AWESOME_CDN_LINK" />

در این پروژه به فایل‌های JavaScript مربوط به Bootstrap و وابستگی‌هایی مثل jQuery نیازی نداریم، چون در رابط فعلی از قابلیت‌هایی مانند dropdown استفاده نمی‌شود. البته اگر در پروژه خود از این امکانات استفاده کنید، باید آن فایل‌ها را هم اضافه کنید.

ساخت نوار بالای صفحه

از آنجا که این پروژه یک برنامه تک‌صفحه‌ای است، نوار بالای صفحه بسیار ساده خواهد بود و نیازی به لینک‌های متعدد ندارد.

نمونه کد نوار بالا:

<nav class="navbar navbar-dark bg-primary mb-3">
  <div class="container">
    <a href="#" class="navbar-brand">MicroPosts</a>
  </div>
</nav>

این بخش فقط عنوان پروژه را نمایش می‌دهد و ظاهر ساده و تمیزی به صفحه می‌دهد.

ساخت بدنه اصلی صفحه

بعد از نوار بالا، یک container اصلی ایجاد می‌کنیم. این بخش قرار است فرم ثبت پست و لیست پست‌ها را در خود نگه دارد. همچنین یک کلاس سفارشی به نام postContainer به آن اضافه می‌کنیم تا در ادامه برای کار با DOM بتوانیم راحت‌تر از آن استفاده کنیم.

ساختار کلی بدنه به این صورت است:

<div class="container postContainer">
  <!-- فرم -->
  <!-- لیست پست‌ها -->
</div>

طراحی فرم ثبت پست

داخل container یک کارت Bootstrap قرار می‌دهیم تا فرم ثبت پست داخل آن نمایش داده شود. این فرم شامل عنوان، متن پست، فیلد مخفی شناسه و دکمه ارسال است.

<div class="card">
  <div class="card-body card-form">
    <h1>Say Something</h1>
    <p class="lead">What's On Your Mind?</p>

    <div class="form-group">
      <input
        type="text"
        id="title"
        class="form-control"
        placeholder="Post Title"
      />
    </div>

    <div class="form-group">
      <textarea
        id="body"
        class="form-control"
        placeholder="Post Body"
      ></textarea>
    </div>

    <input type="hidden" id="id" value="" />

    <button class="post-submit btn btn-primary btn-block">Post It</button>

    <span class="form-end"></span>
  </div>
</div>

توضیح بخش‌های فرم

فیلد عنوان پست

این فیلد برای دریافت عنوان پست استفاده می‌شود:

<input
  type="text"
  id="title"
  class="form-control"
  placeholder="Post Title"
/>

فیلد متن پست

برای نوشتن متن اصلی پست از textarea استفاده می‌کنیم:

<textarea
  id="body"
  class="form-control"
  placeholder="Post Body"
></textarea>

فیلد مخفی شناسه

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

<input type="hidden" id="id" value="" />

دکمه ثبت پست

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

<button class="post-submit btn btn-primary btn-block">Post It</button>

محل نمایش پیام‌ها

در انتهای فرم یک span قرار می‌دهیم تا بعدا از آن برای نمایش هشدارها یا پیام‌های مربوط به وضعیت فرم استفاده کنیم:

<span class="form-end"></span>

محل نمایش پست‌ها

بعد از کارت فرم، یک فاصله ساده و سپس یک div با شناسه posts قرار می‌دهیم. این بخش در ادامه محل نمایش پست‌هایی خواهد بود که از API دریافت می‌شوند یا توسط کاربر ثبت می‌شوند.

<br />
<div id="posts"></div>

افزودن فوتر

در انتهای صفحه، یک فوتر ساده اضافه می‌کنیم تا ظاهر صفحه کامل‌تر شود:

<footer class="mt-5 p-3 text-center bg-light">
  MicroPosts &copy;
</footer>

ساختار کامل رابط کاربری

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

<nav class="navbar navbar-dark bg-primary mb-3">
  <div class="container">
    <a href="#" class="navbar-brand">MicroPosts</a>
  </div>
</nav>

<div class="container postContainer">
  <div class="card">
    <div class="card-body card-form">
      <h1>Say Something</h1>
      <p class="lead">What's On Your Mind?</p>

      <div class="form-group">
        <input
          type="text"
          id="title"
          class="form-control"
          placeholder="Post Title"
        />
      </div>

      <div class="form-group">
        <textarea
          id="body"
          class="form-control"
          placeholder="Post Body"
        ></textarea>
      </div>

      <input type="hidden" id="id" value="" />

      <button class="post-submit btn btn-primary btn-block">Post It</button>

      <span class="form-end"></span>
    </div>
  </div>

  <br />
  <div id="posts"></div>
</div>

<footer class="mt-5 p-3 text-center bg-light">
  MicroPosts &copy;
</footer>

جمع‌بندی

در این آموزش، رابط کاربری اولیه پروژه Micro Posts را آماده کردیم. در این مرحله:

• قالب ظاهری پروژه را با Bootswatch تنظیم کردیم.
• Font Awesome را برای استفاده از آیکن‌ها اضافه کردیم.
• نوار بالای صفحه را ساختیم.
• فرم ثبت پست را با فیلدهای عنوان، متن و شناسه مخفی پیاده‌سازی کردیم.
• بخشی برای نمایش پست‌ها در نظر گرفتیم.
• فوتر صفحه را اضافه کردیم.

در بخش بعدی، نوبت به راه‌اندازی یک REST API آزمایشی می‌رسد تا بتوانیم داده‌های پروژه را به‌صورت واقعی مدیریت کنیم.