Membuat Template Aplikasi Web Untuk SIMRS

  • On March 25, 2021

Untuk mempercepat proses pembuatan aplikasi Sistem Informasi Manajemen Rumah Sakit (SIMRS) berbasis web maka tahap awal yang bisa dilakukan adalah dengan membuat template terlebih dahulu. Tentunya template tersebut bisa kita lengkapi dengan menggunakan beberapa plugin yang membantu kita membuat tampilan menjadi lebih baik.  Berdasaarkan pengalaman saya, dengan cara ini kita akan menghemat waktu setidaknya 30% karena setiap class yang kita buat sudah terinisiasi secara otomatis pada plugin tersebut tanpa harus membuatnya dari nol.

Perlu diketahui sebelumnya bahwa ini adalah versi revisi, dimana postingan ini saya perbaiki karena dirasa perlu adanya perubahan dan pembaharuan pada desain dan library yang akan kita gunakan pada tutorial kali ini. Pastikan juga sebelumnya bahwa di sini kita akan membahas mengenai template yang akan digunakan dalam pengembangan aplikasi SIMRS kedepannya. 

Template desain web adalah kumpulan file untuk membangun sebuah web aplication yang digunakan sebagai acauan awal dalam proses pembuatan penulisan kode sehingga programer tidak perlu menuliskannya dari awal lagi. Saya akan berbagi sebuah template yang saya buat sendiri berikut dengan cara-cara melakukan modifikasi dan mengimplementasikannya pada sistem rumah sakit yang akan kita buat.

Template ini saya buat dengan menggunakan beberapa plugin yang telah dimodifikasi baik directory-nya maupun komponen utamanya. Juga beberapa plugin lain yang dibutuhkan untuk membantu anda mempercepat proses penulisan kode. Berikut ini adalah rincian spesifikasi template tersebut:

  1. Bahasa Pemrograman : HTML5, CSS, PHP 7.4.9.
  2. Javascript Framework : Jquery.
  3. Database Management Syistem : MySQL 5.7.3.1.
  4. Template Plugin : Bootstrap 4, bootstrap-icons, boxicons, chart.js, apexcharts, Popper, Fontawesome, dll.
Sebagai catatan : Informasi selengkapnya mengenai plugin yang digunakan bisa dilihat pada folder vendor.

Untuk mempersingkat waktu maka kita langsung saja memulai langkah-langkah membuat template web untuk SIMRS berbasis web ini. Kita mulai membuat project baru pada workspace dengan nama folder sesuai selera masing-masing.Untuk saya pribadi, saya menggunakan nama SIMRS saja agar mudah diingat. Kemudian silahkan download file template yang telah saya buat agar mempermudah penjelasan kedepannya. Link downloadnya ada pada bagian bawah postingan. Jangan khawatir dengan pemahaman isi template tersebut karena kita akan bahas satu-persatu masing-masing komponen yang ada pada file template tersebut. Berikut ini susunan directory nya:


Keterangan:

  1. Folder _Partial akan menyimpan file PHP yang menyusun bagian-bagian utama pada template sehingga kedepannya akan mudah kita edit dengan kode PHP untuk perpindahan tampilan halaman secara dinamis.
  2. Folder asset akan menyimpan semua file pendukung (image, js) yang menyusun bagian utama template.
  3. Folder _Config akan menyimpan file PHP yang berisi session, connecting database, fungsi dll.
  4. Folder vendor akan menyimpan file plugin yang sudah terpisah-pisah berdasarkan folder, silahkan cek folder ini untuk mengetahui fitur apa saja yang akan kita bahas.
  5. Folder db akan kita gunakan untuk menyimpan file database standar, jadi kalo ada perubahan struktur database nantinya pengguna bisa menyesuaikan lewat file ini.
  6. File index.php merupakan file dimana kita akan menuliskan kode program berformat php untuk menyatukan semua komponen-komponen tadi.
Silahkan buka directorynya pada browser dan coba jalankan templatenya, secara umum tampilannya akan seperti ini.

 
 
1. Penjelasan File index.php

Pada file index.php yang sudah kita buat pada directory lembar kerja kita tadi, selanjutnya kita isi dengan beberapa baris kode singkat sebagai berikut.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <?php
  5.             include "_Partial/Head.php";
  6.         ?>
  7.     </head>
  8.     <body>
  9.         <?php
  10.             include "_Partial/Navbar.php";
  11.             include "_Partial/Menu.php";
  12.         ?>
  13.         <main id="main" class="main">
  14.             <?php
  15.                 include "_Partial/PageTitle.php";
  16.                 include "_Partial/RoutingPage.php";
  17.                 include "_Partial/Modal.php";
  18.             ?>
  19.         </main>
  20.         <?php
  21.             include "_Partial/Copyright.php";
  22.             include "_Partial/BackToTop.php";
  23.             include "_Partial/FooterJs.php";
  24.             include "_Partial/RoutingJs.php";
  25.             include "_Partial/RoutingSwal.php";
  26.         ?>
  27.     </body>
  28. </html>

