HomeAboutBlogs
← All posts

Membangun Aplikasi Reservasi Meja dengan MEVN — Bagian Ketiga

Bahasa Indonesia

Tulisan ini pertama kali terbit di Medium.

Selamat datang di bagian ketiga dari seri cerita saya, Membangun Aplikasi Reservasi Meja dengan MEVN. Jika anda belum mengikuti seri sebelumnya, silakan cek pada daftar seri di bawah ini.

Membangun Aplikasi Reservasi Meja dengan MEVN — Daftar Seri

1. Membangun Aplikasi Reservasi Meja dengan MEVN — Bagian Pertama

2. Membangun Aplikasi Reservasi Meja dengan MEVN — Bagian Kedua

3. Membangun Aplikasi Reservasi Meja dengan MEVN — Bagian Ketiga (You’re here)

Pada seri ketiga ini, saya ingin menceritakan pengalaman saya untuk melakukan styling pada aplikasi reservasi meja yang telah saya buat. Tujuannya adalah agar aplikasi ini menjadi lebih menarik secara tampilan, lebih intuitif, dan lebih mudah dipahami oleh pengguna. Untuk melakukan styling, saya menggunakan CSS framework yaitu TailwindCSS.

Saya menggunakan TailwindCSS karena menyediakan kemudahan untuk melakukan CSS styling tanpa harus membuat file custom CSS yang terpisah. Semua bisa dilakukan dengan sangat mudah secara inline. Selain itu saya juga menggunakan Vue-Tailwind agar bisa menggunakan pre-made component seperti input text, button, dan lainnya dengan basis styling dari TailwindCSS dan tentunya kompatibel di aplikasi berbasis VueJS.

Jika anda ingin melihat kode sumber dari aplikasi ini, silakan mengunjungi repository Github saya melalui tautan berikut Table Reservation App.

Persiapan Styling

Untuk melakukan styling pada aplikasi ini, saya mencoba untuk membuatnya dengan sesimpel mungkin menggunakan dua package berikut ini

Untuk memasang kedua package tersebut ke dalam projek ini, saya menjalankan command berikut

npm install tailwindcss vue-tailwind

Langkah selanjutnya adalah saya melakukan instalasi TailwindCSS ke dalam projek ini. Untuk langkah secara detilnya, saya menyertakan tautan menuju dokumentasi resmi dari TailwindCSS pada bagian referensi. Dalam folder src/assets, saya membuat folder baru bernama css lalu menambahkan file tailwind.css untuk import komponen dari TailwindCSS sebagai berikut,

Setelah itu, saya menjalankan command di bawah ini untuk membuat file konfigurasi untuk tailwind yang nantinya akan generate file tailwind.config.js. Langkah ini bisa berguna jika saya ingin memodifikasi styling yang disediakan dari TailwindCSS atau menambah third-party plugin.

npx tailwindcss init

Setelah selesai melakukan setup untuk TailwindCSS, langkah selanjutnya adalah melakukan import file tailwind.css dan juga package Vue-Tailwind di dalam file main.js .

Langkah terakhir yaitu menambahkan library icon dari material icons yang saya ambil dari CDN dan diletakkan di bagian header dari index.html .

Component

Tampilan Navbar

Tampilan Navbar

<template>
  <div class="bg-blue-600 px-48 py-6 mb-16 w-full flex justify-between text-xl font-bold">
    <div>
      <router-link to="/">Table Reservation App</router-link>
    </div>
    <div>
      <router-link to="/">Order Page</router-link>
    </div>
  </div>
</template>

Pada bagian navigation bar ini saya mencoba untuk membuat sesederhana mungkin dengan menggunakan div dan router-link. Tujuannya sebagai tampilan dasar untuk melakukan routing apabila nantinya terdapat fitur-fitur tambahan. Untuk styling, saya melakukan beberapa hal berikut

OrderComponent

Tampilan OrderComponent

Tampilan OrderComponent

<template>
  <div class="flex flex-col items-center">
    <div class="grid grid-cols-4 gap-40">
        <a href="#" @click.prevent="showModal(order)" v-for="order in allOrders" :key="order.id">
          <div class="bg-blue-500 p-16 rounded w-48 flex justify-center">
            <p class="text-4xl font-bold">{{ order.table_name }}</p>
          </div>
        </a>
    </div>
    <t-button variant="success" class="mt-10 font-semibold" @click.prevent="showModal()">Add New Reservation</t-button>
    <ModalOrder />
  </div>
