Intro Admin

Kali ini kita akan mencoba membuat halaman untuk admin di Seme Framework 4. Mari kita lihat contoh tampilan admin yang akan kita buat di bawah ini.

Setup Admin URL

Sebelum memulai pastikan untuk memeriksa pengaturan URL Rahasia untuk admin. Ini bisa ditemukan pada file app/config/development.php di variable $admin_secret_url. Nilai default untuk ini adalah admin.

Penyesuaian konfigurasi

Kita akan coba ganti nilai dari $admin_secret_url. Nilai default untuk ini adalah adminxx.

Controller

Seme framework memiliki default controller yang bernama home.php dengan nama kelas yang sama yaitu Home. Pertama, buka file yang terletak di app/controller/admin/home.php. Apabila tidak ada file atau direktori tersebut, buatlah terlebih dahulu.

x
–
+
<?php
class Home extends \SENE_Controller
{
  public function __construct()
  {
    parent::__construct();
  }
  public function index()
  {
    echo 'Admin Hello World!';
  }
}

Setelah itu, jalankan XAMPP dan buka http://localhost/seme_framework/adminxx melalui google chrome atau firefox.

Jika tampilannya sudah sesuai seperti yang ada digambar, berarti pengaturan admin sudah benar. Kemudian kembalikan lagi pengaturan nilai menjadi $admin_secret_url = "admin";.

Membuat Tampilan Admin

Pada kali ini kita akan membuat tampilan untuk admin beserta temanya. Tapi sebelum kesana, kita akan membuat tema tampilan untuk admin terlebih dahulu. Pertama-tama kita akan setup untuk script.json dan theme.json sebagai syarat utama pembuatan tema tampilan. Kemudian setelah itu kita akan memisahkan halaman template HTML yang utuh, menjadi beberapa layout tampilan dan bagian / component tampilan. Kemudian terakhir kita akan membuat sample page untuk tampilan admin.

Tutorial ini menggunakan admin theme dari cenah.co.id sebagai library CSS dan JS-nya.

Berikut ini adalah gambaran struktur file yang akan kita buat untuk membuat tema dan tampilan di admin:

x
–
+
app/
├── controller/
│   └── admin/
│       └── home.php
└── view/
    ├── admin/
    │   ├── home/
    │   │   ├── home.php
    │   │   └── home_bottom.php
    │   ├── theme.json
    │   ├── script.json
    │   └── partials/
    │       ├── col-1.php
    │       ├── col-2-left.php
    │       ├── head.php
    │       ├── header.php
    │       ├── global_message.php
    │       ├── navbar.php
    │       ├── sidebar.php
    │       ├── sidebar_alt.php
    │       ├── foot.php
    │       └── footer.php
    └── front/
        └── ....

Periksa direktori app/controller/admin/ apabila belum ada, silakan buat direktori tersebut.

Periksa direktori app/view/admin/ apabila belum ada, silakan buat direktori tersebut.

Periksa direktori app/view/admin/page/ apabila belum ada, silakan buat direktori tersebut.

Periksa direktori app/view/admin/page/partials/ apabila belum ada, silakan buat direktori tersebut.

Pembuatan File script.json & theme.json

File script.json digunakan untuk mendefinisikan file JavaScript (JS) apa saja yang akan digunakan oleh tema. Buka file yang terletak di app/view/admin/script.json. File ini akan eksekusi pada bagian akhir sebelum tutup BODY pada html. Apabila belum ada, silakan buat file tersebut dan paste-kan isinya dari kode dibawah ini.

x
–
+
{
  "script": [
    {
      "src": "https://skin-cenah.b-cdn.net/js/vendor/jquery.min.js"
    },
    {
      "src": "https://skin-cenah.b-cdn.net/js/vendor/bootstrap.min.js"
    },
    {
      "src": "https://skin-cenah.b-cdn.net/js/plugins.js?v=0.0.2"
    },
    {
      "src": "https://skin-cenah.b-cdn.net/js/app.js"
    }
  ]
}

Kemudian setelah itu kita akan membuat File theme.json digunakan untuk mendefinisikan file CSS apa saja yang akan digunakan oleh tema. Buka file yang terletak di app/view/admin/theme.json. File ini akan eksekusi pada bagian HEAD html. Apabila belum ada, silakan buat file tersebut dan paste-kan isinya dari kode dibawah ini.

