Membuat Aplikasi Klinik #02 - Installasi Template

Pada tahap ini kita perlu menambahkan template untuk interface ataupun tampilan dari aplikasi manajemen klinik yang nanti akan kita buat. Template yang kita akan gunakan disini adalah template AdminLTE, anda bisa mengunduh template tersebut pada situs resminya. 

  1. Pertama setelah Anda mengunduh template AdminLTE, anda perlu membuat sebuah folder dengan nama themes pada root direktori aplikasi klinik
  2. Selanjutnya ekstrak AdminLTE ke folder themes 
  3. Selanjutnya buka file Template.php yang terdapat pada folder core, atur isinya seperti berikut
      
      <?php
    
    
    class Template extends Navadmin
    {
            protected $obj;
            protected $app;
            public function __construct($app, $obj)
            {
                    $this->obj=$obj;
                    $this->app=$app;
            }
            public function head($path)
            {
                    ?>
                            <!DOCTYPE html>
                            <html lang="en">
                            <head>
                            <meta charset="utf-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1">
                            <title>AdminLTE 3 | Dashboard</title>
    
                    <?php 
            }
            public function css($path)
            {
                    ?>
                      <!-- Google Font: Source Sans Pro -->
                      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
                      <!-- Font Awesome -->
                      <link rel="stylesheet" href="<?=$path?>themes/adminlte/plugins/fontawesome-free/css/all.min.css">
                      <!-- Ionicons -->
                      <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
                      <!-- Tempusdominus Bootstrap 4 -->
                      <link rel="stylesheet" href="<?=$path?>themes/adminlte/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
                      <!-- iCheck -->
                      <link rel="stylesheet" href="<?=$path?>themes/adminlte/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
                      <!-- JQVMap -->
                      <link rel="stylesheet" href="<?=$path?>themes/adminlte/plugins/jqvmap/jqvmap.min.css">
                      <!-- Theme style -->
                      <link rel="stylesheet" href="<?=$path?>themes/adminlte/dist/css/adminlte.min.css">
                      <!-- overlayScrollbars -->
                      <link rel="stylesheet" href="<?=$path?>themes/adminlte/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
                      <!-- Daterange picker -->
                      <link rel="stylesheet" href="<?=$path?>themes/adminlte/plugins/daterangepicker/daterangepicker.css">
                      <!-- summernote -->
                      <link rel="stylesheet" href="<?=$path?>themes/adminlte/plugins/summernote/summernote-bs4.min.css">
                    </head>
                    <body class="hold-transition sidebar-mini layout-fixed">
                    <div class="wrapper">
    
                      <!-- Preloader -->
                      <div class="preloader flex-column justify-content-center align-items-center">
                        <img class="animation__shake" src="<?=$path?>themes/adminlte/dist/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">
                      </div>
    
    
                    <?php 
            }
            public function footer($path)
            {
                    ?>
                    <footer class="main-footer">
                                <strong>Copyright &copy; 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong>
                                All rights reserved.
                                <div class="float-right d-none d-sm-inline-block">
                                  <b>Version</b> 3.2.0
                                </div>
                              </footer>
    
                              <!-- Control Sidebar -->
                              <aside class="control-sidebar control-sidebar-dark">
                                <!-- Control sidebar content goes here -->
                              </aside>
                              <!-- /.control-sidebar -->
                            </div>
                            <!-- ./wrapper -->
    
                            <!-- jQuery -->
                            <script src="<?=$path?>themes/adminlte/plugins/jquery/jquery.min.js"></script>
                            <!-- jQuery UI 1.11.4 -->
                            <script src="<?=$path?>themes/adminlte/plugins/jquery-ui/jquery-ui.min.js"></script>
                            <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
                            <script>
                              $.widget.bridge('uibutton', $.ui.button)
                            </script>
                            <!-- Bootstrap 4 -->
                            <script src="<?=$path?>themes/adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
                            <!-- ChartJS -->
                            <script src="<?=$path?>themes/adminlte/plugins/chart.js/Chart.min.js"></script>
                            <!-- Sparkline -->
                            <script src="<?=$path?>themes/adminlte/plugins/sparklines/sparkline.js"></script>
                            <!-- JQVMap -->
                            <script src="<?=$path?>themes/adminlte/plugins/jqvmap/jquery.vmap.min.js"></script>
                            <script src="<?=$path?>themes/adminlte/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
                            <!-- jQuery Knob Chart -->
                            <script src="<?=$path?>themes/adminlte/plugins/jquery-knob/jquery.knob.min.js"></script>
                            <!-- daterangepicker -->
                            <script src="<?=$path?>themes/adminlte/plugins/moment/moment.min.js"></script>
                            <script src="<?=$path?>themes/adminlte/plugins/daterangepicker/daterangepicker.js"></script>
                            <!-- Tempusdominus Bootstrap 4 -->
                            <script src="<?=$path?>themes/adminlte/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
                            <!-- Summernote -->
                            <script src="<?=$path?>themes/adminlte/plugins/summernote/summernote-bs4.min.js"></script>
                            <!-- overlayScrollbars -->
                            <script src="<?=$path?>themes/adminlte/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
                            <!-- AdminLTE App -->
                            <script src="<?=$path?>themes/adminlte/dist/js/adminlte.js"></script>
                            <!-- AdminLTE for demo purposes -->
                            <script src="<?=$path?>themes/adminlte/dist/js/demo.js"></script>
                            <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
                            <script src="<?=$path?>themes/adminlte/dist/js/pages/dashboard.js"></script>
                            </body>
                            </html>
                    <?php 
            }
            
    }
    
    
    
    ?>
      
      
  4. Kemudian buat folder admin pada folder load, buat file dengan nama Navadmin.php isi dengan script berikut
    
      <?php 
    class Navadmin
    {
            public function admin_nav_header($path='')
            {
                    ?>
                             <!-- Navbar -->
                            <nav class="main-header navbar navbar-expand navbar-white navbar-light">
                                <!-- Left navbar links -->
                                <ul class="navbar-nav">
                                  <li class="nav-item">
                                    <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
                                  </li>
                                  <li class="nav-item d-none d-sm-inline-block">
                                    <a href="index3.html" class="nav-link">Home</a>
                                  </li>
                                  <li class="nav-item d-none d-sm-inline-block">
                                    <a href="#" class="nav-link">Contact</a>
                                  </li>
                                </ul>
    
                                <!-- Right navbar links -->
                                <ul class="navbar-nav ml-auto">
                                  <!-- Navbar Search -->
                                  <li class="nav-item">
                                    <a class="nav-link" data-widget="navbar-search" href="#" role="button">
                                      <i class="fas fa-search"></i>
                                    </a>
                                    <div class="navbar-search-block">
                                      <form class="form-inline">
                                        <div class="input-group input-group-sm">
                                          <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
                                          <div class="input-group-append">
                                            <button class="btn btn-navbar" type="submit">
                                              <i class="fas fa-search"></i>
                                            </button>
                                            <button class="btn btn-navbar" type="button" data-widget="navbar-search">
                                              <i class="fas fa-times"></i>
                                            </button>
                                          </div>
                                        </div>
                                      </form>
                                    </div>
                                  </li>
    
                                  <!-- Messages Dropdown Menu -->
                                  <li class="nav-item dropdown">
                                    <a class="nav-link" data-toggle="dropdown" href="#">
                                      <i class="far fa-comments"></i>
                                      <span class="badge badge-danger navbar-badge">3</span>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                                      <a href="#" class="dropdown-item">
                                        <!-- Message Start -->
                                        <div class="media">
                                          <img src="<?=$path?>themes/adminlte/dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
                                          <div class="media-body">
                                            <h3 class="dropdown-item-title">
                                              Brad Diesel
                                              <span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
                                            </h3>
                                            <p class="text-sm">Call me whenever you can...</p>
                                            <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
                                          </div>
                                        </div>
                                        <!-- Message End -->
                                      </a>
                                      <div class="dropdown-divider"></div>
                                      <a href="#" class="dropdown-item">
                                        <!-- Message Start -->
                                        <div class="media">
                                          <img src="<?=$path?>themes/adminlte/dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
                                          <div class="media-body">
                                            <h3 class="dropdown-item-title">
                                              John Pierce
                                              <span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
                                            </h3>
                                            <p class="text-sm">I got your message bro</p>
                                            <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
                                          </div>
                                        </div>
                                        <!-- Message End -->
                                      </a>
                                      <div class="dropdown-divider"></div>
                                      <a href="#" class="dropdown-item">
                                        <!-- Message Start -->
                                        <div class="media">
                                          <img src="<?=$path?>themes/adminlte/dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
                                          <div class="media-body">
                                            <h3 class="dropdown-item-title">
                                              Nora Silvester
                                              <span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
                                            </h3>
                                            <p class="text-sm">The subject goes here</p>
                                            <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
                                          </div>
                                        </div>
                                        <!-- Message End -->
                                      </a>
                                      <div class="dropdown-divider"></div>
                                      <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
                                    </div>
                                  </li>
                                  <!-- Notifications Dropdown Menu -->
                                  <li class="nav-item dropdown">
                                    <a class="nav-link" data-toggle="dropdown" href="#">
                                      <i class="far fa-bell"></i>
                                      <span class="badge badge-warning navbar-badge">15</span>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                                      <span class="dropdown-item dropdown-header">15 Notifications</span>
                                      <div class="dropdown-divider"></div>
                                      <a href="#" class="dropdown-item">
                                        <i class="fas fa-envelope mr-2"></i> 4 new messages
                                        <span class="float-right text-muted text-sm">3 mins</span>
                                      </a>
                                      <div class="dropdown-divider"></div>
                                      <a href="#" class="dropdown-item">
                                        <i class="fas fa-users mr-2"></i> 8 friend requests
                                        <span class="float-right text-muted text-sm">12 hours</span>
                                      </a>
                                      <div class="dropdown-divider"></div>
                                      <a href="#" class="dropdown-item">
                                        <i class="fas fa-file mr-2"></i> 3 new reports
                                        <span class="float-right text-muted text-sm">2 days</span>
                                      </a>
                                      <div class="dropdown-divider"></div>
                                      <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
                                    </div>
                                  </li>
                                  <li class="nav-item">
                                    <a class="nav-link" data-widget="fullscreen" href="#" role="button">
                                      <i class="fas fa-expand-arrows-alt"></i>
                                    </a>
                                  </li>
                                  <li class="nav-item">
                                    <a class="nav-link" data-widget="control-sidebar" data-controlsidebar-slide="true" href="#" role="button">
                                      <i class="fas fa-th-large"></i>
                                    </a>
                                  </li>
                                </ul>
                                    </nav>
                              <!-- /.navbar -->
                    <?php 
    
            }
            public function admin_sidebar($path='')
            {
                    ?>
                            <!-- Main Sidebar Container -->
                            <aside class="main-sidebar sidebar-dark-primary elevation-4">
                                <!-- Brand Logo -->
                                <a href="index3.html" class="brand-link">
                                  <img src="<?=$path?>themes/adminlte/dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
                                  <span class="brand-text font-weight-light">AdminLTE 3</span>
                                </a>
    
                                <!-- Sidebar -->
                                <div class="sidebar">
                                  <!-- Sidebar user panel (optional) -->
                                  <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                                    <div class="image">
                                      <img src="<?=$path?>themes/adminlte/dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
                                    </div>
                                    <div class="info">
                                      <a href="#" class="d-block">Alexander Pierce</a>
                                    </div>
                                  </div>
    
                                  <!-- SidebarSearch Form -->
                                  <div class="form-inline">
                                    <div class="input-group" data-widget="sidebar-search">
                                      <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search">
                                      <div class="input-group-append">
                                        <button class="btn btn-sidebar">
                                          <i class="fas fa-search fa-fw"></i>
                                        </button>
                                      </div>
                                    </div>
                                  </div>
    
                                  <!-- Sidebar Menu -->
                                  <nav class="mt-2">
                                    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                                      <!-- Add icons to the links using the .nav-icon class
                                           with font-awesome or any other icon font library -->
                                      <li class="nav-item">
                                        <a href="#" class="nav-link active">
                                          <i class="nav-icon fas fa-tachometer-alt"></i>
                                          <p>
                                            Dashboard
                                           
                                          </p>
                                        </a>
                                       
                                      </li>
                                    
                                     
                                        
                                    <li class="nav-item">
                                        <a href="#" class="nav-link">
                                          <i class="nav-icon fas fa-chart-pie"></i>
                                          <p>
                                            Pasien
                                            <i class="right fas fa-angle-left"></i>
                                          </p>
                                        </a>
                                        <ul class="nav nav-treeview">
                                          <li class="nav-item">
                                            <a href="pages/charts/chartjs.html" class="nav-link">
                                              <i class="far fa-circle nav-icon"></i>
                                              <p>ChartJS</p>
                                            </a>
                                          </li>
                                          <li class="nav-item">
                                            <a href="pages/charts/flot.html" class="nav-link">
                                              <i class="far fa-circle nav-icon"></i>
                                              <p>Flot</p>
                                            </a>
                                          </li>
                                          <li class="nav-item">
                                            <a href="pages/charts/inline.html" class="nav-link">
                                              <i class="far fa-circle nav-icon"></i>
                                              <p>Inline</p>
                                            </a>
                                          </li>
                                          <li class="nav-item">
                                            <a href="pages/charts/uplot.html" class="nav-link">
                                              <i class="far fa-circle nav-icon"></i>
                                              <p>uPlot</p>
                                            </a>
                                          </li>
                                        </ul>
                                    </li>
                                      
                                    <li class="nav-header">EXAMPLES</li>
                                      <li class="nav-item">
                                        <a href="pages/calendar.html" class="nav-link">
                                          <i class="nav-icon far fa-calendar-alt"></i>
                                          <p>
                                            Calendar
                                            <span class="badge badge-info right">2</span>
                                          </p>
                                        </a>
                                      </li>
                                      
                                     
                                    </ul>
                                  </nav>
                                  <!-- /.sidebar-menu -->
                                </div>
                                <!-- /.sidebar -->
                              </aside>
    
                                            <?php 
                                    }
    }
      
  5. Kemudian selanjutnya buka file Moduleload.php isi dengan script berikut
      
    <?php
    /**
    
     * Bagian ini digunakan untuk meregister atau meload modul - modul 
     * pada setiap parameter url yang diakses, Anda bisa memiliah dan memilih
     * modul mana saja yang akan digunakan untuk diakses pada suatu halaman,
     * setiap modul akan diakses pada setiap request seperti $this->app->get('page')
     * lalu kemudian Anda bisa memanggil nama module atau fungsi yang dibutuhkan
     * yang sudah anda tambahkan midal pada folder core, load atau public.
     * 
     
    
    
    **/
    class Moduleload
    {
            
            protected $app;
            protected $obj;
            protected $themes;
            protected $crud;
    
            public function __construct($app, $obj, $themes, $crud)
            {
                    $this->app = $app;
                    $this->obj = $obj;
                    $this->themes = $themes;
                    $this->crud = $crud;         
            }
            public function test($path='')
            {
                    $this->themes->head($path);
                    $this->themes->css($path);
                    $this->themes->admin_nav_header($path);
                    $this->themes->admin_sidebar($path);
                    $this->crud->dashboard_test();
                    $this->themes->footer($path);
            }
    
    
      
      
  6. Lalu buat file baru dengan nama Mainmodule.php kemudian isi seperti berikut
      
      <?php 
    class Mainmodule extends Dashboardadmin
    {
            protected $obj;
            protected $app;
            public function __construct($app, $obj)
            {
                    $this->obj=$obj;
                    $this->app=$app;
            }
    }
      
      
  7. Selanjutnya buat file dengan nama Dashboard.php pada folder load/admin isi dengan kode seperti berikut
    
      <?php 
    class Dashboardadmin 
    {
            public function dashboard_test()
            {
                    ?>
                            <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
          <div class="container-fluid">
            <div class="row mb-2">
              <div class="col-sm-6">
                <h1 class="m-0">Dashboard</h1>
              </div><!-- /.col -->
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
                  <li class="breadcrumb-item active">Dashboard v1</li>
                </ol>
              </div><!-- /.col -->
            </div><!-- /.row -->
          </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->
    
        <!-- Main content -->
        <section class="content">
          <div class="container-fluid">
            <!-- Small boxes (Stat box) -->
            <div class="row">
              <div class="col-lg-3 col-6">
                <!-- small box -->
                <div class="small-box bg-info">
                  <div class="inner">
                    <h3>150</h3>
    
                    <p>New Orders</p>
                  </div>
                  <div class="icon">
                    <i class="ion ion-bag"></i>
                  </div>
                  <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                </div>
              </div>
              <!-- ./col -->
              <div class="col-lg-3 col-6">
                <!-- small box -->
                <div class="small-box bg-success">
                  <div class="inner">
                    <h3>53<sup style="font-size: 20px">%</sup></h3>
    
                    <p>Bounce Rate</p>
                  </div>
                  <div class="icon">
                    <i class="ion ion-stats-bars"></i>
                  </div>
                  <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                </div>
              </div>
              <!-- ./col -->
              <div class="col-lg-3 col-6">
                <!-- small box -->
                <div class="small-box bg-warning">
                  <div class="inner">
                    <h3>44</h3>
    
                    <p>User Registrations</p>
                  </div>
                  <div class="icon">
                    <i class="ion ion-person-add"></i>
                  </div>
                  <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                </div>
              </div>
              <!-- ./col -->
              <div class="col-lg-3 col-6">
                <!-- small box -->
                <div class="small-box bg-danger">
                  <div class="inner">
                    <h3>65</h3>
    
                    <p>Unique Visitors</p>
                  </div>
                  <div class="icon">
                    <i class="ion ion-pie-graph"></i>
                  </div>
                  <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                </div>
              </div>
              <!-- ./col -->
            </div>
            <!-- /.row -->
            <!-- Main row -->
            <div class="row">
              <!-- Left col -->
              <section class="col-lg-7 connectedSortable">
                <!-- Custom tabs (Charts with tabs)-->
                <div class="card">
                  <div class="card-header">
                    <h3 class="card-title">
                      <i class="fas fa-chart-pie mr-1"></i>
                      Sales
                    </h3>
                    <div class="card-tools">
                      <ul class="nav nav-pills ml-auto">
                        <li class="nav-item">
                          <a class="nav-link active" href="#revenue-chart" data-toggle="tab">Area</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#sales-chart" data-toggle="tab">Donut</a>
                        </li>
                      </ul>
                    </div>
                  </div><!-- /.card-header -->
                  <div class="card-body">
                    <div class="tab-content p-0">
                      <!-- Morris chart - Sales -->
                      <div class="chart tab-pane active" id="revenue-chart"
                           style="position: relative; height: 300px;">
                          <canvas id="revenue-chart-canvas" height="300" style="height: 300px;"></canvas>
                       </div>
                      <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;">
                        <canvas id="sales-chart-canvas" height="300" style="height: 300px;"></canvas>
                      </div>
                    </div>
                  </div><!-- /.card-body -->
                </div>
                <!-- /.card -->
    
                <!-- DIRECT CHAT -->
                <div class="card direct-chat direct-chat-primary">
                  <div class="card-header">
                    <h3 class="card-title">Direct Chat</h3>
    
                    <div class="card-tools">
                      <span title="3 New Messages" class="badge badge-primary">3</span>
                      <button type="button" class="btn btn-tool" data-card-widget="collapse">
                        <i class="fas fa-minus"></i>
                      </button>
                      <button type="button" class="btn btn-tool" title="Contacts" data-widget="chat-pane-toggle">
                        <i class="fas fa-comments"></i>
                      </button>
                      <button type="button" class="btn btn-tool" data-card-widget="remove">
                        <i class="fas fa-times"></i>
                      </button>
                    </div>
                  </div>
                  <!-- /.card-header -->
                  <div class="card-body">
                    <!-- Conversations are loaded here -->
                    <div class="direct-chat-messages">
                      <!-- Message. Default to the left -->
                      <div class="direct-chat-msg">
                        <div class="direct-chat-infos clearfix">
                          <span class="direct-chat-name float-left">Alexander Pierce</span>
                          <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
                        </div>
                        <!-- /.direct-chat-infos -->
                        <img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image">
                        <!-- /.direct-chat-img -->
                        <div class="direct-chat-text">
                          Is this template really for free? That's unbelievable!
                        </div>
                        <!-- /.direct-chat-text -->
                      </div>
                      <!-- /.direct-chat-msg -->
    
                      <!-- Message to the right -->
                      <div class="direct-chat-msg right">
                        <div class="direct-chat-infos clearfix">
                          <span class="direct-chat-name float-right">Sarah Bullock</span>
                          <span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
                        </div>
                        <!-- /.direct-chat-infos -->
                        <img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image">
                        <!-- /.direct-chat-img -->
                        <div class="direct-chat-text">
                          You better believe it!
                        </div>
                        <!-- /.direct-chat-text -->
                      </div>
                      <!-- /.direct-chat-msg -->
    
                      <!-- Message. Default to the left -->
                      <div class="direct-chat-msg">
                        <div class="direct-chat-infos clearfix">
                          <span class="direct-chat-name float-left">Alexander Pierce</span>
                          <span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
                        </div>
                        <!-- /.direct-chat-infos -->
                        <img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image">
                        <!-- /.direct-chat-img -->
                        <div class="direct-chat-text">
                          Working with AdminLTE on a great new app! Wanna join?
                        </div>
                        <!-- /.direct-chat-text -->
                      </div>
                      <!-- /.direct-chat-msg -->
    
                      <!-- Message to the right -->
                      <div class="direct-chat-msg right">
                        <div class="direct-chat-infos clearfix">
                          <span class="direct-chat-name float-right">Sarah Bullock</span>
                          <span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
                        </div>
                        <!-- /.direct-chat-infos -->
                        <img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image">
                        <!-- /.direct-chat-img -->
                        <div class="direct-chat-text">
                          I would love to.
                        </div>
                        <!-- /.direct-chat-text -->
                      </div>
                      <!-- /.direct-chat-msg -->
    
                    </div>
                    <!--/.direct-chat-messages-->
    
                    <!-- Contacts are loaded here -->
                    <div class="direct-chat-contacts">
                      <ul class="contacts-list">
                        <li>
                          <a href="#">
                            <img class="contacts-list-img" src="dist/img/user1-128x128.jpg" alt="User Avatar">
    
                            <div class="contacts-list-info">
                              <span class="contacts-list-name">
                                Count Dracula
                                <small class="contacts-list-date float-right">2/28/2015</small>
                              </span>
                              <span class="contacts-list-msg">How have you been? I was...</span>
                            </div>
                            <!-- /.contacts-list-info -->
                          </a>
                        </li>
                        <!-- End Contact Item -->
                        <li>
                          <a href="#">
                            <img class="contacts-list-img" src="dist/img/user7-128x128.jpg" alt="User Avatar">
    
                            <div class="contacts-list-info">
                              <span class="contacts-list-name">
                                Sarah Doe
                                <small class="contacts-list-date float-right">2/23/2015</small>
                              </span>
                              <span class="contacts-list-msg">I will be waiting for...</span>
                            </div>
                            <!-- /.contacts-list-info -->
                          </a>
                        </li>
                        <!-- End Contact Item -->
                        <li>
                          <a href="#">
                            <img class="contacts-list-img" src="dist/img/user3-128x128.jpg" alt="User Avatar">
    
                            <div class="contacts-list-info">
                              <span class="contacts-list-name">
                                Nadia Jolie
                                <small class="contacts-list-date float-right">2/20/2015</small>
                              </span>
                              <span class="contacts-list-msg">I'll call you back at...</span>
                            </div>
                            <!-- /.contacts-list-info -->
                          </a>
                        </li>
                        <!-- End Contact Item -->
                        <li>
                          <a href="#">
                            <img class="contacts-list-img" src="dist/img/user5-128x128.jpg" alt="User Avatar">
    
                            <div class="contacts-list-info">
                              <span class="contacts-list-name">
                                Nora S. Vans
                                <small class="contacts-list-date float-right">2/10/2015</small>
                              </span>
                              <span class="contacts-list-msg">Where is your new...</span>
                            </div>
                            <!-- /.contacts-list-info -->
                          </a>
                        </li>
                        <!-- End Contact Item -->
                        <li>
                          <a href="#">
                            <img class="contacts-list-img" src="dist/img/user6-128x128.jpg" alt="User Avatar">
    
                            <div class="contacts-list-info">
                              <span class="contacts-list-name">
                                John K.
                                <small class="contacts-list-date float-right">1/27/2015</small>
                              </span>
                              <span class="contacts-list-msg">Can I take a look at...</span>
                            </div>
                            <!-- /.contacts-list-info -->
                          </a>
                        </li>
                        <!-- End Contact Item -->
                        <li>
                          <a href="#">
                            <img class="contacts-list-img" src="dist/img/user8-128x128.jpg" alt="User Avatar">
    
                            <div class="contacts-list-info">
                              <span class="contacts-list-name">
                                Kenneth M.
                                <small class="contacts-list-date float-right">1/4/2015</small>
                              </span>
                              <span class="contacts-list-msg">Never mind I found...</span>
                            </div>
                            <!-- /.contacts-list-info -->
                          </a>
                        </li>
                        <!-- End Contact Item -->
                      </ul>
                      <!-- /.contacts-list -->
                    </div>
                    <!-- /.direct-chat-pane -->
                  </div>
                  <!-- /.card-body -->
                  <div class="card-footer">
                    <form action="#" method="post">
                      <div class="input-group">
                        <input type="text" name="message" placeholder="Type Message ..." class="form-control">
                        <span class="input-group-append">
                          <button type="button" class="btn btn-primary">Send</button>
                        </span>
                      </div>
                    </form>
                  </div>
                  <!-- /.card-footer-->
                </div>
                <!--/.direct-chat -->
    
                <!-- TO DO List -->
                <div class="card">
                  <div class="card-header">
                    <h3 class="card-title">
                      <i class="ion ion-clipboard mr-1"></i>
                      To Do List
                    </h3>
    
                    <div class="card-tools">
                      <ul class="pagination pagination-sm">
                        <li class="page-item"><a href="#" class="page-link">&laquo;</a></li>
                        <li class="page-item"><a href="#" class="page-link">1</a></li>
                        <li class="page-item"><a href="#" class="page-link">2</a></li>
                        <li class="page-item"><a href="#" class="page-link">3</a></li>
                        <li class="page-item"><a href="#" class="page-link">&raquo;</a></li>
                      </ul>
                    </div>
                  </div>
                  <!-- /.card-header -->
                  <div class="card-body">
                    <ul class="todo-list" data-widget="todo-list">
                      <li>
                        <!-- drag handle -->
                        <span class="handle">
                          <i class="fas fa-ellipsis-v"></i>
                          <i class="fas fa-ellipsis-v"></i>
                        </span>
                        <!-- checkbox -->
                        <div  class="icheck-primary d-inline ml-2">
                          <input type="checkbox" value="" name="todo1" id="todoCheck1">
                          <label for="todoCheck1"></label>
                        </div>
                        <!-- todo text -->
                        <span class="text">Design a nice theme</span>
                        <!-- Emphasis label -->
                        <small class="badge badge-danger"><i class="far fa-clock"></i> 2 mins</small>
                        <!-- General tools such as edit or delete-->
                        <div class="tools">
                          <i class="fas fa-edit"></i>
                          <i class="fas fa-trash-o"></i>
                        </div>
                      </li>
                      <li>
                        <span class="handle">
                          <i class="fas fa-ellipsis-v"></i>
                          <i class="fas fa-ellipsis-v"></i>
                        </span>
                        <div  class="icheck-primary d-inline ml-2">
                          <input type="checkbox" value="" name="todo2" id="todoCheck2" checked>
                          <label for="todoCheck2"></label>
                        </div>
                        <span class="text">Make the theme responsive</span>
                        <small class="badge badge-info"><i class="far fa-clock"></i> 4 hours</small>
                        <div class="tools">
                          <i class="fas fa-edit"></i>
                          <i class="fas fa-trash-o"></i>
                        </div>
                      </li>
                      <li>
                        <span class="handle">
                          <i class="fas fa-ellipsis-v"></i>
                          <i class="fas fa-ellipsis-v"></i>
                        </span>
                        <div  class="icheck-primary d-inline ml-2">
                          <input type="checkbox" value="" name="todo3" id="todoCheck3">
                          <label for="todoCheck3"></label>
                        </div>
                        <span class="text">Let theme shine like a star</span>
                        <small class="badge badge-warning"><i class="far fa-clock"></i> 1 day</small>
                        <div class="tools">
                          <i class="fas fa-edit"></i>
                          <i class="fas fa-trash-o"></i>
                        </div>
                      </li>
                      <li>
                        <span class="handle">
                          <i class="fas fa-ellipsis-v"></i>
                          <i class="fas fa-ellipsis-v"></i>
                        </span>
                        <div  class="icheck-primary d-inline ml-2">
                          <input type="checkbox" value="" name="todo4" id="todoCheck4">
                          <label for="todoCheck4"></label>
                        </div>
                        <span class="text">Let theme shine like a star</span>
                        <small class="badge badge-success"><i class="far fa-clock"></i> 3 days</small>
                        <div class="tools">
                          <i class="fas fa-edit"></i>
                          <i class="fas fa-trash-o"></i>
                        </div>
                      </li>
                      <li>
                        <span class="handle">
                          <i class="fas fa-ellipsis-v"></i>
                          <i class="fas fa-ellipsis-v"></i>
                        </span>
                        <div  class="icheck-primary d-inline ml-2">
                          <input type="checkbox" value="" name="todo5" id="todoCheck5">
                          <label for="todoCheck5"></label>
                        </div>
                        <span class="text">Check your messages and notifications</span>
                        <small class="badge badge-primary"><i class="far fa-clock"></i> 1 week</small>
                        <div class="tools">
                          <i class="fas fa-edit"></i>
                          <i class="fas fa-trash-o"></i>
                        </div>
                      </li>
                      <li>
                        <span class="handle">
                          <i class="fas fa-ellipsis-v"></i>
                          <i class="fas fa-ellipsis-v"></i>
                        </span>
                        <div  class="icheck-primary d-inline ml-2">
                          <input type="checkbox" value="" name="todo6" id="todoCheck6">
                          <label for="todoCheck6"></label>
                        </div>
                        <span class="text">Let theme shine like a star</span>
                        <small class="badge badge-secondary"><i class="far fa-clock"></i> 1 month</small>
                        <div class="tools">
                          <i class="fas fa-edit"></i>
                          <i class="fas fa-trash-o"></i>
                        </div>
                      </li>
                    </ul>
                  </div>
                  <!-- /.card-body -->
                  <div class="card-footer clearfix">
                    <button type="button" class="btn btn-primary float-right"><i class="fas fa-plus"></i> Add item</button>
                  </div>
                </div>
                <!-- /.card -->
              </section>
              <!-- /.Left col -->
              <!-- right col (We are only adding the ID to make the widgets sortable)-->
              <section class="col-lg-5 connectedSortable">
    
                <!-- Map card -->
                <div class="card bg-gradient-primary">
                  <div class="card-header border-0">
                    <h3 class="card-title">
                      <i class="fas fa-map-marker-alt mr-1"></i>
                      Visitors
                    </h3>
                    <!-- card tools -->
                    <div class="card-tools">
                      <button type="button" class="btn btn-primary btn-sm daterange" title="Date range">
                        <i class="far fa-calendar-alt"></i>
                      </button>
                      <button type="button" class="btn btn-primary btn-sm" data-card-widget="collapse" title="Collapse">
                        <i class="fas fa-minus"></i>
                      </button>
                    </div>
                    <!-- /.card-tools -->
                  </div>
                  <div class="card-body">
                    <div id="world-map" style="height: 250px; width: 100%;"></div>
                  </div>
                  <!-- /.card-body-->
                  <div class="card-footer bg-transparent">
                    <div class="row">
                      <div class="col-4 text-center">
                        <div id="sparkline-1"></div>
                        <div class="text-white">Visitors</div>
                      </div>
                      <!-- ./col -->
                      <div class="col-4 text-center">
                        <div id="sparkline-2"></div>
                        <div class="text-white">Online</div>
                      </div>
                      <!-- ./col -->
                      <div class="col-4 text-center">
                        <div id="sparkline-3"></div>
                        <div class="text-white">Sales</div>
                      </div>
                      <!-- ./col -->
                    </div>
                    <!-- /.row -->
                  </div>
                </div>
                <!-- /.card -->
    
                <!-- solid sales graph -->
                <div class="card bg-gradient-info">
                  <div class="card-header border-0">
                    <h3 class="card-title">
                      <i class="fas fa-th mr-1"></i>
                      Sales Graph
                    </h3>
    
                    <div class="card-tools">
                      <button type="button" class="btn bg-info btn-sm" data-card-widget="collapse">
                        <i class="fas fa-minus"></i>
                      </button>
                      <button type="button" class="btn bg-info btn-sm" data-card-widget="remove">
                        <i class="fas fa-times"></i>
                      </button>
                    </div>
                  </div>
                  <div class="card-body">
                    <canvas class="chart" id="line-chart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                  </div>
                  <!-- /.card-body -->
                  <div class="card-footer bg-transparent">
                    <div class="row">
                      <div class="col-4 text-center">
                        <input type="text" class="knob" data-readonly="true" value="20" data-width="60" data-height="60"
                               data-fgColor="#39CCCC">
    
                        <div class="text-white">Mail-Orders</div>
                      </div>
                      <!-- ./col -->
                      <div class="col-4 text-center">
                        <input type="text" class="knob" data-readonly="true" value="50" data-width="60" data-height="60"
                               data-fgColor="#39CCCC">
    
                        <div class="text-white">Online</div>
                      </div>
                      <!-- ./col -->
                      <div class="col-4 text-center">
                        <input type="text" class="knob" data-readonly="true" value="30" data-width="60" data-height="60"
                               data-fgColor="#39CCCC">
    
                        <div class="text-white">In-Store</div>
                      </div>
                      <!-- ./col -->
                    </div>
                    <!-- /.row -->
                  </div>
                  <!-- /.card-footer -->
                </div>
                <!-- /.card -->
    
                <!-- Calendar -->
                <div class="card bg-gradient-success">
                  <div class="card-header border-0">
    
                    <h3 class="card-title">
                      <i class="far fa-calendar-alt"></i>
                      Calendar
                    </h3>
                    <!-- tools card -->
                    <div class="card-tools">
                      <!-- button with a dropdown -->
                      <div class="btn-group">
                        <button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown" data-offset="-52">
                          <i class="fas fa-bars"></i>
                        </button>
                        <div class="dropdown-menu" role="menu">
                          <a href="#" class="dropdown-item">Add new event</a>
                          <a href="#" class="dropdown-item">Clear events</a>
                          <div class="dropdown-divider"></div>
                          <a href="#" class="dropdown-item">View calendar</a>
                        </div>
                      </div>
                      <button type="button" class="btn btn-success btn-sm" data-card-widget="collapse">
                        <i class="fas fa-minus"></i>
                      </button>
                      <button type="button" class="btn btn-success btn-sm" data-card-widget="remove">
                        <i class="fas fa-times"></i>
                      </button>
                    </div>
                    <!-- /. tools -->
                  </div>
                  <!-- /.card-header -->
                  <div class="card-body pt-0">
                    <!--The calendar -->
                    <div id="calendar" style="width: 100%"></div>
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card -->
              </section>
              <!-- right col -->
            </div>
            <!-- /.row (main row) -->
          </div><!-- /.container-fluid -->
        </section>
        <!-- /.content -->
      </div>
                    <?php 
            }
    }
      
  8. Terakhir buka file index.php lalau panggil fungsi test seperti berikut :
      
      <?php
    require "database/Settings.php";
    require "app/core/Splautoload.php";
    $module->test();
    ?>
    
    
      
      




0 Response to "Membuat Aplikasi Klinik #02 - Installasi Template"

Post a Comment

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin

nagabet76slot gacorslot online1213141516Slot Online Menghadirkan Pengalaman Digital Yang Didukung Pemrosesan Data Secara Real TimeMahjongways Menganalisis Pola Visual Dan Dinamika Simbol Berdasarkan Pemrosesan Data DigitalMahjongways Mengembangkan Dinamika Permainan Melalui Pengelolaan Data Dan Elemen Visual TerintegrasiAnalisis Komputasi Modern Membantu Memetakan Dinamika Sistem Digital Berdasarkan Data ObservasiMember Baru Mendorong Dinamika Komunitas Digital Menuju Pengalaman Yang Lebih Aktif Dan Menarikslot onlinemahjongwayasarsitektur layananpemrosesan data adaptifmember baruSlot Online Terbaru Menghadirkan AnalisisScatter Hitam Dianalisis Melalui PemetaanPola Scatter Hitam Membentuk Distribusi Visual Yang Dapat Dikaji Menggunakan Komputasi AdaptifArsitektur Teknologi TerdistribusiTeknologi Visualisasi DataMahjongways Mengembangkan Interaksi Visual Melalui Integrasi Simbol Digital Yang DinamisAnalisis Mahjongways Memetakan Dinamika Visual Dan Respons Antarmuka Berbasis DataScatter Hitam Dianalisis Melalui Pemetaan Struktur Simbol Digital Berbasis Komputasi AdaptifAlgoritma Scatter Hitam Membantu Mengidentifikasi Dinamika Pola Melalui Analisis Data ObservasiPg Soft Mengembangkan Sistem Rendering Adaptif Untuk Mendukung Visualisasi Digital ModernTeknologi Pg Soft Mengoptimalkan Pemrosesan Grafis Melalui Arsitektur Rendering TerintegrasiTeknologi Pemodelan Data Membantu Menganalisis Dinamika Informasi Pada Ekosistem Digital ModernArsitektur Komputasi Terdistribusi Meningkatkan Keandalan Pengelolaan Data Pada Platform DigitalTeknologi Kecerdasan Komputasional Mendorong Pengembangan Sistem Digital Yang Lebih AdaptifPemrosesan Data Modern Membantu Memetakan Pola Informasi Melalui Pendekatan Komputasi TerukurTeknologi Integrasi Data Mempermudah Sinkronisasi Informasi Dalam Lingkungan Digital TerpaduVisualisasi Komputasi Modern Membantu Menginterpretasikan Perubahan Pola Pada Sistem Digital KompleksTeknologi Otomasi Data Meningkatkan Efisiensi Pengelolaan Informasi Pada Infrastruktur DigitalModel Komputasi Adaptif Mendukung Pengembangan Teknologi Digital Melalui Analisis Data BerkelanjutanPengembangan Pg Soft Mengintegrasikan Teknologi Rendering Dengan Interaksi Visual Yang ResponsifPg Soft Menerapkan Komputasi Visual Untuk Meningkatkan Efisiensi Pengolahan Elemen DigitalEksplorasi Scatter Hitam Memetakan Distribusi Simbol Melalui Model Analitik Digital TerintegrasiPola Scatter Hitam Dikaji Menggunakan Pendekatan Visualisasi Data Dan Pemodelan StatistikMahjongways Menghadirkan Pendekatan Visual Interaktif Melalui Pemrosesan Simbol Yang AdaptifEksplorasi Mahjongways Mengungkap Perubahan Pola Visual Dalam Lingkungan Digital Terintegrasimahjong online menghadirkan nuansa klasik dalam budaya internetsisi visual mahjong online jadi bahan ulas media digitalmahjong online dan pergeseran selera pengguna gamemengenal identitas grafis di balik mahjong onlinemahjong online terlihat dari sudut pandang desain interaktifkomunitas internet membahas popularitas mahjong onlinemahjong online menggabungkan simbol lama dan gaya barucatatan media menelusuri fenomena mahjong onlinemahjong online dalam perbincangan industri hiburan digitalketika mahjong online menjadi objek observasi budaya internetpg soft menghadirkan identitas visual bernuansa asiamengenal pg soft dari sisi desain game digitalindustri game online mencermati karya pg softpg soft dan perkembangan animasi dalam permainan mobiledi balik simbol pg soft ada konsep desain yang khasmedia digital menyoroti karakter permainan pg softperjalanan pg soft dalam persaingan industri gamefitur interaktif menjadi bahasan dalam game pg softpg soft dalam sorotan tren hiburan berbasis mobilemembaca popularitas pg soft melalui perspektif desainmahjong wins membawa identitas visual yang berbeda ke layar digitalsimbol klasik menemukan konteks baru melalui mahjong winsperjalanan mahjong wins terlihat dari perubahan desain game modernmahjong wins dalam catatan perkembangan hiburan berbasis teknologigaya visual menjadi salah satu ciri yang menarik dari mahjong winsketika konsep tradisional bertemu format digital mahjong winsmahjong wins dan pergeseran selera pada game bernuansa klasikperspektif baru muncul dari tampilan interaktif mahjong winsruang game digital mengenal karakter berbeda dari mahjong winsmahjong wins mengikuti perubahan wajah permainan di era teknologiai kasino online dan perdebatan teknologi prediksi digitalkecerdasan buatan menelaah perubahan industri kasino onlinekasino online dalam sorotan otomatisasi dan analisis datamengenal batas penggunaan ai pada kasino digitalteknologi ai membuka diskusi baru seputar game kasinoantara algoritma dan peluang dalam kasino onlineai kasino digital dari perspektif etika dan keamananmembaca fenomena kasino online melalui analisis komputasibenarkah ai bisa memprediksi hasil kasino onlinemasa depan kasino digital di tengah perkembangan aitren mahjong bergerak dari simbol klasik ke visual modernmahjong digital dan munculnya gaya ilustrasi barumengapa tema mahjong kembali menarik perhatian publiktren mahjong dalam catatan komunitas hiburan internetdesain mobile memberi arah baru pada tema mahjongmahjong dan pertemuan budaya tradisional dengan teknologimembaca popularitas mahjong lewat perubahan estetika gamemedia digital mengamati pergeseran tren permainan mahjongsimbol bersejarah menjadi inspirasi tren mahjong modernfenomena mahjong dan kreativitas dalam budaya digitalmahjong ways dan sweet bonanza dalam tren game digitalfortune tiger dan gates of olympus jadi bahasan komunitas gamemahjong ways 2 dan starlight princess dari sisi visualfortune ox dan big bass bonanza dalam ulasan game onlinemahjong wins dan wild west gold mengusung tema berbedafortune rabbit dan sugar rush dalam dunia game mobilemahjong treasure dan sweet bonanza menarik perhatian pengamatfortune mouse dan gates of gatot kaca dengan identitas unikmahjong cash dan the dog house dalam perbandingan desainfortune dragon dan joker jewels dari perspektif animasiqris pg soft dan arah baru transaksi game digitalmengenal peran qris pada pembayaran layanan gamepg soft dalam pembahasan sistem pembayaran elektroniktransaksi digital pg soft dilihat dari sisi keamanantren qris dan perubahan ekosistem game onlinesebelum memindai qris pahami verifikasi pembayaranpembayaran qris dan identitas layanan game pg softcatatan digital mengenai qris dalam industri gamememahami batas keamanan transaksi qris pg softqris dan pg soft dalam lanskap hiburan interaktifmahjong online dan pembayaran qris dalam sorotan digitalmembahas qris di tengah tren mahjong onlinesistem pembayaran elektronik pada layanan mahjong onlineqris mahjong online dan pentingnya konfirmasi transaksiperubahan metode bayar dalam ekosistem mahjong digitalmenelusuri kaitan mahjong online dengan teknologi qriskeamanan transaksi qris saat mengakses layanan gamemahjong online dilihat dari perspektif pembayaran modernapa yang perlu diketahui soal qris mahjong onlinepembayaran qris dan literasi digital pengguna mahjongalgoritma mahjong dan logika di balik game digitalmembaca peran sistem acak dalam permainan mahjongmahjong digital dalam tinjauan peluang dan probabilitasmitos pola algoritma mahjong yang perlu dipahamicara kerja rng dalam permainan mahjong onlineanalisis data bukan jaminan hasil game mahjongalgoritma game dan batas prediksi hasil permainanmemahami statistik di balik sistem mahjong digitalpola visual mahjong dan perbedaan dengan peluangteknologi permainan mahjong dari sisi logika komputasiai mahjong online dan perkembangan teknologi interaktifkecerdasan buatan menjadi topik baru dalam game mahjongmahjong online dalam analisis teknologi ai terkinimenelaah penggunaan ai pada permainan berbasis digitalai dan perubahan pengalaman pengguna mahjong onlinebisakah ai memprediksi hasil mahjong onlinemahjong digital dan batas kemampuan analisis kecerdasan buatanteknologi ai mengubah cara game online dikajimengenal data dan pembelajaran mesin dalam game mahjongai mahjong online antara analisis data dan mitos prediksi