Sekedar mengingatkan kembali artikel sebelumnya, bahwa program yang telah kita siapkan sebelumnya adalah :
- Telah kita download Joomla dan telah kita jalankan di komputer lokal.
- Dengan cara lain untuk memahami Joomla, penulis mengajak pembaca melakukan Save Page As dengan type Web Complete pada tampilan Joomla yang telah kita install (No.1), yang kemudian kita beri nama dahanexis.htm.
- Dan pada langkah selanjutnya, penulis mengajak pembaca membuka source code file dahanexis.htm dengan program notepade atau sejenisnya yang kemudian kita save as kembali untuk merubah typenya menjadi dahanexis.php/index.php.
- File dahanexis.php inilah yang telah kita bahas pada artikel sebelumnya yaitu "Manajemen Include File di Database Phpmyadmin (2)", sehingga diperoleh 3 file *.php di dalam file dahanexis.php/index.php, yaitu header.php, content.php dan footer.php.
- Dengan tujuan mempermudah dalam menambahkan/menginsertkan file, telah kita pelajari juga 3 file tersebut di atas pada No.4 untuk dikoneksikan dan didaftarkan ke database phpmyadmin.
......
<body class="site com_content view-category layout-blog task- itemid-101 ">
<?
$query = mysql_query("select * from page");
$data = mysql_fetch_array($query);
include $data[$field1];
?>
</body>
</html>
Dengan database sebagai berikut :
database : dahanexis
tabel : page
id | field1
1 | koneksi.php
2 | batas-atas.php
3 | header.php
4 | content.php
5 | batas-bawah.php
6 | footer.php
Sehingga diperoleh gambar tampilan dan gambar file sebagai berikut :
Kali ini akan kita bahas file content.php dengan tujuan mengelompokkan menjadi beberapa file :
Script file content.php adalah sebagai berikut :
<div class="row-fluid">
<div id="content" class="span9">
<!-- Begin Content -->
<div class="moduletable">
<div class="custom">
<p><img src="dahanexis_files/raindrops.jpg" alt=""></p></div>
</div>
<div id="system-message-container">
<div id="system-message">
</div>
</div>
<div class="blog">
<div class="items-leading">
<div class="leading-0">
<div class="btn-group pull-right"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> <i class="icon-cog"></i> <span class="caret"></span> </a>
<ul class="dropdown-menu">
<li class="print-icon"> <a href="http://localhost/joomla/index.php/3-welcome-to-your-blog?tmpl=component&print=1&layout=default&page=" title="Print" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><i class="icon-print"></i> Print</a> </li>
<li class="email-icon"> <a href="http://localhost/joomla/index.php/component/mailto/?tmpl=component&template=protostar&link=fb3e16a6ce840b26266947bcd58a404912b5f188" title="Email" onclick="window.open(this.href,'win2','width=400,height=350,menubar=yes,resizable=yes'); return false;"><i class="icon-envelope"></i> Email</a> </li>
</ul>
</div>
<div class="page-header">
<h2>
<a href="http://localhost/joomla/index.php/3-welcome-to-your-blog"> Welcome to your blog</a>
</h2>
<small class="createdby">
Written by Joomla</small>
</div>
<p>This is a sample blog posting.</p>
<p>If you log in to the site (the Author Login link is on the bottom of
this page) you will be able to edit it and all of the other existing
articles. You will also be able to create a new article.</p>
<p>As you add and modify articles you will see how your site changes and also how you can customise it in various ways.</p>
<p>Go ahead, you can't break it.</p>
</div>
<div class="clearfix"></div>
<div class="leading-1">
<div class="btn-group pull-right"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> <i class="icon-cog"></i> <span class="caret"></span> </a>
<ul class="dropdown-menu">
<li class="print-icon"> <a href="http://localhost/joomla/index.php/4-about-your-home-page?tmpl=component&print=1&layout=default&page=" title="Print" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><i class="icon-print"></i> Print</a> </li>
<li class="email-icon"> <a href="http://localhost/joomla/index.php/component/mailto/?tmpl=component&template=protostar&link=6f2375208dc915f38d4ba885d5f20da23a7f54df" title="Email" onclick="window.open(this.href,'win2','width=400,height=350,menubar=yes,resizable=yes'); return false;"><i class="icon-envelope"></i> Email</a> </li>
</ul>
</div>
<div class="page-header">
<h2>
<a href="http://localhost/joomla/index.php/4-about-your-home-page"> About your home page</a>
</h2>
<small class="createdby">
Written by Joomla</small>
</div>
<p>Your home page is set to display the four most recent articles from
the blog category in a column. Then there are links to the 4 articles
before those. You can change those numbers by editing the content
options settings in the blog tab in your site administrator. There is a
link to your site administrator in the top menu.</p>
<p>If you want to have your blog post broken into two parts, an
introduction and then a full length separate page, use the Read More
button to insert a break.</p>
<a class="btn" href="http://localhost/joomla/index.php/4-about-your-home-page"> <i class="icon-chevron-right"></i>
Read more: About your home page </a>
</div>
<div class="clearfix"></div>
<div class="leading-2">
<div class="btn-group pull-right"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> <i class="icon-cog"></i> <span class="caret"></span> </a>
<ul class="dropdown-menu">
<li class="print-icon"> <a href="http://localhost/joomla/index.php/6-your-template?tmpl=component&print=1&layout=default&page=" title="Print" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><i class="icon-print"></i> Print</a> </li>
<li class="email-icon"> <a href="http://localhost/joomla/index.php/component/mailto/?tmpl=component&template=protostar&link=41340651db561d284ff11df2f97f8efc5b21c4d5" title="Email" onclick="window.open(this.href,'win2','width=400,height=350,menubar=yes,resizable=yes'); return false;"><i class="icon-envelope"></i> Email</a> </li>
</ul>
</div>
<div class="page-header">
<h2>
<a href="http://localhost/joomla/index.php/6-your-template"> Your Template</a>
</h2>
<small class="createdby">
Written by Joomla</small>
</div>
<p>This blog is installed with the Protostar template.</p>
<p>You can edit the options in the Template Manager. Click on My Default Template (Protostar).</p>
<p>For example you can change the si background color, highlights color, site title, site description and title font used. </p>
</div>
<div class="clearfix"></div>
<div class="leading-3">
<div class="btn-group pull-right"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> <i class="icon-cog"></i> <span class="caret"></span> </a>
<ul class="dropdown-menu">
<li class="print-icon"> <a href="http://localhost/joomla/index.php/5-your-modules?tmpl=component&print=1&layout=default&page=" title="Print" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><i class="icon-print"></i> Print</a> </li>
<li class="email-icon"> <a href="http://localhost/joomla/index.php/component/mailto/?tmpl=component&template=protostar&link=b42aca45dec2eb2beaae3572b8489175f721a44e" title="Email" onclick="window.open(this.href,'win2','width=400,height=350,menubar=yes,resizable=yes'); return false;"><i class="icon-envelope"></i> Email</a> </li>
</ul>
</div>
<div class="page-header">
<h2>
<a href="http://localhost/joomla/index.php/5-your-modules"> Your Modules</a>
</h2>
<small class="createdby">
Written by Joomla</small>
</div>
<p>Your site has some commonly used modules already preconfigured. These include:</p>
<ul>
<li>Image Module which holds the image beneath the menu. This is a Custom HTML module that you can edit to change the image.</li>
<li>Blog Roll. which lets you link to other blogs. We've put in two
examples, but you'll want to change them. When you are logged in, click
on edit blog roll to update this.</li>
<li>Most Read Posts which lists articles based on the number of times they have been read.</li>
<li>Older Articles which lists out articles by month.</li>
<li>Syndicate which allows your readers to read your posts in a news reader.</li>
</ul>
<p>Each of these modules has many options which you can experiment with
in the Module Manager in your site Administrator. Joomla! also includes
many other modules you can incorporate in your site. As you develop your
site you may want to add more module that you can find at the <a href="http://extensions.joomla.org/">Joomla Extensions Directory.</a></p>
</div>
<div class="clearfix"></div>
</div><!-- end items-leading -->
<div class="clearfix"></div>
</div>
<ul class="breadcrumb ">
<li class="active"><span class="divider"><i data-original-title="You are here: " class="icon-location hasTooltip"></i></span></li>
<li><span>Home</span></li>
</ul>
<!-- End Content -->
</div>
<div id="aside" class="span3">
<!-- Begin Right Sidebar -->
<div class="well _menu">
<ul class="nav menu ">
<li class="item-108"><a href="http://localhost/joomla/index.php/about">About</a></li>
<li class="item-101 current active"><a href="http://localhost/joomla/">Home</a></li>
</ul>
</div>
<div class="well "><div class="page-header"><strong>Older Posts</strong></div>
<ul class="category-module">
<li>
<h5>
<a class="mod-articles-category-title " href="http://localhost/joomla/index.php/3-welcome-to-your-blog">
Welcome to your blog</a>
</h5>
</li>
<li>
<h5>
<a class="mod-articles-category-title " href="http://localhost/joomla/index.php/4-about-your-home-page">
About your home page</a>
</h5>
</li>
<li>
<h5>
<a class="mod-articles-category-title " href="http://localhost/joomla/index.php/6-your-template">
Your Template</a>
</h5>
</li>
<li>
<h5>
<a class="mod-articles-category-title " href="http://localhost/joomla/index.php/5-your-modules">
Your Modules</a>
</h5>
</li>
</ul>
</div>
<div class="well "><div class="page-header"><strong>Blog Roll</strong></div><ul class="weblinks">
<li>
<a href="http://community.joomla.org/blogs/community.html" target="_blank" rel="nofollow">Joomla! Community</a>
</li>
<li>
<a href="http://community.joomla.org/blogs/leadership.html" target="_blank" rel="nofollow">Joomla! Leadership Blog</a>
</li>
</ul>
</div>
<div class="well ">
<div class="page-header"><strong>Most Read Posts</strong></div>
<ul class="mostread">
<li>
<a href="http://localhost/joomla/index.php/4-about-your-home-page">
About your home page</a>
</li>
<li>
<a href="http://localhost/joomla/index.php/3-welcome-to-your-blog">
Welcome to your blog</a>
</li>
<li>
<a href="http://localhost/joomla/index.php/5-your-modules">
Your Modules</a>
</li>
<li>
<a href="http://localhost/joomla/index.php/6-your-template">
Your Template</a>
</li>
</ul>
</div>
<div class="well ">
<a href="http://localhost/joomla/index.php?format=feed&type=rss" class="syndicate-module">
<img src="dahanexis_files/livemarks.png" alt="feed-image">
<span>
My Blog
</span>
</a>
</div>
<div class="well ">
<ul class="nav menu ">
<li class="item-102"><a href="http://localhost/joomla/index.php/login">Author Login</a></li>
</ul>
</div>
<!-- End Right Sidebar -->
</div>
</div>
Dalam script tersebut ada bagian/kelompok yaitu : (yang selanjutnya kita pisahkan menjadi file-file)
- backgroud/gambar - slide.php
- content : isi.php
- posisi : posisi.php
- menu kanan : menu-kanan.php
- daftar post lama : daftar-post.php
- daftar blog : daftar-blog.php
- daftar most read : daftar-most.php
- daftar rss : rss.php
- daftar author : author.php
1. slide.php
<div class="moduletable">
<div class="custom">
<p><img src="dahanexis_files/raindrops.jpg" alt=""></p></div>
</div>
2. isi.php
<div class="blog">
<div class="items-leading">
<div class="leading-0">
<div class="btn-group pull-right"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> <i class="icon-cog"></i> <span class="caret"></span> </a>
<ul class="dropdown-menu">
<li class="print-icon"> <a href="http://localhost/joomla/index.php/3-welcome-to-your-blog?tmpl=component&print=1&layout=default&page=" title="Print" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><i class="icon-print"></i> Print</a> </li>
<li class="email-icon"> <a href="http://localhost/joomla/index.php/component/mailto/?tmpl=component&template=protostar&link=fb3e16a6ce840b26266947bcd58a404912b5f188" title="Email" onclick="window.open(this.href,'win2','width=400,height=350,menubar=yes,resizable=yes'); return false;"><i class="icon-envelope"></i> Email</a> </li>
</ul>
</div>
<div class="page-header">
<h2>
<a href="http://localhost/joomla/index.php/3-welcome-to-your-blog"> Welcome to your blog</a>
</h2>
<small class="createdby">
Written by Joomla</small>
</div>
<p>This is a sample blog posting.</p>
<p>If you log in to the site (the Author Login link is on the bottom of
this page) you will be able to edit it and all of the other existing
articles. You will also be able to create a new article.</p>
<p>As you add and modify articles you will see how your site changes and also how you can customise it in various ways.</p>
<p>Go ahead, you can't break it.</p>
</div>
<div class="clearfix"></div>
<div class="leading-1">
<div class="btn-group pull-right"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> <i class="icon-cog"></i> <span class="caret"></span> </a>
<ul class="dropdown-menu">
<li class="print-icon"> <a href="http://localhost/joomla/index.php/4-about-your-home-page?tmpl=component&print=1&layout=default&page=" title="Print" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><i class="icon-print"></i> Print</a> </li>
<li class="email-icon"> <a href="http://localhost/joomla/index.php/component/mailto/?tmpl=component&template=protostar&link=6f2375208dc915f38d4ba885d5f20da23a7f54df" title="Email" onclick="window.open(this.href,'win2','width=400,height=350,menubar=yes,resizable=yes'); return false;"><i class="icon-envelope"></i> Email</a> </li>
</ul>
</div>
<div class="page-header">
<h2>
<a href="http://localhost/joomla/index.php/4-about-your-home-page"> About your home page</a>
</h2>
<small class="createdby">
Written by Joomla</small>
</div>
<p>Your home page is set to display the four most recent articles from
the blog category in a column. Then there are links to the 4 articles
before those. You can change those numbers by editing the content
options settings in the blog tab in your site administrator. There is a
link to your site administrator in the top menu.</p>
<p>If you want to have your blog post broken into two parts, an
introduction and then a full length separate page, use the Read More
button to insert a break.</p>
<a class="btn" href="http://localhost/joomla/index.php/4-about-your-home-page"> <i class="icon-chevron-right"></i>
Read more: About your home page </a>
</div>
<div class="clearfix"></div>
<div class="leading-2">
<div class="btn-group pull-right"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> <i class="icon-cog"></i> <span class="caret"></span> </a>
<ul class="dropdown-menu">
<li class="print-icon"> <a href="http://localhost/joomla/index.php/6-your-template?tmpl=component&print=1&layout=default&page=" title="Print" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><i class="icon-print"></i> Print</a> </li>
<li class="email-icon"> <a href="http://localhost/joomla/index.php/component/mailto/?tmpl=component&template=protostar&link=41340651db561d284ff11df2f97f8efc5b21c4d5" title="Email" onclick="window.open(this.href,'win2','width=400,height=350,menubar=yes,resizable=yes'); return false;"><i class="icon-envelope"></i> Email</a> </li>
</ul>
</div>
<div class="page-header">
<h2>
<a href="http://localhost/joomla/index.php/6-your-template"> Your Template</a>
</h2>
<small class="createdby">
Written by Joomla</small>
</div>
<p>This blog is installed with the Protostar template.</p>
<p>You can edit the options in the Template Manager. Click on My Default Template (Protostar).</p>
<p>For example you can change the si background color, highlights color, site title, site description and title font used. </p>
</div>
<div class="clearfix"></div>
<div class="leading-3">
<div class="btn-group pull-right"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> <i class="icon-cog"></i> <span class="caret"></span> </a>
<ul class="dropdown-menu">
<li class="print-icon"> <a href="http://localhost/joomla/index.php/5-your-modules?tmpl=component&print=1&layout=default&page=" title="Print" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><i class="icon-print"></i> Print</a> </li>
<li class="email-icon"> <a href="http://localhost/joomla/index.php/component/mailto/?tmpl=component&template=protostar&link=b42aca45dec2eb2beaae3572b8489175f721a44e" title="Email" onclick="window.open(this.href,'win2','width=400,height=350,menubar=yes,resizable=yes'); return false;"><i class="icon-envelope"></i> Email</a> </li>
</ul>
</div>
<div class="page-header">
<h2>
<a href="http://localhost/joomla/index.php/5-your-modules"> Your Modules</a>
</h2>
<small class="createdby">
Written by Joomla</small>
</div>
<p>Your site has some commonly used modules already preconfigured. These include:</p>
<ul>
<li>Image Module which holds the image beneath the menu. This is a Custom HTML module that you can edit to change the image.</li>
<li>Blog Roll. which lets you link to other blogs. We've put in two
examples, but you'll want to change them. When you are logged in, click
on edit blog roll to update this.</li>
<li>Most Read Posts which lists articles based on the number of times they have been read.</li>
<li>Older Articles which lists out articles by month.</li>
<li>Syndicate which allows your readers to read your posts in a news reader.</li>
</ul>
<p>Each of these modules has many options which you can experiment with
in the Module Manager in your site Administrator. Joomla! also includes
many other modules you can incorporate in your site. As you develop your
site you may want to add more module that you can find at the <a href="http://extensions.joomla.org/">Joomla Extensions Directory.</a></p>
</div>
<div class="clearfix"></div>
</div><!-- end items-leading -->
<div class="clearfix"></div>
</div>
3. posisi.php
<ul class="breadcrumb ">
<li class="active"><span class="divider"><i data-original-title="You are here: " class="icon-location hasTooltip"></i></span></li>
<li><span>Home</span></li>
</ul>
4. menu-kanan.php
<div class="well _menu">
<ul class="nav menu ">
<li class="item-108"><a href="http://localhost/joomla/index.php/about">About</a></li>
<li class="item-101 current active"><a href="http://localhost/joomla/">Home</a></li>
</ul>
</div>
5. daftar-post.php
<div class="well "><div class="page-header"><strong>Older Posts</strong></div>
<ul class="category-module">
<li>
<h5>
<a class="mod-articles-category-title " href="http://localhost/joomla/index.php/3-welcome-to-your-blog">
Welcome to your blog</a>
</h5>
</li>
<li>
<h5>
<a class="mod-articles-category-title " href="http://localhost/joomla/index.php/4-about-your-home-page">
About your home page</a>
</h5>
</li>
<li>
<h5>
<a class="mod-articles-category-title " href="http://localhost/joomla/index.php/6-your-template">
Your Template</a>
</h5>
</li>
<li>
<h5>
<a class="mod-articles-category-title " href="http://localhost/joomla/index.php/5-your-modules">
Your Modules</a>
</h5>
</li>
</ul>
</div>
6. daftar-blog.php
<div class="well "><div class="page-header"><strong>Blog Roll</strong></div><ul class="weblinks">
<li>
<a href="http://community.joomla.org/blogs/community.html" target="_blank" rel="nofollow">Joomla! Community</a>
</li>
<li>
<a href="http://community.joomla.org/blogs/leadership.html" target="_blank" rel="nofollow">Joomla! Leadership Blog</a>
</li>
</ul>
</div>
7. daftar-most.php
<div class="page-header"><strong>Most Read Posts</strong></div>
<ul class="mostread">
<li>
<a href="http://localhost/joomla/index.php/4-about-your-home-page">
About your home page</a>
</li>
<li>
<a href="http://localhost/joomla/index.php/3-welcome-to-your-blog">
Welcome to your blog</a>
</li>
<li>
<a href="http://localhost/joomla/index.php/5-your-modules">
Your Modules</a>
</li>
<li>
<a href="http://localhost/joomla/index.php/6-your-template">
Your Template</a>
</li>
</ul>
</div>
8. rss.php
<div class="well ">
<a href="http://localhost/joomla/index.php?format=feed&type=rss" class="syndicate-module">
<img src="dahanexis_files/livemarks.png" alt="feed-image">
<span>
My Blog
</span>
</a>
</div>
9. author.php
<div class="well ">
<ul class="nav menu ">
<li class="item-102"><a href="http://localhost/joomla/index.php/login">Author Login</a></li>
</ul>
</div>
Dengan memisahkan menjadi beberapa file menyebabkan inputan/daftar pada tabel page berubah menjadi :
id | field1
1 | koneksi.php
2 | batas-atas.php
3 | header.php
4 | slide.php
5 | isi.php
6 | posisi.php
7 | menu-kanan.php
8 | daftar-post.php
9 | daftar-blog.php
10| daftar-most.php
11| rss.php
12| author.php
13| batas-bawah.php
14| footer.php
Dengan demikian kita dapat mengkontrol mana yang akan ditampilkan. Jika ingin untuk tidak ditampilkan datanya cukup kita tambah tanda // yang menandakan bahwa file tersebut tidak aktif.
Sehingga jika kita jalankan kembali tampilan akan sama dengan sebelum kita pisahkan menjadi beberapa file.
Kesimpulan.
- File content.php dapat dipisahkan menjadi form-form/file-file yang menyusunnya.
- Dengan memisahkan file-file tersebut otomatis dapat kita kontrol mana yang hendak kita tampilkan.
- Agar tidak tampil cukup kita tambahkan tanda // pada awalan nama file misal //rss.php.
- Kita juga dapat dengan mudah memindahkan urutan file mana dulu yang akan ditampilkan dengan mengganti nomor/id pada tabelnya.
No comments:
Post a Comment