x
–
+
{
    "link": [
        {
            "rel": "stylesheet",
            "href": "https://skin-cenah.b-cdn.net/css/bootstrap.min.css"
        },
        {
            "rel": "stylesheet",
            "href": "https://skin-cenah.b-cdn.net/css/plugins.css"
        },
        {
            "rel": "stylesheet",
            "href": "https://skin-cenah.b-cdn.net/css/main.css"
        },
        {
            "rel": "stylesheet",
            "href": "https://skin-cenah.b-cdn.net/css/themes.css"
        },
        {
            "rel": "stylesheet",
            "href": "https://skin-cenah.b-cdn.net/css/themes/erplite.css"
        }
    ]
}

Pelajari selengkapnya tentang script.json .

Membuat HTML wrapper atau HTML layout

Untuk layout HTML utama pada admin, kita akan membuat 2 jenis yaitu 1 kolom dan 2 kolom dengan menu disamping kiri. Sekarang kita akan membuat untuk 1 kolom menu dulu di file app/view/admin/page/col-1.php. Kemudian copy paste-kan isinya dari kode dibawah ini.

x
–
+
<!DOCTYPE html>
<html class="no-js" lang="en">
	<?php $this->getThemeElement("page/partials/head",$__forward); ?>
	<body>
		<!-- Main Container -->
		<?php $this->getThemeContent(); ?>
		<!-- Main Container End -->
		<!-- jQuery, Bootstrap.js, jQuery plugins and Custom JS code -->
		<?php $this->getJsFooter(); ?>
		<!-- Load and execute javascript code used only in this page -->
		<script>
		public base_url = '<?=base_url_admin()?>';
		public Login = function(){
			return {
				init: function(){
				}
			}
		}();
			$(document).ready(function(e){
				<?php $this->getJsReady(); ?>
			});
			<?php $this->getJsContent(); ?>
		</script>
	</body>
</html>

Setelah itu kita akan membuat layout 2 kolom dengan menu di samping kiri pada file app/view/admin/page/col-2-left.php. Jika belum ada file-nya, buatlah file tersebut kemudian copy paste-kan isinya dari kode dibawah ini.

x
–
+
<!DOCTYPE html>
<html class="no-js" lang="en">
	<?php $this->getThemeElement("page/partials/head",$__forward); ?>
	<body>
		<!-- Page Wrapper -->
		<div id="page-wrapper" class="page-loading">
			<!-- Preloader -->
			<div class="preloader themed-background">
				<h1 class="push-top-bottom text-light text-center" ><strong><?=$this->config->semevar->app_name;?></strong><br><small>Loading...</small></h1>
				<div class="inner">
					<h3 class="text-light visible-lt-ie10"><strong>Loading..</strong></h3>
					<div class="preloader-spinner hidden-lt-ie10"></div>
				</div>
			</div>
			<!-- END Preloader -->
			<div id="page-container" class="sidebar-mini sidebar-visible-lg-mini">
				<!-- Alternative Sidebar -->
				<?php $this->getThemeElement("page/partials/sidebar_alt",$__forward); ?>
				<!-- END Alternative Sidebar -->
				<!-- Main Sidebar -->
				<?php $this->getThemeElement("page/partials/sidebar",$__forward); ?>
				<!-- END Main Sidebar -->
				<!-- Main Container -->
				<div id="main-container">
					<!-- Header -->
					<?php $this->getThemeElement("page/partials/header",$__forward); ?>
					<!-- END Header -->
					<!-- Main Container -->
					<!-- Global Message -->
					<?php $this->getThemeElement("page/partials/global_message",$__forward); ?>
					<!-- Global Message -->
					<?php $this->getThemeContent(); ?>
					<!-- Main Container End -->
					<!-- Footer -->
					<?php $this->getThemeElement("page/partials/footer",$__forward); ?>
					<!-- End Footer -->
				</div>
				<!-- End Main Container -->
			</div>
			<!-- End Page Container -->
		</div>
		<!-- End Page Wrapper -->
		<!-- Foot -->
		<?php $this->getThemeElement("page/partials/foot",$__forward); ?>
		<!-- End Foot -->
		<div id="modal-preloader" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-dialog slideInDown animated">
				<div class="modal-content" style="background-color: #000;color: #fff;">
					<!-- Modal Header -->
					<div class="modal-header text-center" style="border: none;">
						<h2 class="modal-title"><i class="fa fa-spin fa-refresh"></i> Loading...</h2>
					</div>
					<!-- END Modal Header -->
				</div>
			</div>
		</div>
		<!-- jQuery, Bootstrap.js, jQuery plugins and Custom JS code -->
		<?php $this->getJsFooter(); ?>
		<!-- Load and execute javascript code used only in this page -->
		<script>
			public from_user_id = '';
			public from_user_nama = '';
			public to_user_id = '';
			public to_user_nama = '';
			public chat_active = 1;
			public last_pesan_id = 0;
			public iterator = 1;
			public base_url = '<?=base_url_admin()?>';
			$(document).ready(function(e){
				<?php $this->getJsReady(); ?>
			});
			<?php $this->getJsContent(); ?>
		</script>
	</body>