</template>

Pada OrderComponent saya memiliki ide untuk menampilkan nama tiap meja dalam sebuah grid dengan empat kolom pada masing-masing barisnya. Lalu pada bagian bawahnya saya ingin menambahkan sebuah button CTA berwarna hijau untuk menambahkan data reservasi baru. Styling yang saya gunakan untuk merealisasikan ide saya tersebut adalah sebagai berikut,

Lalu di bawahnya saya menambahkan komponen button yang disediakan oleh Vue-Tailwind dengan menambahkan tag t-button. Pada button tersebut saya juga menerapkan beberapa styling yaitu,

ModalOrder

Tampilan ModelOrder

Tampilan ModelOrder

Pada form ini saya memiliki ide untuk memberikan sentuhan aksen warna biru pada elemen-elemen di dalamnya seperti di bagian outline dari input dan di button save. Selain itu saya mengubah input quantity yang awalnya hanya berupa manual text input menjadi menggunakan button untuk menambah dan mengurangi quantity.

<template>
  <div class="text-gray-900">
    <modal name="modal-order" :width="600" :height="750" @before-open="beforeOpen" @opened="opened">
      <div class="p-2 m-2 border-b border-gray-300 flex flex-row items-center justify-between">
        <p class="text-2xl font-bold">{{ showTableName }}</p>
        <label class="material-icons text-red-600 font-extrabold" @click.prevent="hideModal">close</label>
      </div>
      <div class="p-4 space-y-5">
        <div class="flex flex-col">
          <label for="table-name">Table</label>
          <t-input class="form-input border-blue-500 border-2 border-opacity-25" v-model.lazy="order.table_name" @keydown.shift.tab.prevent="" ref="table_name" />
        </div>
        <div class="flex flex-col">
          <label for="order-code">Order Code</label>
          <t-input class="form-input border-blue-500 border-2 border-opacity-25" v-model.lazy="order.code"/>
        </div>
        <div class="flex flex-col">
          <label for="customer-name">Customer Name</label>
          <t-input class="form-input border-blue-500 border-2 border-opacity-25" v-model.lazy="order.customer_name" />
        </div>
        <div class="flex flex-col">
          <label for="employee-name">Employee Name</label>
          <t-input class="form-input border-blue-500 border-2 border-opacity-25" v-model.lazy="order.employee_name" />
        </div>
        <div class="flex flex-col">
          <label for="menu-name">Menu to Order</label>
          <t-select placeholder="Choose a menu" class="border-blue-500 border-2 border-opacity-25" name="menu-input" :options="menus" v-model.lazy="order.menu_name" />
        </div>
        <div class="flex flex-col">
          <label for="quantity">Quantity</label>
          <div class="flex">
            <t-input class="flex-grow form-input border-blue-500 border-2 border-opacity-25" v-model="order.quantity_ordered" />
            <button class="material-icons text-red-500 text-4xl ml-2" @click.prevent="decrement">remove_circle</button>
            <button class="material-icons text-blue-500 text-4xl ml-2" @click.prevent="increment">add_circle</button>
          </div>
        </div>
        <div class="flex flex-row justify-center space-x-10">
          <t-button variant="primary" size="sm" @click="onSubmit" class="font-semibold">Save</t-button>
          <t-button variant="danger" size="sm" @keydown.tab.exact.prevent="" 
            @click.prevent="deleteReservation" v-if="order._id != undefined" 
            class="font-semibold">
            Delete
          </t-button>
        </div>
      </div>
    </modal>
  </div>
</template>

General Styling

Untuk styling form secara general, saya hanya membuat teks menjadi warna hitam pekat agar kontras dengan warna putih background form dan mengatur ukuran modal form agar mampu menampung semua input dan button di dalamnya secara proporsional. Styling yang saya terapkan adalah sebagai berikut,

Bagian header yang sudah di styling

Bagian header yang sudah di styling

