Contoh Admin Template Bootsrap

Admin Template Bootsrap

  1. Buka dan download admin template pada link berikut: https://startbootstrap.com/template/sb-admin. Ekstract file yang sudah didownload, dan klik folder template tersebut

  2. Usahakan penamaan tidak menggunakan spasi, jika lebih dari satu kata bisa menggunakan huruf kapital pada tiap kata atau tanda penghubung underscore (_), hypen (-). Misalnya: AdminTemplate, admin_template, admin-template. 
  3. Jika menggunakan web server seperti aplikasi xampp, letakkan folder tersebut ke DocumentRoot, biasanya di C:\xampp\htdocs.
  4. Untuk akses menggunakan server seperti xampp, buka browser dan ketikkan http://localhost/admin_template.
  5. Copy kan folder CSS, JS dan Assets dari hasil download ke folder yang sudah dibuat sebelumnya.

  6. Buka editor text seperti Notepad, Wordpad, Notepad++, Sublime Text atau VS Code. Direkomendasikan menggunakan VS Code. 
  7. Klik File -> Open Folder, lalu pilih folder admin_template yang dibuat sebelumnya (C:\xampp\htdocs\admin_template). Buat file index.html dengan klik kanan -> new file dibawah folder admin_template atau klik icon new file disamping folder admin_template.

  8. Pada file index.html di VS Code, ketikkan tanda seru (!) lalu enter, otomatis sintaks HTML akan dibuatkan oleh system. Edit title pada baris 7 dan ganti kata “Document” dengan kata “Membuat Admin Template”.
  9. Tepat diatas title (baris 7) sisipkan kode utk CSS & JS Eksternal sebagai berikut.
  10. Tambahkan juga JS eksternal di akhir body.
  11. Lihat file index.html pada admin template hasil download, lalu copy sebagian kode seperti berikut. Tambahkan komentar awal header dan akhir header.
  12. <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Membuat Admin Template</title>
        <link href="css/styles.css" rel="stylesheet" />
        <script src="js/all.js"></script>
      </head>
      <body>
        <nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
        <!-- Awal Header -->
        <a class="navbar-brand ps-3" href="index.html">Aplikasi Data Siswa</a>
        <!-- Sidebar Toggle -->
        <i class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0" id="sidebarToggle" href="#!"></i></button>
        <!-- Navbar-->
        <ul class="navbar-nav ms-auto me-0 me-md-3 my-2 my-md-0">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a>
            <ul class="dropdown-menu- dropdown-menu-end" aria-labelledby="navbardropdown">
              <li><a class="dropdown-item" href="#!">Profile</a></li>
              <li><a class="dropdown-item" href="#!">Logout</a></li>
            </ul>
          </li>
        </ul>
        <!-- Akhir Header-->
      </nav>
        <script src="js/scripts.js"></script>
        <script src="js/datatables-simple-demo.js"></script>
        <script src="js/bootstrap.bundle.min.js"></script>
        <script src="js/simple-datatables.js"></script>
        <script src="js/Chart.min.js"></script>
        <script src="assets/demo/chart-area-demo.js"></script>
        <script src="assets/demo/chart-bar-demo.js"></script>
      </body>
    </html>
  13. Masukkan Kode konten berikut.
  14. <!DOCTYPE html>

    <html lang="en">

        <head>

            <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" />

            <meta name="description" content="" />

            <meta name="author" content="" />

            <title>Membuat Admin Template</title>

            <link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" />

            <link href="css/styles.css" rel="stylesheet" />

            <script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>

        </head>

        <body class="sb-nav-fixed">

            <nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">

                <!-- Navbar Brand-->

                <a class="navbar-brand ps-3" href="index.html">Aplikasi Data Siswa</a>

                <!-- Sidebar Toggle-->

                <button class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0" id="sidebarToggle" href="#!"><i class="fas fa-bars"></i></button>

                <!-- Navbar Search-->

                <form class="d-none d-md-inline-block form-inline ms-auto me-0 me-md-3 my-2 my-md-0">

                   

                </form>

                <!-- Navbar-->

                <ul class="navbar-nav ms-auto ms-md-0 me-3 me-lg-4">

                    <li class="nav-item dropdown">

                        <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a>

                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">

                            <li><a class="dropdown-item" href="#!">Profile</a></li>

                            <li><hr class="dropdown-divider" /></li>

                            <li><a class="dropdown-item" href="#!">Logout</a></li>

                        </ul>

                    </li>

                </ul>

            </nav>

            <div id="layoutSidenav">

                <div id="layoutSidenav_nav">

                    <nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">

                        <div class="sb-sidenav-menu">

                            <div class="nav">

                                <div class="sb-sidenav-menu-heading">MENU UTAMA</div>

                                <a class="nav-link" href="index.html">

                                    <div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>

                                    Dashboard

                                </a>

                                <a class="nav-link" href="siswa.html">

                                    <div class="sb-nav-link-icon"><i class="fas fa-paste"></i></div>

                                    Data siswa

                                </a>

                    </nav>

            <!-- Akhir Menu Sidebar -->

                </div>

                <div id="layoutSidenav_content">

                    <main>

                        <div class="container-fluid px-4">

                            <h1 class="mt-4">Data Siswa</h1>

                            <div class="card mb-4">

                            </div>

                            <div class="card mb-4">

                                <div class="card-header">

                                    <a type ="button" class="btn btn-primary" href"">Tambah Siswa</a>

                                </div>

                                <div class="card-body">

                                    <table id="datatablesSimple">

                                        <thead>

                                            <tr>

                                              <th>No</th>

                                              <th>NIS</th>

                                              <th>Nama Siswa</th>

                                              <th>Jenis Kelamin</th>

                                              <th>Alamat</th>

                                              <th>Aksi</th>

                                            </tr>

                                            </thead>

                                            <tbody>

                                            <tr>

                                              <td>1</td>

                                              <td>8001</td>

                                              <td>Andi Wijaya</td>

                                              <td>Laki-laki</td>

                                              <td>Wonogiri</td>

                                              <td>Edit | Hapus</td>

                                            </tr>

                                            <tr>

                                              <td>2</td>

                                              <td>8002</td>

                                              <td>Anita Larasati</td>

                                              <td>Perempuan</td>

                                              <td>Solo</td>

                                              <td>Edit | Hapus</td>

                                            </tr>

                                           

                                            </tbody>

                                            </table>

                                </div>

                            </div>

                        </div>

                    </main>

                    <footer class="py-4 bg-light mt-auto">

                        <div class="container-fluid px-4">

                            <div class="d-flex align-items-center justify-content-between small">

                                <div class="text-muted">Copyright &copy; Your Website 2022</div>

                                <div>

                                    <a href="#">Privacy Policy</a>

                                    &middot;

                                    <a href="#">Terms &amp; Conditions</a>

                                </div>

                            </div>

                        </div>

                    </footer>

                </div>

            </div>

            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

            <script src="js/scripts.js"></script>

            <script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" crossorigin="anonymous"></script>

            <script src="js/datatables-simple-demo.js"></script>

        </body>

    </html>
  15. Lalu tampilannya akan menjadi seperti berikut. 

Komentar

Posting Komentar

Postingan Populer