</html>

Pemisahan bagian / component HTML

Pada kali ini, bagian HTML akan lebih banyak dipisahkan dari pada bagian di Front. Bagian yang akan dipisahkan antara lain:

  • head.php, untuk HTML head
  • header.php, untuk menu dan isi HTML yang ditempatkan pada header
  • global_message.php, untuk menyimpan komponen error yuang ditampilkan pada seluruh komponen halaman
  • navbar.php, ini digunakan untuk menyimpan konten menu navigation bar
  • sidebar.php, ini digunakan untuk menyimpan konten menu pada menu samping kiri
  • sidebar_alt.php, ini digunakan untuk menyimpan konten menu pada menu samping kanan (alternatif)
  • foot.php, ini digunakan untuk menyimpan komponen navigation tambahan seperti back to top
  • footer.php, ini digunakan untuk menyimpan informasi pada bagian akhir (bawah) halaman

Pertama-tama kita akan memisahakna bagian HEAD dari HTML yang akan disimpan pada file ini app/view/admin/page/partials/head.php. Apabila belum ada, silakan buat file tersebut dan copy paste-kan isinya dari kode dibawah ini.

x
–
+
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title><?=$this->getTitle()?></title>
    <meta name="description" content="<?=$this->getDescription()?>">
    <meta name="keyword" content="<?=$this->getKeyword()?>"/>
    <meta name="author" content="<?=$this->getAuthor()?>">
    <meta name="robots" content="<?=$this->getRobots()?>" />
    <!-- Icons -->
    <!-- The following icons can be replaced with your own, they are used by desktop and mobile browsers -->
    <link rel="shortcut icon" href="<?=$this->getIcon()?>" />
    <!-- END Icons -->
    <!-- Stylesheets -->
    <!-- END Stylesheets -->
    <?php $this->getAdditionalBefore()?>
    <?php $this->getAdditional()?>
    <?php $this->getAdditionalAfter()?>
    <!-- Modernizr (browser feature detection library) -->
    <script src="https://skin.cenah.co.id/js/vendor/modernizr.min.js"></script>
</head>

Kemudian sekarang kita akan memisahkan bagian untuk komponen header app/view/admin/page/partials/header.php. Silakasn Copy-Paste kode dibawah ini.

x
–
+
<?php
	$admin_foto = '';
	if(isset($sess->admin->foto))$admin_foto = $sess->admin->foto;
	if(empty($admin_foto)) $admin_foto = 'media/user-default.png';
	$admin_foto = $this->cdn_url($admin_foto);