Pada bagian header, saya mengisinya dengan dua item yaitu judul form dan tombol close. Untuk membuat tombol close tersebut saya menggunakan icon yang disediakan oleh material-icon. Secara keseluruhan, styling untuk header form ini adalah sebagai berikut,

Form Input

Bagian form input yang sudah di styling

Bagian form input yang sudah di styling

Untuk input teks, saya menggunakan tag t-input yang disediakan oleh Vue-Tailwind. Selain itu saya juga menerapkan beberapa styling lainnya untuk spacing (memberi jarak) antar teks input. Berikut ini adalah styling yang saya gunakan,

Select

Bagian select menu yang sudah di styling

Bagian select menu yang sudah di styling

Untuk bagian select menu menggunakan styling yang sama dengan teks input sebelumnya, yang membedakan adalah penggunaan tag t-select . Kemudian untuk mengisi daftar menunya, saya menambahkan objek data baru bernama menus di bagian script . Sehingga hasil akhirnya menjadi seperti berikut ini,

Inisialisasi nama-nama menu untuk ditampilkan dalam select

Inisialisasi nama-nama menu untuk ditampilkan dalam select

Select yang sudah berisi nama menu

Select yang sudah berisi nama menu

Input Quantity

Bagian input quantity yang sudah di styling

Bagian input quantity yang sudah di styling

Input quantity mengalami perubahan yang cukup signifikan dibandingkan dengan desain form awal yang hanya menggunakan teks input saja. Pada bagian ini, sekarang saya menggunakan t-input dan menambah dua tomboluntuk menambah dan mengurangi quantity. Untuk stylingnya, saya menggunakan flex-grow pada teks input agar lebarnya bisa fleksibel menyesuaikan dengan dua tombol di bagian kanan dan untuk tombolnya sendiri saya menggunakan icon dari material icons yang dipadukan dengan styling text-red-500 untuk tombol mengurangi quantity dan text-blue-500 untuk tombol menambah quantity.

Tambahan di bagian methods untuk logic menambah dan mengurangi quantity

Tambahan di bagian methods untuk logic menambah dan mengurangi quantity

Langkah selanjutnya adalah menambah fungsi baru di bagian methods yang saya beri nama increment() dan decrement() untuk menambah dan mengurangi nilai dari quantity yang nantinya diakses melalui tombol plus dan minus di samping input quantity.

Save & Delete

Tombol save dan delete yang sudah diberi styling

Tombol save dan delete yang sudah diberi styling

Akhirnya, kita masuk ke bagian akhir dari form yaitu tombol save dan delete. Pada bagian ini saya menerapkan styling sebagai berikut,

Extra

Menambahkan page title

Menambahkan page title

Bagian ini merupakan hal yang opsional yaitu mengatur page title melalui VueMixin. Untuk membuat file konfigurasinya, saya membuat folder baru bernama mixins dan menambahkan file baru bernama titleMixin.js dengan konfigurasi sebagai berikut,

Konfigurasi file Mixin

Konfigurasi file Mixin

Lalu saya melakukan import titleMixin yang sudah dibuat sebelumnya dan di register ke dalam aplikasi Vue.

Import Mixin di main.js

Import Mixin di main.js

Langkah terakhir yaitu menambahkan property title pada bagian script di OrderComponent, dan selesai!

Selanjutnya?

Jadi, ini adalah akhir dari bagian ketiga dari seri Membangun Aplikasi Reservasi Meja dengan MEVN. Sejauh ini saya merasa cukup puas dengan fungsionalitas dasar dan tampilan yang ada di dalam aplikasi ini. Jika anda memiliki pertanyaan ataupun masukan, silakan menempatkan di bagian response.

Saya tentunya memiliki keinginan untuk terus mengembangkan aplikasi ini dan tetap membuat cerita baru mengenai perjalanan pengembangan aplikasi ini di Medium saya. Namun untuk dalam waktu dekat ini, saya ingin mencoba berpindah haluan untuk mencoba hal baru di luar aplikasi reservasi meja ini. Saya berharap bisa terus berbagi hal-hal baru yang saya dapatkan kedepannya.

Sampai jumpa!

Referensi

Membangun Aplikasi Reservasi Meja dengan MEVN — Bagian Ketiga was originally published in Easyread on Medium, where people are continuing the conversation by highlighting and responding to this story.