Tuorial Membuat Admin Web Template Responsive Dengan Mudah
Pada tutorial kali ini saya akan membagikan bagai mana cara membuat web template yang sederhana dengan bootstrap. disini saya langsung menggunakan koneksi dari database sistem login yang di gunakan dan menampilkan data admin di halaman view web admin.
Hal pertama yang di lakukan adalah teman-teman harus mempunyai web template halaman login. di sini saya menggunakan template halaman login Dail UI jika teman-teman ingin mempunyai template yang sama seperti contoh ini bisa di download disini contoh tampilan halaman login seperti pada gambar di bawah ini
Jika teman-teman sudah siapkan semuanya, langkah selanjutnya yang di lakukan adalah extract file Dail IU di Data xmapp - htdoc - nama file (nama template). Disini file simpanan saya ada di data E. Contohnya seperti di bawah ini
Dan hasil tampilan saat di jalankan di browser akan terlihat seperti pada gambar di bawah ini. Catatan: Untuk menjalankan diharapkan teman-teman untuk menggaktifkan XAMPP terlebih dahulu
Proses selanjutnya mengubah file index.html di dalam Folder Dail UI menjadi index.php. alhasil akan seperti pada gambar di bawah ini.
Jika sudak selesai, buka file index.php dengan notepad++ dan lengkapi coding program. seperti ini. Coding program index.php lengkap.
Jika sudak selesai, buka file index.php dengan notepad++ dan lengkapi coding program. seperti ini. Coding program index.php lengkap.
- <?php
- session_start();
- if(!isset($_SESSION['username'])){
- header("location:form_login.php");
- }
- require_once 'inc/config.php';
- ?>
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <title>Title</title>
- <!-- Style.css -->
- <link href="css/bootstrap.min.css" rel="stylesheet">
- <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
- <!-- Include all compiled plugins (below), or include individual files as needed -->
- <script src="js/bootstrap.min.js"></script>
- <link rel="stylesheet" type="text/css" media="screen, tv, projection" href="css/html.css" />
- <link rel="stylesheet" type="text/css" media="screen, tv, projection" href="css/layout.css" />
- <style type="text/css">
- h1 {
- color: #666666;
- }
- </style>
- <script type="text/javascript">
- function askUser() {
- return window.confirm("Yakin ingin menghapus record ini?");
- }
- </script>
- <script type="text/javascript" src="js/validjs.js"></script>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- </head>
- <body onLoad="peta_awal()">
- <!-- Full site width container -->
- <div class="width100">
- <!-- #header: holds main image, menu and top actions bar -->
- <div id="header" class="floatLeft width100">
- <div class="floatLeft width100 rightBorder">
- <div id="title">
- <h1> </h1>
- <p> </p>
- </div>
- </div>
- </div>
- <!-- end #header -->
- <!-- #content: holds site content -->
- <div id="content">
- <nav class="navbar navbar-inverse">
- <div class="container-fluid">
- <div class="navbar-header">
- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="index.php?page=pengelola_view">Menu Data View Admin</a>
- </div>
- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
- <ul class="nav navbar-nav">
- <ul class="nav navbar-nav navbar-right">
- <li><a href="pengelola_logout.php">Menu Keluar</a></li>
- </ul>
- </div>
- </div>
- </nav>
- <span id="subMenu"><!-- end right column, 25% width -->
- <!-- Left column, 75% width -->
- </span>
- <div class=" floatLeft width75"> <span id="subMenu">
- <!--table pengolahan data nanti disini-->
- <?php
- /* kode untuk meload halaman yang berbeda*/
- if (isset($_GET['page'])) {
- $page = $_GET['page'] . ".php";
- include ($page);
- } else {
- }
- ?>
- </span> </div>
- <!-- end left column, 75% width -->
- </div>
- Belajar membuat halaman login bootstrap dengan koneksi php myadmin
- <!-- end #content -->
- <!-- #footer: holds submenu and copyright info -->
- <div id="footer" class="floatRight width100">
- <p>
- <center>copyright @olbers_let 2015</center>
- </p>
- </div>
- <!-- end #footer -->
- </div>
- <!-- end full site width container -->
- </body>
- </html>
- <?
- /*
- }else{
- header("location:form_login.php");
- }
- */
- ?>
Posting Komentar
Tinggalkan komentar anda untuk setiap post yang mungkin bagi anda sangat bermanfaat.