?>
<header class="navbar navbar-default">
	<!-- Left Header Navigation -->
	<ul class="nav navbar-nav-custom">
		<!-- Main Sidebar Toggle Button -->
		<li>
			<a href="javascript:void(0)" onclick="App.sidebar('toggle-sidebar');this.blur();">
				<i class="fa fa-bars fa-fw"></i>
			</a>
		</li>
		<!-- END Main Sidebar Toggle Button -->
		<!-- Template Options -->
		<!-- Change Options functionality can be found in js/app.js - templateOptions() -->
		<li class="dropdown" style="display:none;">
			<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
				<i class="gi gi-settings"></i>
			</a>
			<ul class="dropdown-menu dropdown-custom dropdown-options">
				<li class="dropdown-header text-center">Header Style</li>
				<li>
					<div class="btn-group btn-group-justified btn-group-sm">
						<a href="javascript:void(0)" class="btn btn-primary" id="options-header-default">Light</a>
						<a href="javascript:void(0)" class="btn btn-primary" id="options-header-inverse">Dark</a>
					</div>
				</li>
				<li class="dropdown-header text-center">Page Style</li>
				<li>
					<div class="btn-group btn-group-justified btn-group-sm">
						<a href="javascript:void(0)" class="btn btn-primary" id="options-main-style">Default</a>
						<a href="javascript:void(0)" class="btn btn-primary" id="options-main-style-alt">Alternative</a>
					</div>
				</li>
			</ul>
		</li>
		<!-- END Template Options -->
	</ul>
	<!-- END Left Header Navigation -->
	<!-- Search Form -->
	<form id="fmenu_cari" action="<?=base_url_admin('cari/'); ?>" method="post" class="navbar-form-custom" onsubmit="return false;">
		<div class="form-group">
			<input id="top-search" type="text" name="keyword" class="form-control" placeholder="Cari menu/modul..">
		</div>
	</form>
	<!-- END Search Form -->
	<!-- Right Header Navigation -->
	<ul class="nav navbar-nav-custom pull-right">
		<!-- Alternative Sidebar Toggle Button -->
		<!-- chat toggle -->
		<li>
			<!-- If you do not want the main sidebar to open when the alternative sidebar is closed, just remove the second parameter: App.sidebar('toggle-sidebar-alt'); -->
			<a href="javascript:void(0)" onclick="App.sidebar('toggle-sidebar-alt', 'toggle-other');this.blur();">
				<i class="fa fa-comments"></i>
				<span id="chat-online-count" class="label label-primary label-indicator animation-floating">0</span>
			</a>
		</li>
		<!-- end chat toggle -->
		<!-- User Dropdown -->
		<li class="dropdown">
			<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
				<img src="<?=$admin_foto?>" alt="avatar" onerror="this.onerror=null;this.src='https://seme-framework-storage.b-cdn.net/images/user-default.png';"> <i class="fa fa-angle-down"></i>
			</a>
			<ul class="dropdown-menu dropdown-custom dropdown-menu-right">
				<li class="dropdown-header text-center">Account</li>
				<li>
					<a href="<?=base_url_admin('profil')?>" title="Profil">
						<i class="fa fa-user fa-fw pull-right"></i>
						Profil
					</a>
				</li>
				<li class="divider"></li>
				<li>
					<a href="<?=base_url_admin('logout'); ?>"><i class="fa fa-ban fa-fw pull-right"></i> Logout</a>
				</li>
			</ul>
		</li>
		<!-- END User Dropdown -->
	</ul>
	<!-- END Right Header Navigation -->
</header>

Setelah itu untuk component global message ada di app/view/admin/page/partials/global_message.php. Apabila belum ada, silakan buat file tersebut dan copy paste-kan isinya dari kode dibawah ini.

x
–
+
<div id="global_message_danger" class="alert alert-danger" role="alert" style="display:none;">
    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
    <span class="sr-only">Error:</span>
    <span id="global_message_danger_text">Enter a valid email address</span>
</div>
<div id="global_message_info" class="alert alert-info" role="alert" style="display:none;">
    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
    <span class="sr-only">Info:</span>
    <span id="global_message_info_text">Enter a valid email address</span>
</div>
<div id="global_message_success" class="alert alert-success" role="alert" style="display:none;">
    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
    <span class="sr-only">Berhasil:</span>
    <span id="global_message_success_text">Enter a valid email address</span>
</div>

Kemudian ini untuk component navigation bar di app/view/admin/page/partials/navbar.php. Apabila belum ada, silakan buat file tersebut dan copy paste-kan isinya dari kode dibawah ini.

x
–
+
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="true" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div id="navbar" class="collapse navbar-collapse" >
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="#" class="btn-sidebar-toggle"><i class="fa fa-list"></i></a>
        </li>
      </ul>
      <form id="form_module_search" action="<?=base_url_admin("modules")?>" method="get" class="navbar-form navbar-left">
        <div class="form-group">
          <input id="fmsfilter" name="filter" type="text" class="form-control" placeholder="Cari Modul" minlength="0" />
        </div>
        <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><i class="fa fa-bell-o"></i> Pemberitahuan <label class="label label-info">0</label></a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><?=$sess->admin->nama?>  <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="<?=base_url_admin("profil")?>" title="Lihat profil saya">Profil</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="<?=base_url_admin("logout")?>" title="Keluar dari <?=$this->site_name_admin?>">Logout</a></li>
          </ul>
        </li>
        <li><a id="btn-header-show" href="#" ><i class="fa fa-ravelry"></i></a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Setelahnya untuk component sidebar menu yang akan ditampilkan pada samping kiri halaman admin. Untuk kodenya ada di app/view/admin/page/partials/sidebar.php. Apabila belum ada, silakan buat file tersebut dan copy paste-kan isinya dari kode dibawah ini.

