Print This Page

Seriously

Tutorial Membangun Blog dengan qEngine: Part 2

Tweet
Tutorial Membangun Blog dengan qEngine: Part 2

Pada tutorial sebelumnya, saya telah menjelaskan cara membuat blog sederhana menggunakan qEngine. Cukup sederhana, kan? Tapi hasil output agak kaku, ya? Maka pada tutorial ini, saya akan menjelaskan cara untuk mendesain output agar tampil lebih cantik. Ada beberapa metode untuk menyesuaikan output, saya akan menjelaskan semuanya di sini.

Metode 1: murni CSS

Jika kamu melihat source code yang dihasilkan, kamu akan melihat struktur HTML sebagai berikut (dapat sedikit berbeda dari kode sebenarnya ):

Source code

<div class="page_gallery">
  <h1><a href="someurl">Title</a></h1>
  <div><a href="someurl"><img src="image.jpg" alt="Title"></a></div>
  <div><p>Content</p></div>
  <p>Posted on: Some Date</p>
</div>

Dengan menggunakan struktur ini, kita dapat menyesuaikan output dengan menggunakan CSS. Untuk melakukannya, cukup edit file /skins/default/style.css. Contohnya:.

.page_gallery{background:#f4efea; border:solid 1px #cab39b; padding:20px; border-radius: 20px; margin-bottom:20px;}
.page_gallery h1{font:italic 32px Georgia,Serif;margin-top:0;}
.page_gallery h1 a{color:#836445;}
.page_gallery img {box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.75);}
.page_gallery div:nth-child(2){float:left; margin:0 20px 20px 0;width:250px;}
.page_gallery {clear:both;}

Mari kita lihat hasilnya:

CSS

Secara default, qEngine akan menggunakan 'page_gallery' sebagai kelas css, tetapi kamu dapat mengubahnya dengan menggunakan parameter 'cssclass', misalnya:

<!-- BEGINMODULE page_gallery -->
  group_id = blog
  title = 1
  img = 1
  link = 1
  body = 1
  date = 1
  cssclass = myclass
<!-- ENDMODULE --> 

Hasinya cukup cantik, tapi seperti yang kamu lihat metode ini memiliki beberapa keterbatasan:

  1. Harus fasih CSS & JavaScript. Tentunya, web designer harus memiliki pengetahuan yang mendalam pada CSS, tetapi, hei, setiap orang harus mulai di suatu tempat kan.
  2. Masih dibatasi dengan struktur HTML, yang kadang tidak mudah untuk dimodifikasi.

Untuk itu ada metode yang kedua yang lebih mudah digunakan.

Metode 2: TPLSECTION

Pertama, coba kode dibawah ini. Untuk file /skins/default/welcome.tpl, kita gunakan:

<div id="welcome" class="container">
  <!-- BEGINMODULE page_gallery -->
    group_id = blog
    sectiontpl = mypage
  <!-- ENDMODULE -->
</div>

<!-- BEGINSECTION mypage -->
<div class="row myclass">
  <div class="col-sm-9">
    <h2><a href="{$url}">Tutorial Membangun Blog dengan qEngine: Part 2</a></h2>
    {$page_body}
  </div>
  <div class="col-sm-3">
    <a href="{$url}">{$page_image}</a>
    <p style="text-align: right"><span class="glyphicon glyphicon-time"></span> Nov-06-2016<br />
    <span class="glyphicon glyphicon-user"></span> admin</p>
  </div>
</div>
<!-- ENDSECTION -->

Untuk file /skins/default/style.css, kita ubah kode sebelumnya:

.myclass{background:#f4efea; border:solid 1px #cab39b; padding:20px; border-radius: 20px; margin-bottom:20px;}
.myclass h2{font:italic 32px Georgia,Serif;margin-top:0;}
.myclass h2 a{color:#836445;}
.myclass img {box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.75); margin-bottom:10px;}

Sekarang, mari kita lihat hasilnya.

TPL Section

Lebih menarik kan? Selain itu kode CSS nya pun lebih sederhana. Saya akan menjelaskan beberapa kode penting:

group_id = blog
sectiontpl = mypage

Kamu pasti sudah harus akrab dengan baris tersebut, tapi disini kita menggunakan kode lebih sedikit. Itu karena kita tidak perlu memberitahu qEngine elemen apa saja yang tampil, elemen yang tampil tergantung pada template kita.

Seting 'sectiontpl', memberitahu qEngine menggunakan section template 'mypage' sebagai template output bukan template bawaan. Template section adalah kode template kecil yang dapat dimasukkan ke dalam file template manapun.

Bagian template adalah sebagai berikut:

<!-- BEGINSECTION mypage -->
<div class="row myclass">
 <div class="col-sm-3">
 <a href="{$url}">{$page_image}</a>
 <p style="text-align: right"><span class="glyphicon glyphicon-time"></span> Nov-06-2016<br />
 <span class="glyphicon glyphicon-user"></span> admin</p>
 </div>
 .. Snip ..
</div>
<!-- ENDSECTION mypage -->

Kamu dapat memodifikasi template sesuai kehendak kamu. {$page_image}, Nov-06-2016, admin, dll akan diganti dengan nilai yang sesuai. Kamu dapat melihat variabel dapat digunakan dengan memeriksa tabel databse 'qe_page'.

Seriously...

Dalam tutorial ini, kamu telah belajar bahwa qEngine ternyata cukup fleksibel. Kamu dapat membangun blog sederhana dan menyesuaikan tampilannya, tanpa menyentuh kode PHP. Tapi itu barulah awalnya, dalam tutorial selanjutnya saya akan menjelaskan bagaimana untuk mendesain halaman blog itu sendiri. Pssst … sebenernya sangat mudah! Petunjuknya: file /skins/_common/page_default.tpl dan /skins/_common/body_default.tpl.

This tutorial is also available in English.
This translation is made possible with Bing Translator.


Posted By: admin
Posted On: Nov-06-2016 @ 11:05pm
Last Updated: Nov-07-2016 @ 10:53pm

There is no comment

More Comments/Post Your Own


Powered by qEngine
Generated in 0,007 second | 15 queries