Melalui file index.php tersebut kita akan bahas setiap barisnya pada langkah selanjutnya.

2. Penjelasan Komponen Head
pada file Head.php pada folder _Partial terlihat baris kode pada halaman tersebut sebagai berikut:
 
  1. <meta charset="utf-8">
  2. <meta content="width=device-width, initial-scale=1.0" name="viewport">
  3. <title>SIMRS</title>
  4. <meta content="Gambaran Umum Tentang Aplikasi" name="description">
  5. <meta content="Kata Kunci Jika Ada Pencarian" name="keywords">
  6. <!-- Favicons -->
  7. <link href="assets/img/logo.png" rel="icon">
  8. <link href="assets/img/logo.png" rel="apple-touch-icon">
  9. <!-- Google Fonts -->
  10. <link href="assets/fonts/fonts.css" rel="stylesheet">
  11. <!-- Vendor CSS Files -->
  12. <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  13. <link href="vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  14. <link href="vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  15. <link href="vendor/quill/quill.snow.css" rel="stylesheet">
  16. <link href="vendor/quill/quill.bubble.css" rel="stylesheet">
  17. <link href="vendor/remixicon/remixicon.css" rel="stylesheet">
  18. <link href="vendor/simple-datatables/style.css" rel="stylesheet">
  19. <!-- Template Main CSS File -->
  20. <link href="assets/css/style.css" rel="stylesheet">
  21. <link href="vendor/mdb-ui-kit/css/mdb.min.css" rel="stylesheet">
  22. <script src="vendor/jquery/dist/jquery.min.js" type="text/javascript"></script>
  23. <!-- =======================================================
  24. * Template Name: NiceAdmin - v2.3.1
  25. * Template URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/
  26. * Author: BootstrapMade.com
  27. * License: https://bootstrapmade.com/license/
  28. ======================================================== -->

Keterangan :

  • Pada baris ke 3 terdapat title dengan nilai "SIMRS", silahkan ubah untuk menentukan title halaman.
  • Baris 4 dan 5 untuk mengisi meta tag description dan keyword. Silahkan ubah sesuai selera.
  • Untuk baris 6 seterusnya adalah script untuk menghubungkan aplikasi dengan beberapa plugin.

3. Penjelasan Tampilan Navbar