x
–
+
<?php
	$admin_name = $sess->admin->username ?? '';
	if(isset($sess->admin->nama)) if(strlen($sess->admin->nama)>1) $admin_name = $sess->admin->nama;
	if(!isset($this->current_page)) $this->current_page = "";
	if(!isset($this->current_parent)) $this->current_parent = "";
	$current_page = $this->current_page;
	$current_parent = $this->current_parent;
	$parent = array();
	foreach(($sess->admin->menus->left ?? []) as $key=>$v){
		$parent[$v->identifier] = 0;
		if(count($v->childs)>0){
			foreach($v->childs as $f){
				if($current_page==$f->identifier){
					$current_page = $v->identifier;
					$parent[$v->identifier] = 1;
				}
			}
		}
	}
	$admin_foto = '';
	if(isset($sess->admin->foto))$admin_foto = $sess->admin->foto;
	if(empty($admin_foto)) $admin_foto = 'media/user-default.png';
	$admin_foto = $this->cdn_url($admin_foto);
    $admin_logo_url = '';
    if (isset($this->config->semevar->admin_logo) && strlen($this->config->semevar->admin_logo) > 4) {
        $admin_logo_url = $this->cdn_url($this->config->semevar->admin_logo);
    }
?>
<div id="sidebar">
	<!-- Wrapper for scrolling functionality -->
	<div id="sidebar-scroll">
		<!-- Sidebar Content -->
		<div class="sidebar-content">
			<!-- Brand -->
			<a href="<?=base_url_admin(); ?>" class="sidebar-brand">
				<img src="<?=$admin_logo_url?>" onerror="this.onerror=null;this.src='';" style="width: 90%;" />
			</a>
			<!-- END Brand -->
			<!-- User Info -->
			<div class="sidebar-section sidebar-user clearfix sidebar-nav-mini-hide">
				<div class="sidebar-user-avatar">
					<a href="<?=base_url_admin('profil'); ?>">
						<img src="<?=$admin_foto?>" alt="avatar" onerror="this.onerror=null;this.src='https://seme-framework-storage.b-cdn.net/images/user-default.png';" />
					</a>
				</div>
				<div class="sidebar-user-name"><?=$admin_name; ?></div>
				<div class="sidebar-user-links">
					<a href="<?=base_url_admin('profil'); ?>" data-toggle="tooltip" data-placement="bottom" title="Profile"><i class="gi gi-user"></i></a>
					<a href="<?=base_url_admin("logout"); ?>" data-toggle="tooltip" data-placement="bottom" title="Logout"><i class="gi gi-exit"></i></a>
				</div>
			</div>
			<!-- END User Info -->
			<!-- Sidebar Navigation -->
			<ul class="sidebar-nav">
				<li class="">
					<a href="<?=base_url_admin('')?>" class=" ">
						<i class=" sidebar-nav-mini-hide"></i>
						<i class="fa fa-home sidebar-nav-icon"></i>
						<span class="sidebar-nav-mini-hide">Dashboard</span>
					</a>
				</li>
				<li class="">
					<a href="#" class="sidebar-nav-menu ">
						<i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i>
						<i class="fa fa-cog fa-spin sidebar-nav-icon"></i>
						<span class="sidebar-nav-mini-hide">Perusahaan</span>
					</a>
					<ul class="">
						<li>
							<a href="<?=base_url_admin('perusahaan/master/')?>" class="">
								Data Master Perusahaan
							</a>
						</li>
					</ul>
				</li>
			</ul>
			<!-- END Sidebar Navigation -->
		</div>
		<!-- END Sidebar Content -->
	</div>
	<!-- END Wrapper for scrolling functionality -->
</div>

Kemudian sekarang akan membuat untuk sidebar alternatif. File ini tidak akan kita gunakan terlebih dahulu, tapi akan di persiapkan untuk tutorial selanjutnya. Apabila belum ada, silakan buat file tersebut di app/view/admin/page/partials/sidebar_alt.php, kemudian copy paste-kan isinya dari kode dibawah ini.

