1. Home
  2. Template
  3. Membuat Template

Membuat Template

Membuat template dalam framework ini tidak membutuhkan banyak file karena sebagian tampilan, CSS Style, serta Javascript telah disediakan oleh framework, anda hanya perlu membuatkan wadah atau menentukan posisi-posisi dimana layout dimunculkan pada template tersebut, baik itu berupa content maupun block. Kecuali apabila anda menginginkan hal yang berbeda dari yang sudah ada dalam framework anda tetap bisa merubah tampilan di bagian2 tertentu dengan membuat TPL File.

Berikut adalah struktur sederhana file2 yang bisa anda taruh pada directory templates/[namatemplate]/ yang nanti akan menjadi sebuah template baru untuk project anda: Satu satunya file yang HARUS ada adalah "index.php" tanpa file tersebut maka anda tidak bisa mendaftarkan template ke dalam framework agar bisa diaktifkan. untuk meregisterkan template, anda bisa menggunakan admin panel yang ada di "Control Panel / Site Template" kemudian meng-klik tombol "Scan New Template". dan setelah template yang anda buat masuk ke dalam daftar template, maka anda bisa meng-aktifkan template tersebut dengan men-select lalu klik tombol "Set Default Template". Website anda akan secara otomatis menggunakan template baru buatan anda.

Perlu di ketahui, ketika template aktif pertama kali, bisa jadi settingan dari template tersebut tersyncron dengan settingan template lain yang sudah ada, jika demikian perubahan yang anda lakukan seperti membuat block atau membuat block theme akan merubah juga template yang tersyncron tersebut.

Untuk mereset kondisi diatas anda perlu masuk ke "Control Panel / Site Template" lalu mengklik tombol edit pada template anda, pada pilihan "Synchronize from" klik tombol reset. Setelah itu anda bebas menambahkan block maupun theme tanpa merubah settingan dari template lain
 

Contoh script untuk file style.css

Berikut adalah contoh sederhana dalam membuat style.css dimana di dalam script hanya mengincludekan css bootstrap yang telah di modifikasi agar sesuai dengan framework, perlu di perhatikan bahwa bootstrap yang digunakan oleh framework akan ter-update otomatis mengikuti perkembangan bootstrap, dan secara default anda menggunakan bootstrap versi 3. Untuk menggunakan bootstrap versi diatas nya anda bisa mencari di dalam folder templates/admin/ dan jika tidak tersedia anda bisa mengincludekan dari URL luar atau menambah secara manual pada template anda, tetapi tersedia anda tinggal meng-include kan dalam style.css anda, Contoh: 
@import url('../../admin/bootstrap/css/bootstrap.min.css');
@import url('../../admin/bootstrap/css/bootstrap-theme.min.css');
Jika anda ingin menggunakan bootstrap 4 
@import url('../../admin/bootstrap/css/bootstrap4.min.css');

Contoh script untuk file script.js

di dalam jQuery mungkin anda mengenal $(document).ready(function(){/* some codes... */});, tetapi dikarenakan template yang digunakan oleh framework selalu me-load jquery pada akhir document sehingga script tersebut tidak akan berjalan. Sebagai pengganti nya anda bisa menggunakan _Bbc(function($){/* some codes... */}); dan proses yang terjadi sama persis 
_Bbc(function($){
  $("#elementID").on("click", function(){
   alert("you've clicked it!");
 });
});
function _Bbc() bisa anda panggil berkali kali setiap kali anda butuhkan

Contoh script untuk file blank.php

Berikut adalah contoh sederhana dari file blank.php dimana anda juga bisa meng-copy nya dari folder templates/admin/blank.php, template ini akan digunakan oleh script anda ketika anda meng-eksekusi $sys->set_layout('blank'); 
<!DOCTYPE html>
<html lang="en">
  <head><?php echo $sys->meta();?>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <?php echo $Bbc->content;?>
    <div id="loading">Loading...</div>
    <script src="<?php echo _URL;?>templates/admin/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- 
    Jika ingin menggunakan bootstrap 4
    <script src="<?php echo _URL;?>templates/admin/bootstrap/js/bootstrap4.min.js" type="text/javascript"></script>
    -->
  </body>
</html>

Contoh script untuk file index.php

Contoh di bawah adalah script tampilan yang di gunakan oleh website ini, dan di dalam script terdapat beberapa function yang digunakan untuk dapat di eksekusi oleh framework, anda bisa mempelajarinya dengan mengklik salah satu link dari function yang tersedia di bawah 
<!DOCTYPE html>
<html lang="en">
  <head><?php echo $sys->meta();?>
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <?php echo $sys->block_show('top');?>
    <div class="container-fluid" style="padding-bottom: 70px;">
      <div class="col-md-2 col-lg-2 pull-right">
        <?php echo $sys->block_show('right');?>
      </div>
      <div class="col-md-10 col-lg-10 pull-left">
        <?php echo $sys->block_show('content_top');?>
        <?php echo trim($Bbc->content);?>
        <?php echo $sys->block_show('content_bottom');?>
        <?php echo $sys->block_show('footer'); ?>
      </div>
      <div class="clearfix"></div>
      <div class="navbar navbar-default navbar-fixed-bottom">
        <div class="container">
          <p class="navbar-text pull-left"><?php echo config('site','footer');?></p>
          <a href=http://www.dev.esoftplay.com/"https://t.me/esoftplay" class="navbar-btn btn-primary btn pull-right">
            <span class="glyphicon glyphicon-ok"></span> Notify me on Update!
           </a>
        </div>
      </div>
    </div>
    <!-- Bootstrap JavaScript -->
    <script src="<?php echo _URL;?>templates/admin/bootstrap/js/bootstrap.min.js"></script>
    <!-- 
    Jika ingin menggunakan bootstrap 4
    <script src="<?php echo _URL;?>templates/admin/bootstrap/js/bootstrap4.min.js" type="text/javascript"></script>
    -->
  </body>
</html>
pada file "templates/admin/bootstrap/js/bootstrap.min.js" sudah menginclude kan script jQuery sehingga anda tidak perlu lagi untuk me-load file jQuery lain

Tags : Template

0 Komentar

Berikan komentar anda

Berikan komentar anda