From cb3514dd5b3d03722445acf8ac81f87eed0c0866 Mon Sep 17 00:00:00 2001
From: Ahmad Fauzan Amirul Isnain <ahmad.fauzan71@ui.ac.id>
Date: Fri, 9 Oct 2020 23:41:57 +0700
Subject: [PATCH] [#119] QA: Fix Bugs Detected By Sonarqube

---
 .../administration/base_administrasi.html     |  2 +-
 .../administration/base_administrasi2.html    |  3 +-
 .../administration/data_statistik.html        | 10 +--
 administration/templates/detail_admin.html    | 65 ++++++++++++-------
 .../templates/detail_kontri_admin.html        | 65 ++++++++++++-------
 administration/templates/detail_verif.html    |  8 +--
 administration/templates/kelola_admin.html    |  4 +-
 .../templates/kelola_kontributor.html         | 20 +++---
 administration/templates/laporan_materi.html  |  4 +-
 .../templates/registrasi_admin.html           |  4 +-
 .../templates/setting_verifikasi.html         | 22 +++----
 administration/templates/settings.html        | 12 ++--
 app/templates/app/base_admin.html             |  6 +-
 app/templates/app/base_dashboard.html         |  3 +-
 app/templates/app/base_profile.html           |  4 +-
 app/templates/app/detail_materi.html          |  2 +-
 app/templates/app/includes/navigation.html    |  2 +-
 app/templates/app/katalog_materi.html         | 56 ++++++++--------
 app/templates/comments.html                   |  2 +-
 app/templates/dashboard.html                  | 20 +++---
 app/templates/profil-admin.html               | 65 ++++++++++++-------
 app/templates/profil.html                     | 65 ++++++++++++-------
 app/templates/sukses_admin.html               |  2 +-
 app/templates/sukses_kontri.html              |  2 +-
 24 files changed, 257 insertions(+), 191 deletions(-)

diff --git a/administration/templates/administration/base_administrasi.html b/administration/templates/administration/base_administrasi.html
index 4e8acf2..e92e027 100644
--- a/administration/templates/administration/base_administrasi.html
+++ b/administration/templates/administration/base_administrasi.html
@@ -68,7 +68,7 @@
 
     <!-- Scroll to Top Button-->
     <a class="scroll-to-top rounded" href="#page-top">
-        <i class="fas fa-angle-up"></i>
+        <em class="fas fa-angle-up"></em>
     </a>
 
 
diff --git a/administration/templates/administration/base_administrasi2.html b/administration/templates/administration/base_administrasi2.html
index cf48a01..a731025 100644
--- a/administration/templates/administration/base_administrasi2.html
+++ b/administration/templates/administration/base_administrasi2.html
@@ -4,6 +4,7 @@
 <html lang="en">
 <!-- Static assets -->
 <head>
+    <title>Digipus</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -67,7 +68,7 @@
 
     <!-- Scroll to Top Button-->
     <a class="scroll-to-top rounded" href="#page-top">
-        <i class="fas fa-angle-up"></i>
+        <em class="fas fa-angle-up"></em>
     </a>
 
 
diff --git a/administration/templates/administration/data_statistik.html b/administration/templates/administration/data_statistik.html
index 2aad8e5..17df725 100644
--- a/administration/templates/administration/data_statistik.html
+++ b/administration/templates/administration/data_statistik.html
@@ -28,7 +28,7 @@
                         <div class="h5 mb-0 font-weight-bold text-gray-800">{{chart_data.total.0}}</div>
                     </div>
                     <div class="col-auto">
-                        <i class="fas fa-eye" aria-hidden="true"></i>
+                        <em class="fas fa-eye" aria-hidden="true"></em>
                     </div>
                 </div>
             </div>
@@ -45,7 +45,7 @@
                         <div class="h5 mb-0 font-weight-bold text-gray-800">{{chart_data.total.1}}</div>
                     </div>
                     <div class="col-auto">
-                        <i class="fas fa-download" aria-hidden="true"></i>
+                        <em class="fas fa-download" aria-hidden="true"></em>
                     </div>
                 </div>
             </div>
@@ -62,7 +62,7 @@
                         <div class="h5 mb-0 font-weight-bold text-gray-800">{{chart_data.total.2}}</div>
                     </div>
                     <div class="col-auto">
-                        <i class="fas fa-thumbs-up" aria-hidden="true"></i>
+                        <em class="fas fa-thumbs-up" aria-hidden="true"></em>
                     </div>
                 </div>
             </div>
@@ -79,7 +79,7 @@
                         <div class="h5 mb-0 font-weight-bold text-gray-800">{{chart_data.total.3}}</div>
                     </div>
                     <div class="col-auto">
-                        <i class="fas fa-comments fa-2x text-gray-300"></i>
+                        <em class="fas fa-comments fa-2x text-gray-300"></em>
                     </div>
                 </div>
             </div>
@@ -100,7 +100,7 @@
                 <!-- <div class="dropdown no-arrow">
                     <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
                         aria-haspopup="true" aria-expanded="false">
-                        <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
+                        <em class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></em>
                     </a>
                     <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
                         aria-labelledby="dropdownMenuLink">
diff --git a/administration/templates/detail_admin.html b/administration/templates/detail_admin.html
index 2f86f70..5105c77 100644
--- a/administration/templates/detail_admin.html
+++ b/administration/templates/detail_admin.html
@@ -19,31 +19,46 @@
       <h4>{{ user.email }}</h4>
       <h4>{{ user.biography }}</h4>
       <div class="profile-margin"></div>
-      <table>
-          <tr>
-              <td class="profile-data">Instansi</td>
-              <td>{{ user.instansi }}</td>
-          </tr>
-         
-              <td class="profile-data">LinkedIn</td>
-              <td><a href="https://linkedin.com">{{ user.linkedin }}</a></td>
-          </tr>
-          
-          <tr>
-              <td class="profile-data">Facebook</td>
-              <td><a href="https://facebook.com">{{ user.facebook }}</a></td>
-          </tr>
-         
-          <tr>
-              <td class="profile-data">Twitter</td>
-              <td><a href="https://twitter.com">{{ user.twitter }}</a></td>
-          </tr>
-
-          <tr>
-              <td class="profile-data">Instagram</td>
-              <td><a href="https://instagram.com">{{ user.instagram }}</a></td>
-          </tr>
-      </table>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            instansi
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            {{user.instansi}}
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            LinkedIn
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            <a href="https://linkedin.com">{{ user.linkedin }}</a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            Facebook
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">  
+            <a href="https://facebook.com">{{ user.facebook }}</a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            Twitter
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            <a href="https://twitter.com">{{ user.twitter }}</a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            Instagram
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            <a href="https://instagram.com">{{ user.instagram }}</a>
+        </div>
+      </div>
       <a class="btn btn-primary btn-admin" href="/administration/kelola-admin/">Kembali ke Kelola Admin</a>
   </div>
 </div>
diff --git a/administration/templates/detail_kontri_admin.html b/administration/templates/detail_kontri_admin.html
index fb42513..ef4ff27 100644
--- a/administration/templates/detail_kontri_admin.html
+++ b/administration/templates/detail_kontri_admin.html
@@ -18,31 +18,46 @@
       <h4>{{ user.email }}</h4>
       <h4>{{ user.biography }}</h4>
       <div class="profile-margin"></div>
-      <table>
-          <tr>
-              <td class="profile-data">Instansi</td>
-              <td>{{ user.instansi }}</td>
-          </tr>
-         
-              <td class="profile-data">LinkedIn</td>
-              <td><a href="https://linkedin.com">{{ user.linkedin }}</a></td>
-          </tr>
-          
-          <tr>
-              <td class="profile-data">Facebook</td>
-              <td><a href="https://facebook.com">{{ user.facebook }}</a></td>
-          </tr>
-         
-          <tr>
-              <td class="profile-data">Twitter</td>
-              <td><a href="https://twitter.com">{{ user.twitter }}</a></td>
-          </tr>
-
-          <tr>
-              <td class="profile-data">Instagram</td>
-              <td><a href="https://instagram.com">{{ user.instagram }}</a></td>
-          </tr>
-      </table>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            instansi
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            {{user.instansi}}
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            LinkedIn
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            <a href="https://linkedin.com">{{ user.linkedin }}</a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            Facebook
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">  
+            <a href="https://facebook.com">{{ user.facebook }}</a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            Twitter
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            <a href="https://twitter.com">{{ user.twitter }}</a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            Instagram
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            <a href="https://instagram.com">{{ user.instagram }}</a>
+        </div>
+      </div>
       <a class="btn btn-primary btn-admin" href="/administration/kelola-kontributor/">Kembali ke Kelola Kontributor</a>
   </div>
 </div>
diff --git a/administration/templates/detail_verif.html b/administration/templates/detail_verif.html
index 18b1751..a5755d3 100644
--- a/administration/templates/detail_verif.html
+++ b/administration/templates/detail_verif.html
@@ -8,7 +8,7 @@ Pratinjau Materi
 
     <!-- Sidebar Toggle (Topbar) -->
     <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
-        <i class="fa fa-bars"></i>
+        <em class="fa fa-bars"></em>
     </button>
 
     <div class="sidebar-brand-text mx-3">Pratinjau Materi</div>
@@ -53,7 +53,7 @@ Pratinjau Materi
                 <div class="info-wrapper">
                     <div class="info" id="1">
                         <dt class="col col-4">
-                            <p class="info-name">Verifikatur</p>
+                            <p class="info-name"><strong>Verifikatur</strong></p>
                         </dt>
                         <dd>
                             <p class="info-content">{{verification_report.user.name}}</p>
@@ -61,7 +61,7 @@ Pratinjau Materi
                     </div>
                     <div class="info" id="1">
                         <dt class="col col-4">
-                            <p class="info-name">Waktu Verifikasi</p>
+                            <p class="info-name"><strong>Waktu Verifikasi</strong></p>
                         </dt>
                         <dd>
                             <p class="info-content">{{verification_report.timestamp}}</p>
@@ -69,7 +69,7 @@ Pratinjau Materi
                     </div>
                     <div class="info" id="1">
                         <dt class="col col-4">
-                            <p class="info-name">Status Materi</p>
+                            <p class="info-name"><strong>Status Materi</strong></p>
                         </dt>
                         <dd>
                             <p class="info-content">{{verification_report.status}}</p>
diff --git a/administration/templates/kelola_admin.html b/administration/templates/kelola_admin.html
index 1af6884..dd020c9 100644
--- a/administration/templates/kelola_admin.html
+++ b/administration/templates/kelola_admin.html
@@ -15,7 +15,7 @@
   <div class="card-header py-3">
     <div class="d-flex">
       <div class="mr-auto p-2">
-        <h6 class="m-0 font-weight-bold text-primary">Tabel Daftar Admin</h6>
+        <h6 id="table-description" class="m-0 font-weight-bold text-primary">Tabel Daftar Admin</h6>
       </div>
       <div class="p-2">
         <a href="/administration/kelola-admin/tambah/" class="accept-button button-decoration button-header">Buat Akun Baru</a>
@@ -24,7 +24,7 @@
   </div>
   <div class="card-body">
     <div class="table-responsive">
-      <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
+      <table aria-describedby="table-description" class="table table-bordered" id="dataTable">
         <thead>
           <tr>
             <th scope="col">Nama</th>
diff --git a/administration/templates/kelola_kontributor.html b/administration/templates/kelola_kontributor.html
index 0fdfe52..21b94fc 100644
--- a/administration/templates/kelola_kontributor.html
+++ b/administration/templates/kelola_kontributor.html
@@ -13,25 +13,25 @@
 <!-- DataTales Example -->
 <div class="card shadow mb-4">
   <div class="card-header py-3">
-    <h6 class="m-0 font-weight-bold text-primary">Tabel Daftar Kontributor</h6>
+    <h6 id="table-description" class="m-0 font-weight-bold text-primary">Tabel Daftar Kontributor</h6>
   </div>
   <div class="card-body">
     <div class="table-responsive">
-      <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
+      <table aria-describedby="table-description" class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
         <thead>
           <tr>
-            <th>Nama</th>
-            <th>NIK</th>
-            <th>Instansi</th>
-            <th>Detail</th>
+            <th scope="col">Nama</th>
+            <th scope="col">NIK</th>
+            <th scope="col">Instansi</th>
+            <th scope="col">Detail</th>
           </tr>
         </thead>
         <tfoot>
           <tr>
-            <th>Nama</th>
-            <th>NIK</th>
-            <th>Instansi</th>
-            <th>Detail</th>
+            <th scope="col">Nama</th>
+            <th scope="col">NIK</th>
+            <th scope="col">Instansi</th>
+            <th scope="col">Detail</th>
           </tr>
           </tr>
         </tfoot>
diff --git a/administration/templates/laporan_materi.html b/administration/templates/laporan_materi.html
index 5b92f17..33e4898 100644
--- a/administration/templates/laporan_materi.html
+++ b/administration/templates/laporan_materi.html
@@ -76,11 +76,11 @@
 </div>
 <div class="card shadow mb-4">
   <div class="card-header py-3">
-    <h6 class="m-0 font-weight-bold text-primary" id="titleTabelPending">Materi yang Diblokir</h6>
+    <h6 id="table-description" class="m-0 font-weight-bold text-primary" id="titleTabelPending">Materi yang Diblokir</h6>
   </div>
   <div class="card-body">
     <div class="table-responsive">
-      <table class="table table-bordered" id="dataTablePending" aria-describedby="titleTabelPending">
+      <table aria-describedby="table-description" class="table table-bordered" id="dataTablePending" aria-describedby="titleTabelPending">
         {% if not materi_diblokir %}
           Tidak ada materi yang diblokir
         {% else %}
diff --git a/administration/templates/registrasi_admin.html b/administration/templates/registrasi_admin.html
index 7d3a015..8da8fc6 100644
--- a/administration/templates/registrasi_admin.html
+++ b/administration/templates/registrasi_admin.html
@@ -103,7 +103,7 @@
 
           <!-- Sidebar Toggle (Topbar) -->
           <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
-            <i class="fa fa-bars"></i>
+            <em class="fa fa-bars"></em>
           </button>
 
           <div class="sidebar-brand-text mx-3">Diskominfo Kota Depok</div>
@@ -257,7 +257,7 @@
 
   <!-- Scroll to Top Button-->
   <a class="scroll-to-top rounded" href="#page-top">
-    <i class="fas fa-angle-up"></i>
+    <em class="fas fa-angle-up"></em>
   </a>
 
   <!-- Bootstrap core JavaScript-->
diff --git a/administration/templates/setting_verifikasi.html b/administration/templates/setting_verifikasi.html
index f21254e..aa5fbdf 100644
--- a/administration/templates/setting_verifikasi.html
+++ b/administration/templates/setting_verifikasi.html
@@ -112,7 +112,7 @@
 
           <!-- Sidebar Toggle (Topbar) -->
           <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
-            <i class="fa fa-bars"></i>
+            <em class="fa fa-bars"></em>
           </button>
 
           <div class="sidebar-brand-text mx-3">Diskominfo Kota Depok</div>
@@ -172,7 +172,7 @@
                 <label>Deskripsi &nbsp;:</label>{{ form.description }}<br>
                 <br>
                 <div class="row">
-                  <button class="primary_btn save" style="border-radius:20px;" type="submit"><i class="far fa-save"></i>
+                  <button class="primary_btn save" style="border-radius:20px;" type="submit"><em class="far fa-save"></em>
                     Simpan</button>
                 </div>
               </form>
@@ -182,24 +182,24 @@
           <!-- DataTales Example -->
           <div class="card shadow mb-4">
             <div class="card-header py-3">
-              <h6 class="m-0 font-weight-bold text-primary">Point Verifikasi Materi</h6>
+              <h6 id="table-description" class="m-0 font-weight-bold text-primary">Point Verifikasi Materi</h6>
             </div>
             <div class="card-body">
               <div class="table-responsive">
-                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
+                <table aria-describedby="table-description" class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                   <thead>
                     <tr>
-                      <th>Judul Verifikasi</th>
-                      <th>Deskripsi</th>
-                      <th></th>
+                      <th scope="col">Judul Verifikasi</th>
+                      <th scope="col">Deskripsi</th>
+                      <th scope="col"></th>
                     </tr>
                   </thead>
                   <tbody>
                     {% for item in verification_settings %}
                     <tr>
-                      <th>{{item.title}}</th>
-                      <th>{{item.description}}</th>
-                      <th> </th>
+                      <th scope="col">{{item.title}}</th>
+                      <th scope="col">{{item.description}}</th>
+                      <th scope="col"> </th>
                     </tr>
                     {% endfor %}
                   </tbody>
@@ -232,7 +232,7 @@
 
   <!-- Scroll to Top Button-->
   <a class="scroll-to-top rounded" href="#page-top">
-    <i class="fas fa-angle-up"></i>
+    <em class="fas fa-angle-up"></em>
   </a>
 
   <!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
diff --git a/administration/templates/settings.html b/administration/templates/settings.html
index 6381a4e..3f43715 100644
--- a/administration/templates/settings.html
+++ b/administration/templates/settings.html
@@ -281,9 +281,9 @@
 										<tbody>
 											{% for item in items %}
 											<tr>
-												<th>{{item.title}} {{item.name}}</th>
-												<th>{{item.description}}</th>
-												<th class="verif-buttons">
+												<th scope="col">{{item.title}} {{item.name}}</th>
+												<th scope="col">{{item.description}}</th>
+												<th scope="col" class="verif-buttons">
 													{% if item.name is None %}
 													<a
 														href="/administration/setting/verification/{{ item.id }}/edit"
@@ -377,9 +377,9 @@
 										<tbody>
 											{% for item in items_archived %}
 											<tr>
-												<th>{{item.title}} {{item.name}}</th>
-												<th>{{item.description}}</th>
-												<th>{{item.archived_by.name}}</th>
+												<th scope="col">{{item.title}} {{item.name}}</th>
+												<th scope="col">{{item.description}}</th>
+												<th scope="col">{{item.archived_by.name}}</th>
 											</tr>
 											{% endfor %}
 										</tbody>
diff --git a/app/templates/app/base_admin.html b/app/templates/app/base_admin.html
index d8b9316..7346518 100644
--- a/app/templates/app/base_admin.html
+++ b/app/templates/app/base_admin.html
@@ -4,7 +4,7 @@
 <html lang="en">
 
 <head>
-
+  <title>Digipus</title>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -75,7 +75,7 @@
         <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
             <!-- Sidebar Toggle (Topbar) -->
             <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
-              <i class="fa fa-bars"></i>
+              <em class="fa fa-bars"></em>
             </button>
             <div class="sidebar-brand-text mx-3">Diskominfo Kota Depok</div>
             <!-- Topbar Navbar -->
@@ -139,7 +139,7 @@
 
   <!-- Scroll to Top Button-->
   <a class="scroll-to-top rounded" href="#page-top">
-    <i class="fas fa-angle-up"></i>
+    <em class="fas fa-angle-up"></em>
   </a>
 
   <!-- Bootstrap core JavaScript-->
diff --git a/app/templates/app/base_dashboard.html b/app/templates/app/base_dashboard.html
index 0d5b034..b828193 100644
--- a/app/templates/app/base_dashboard.html
+++ b/app/templates/app/base_dashboard.html
@@ -4,6 +4,7 @@
 <html lang="en">
 
 <head>
+    <title>Digipus</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -64,7 +65,7 @@
 
     <!-- Scroll to Top Button-->
     <a class="scroll-to-top rounded" href="#page-top">
-        <i class="fas fa-angle-up"></i>
+        <em class="fas fa-angle-up"></em>
     </a>
 
 </body>
diff --git a/app/templates/app/base_profile.html b/app/templates/app/base_profile.html
index e21cb34..6dc2764 100644
--- a/app/templates/app/base_profile.html
+++ b/app/templates/app/base_profile.html
@@ -4,7 +4,7 @@
 <html lang="en">
 
 <head>
-
+    <title>Digipus</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -66,7 +66,7 @@
 
     <!-- Scroll to Top Button-->
     <a class="scroll-to-top rounded" href="#page-top">
-        <i class="fas fa-angle-up"></i>
+        <em class="fas fa-angle-up"></em>
     </a>
 
 </body>
diff --git a/app/templates/app/detail_materi.html b/app/templates/app/detail_materi.html
index e15f5f9..302f652 100644
--- a/app/templates/app/detail_materi.html
+++ b/app/templates/app/detail_materi.html
@@ -284,7 +284,7 @@
                     {% else %}
                     <span style="background-color: #{{comment.profile}}" class="profile p-1 bd-highligh"></span>
                     {% endif %}
-                    <p class="p-1 bd-highligh m-0"><b>{{comment.user.name}}</b></p>
+                    <p class="p-1 bd-highligh m-0"><strong>{{comment.user.name}}</strong></p>
                     <p class="p-1 bd-highligh m-0">•</p>
                     <p class="timestamp p-1 bd-highligh m-0 text-muted">
                         {{ comment.timestamp|naturaltime }}
diff --git a/app/templates/app/includes/navigation.html b/app/templates/app/includes/navigation.html
index 73360a9..37988b7 100644
--- a/app/templates/app/includes/navigation.html
+++ b/app/templates/app/includes/navigation.html
@@ -2,7 +2,7 @@
 
     <!-- Sidebar Toggle (Topbar) -->
     <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
-        <i class="fa fa-bars"></i>
+        <em class="fa fa-bars"></em>
     </button>
 
     <div class="sidebar-brand-text mx-3">Diskominfo Kota Depok</div>
diff --git a/app/templates/app/katalog_materi.html b/app/templates/app/katalog_materi.html
index 7881668..0cceeb7 100644
--- a/app/templates/app/katalog_materi.html
+++ b/app/templates/app/katalog_materi.html
@@ -94,11 +94,13 @@
                             <div id="collapseOne" class="collapse" aria-labelledby="headingOne"
                                 data-parent="#accordionExample">
                                 <div class="card-body">
-                                    {% for itemKategori in kategori_list %}
-                                    <li>
-                                        <a href="?kategori={{itemKategori.pk}}">{{itemKategori.name}}</a>
-                                    </li>
-                                    {% endfor %}
+                                    <ul>
+                                        {% for itemKategori in kategori_list %}
+                                        <li>
+                                            <a href="?kategori={{itemKategori.pk}}">{{itemKategori.name}}</a>
+                                        </li>
+                                        {% endfor %}
+                                    </ul>
                                 </div>
                             </div>
                         </div>
@@ -115,27 +117,29 @@
                             <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                                 data-parent="#accordionExample">
                                 <div class="card-body">
-                                    <li>
-                                        <a href="?sort=terbaru">terbaru</a>
-                                    </li>
-                                    <li>
-                                        <a href="?sort=terlama">terlama</a>
-                                    </li>
-                                    <li>
-                                        <a href="?sort=terpopuler">terpopuler</a>
-                                    </li>
-                                    <li>
-                                        <a href="?sort=judul">judul</a>
-                                    </li>
-                                    <li>
-                                        <a href="?sort=penulis">penulis</a>
-                                    </li>
-                                    <li>
-                                        <a href="?sort=pengunggah">pengunggah</a>
-                                    </li>
-                                    <li>
-                                        <a href="?sort=jumlah_unduh">jumlah unduh</a>
-                                    </li>
+                                    <ul>
+                                        <li>
+                                            <a href="?sort=terbaru">terbaru</a>
+                                        </li>
+                                        <li>
+                                            <a href="?sort=terlama">terlama</a>
+                                        </li>
+                                        <li>
+                                            <a href="?sort=terpopuler">terpopuler</a>
+                                        </li>
+                                        <li>
+                                            <a href="?sort=judul">judul</a>
+                                        </li>
+                                        <li>
+                                            <a href="?sort=penulis">penulis</a>
+                                        </li>
+                                        <li>
+                                            <a href="?sort=pengunggah">pengunggah</a>
+                                        </li>
+                                        <li>
+                                            <a href="?sort=jumlah_unduh">jumlah unduh</a>
+                                        </li>
+                                    </ul>
                                 </div>
                             </div>
                         </div>
diff --git a/app/templates/comments.html b/app/templates/comments.html
index 96f4a9c..6a1180d 100644
--- a/app/templates/comments.html
+++ b/app/templates/comments.html
@@ -48,7 +48,7 @@
 				<span style="background-color: #{{comment.profile}}" class="profile p-1 bd-highlight"></span>
 				{% endif %}
 				<p class="p-1 bd-highligh m-0">
-					<b>{{comment.user.name}}</b>
+					<strong>{{comment.user.name}}</strong>
 				</p>
 				<p class="p-1 bd-highligh m-0">•</p>
 				<p class="timestamp p-1 bd-highligh m-0">
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index 95ec1ee..86fa3fd 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -13,25 +13,25 @@
 <!-- DataTales Example -->
 <div class="card shadow mb-4">
   <div class="card-header py-3">
-    <h6 class="m-0 font-weight-bold text-primary">Tabel Riwayat Unggah</h6>
+    <h6 id="table-description" class="m-0 font-weight-bold text-primary">Tabel Riwayat Unggah</h6>
   </div>
   <div class="card-body">
     <div class="table-responsive">
-      <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
+      <table aria-describedby="table-description" class="table table-bordered" id="dataTable">
         <thead>
           <tr>
-            <th>Judul Materi</th>
-            <th>Pembuat Materi</th>
-            <th>Status</th>
-            <th>Detail</th>
+            <th scope="col">Judul Materi</th>
+            <th scope="col">Pembuat Materi</th>
+            <th scope="col">Status</th>
+            <th scope="col">Detail</th>
           </tr>
         </thead>
         <tfoot>
           <tr>
-            <th>Judul Materi</th>
-            <th>Pembuat Materi</th>
-            <th>Status</th>
-            <th>Detail</th>
+            <th scope="col">Judul Materi</th>
+            <th scope="col">Pembuat Materi</th>
+            <th scope="col">Status</th>
+            <th scope="col">Detail</th>
           </tr>
         </tfoot>
         <tbody>
diff --git a/app/templates/profil-admin.html b/app/templates/profil-admin.html
index 58ad438..a2a566f 100644
--- a/app/templates/profil-admin.html
+++ b/app/templates/profil-admin.html
@@ -18,31 +18,46 @@
       <h4>{{ user.email }}</h4>
       <h4>{{ user.biography }}</h4>
       <div class="profile-margin"></div>
-      <table>
-          <tr>
-              <td class="profile-data">Instansi</td>
-              <td>{{ user.instansi }}</td>
-          </tr>
-         
-              <td class="profile-data">LinkedIn</td>
-              <td><a href="https://linkedin.com">{{ user.linkedin }}</a></td>
-          </tr>
-          
-          <tr>
-              <td class="profile-data">Facebook</td>
-              <td><a href="https://facebook.com">{{ user.facebook }}</a></td>
-          </tr>
-         
-          <tr>
-              <td class="profile-data">Twitter</td>
-              <td><a href="https://twitter.com">{{ user.twitter }}</a></td>
-          </tr>
-
-          <tr>
-              <td class="profile-data">Instagram</td>
-              <td><a href="https://instagram.com">{{ user.instagram }}</a></td>
-          </tr>
-      </table>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            instansi
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            {{user.instansi}}
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            LinkedIn
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            <a href="https://linkedin.com">{{ user.linkedin }}</a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            Facebook
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">  
+            <a href="https://facebook.com">{{ user.facebook }}</a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            Twitter
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            <a href="https://twitter.com">{{ user.twitter }}</a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            Instagram
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            <a href="https://instagram.com">{{ user.instagram }}</a>
+        </div>
+      </div>
   </div>
 </div>
 {% endblock %}
\ No newline at end of file
diff --git a/app/templates/profil.html b/app/templates/profil.html
index 13ad540..3145ab4 100644
--- a/app/templates/profil.html
+++ b/app/templates/profil.html
@@ -22,31 +22,46 @@
       <h4>{{ user.email }}</h4>
       <h4>{{ user.biography }}</h4>
       <div class="profile-margin"></div>
-      <table>
-          <tr>
-              <td class="profile-data">Instansi</td>
-              <td>{{ user.instansi }}</td>
-          </tr>
-         
-              <td class="profile-data">LinkedIn</td>
-              <td><a href="https://linkedin.com">{{ user.linkedin }}</a></td>
-          </tr>
-          
-          <tr>
-              <td class="profile-data">Facebook</td>
-              <td><a href="https://facebook.com">{{ user.facebook }}</a></td>
-          </tr>
-         
-          <tr>
-              <td class="profile-data">Twitter</td>
-              <td><a href="https://twitter.com">{{ user.twitter }}</a></td>
-          </tr>
-
-          <tr>
-              <td class="profile-data">Instagram</td>
-              <td><a href="https://instagram.com">{{ user.instagram }}</a></td>
-          </tr>
-      </table>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            instansi
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            {{user.instansi}}
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            LinkedIn
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            <a href="https://linkedin.com">{{ user.linkedin }}</a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            Facebook
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">  
+            <a href="https://facebook.com">{{ user.facebook }}</a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            Twitter
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            <a href="https://twitter.com">{{ user.twitter }}</a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            Instagram
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            <a href="https://instagram.com">{{ user.instagram }}</a>
+        </div>
+      </div>
   </div>
 </div>
 {% endblock %}
\ No newline at end of file
diff --git a/app/templates/sukses_admin.html b/app/templates/sukses_admin.html
index 313d93c..40692fd 100644
--- a/app/templates/sukses_admin.html
+++ b/app/templates/sukses_admin.html
@@ -73,7 +73,7 @@
 
   <!-- Scroll to Top Button-->
   <a class="scroll-to-top rounded" href="#page-top">
-    <i class="fas fa-angle-up"></i>
+    <em class="fas fa-angle-up"></em>
   </a>
 
   <!-- Bootstrap core JavaScript-->
diff --git a/app/templates/sukses_kontri.html b/app/templates/sukses_kontri.html
index af4ee3b..0aaf4a3 100644
--- a/app/templates/sukses_kontri.html
+++ b/app/templates/sukses_kontri.html
@@ -79,7 +79,7 @@
 
   <!-- Scroll to Top Button-->
   <a class="scroll-to-top rounded" href="#page-top">
-    <i class="fas fa-angle-up"></i>
+    <em class="fas fa-angle-up"></em>
   </a>
 
   <!-- Bootstrap core JavaScript-->
-- 
GitLab