x
–
+
<div id="sidebar-alt">
	<!-- Wrapper for scrolling functionality -->
	<div id="sidebar-alt-scroll">
		<!-- Sidebar Content -->
		<div class="sidebar-content">
		</div>
		<!-- END Sidebar Content -->
	</div>
	<!-- END Wrapper for scrolling functionality -->
</div>

Kemudian sekarang akan membuat untuk wrapper untuk footer, di app/view/admin/page/partials/foot.php, buatlah file tersebut kemudian copy paste-kan isinya dari kode dibawah ini.

x
–
+
<!-- Scroll to top link, initialized in js/app.js - scrollToTop() -->
<a href="#" id="to-top"><i class="fa fa-angle-double-up"></i></a>
<!-- User Settings, modal which opens from Settings link (found in top right user menu) and the Cog link (found in sidebar user info) -->
<div id="modal-user-settings" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<!-- Modal Header -->
			<div class="modal-header text-center">
				<h2 class="modal-title"><i class="fa fa-pencil"></i> Settings</h2>
			</div>
			<!-- END Modal Header -->
			<!-- Modal Body -->
			<div class="modal-body">
				<form action="index.html" method="post" enctype="multipart/form-data" class="form-horizontal form-bordered" onsubmit="return false;">
					<fieldset>
						<legend>Vital Info</legend>
						<div class="form-group">
							<label class="col-md-4 control-label">Username</label>
							<div class="col-md-8">
								<p class="form-control-static">Admin</p>
							</div>
						</div>
						<div class="form-group">
							<label class="col-md-4 control-label" for="user-settings-email">Email</label>
							<div class="col-md-8">
								<input type="email" id="user-settings-email" name="user-settings-email" class="form-control" value="admin@example.com">
							</div>
						</div>
						<div class="form-group">
							<label class="col-md-4 control-label" for="user-settings-notifications">Email Notifications</label>
							<div class="col-md-8">
								<label class="switch switch-primary">
								<input type="checkbox" id="user-settings-notifications" name="user-settings-notifications" value="1" checked>
								<span></span>
								</label>
							</div>
						</div>
					</fieldset>
					<fieldset>
						<legend>Password Update</legend>
						<div class="form-group">
							<label class="col-md-4 control-label" for="user-settings-password">New Password</label>
							<div class="col-md-8">
								<input type="password" id="user-settings-password" name="user-settings-password" class="form-control" placeholder="Please choose a complex one..">
							</div>
						</div>
						<div class="form-group">
							<label class="col-md-4 control-label" for="user-settings-repassword">Confirm New Password</label>
							<div class="col-md-8">
								<input type="password" id="user-settings-repassword" name="user-settings-repassword" class="form-control" placeholder="..and confirm it!">
							</div>
						</div>
					</fieldset>
					<div class="form-group form-actions">
						<div class="col-xs-12 text-right">
							<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
							<button type="submit" class="btn btn-sm btn-primary">Save Changes</button>
						</div>
					</div>
				</form>
			</div>
			<!-- END Modal Body -->
		</div>
	</div>
</div>
<!-- END User Settings -->

Terakhir, kita akan membuat footer untuk halaman admin di app/view/admin/page/partials/footer.php. Silakan copy paste-kan isinya dari kode dibawah ini.

x
–
+
<footer class="clearfix">
	<div class="rainbow pull-right">
		Made with <i class="fa fa-heart text-danger"></i> by <a href="https://cenah.co.id" target="_blank">cenah.co.id</a>. 
	</div>
	<div class="pull-left">
		Seme Framework version 4 - Admin &copy; <?=date("Y")?>
	</div>
</footer>

Membuat sample kontent untuk tema Admin

Setelah selesai memecah komponen HTML, selanjutnya kita akan membuat contoh halaman utama pada admin. Halaman utama ini nantinya kita akan isi dengan dashboard pada tutorial selanjutnya.

