Cari artikel lain

WHATSAPP API PART IV

 

Halo, lanjut ke PART IV dalam pembuatan aplikasi whatsapp-api. 

Kali ini kita fokus untuk membuat templating agar aplikasi kita rapi, Dalam membuat aplikasi sangat penting dalam mempertimbangkan GUI agar user lebih mudah dalam menggunakan fasilitas-fasilitas yang kita sediakan.

Pada artikel sebelumnya di whatsapp-api-iii kita sudah memasang bootstrap, jadi kita akan mengaplikasikannya ke view kita.

Pertama kita akan membuat Halaman LOGIN.

Buka folder aplikasi dengan vscode, lalu pada terminal ketikkan perintah npm run test

Pada file login.ejs sudah kita seperti ini

<%- include("header") %>
<div class="container">
    Halaman LOGIN
</div>
<%- include("footer") %>

Sekarang akan kita ubah menjadi

<%- include("header") %>
<div class="d-flex justify-content-center align-items-center" style="width: 100%; height: 100vh;">

    <div id="box-login" class="col-sm-3 border border-2 border-info rounded-2 shadow p-3 bg-white">

        <h3 class="text-center pb-2">WELCOME</h3>

        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="email" placeholder="name@example.com">
            <label for="email">Email address</label>
        </div>
        <div class="form-floating">
            <input type="password" class="form-control" id="password" placeholder="Password">
            <label for="password">Password</label>
        </div>

        <div class="float-end mt-3">
            <button class="btn btn-sm btn-warning fw-bold">LOGIN</button>
        </div>

    </div>
    
</div>
<%- include("footer") %>

Maka jika kita buka halaman login (http://localhost:3000) akan tampil login box seperti ini

Untuk halaman profile isikan code berikut ini

<%- include("header") %>
<div class="container">
    <div class="row">
        <h3 class="text-center pb-2">PROFILE</h3>
        <div class="col-sm-6">
            <div class="mb-3">
                <label for="name" class="form-label">Name</label>
                <input type="email" class="form-control" id="name" placeholder="John Doe">
            </div>
            <div class="mb-3">
                <label for="email" class="form-label">Email address</label>
                <input type="email" class="form-control" id="email" placeholder="name@example.com">
            </div>
        </div>
        <div class="col-sm-6">
            <div class="mb-3">
                <label for="phone" class="form-label">Phone</label>
                <input type="text" class="form-control" id="phone" placeholder="6500000000000">
            </div>
            <div class="mb-3">
                <label for="password" class="form-label">Email address</label>
                <input type="password" class="form-control" id="password" placeholder="strong password">
            </div>
        </div>
    </div>
    <div class="float-end">
        <button class="btn btn-sm btn-warning fw-bold">SAVE</button>
    </div>
</div>
<%- include("footer") %>

Maka hasilnya akan seperti ini

Lalu untuk halaman device ketik code berikut

<%- include("header") %>
<div class="container">

    <div class="row">
        <h3 class="text-center pb-2">DEVICE</h3>
        <table class="table table-striped table-hover" width="100%">
            <thead class="table-dark text-center">
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Number</th>
                    <th>Token</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                <tr class="align-top">
                    <td>1</td>
                    <td>HP Kantor</td>
                    <td>620000000000</td>
                    <td>token-oaoe-yess</td>
                    <td class="text-center">
                        <button class="btn btn-sm btn-secondary fw-bold" data-bs-toggle="modal" data-bs-target="#koneksi">DISCONNECTED</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="row mt-3">

        <div class="mb-3 col-lg-10">
            <label for="pesan" class="form-label">Pesan</label>
            <textarea class="form-control" id="pesan" rows="3"></textarea>
        </div>
        
        <div class="mb-3 col-lg-2">
            <label for="tujuan" class="form-label">Tujuan</label>
            <input type="email" class="form-control" id="tujuan" placeholder="620000000000">
            <div class="float-end mt-3">
                <button class="btn btn-sm btn-warning fw-bold">SEND</button>
            </div>
        </div>
        
    </div>

</div>
<%- include("footer") %>

<!-- OFFSETT -->

<div id="koneksi" class="modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content modal-sm">
            <div class="modal-header">
                <h5 class="modal-title">Koneksi</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>QRCODE</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">SCAN QRCODE</button>
            </div>
        </div>
    </div>
</div>

Sekarang kita perlu memperbarui header.ejs untuk membuat Menu Bar. Kita perlu memperbarui file header.ejs dan footer ejs untuk membuatnya.

Ubah file header.ejs menjadi seperti ini. Perhatikan bagian bawah tag <body>

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>Hello, world!</title>
    
  </head>
  <body>

    <div class="container">

      <nav class="navbar navbar-expand-lg navbar-light bg-light">

        <div class="container-fluid">

          <a class="navbar-brand" href="javascript:void(0)">
            <img src="https://ndalu.id/public/assets/img/apple-touch-icon.png" alt="ndalu.id" class="rounded-circle shadow-sm" style="max-width: 24px;">
          </a>
          
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <ul class="navbar-nav me-auto mb-2 mb-lg-0">

              <li class="nav-item">
                <a id="device" class="nav-link" aria-current="page" href="/device">Device</a>
              </li>

              <li class="nav-item">
                <a id="profile" class="nav-link" href="/profile">Profile</a>
              </li>

              <li class="nav-item">
                <a class="nav-link" href="/logout">Logout</a>
              </li>

            </ul>

          </div>

        </div>

      </nav>

    </div>

Dan ubah file footer menjadi seperti ini. Perhatikan script diatas tag </body>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->

    <script>
      const pathLocation = window.location.toString()
      let link = pathLocation.split("/")
      document.getElementById(link[3]).classList.add("active", "text-success", "fw-bold")
    </script>
    
  </body>
</html>

Maka halaman kita akan menjadi seperti ini

https://ndalu.id/edit_article/whatsapp-api-part-iv

Sekian untuk artikel PART IV ini. Nantikan artikel selanjutnya. Yaitu membuat DATABASE dan membuat system LOGIN.

Inshaa Allah secepatnya. Link akan diupate.


Kategori POST
I build this blog using BootstrapMade Template