Mengganti Template Administrator CMS Lokomedia ~ Achmad Sulthoni BLC Telkom Klaten

Assalamualaikum Wr. Wb.

Hari ini saya mencoba mengganti template administrator CMS lokomedia.

Tutorial :

1. Download dulu template administrator nya kemudian di ekstrak dan hasil extrakan nya di copy di letakan di folder lokomet di dalam folder adminweb saya sudah download dengan nama Lumino Admin Bootstrap Template .

2. Buka folder adminweb kemudian klik file media.php buka dengan text editor atau sublime text editor.

3. Buka folder lumino Admin Bootstrap Template yang di dalam folder adminweb kemudian klik file index.html buka dengan text editor atau sublime text editor.

4. folder js dan css yang ada di dalam folder lumino Admin Bootstrap Template di ganti namanya menjadi css2 dan js2 kemudian di copy di letakan di folder adminweb.

5. Isi file media.php di tambahkan script dari index.html contoh seperti gambar di bawah ini.

a. Tambahkan Script ini di atas di file media.php

b. Tambahkan Script ini di bawah di file media.php

6. Bila kurang jelas ini script awal sampai akhir di file media.php.

<?php
session_start();
// Apabila user belum login
if (empty($_SESSION['namauser']) AND empty($_SESSION['passuser'])){
echo "<link href=\"css/style_login.css\" rel=\"stylesheet\" type=\"text/css\" />
        <div id=\"login\"><h1 class=\"fail\">Untuk mengakses modul, Anda harus login dulu.</h1>
        <p class=\"fail\"><a href=\"index.php\">LOGIN</a></p></div>";
}
// Apabila user sudah login dengan benar, maka terbentuklah session
else{
?>
<!DOCTYPE html>
<html>
<head>

<link href="css/style.css" rel="stylesheet" type="text/css" />

<link href="dataTables/media/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="dataTables/media/js/jquery.js"></script>
<script src="dataTables/media/js/jquery.dataTables.js"></script>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lumino - Dashboard</title>

<link href="css2/bootstrap.min.css" rel="stylesheet">
<link href="css2/datepicker3.css" rel="stylesheet">
<link href="css2/styles.css" rel="stylesheet">


<script src="js2/lumino.glyphs.js"></script>



</head>
<body>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sidebar-collapse">
          <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="#">Admin lokomedia</a>
        <ul class="user-menu">
          <li class="dropdown pull-right">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><svg class="glyph stroked male-user"><use xlink:href="#stroked-male-user"></use></svg> User <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">

              <li><a href="logout.php"><svg class="glyph stroked cancel"><use xlink:href="#stroked-cancel"></use></svg> Logout</a></li>
            </ul>
          </li>
        </ul>
      </div>

    </div>
</nav>

    <div id="wrapper">

      <div id="header">
        <a href="media.php?module=home"> </a>
      </div>
<div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">
    <form role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
    </form>
<ul>
          <li><a href="?module=beranda">» Beranda</a></li>
              <?php include "menu.php"; ?>
          <li><a href="logout.php">» Keluar</a></li>
        </ul>
</div>
    <div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
    <?php include "content.php"; ?>
</div>



<script src="js2/jquery-1.11.1.min.js"></script>
<script src="js2/bootstrap.min.js"></script>
<script src="js2/chart.min.js"></script>
<script src="js2/chart-data.js"></script>
<script src="js2/easypiechart.js"></script>
<script src="js2/easypiechart-data.js"></script>
<script src="js2/bootstrap-datepicker.js"></script>
<script>
    $('#calendar').datepicker({
    });

    !function ($) {
        $(document).on("click","ul.nav li.parent > a > span.icon", function(){
            $(this).find('em:first').toggleClass("glyphicon-minus");
        });
        $(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
    }(window.jQuery);

    $(window).on('resize', function () {
      if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')
    })
    $(window).on('resize', function () {
      if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')
    })
</script>
</body>

</html>
      <?php } ?>

Bila hasilnya seperti ini :