x
–
+
<div id="page-content">
	<!-- Static Layout Header -->
	<div class="content-header">
		<div class="header-section">
			<h1>
				<i class="gi gi-show_big_thumbnails"></i>Static Layout<br><small>This is the default layout</small>
			</h1>
		</div>
	</div>
	<ul class="breadcrumb breadcrumb-top">
		<li>Admin</li>
		<li><a href="<?=base_url_admin()?>">Home</a></li>
		<li><a href="<?=base_url_admin()?>">Example</a></li>
	</ul>
	<!-- END Static Layout Header -->
	
	<!-- Dummy Content -->
	<div class="block full block-alt-noborder">
		<h3 class="sub-header text-center"><strong>Dummy Content</strong> for layout demostration</h3>
		<div class="row">
			<div class="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
				<article>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor. Vestibulum ullamcorper, odio sed rhoncus imperdiet, enim elit sollicitudin orci, eget dictum leo mi nec lectus. Nam commodo turpis id lectus scelerisque vulputate. Integer sed dolor erat. Fusce erat ipsum, varius vel euismod sed, tristique et lectus? Etiam egestas fringilla enim, id convallis lectus laoreet at. Fusce purus nisi, gravida sed consectetur ut, interdum quis nisi. Quisque egestas nisl id lectus facilisis scelerisque?</p>
					<p>Proin rhoncus dui at ligula vestibulum ut facilisis ante sodales! Suspendisse potenti. Aliquam tincidunt sollicitudin sem nec ultrices. Sed at mi velit. Ut egestas tempor est, in cursus enim venenatis eget! Nulla quis ligula ipsum. Donec vitae ultrices dolor? Donec lacinia venenatis metus at bibendum? In hac habitasse platea dictumst. Proin ac nibh rutrum lectus rhoncus eleifend. Sed porttitor pretium venenatis. Suspendisse potenti. Aliquam quis ligula elit. Aliquam at orci ac neque semper dictum. Sed tincidunt scelerisque ligula, et facilisis nulla hendrerit non. Suspendisse potenti. Pellentesque non accumsan orci. Praesent at lacinia dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor. Vestibulum ullamcorper, odio sed rhoncus imperdiet, enim elit sollicitudin orci, eget dictum leo mi nec lectus. Nam commodo turpis id lectus scelerisque vulputate. Integer sed dolor erat. Fusce erat ipsum, varius vel euismod sed, tristique et lectus? Etiam egestas fringilla enim, id convallis lectus laoreet at. Fusce purus nisi, gravida sed consectetur ut, interdum quis nisi. Quisque egestas nisl id lectus facilisis scelerisque?</p>
					<p>Proin rhoncus dui at ligula vestibulum ut facilisis ante sodales! Suspendisse potenti. Aliquam tincidunt sollicitudin sem nec ultrices. Sed at mi velit. Ut egestas tempor est, in cursus enim venenatis eget! Nulla quis ligula ipsum. Donec vitae ultrices dolor? Donec lacinia venenatis metus at bibendum? In hac habitasse platea dictumst. Proin ac nibh rutrum lectus rhoncus eleifend. Sed porttitor pretium venenatis. Suspendisse potenti. Aliquam quis ligula elit. Aliquam at orci ac neque semper dictum. Sed tincidunt scelerisque ligula, et facilisis nulla hendrerit non. Suspendisse potenti. Pellentesque non accumsan orci. Praesent at lacinia dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus.</p>
				</article>
			</div>
		</div>
	</div>
	<!-- END Dummy Content -->
</div>
Implementasi di Controller

Setelah membuat tema, beserta isinya sekarang saatnya untuk integrasikan semuanya, mulai dari Controller sampai dengan view. Untuk melakukannya, buka file app/controller/admin/home.php kemudian ganti (edit) isinya dengan menggunakan kode dibawah ini:

x
–
+
<?php
/**
* Main Controller Class
*   for Admin
* Mostly for this controller will resulting HTTP Body Content in HTML format
*
* @version 1.0.0
*
* @package Controller\Admin
* @since 1.0.0
*/
class Home extends \SENE_Controller
{
    public function __construct()
    {
        parent::__construct();
        $this->setTheme('admin');
    }
    public function index()
    {
        $data = $this->__init();
        $this->setTitle("Home Admin");
        
        $this->putJsContent("home/home_bottom", $data);
        $this->putThemeContent("home/home", $data);

        $this->loadLayout('col-2-left', $data);
        $this->render();
    }
}

Pada class controller ini kita masih extends dari SENE_Controller. Nanti di tutorial selanjutnya, kita akan merubahnya

Melihat hasilnya

Untuk melihat hasil dari pembuatan tema ini, cukup buka alamat http://localhost/seme_framework/admin/ melalui google chrome atau firefox.

Kemudian, kita lihat hasilnya apakah sama seperti screenshot dibawah ini.

Tutorial
Tutorial: Login Admin