Pada file Navbar.php pada folder _Partial ini berisikan file HTML yang membangun bagian atas halaman. Pada file ini ada beberapa fitur yang berguna sekali seperti tampilan nama dan logo aplikasi, pencarian bantuan, notifikasi dan informasi profile pengguna. Lebih jelas lihat pada script berikut

  1. <header id="header" class="header fixed-top d-flex align-items-center landing_background">
  2.     <!-- Logo Dan Nama Aplikasi -->
  3.     <div class="d-flex align-items-center justify-content-between">
  4.         <a href="index.php" class="logo d-flex align-items-center">
  5.             <img src="assets/img/logo.png" alt="">
  6.             <span class="d-none d-lg-block text-white">SIMRS</span>
  7.         </a>
  8.         <i class="bi bi-list toggle-sidebar-btn text-white"></i>
  9.     </div>
  10.     <!-- Form Pencarian Bantuan -->
  11.     <div class="search-bar">
  12.         <form action="javascript:void(0);" class="search-form d-flex align-items-center" method="POST">
  13.             <input type="text" name="keyword" placeholder="Cari Bantuan" title="Cari Bantuan">
  14.             <button type="submit" title="Search"><i class="bi bi-search"></i></button>
  15.         </form>
  16.     </div>
  17.     <nav class="header-nav ms-auto">
  18.         <ul class="d-flex align-items-center">
  19.             <!-- Tombol Pencarian Bantuan Mobile -->
  20.             <li class="nav-item d-block d-lg-none">
  21.                 <a class="nav-link nav-icon search-bar-toggle " href="javascript:void(0);">
  22.                     <i class="bi bi-search"></i>
  23.                 </a>
  24.             </li>
  25.             <!-- Notifikasi -->
  26.             <li class="nav-item dropdown">
  27.                 <a class="nav-link nav-icon" href="javascript:void(0);" data-bs-toggle="dropdown">
  28.                     <i class="bi bi-bell"></i>
  29.                     <span class="badge bg-danger rounded-pill badge-number">2</span>
  30.                 </a>
  31.                 <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow notifications">
  32.                     <li class="dropdown-header">
  33.                         Anda Memiliki 2 Pemberitahuan
  34.                     </li>
  35.                     <!-- List Notifikasi ke 1-->
  36.                     <li><hr class="dropdown-divider"></li>
  37.                     <li class="notification-item">
  38.                         <i class="bi bi-exclamation-triangle text-danger"></i>
  39.                         <div>
  40.                             <h4><a href="">Notifikasi Ke 1</a></h4>
  41.                             <p>Penjelasan Notifikasi Ke 1</p>
  42.                         </div>
  43.                     </li>
  44.                     <!-- List Notifikasi ke 2-->
  45.                     <li><hr class="dropdown-divider"></li>
  46.                     <li class="notification-item">
  47.                         <i class="bi bi-exclamation-triangle text-danger"></i>
  48.                         <div>
  49.                             <h4><a href="">Notifikasi Ke 2</a></h4>
  50.                             <p>Penjelasan Notifikasi Ke 2</p>
  51.                         </div>
  52.                     </li>
  53.                 </ul>
  54.             </li>
  55.             <!-- Profile User -->
  56.             <li class="nav-item dropdown pe-3">
  57.                 <a class="nav-link nav-profile d-flex align-items-center pe-0" href="#" data-bs-toggle="dropdown">
  58.                     <img src="assets/img/User/No-Image.png" alt="Profile" class="rounded-circle">
  59.                     <span class="d-none d-md-block dropdown-toggle ps-2">Nama User</span>
  60.                 </a>
  61.                 <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow profile">
  62.                     <li class="dropdown-header">
  63.                         <h6>Nama Kamu</h6>
  64.                         <span>Hak/Level Akses</span>
  65.                     </li>
  66.                     <li>
  67.                         <hr class="dropdown-divider">
  68.                     </li>
  69.                     <li>
  70.                         <a class="dropdown-item d-flex align-items-center" href="index.php">
  71.                             <i class="bi bi-person"></i>
  72.                             <span>Profile Saya</span>
  73.                         </a>
  74.                     </li>
  75.                     <li>
  76.                         <hr class="dropdown-divider">
  77.                     </li>
  78.                     <!-- Menu Profile Edit -->
  79.                     <li>
  80.                         <a class="dropdown-item d-flex align-items-center" href="">
  81.                             <i class="bi bi-gear"></i>
  82.                             <span>Edit Profile</span>
  83.                         </a>
  84.                     </li>
  85.                     <li><hr class="dropdown-divider"></li>
  86.                     <!-- Menu Profile Ganti Password -->
  87.                     <li>
  88.                         <a class="dropdown-item d-flex align-items-center" href="">
  89.                             <i class="bi bi-key"></i>
  90.                             <span>Ganti Password</span>
  91.                         </a>
  92.                     </li>
  93.                     <li><hr class="dropdown-divider"></li>
  94.                     <!-- Menu Profile Bantuan -->
  95.                     <li>
  96.                         <a class="dropdown-item d-flex align-items-center" href="index.php">
  97.                             <i class="bi bi-question-circle"></i>
  98.                             <span>Butuh Bantuan?</span>
  99.                         </a>
  100.                     </li>
  101.                     <li><hr class="dropdown-divider"></li>
  102.                     <!-- Menu Profile Logout -->
  103.                     <li>
  104.                         <a class="dropdown-item d-flex align-items-center" href="javascript:void(0);">
  105.                             <i class="bi bi-box-arrow-right"></i>
  106.                             <span>Keluar</span>
  107.                         </a>
  108.                     </li>
  109.                 </ul>
  110.             </li>
  111.         </ul>
  112.     </nav>
  113. </header>
Keterangan Script Diatas:
  1. Pada baris ke 2 sampai 9 digunakan untuk menampilkan logo dan nama aplikasi pada bagian atas halaman.
  2. Pada baris 26 sampai 34 digunakan untuk menampilkan lonceng notifikasi dan dropdown uraian notifikasinya.
  3. Pada baris 55 sampai 110 digunakan untuk menampilkan profile pengguna yang mana nantinya akan diisi dengan nama dan level akses. Pada bars itu juga terdapat dropdown menu untuk opsi fitur lain seperti ubah password dan ubah profile.

5. Penutup
Template sudah siap dimodifikasi selanjutnya anda bisa menambahkan halaman-halaman dan form secara dinamis sesuai kebutuhan. Untuk selanjutnya kita akan bahas lagi pada artikel yang berbeda sesuai dengan fitur dan teknik yang akan digunakan. Apabila ada yang kurang dimengerti atau anda mengalami kesulitan silahkan tanyakan pada kolom komentar. Saya telah menambahkan alamat email pada profil blog ini sehingga anda bisa menanyakan secara langsung. Untuk source code lengkapnya anda juga bisa mendownloadnya pada link yang saya sediakan pada akhir post. Terima kasih.

Link Download:

Tags:
Solihul Hadi

Terima kasih telah berkunjung ke blog pribadi saya, silahkan isi komentar atau hubungi akun media sosial yang tertera dibawah ini.

4 comments:

  1. AnonymousDecember 7, 2023 at 10:39 AM

    database nya tidak ada pak

    ReplyDelete
    Replies
    1. AnonymousDecember 7, 2023 at 4:52 PM

      Sudah diperbaharui di github ya

      Delete
    2. AnonymousDecember 7, 2023 at 4:53 PM

      https://metodeakurat.blogspot.com/2021/03/membuat-template-aplikasi-web-untuk.html

      Delete
    3. AnonymousDecember 7, 2023 at 4:54 PM

      sudah di push yang GitHub ya

      Delete

Silahkan kirim komentar