Home arrow Tutorial arrow Seri 3 Cara Pembuatan Template Joomla

Login

kapanlagi

images/banners/kapanlagi_baru120x60rev.swf
Image
Hosted at linode.com

Id-joomla on Media

metrotv iradio
kompas

Member Online

 Komunitas Joomla Indonesia Groups Online
 Webmaster ( 4 ) Webmaster 4
 Manager ( 1 ) Manager 1
 Anggota ( 10 ) Anggota 10
 Tamu ( 20 ) Tamu 20
  Pengunjung  15,992,038


Statistik
Anggota Baru  gaptech
Hari ini 12
Minggu ini 99
Bulan ini 726
Tahun ini 13,326
Sindikasi ID-Joomla

Joomla shop


  • Flexible
  • Simple
  • Elegant
  • Customizable
  • Powerful

Joomla Joomla, Content Management System yang dapat diandalkan

Joomla! adalah salah satu Open Source Content Management Systems paling powerfull yang pernah ada. Digunakan diseluruh dunia dari situs yang paling sederhana sampai kepada aplikasi korporasi yang kompleks. Kelebihan Joomla! terletak pada kemudahan instalasi dan pengelolaan nya

 Demo | Download | Details 

Seri 3 Cara Pembuatan Template Joomla E-mail
Written by Andy Sikumbang, on Jumat, 29 Juni 2007
Editor's rating
Average user rating    (0 vote)
Views 20836    

Pada bagian ini kita akan coba membuat sebuah template kosong sederhana, sekaligus mempelajari anatomi dan fungsi dari masing masing file pembentuk template Joomla.

 

 

Membuat File Index.php

File index.php adalah file yg berisi kombinasi bahasa HTML dgn PHP yang merupakan file utama yng menetukan bentuk perwajahan dari template (Anda dapat membuat file index.php ini dengan menggunakan pilihan New php file pada Dreamweaver).
Secara umum pada file index.php ini terbagi dua bagian script yaitu bagian header dan body.

Header

Bagian pertama yang harus kita isikan adalah bagian header. Bagian ini harus ada di awal setiap file index.php. Bagian header ini adalah beberapa baris code php seperti yang ada berikut ini:

<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location
is not allowed." )
;$iso = split( '=', _ISO );echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php mosShowHead(); ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php if ( $my->id ) { initEditor(); } ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]
/css/template_css.css\" type=\"text/css\"/>" ; ?>
</head>

 

 

Tips.
Kode ini bisa Anda tambahkan dengan mudah dengan menekan tombol Insert Head pada toolbar Joomla Extension yang sudah terinstall pada Dreamweaver Anda.

 

Fungsi dari masing bagian header ini adalah sbb:
Bagian :

<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location
is not allowed." )
;$iso = split( '=', _ISO );echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';?>



berfungsi sebagai filter yang akan menyaring jenis akses yang datang terhadap file ini. Apabila akses tersebut bersifat langsung, misalnya Anda mengetikkan alamat langsung kepada file index.php ini pada browser (misalnya : http://www.webanda.com/templates/templateku/index.php) maka proses eksekusi script phpnya tidak akan dilanjutkan dan pada jendela browser akan muncul tulisan ’ Direct Access to this location is not allowed’ yang menyatakan bahwa akses langsung terhadap file yang bersangkutan tidak diizinkan.


Bagian:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">



Mendefinisikan tipe dokumen html yang dipergunakan yaitu XHTML 1.0 Transitional berdasarkan standar penggunaan code html internasional.


Bagian :

<?php mosShowHead(); ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />



ini akan menghasilkan metadata (seperti description, keywords, generator) dan penjudulan secara otomatis pada halaman joomla. Pada bagian ini juga didefinisikan standar ISO yang dipergunakan pada web joomla Anda. ISO ini lah yang natinya akan memberitahu standar bahasa apakah yang akan dipergunakan dalam merender file Anda pada browser, sehingga penampilan website dalam berbagai bahasa seperti Arab, China dan lain-lain tidak lagi menjadi masalah.


Bagian :

<?php if ( $my->id ) { initEditor(); } ?>




Ini berfungsi untuk memanggil HTML editor utntuk mengedit content apabila ada user yang melakukan login dari front end


Bagian:

<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/
css/template_css.css\" type=\"text/css\"/>" ; ?>



ini berfungsi untuk memanggil file CSS yang dipergunakan untuk mengatur tampilan dari index.php ini, dimana secara deafault akan memanggil file template_css.css yang ada didalam folder css didalam direktori templates anda.

 

Body


Bagian ini adalah kode kode yang diletakkan setelah bagian header.
Secara anatomi sederhana dapat diisikan sbb

<body>
<?php echo $mosConfig_sitename;?>
<?php mospathway()?>
<?php mosLoadModules('top');?>
<?php mosLoadModules('left');?>
<?php mosMainBody();?>
<?php mosLoadModules('right');?>
<?php include_once( $mosConfig_absolute_path .'/includes/footer.php' );?>
</body> </html>



Semua kode ini dibuat dgn mudah, dengan cara menekan ikon-ikon joomla solution yang terdapat pada toolbar Dreamweaver Anda setelah meletakkan posisi cursor diantara script :

<body> <!—posisi kursor  </body></html>

 

Bagian :

<?php echo $mosConfig_sitename;?>

 

 

akan menampilkan nilai Site Name  yg telah Anda masukkan pada Global Configuration (melalui halaman Administrator) atau secara manual pada file configuration.php

 

Bagian :

<?php mospathway()?>

 

akan menampilkan informasi navigasi pada saat Anda membrowsing sebuah halaman.

 

Bagian :

<?php mosLoadModules('top');?>
<?php mosLoadModules('left');?>
<?php mosLoadModules('right');?>

 

 

akan menampilkan module module yg di publish pada posisi yang bersangkutan (top, left, right)

 

Bagian : 

 

<?php mosMainBody();?>

akan menampilkan content utama dari dari joomla. Jadi code ini mutlak ada pada setiap index.php

 

Bagian : 

<?php include_once( $mosConfig_absolute_path .'/includes/footer.php' );?>

 

 

akan menampilkan informasi footer yang diambil dari nilai pada file : <root>/includes/footer.php 

 


Selesai!! Sebuah file index.php telah berhasil Anda buat

 


Last update: Sabtu, 30 Juni 2007

Published in : Artikel, Tutorial
Quote this article in website Favoured Print Send to friend Related articles Save this to del.icio.us

Users' Comments (20) RSS feed comment
Posted by salim, on 30-06-2007 05:51,
1. koreksi dikit...
koreksi dikit ya om....si om ada salah ketik di bagian 
 
-cut- secara otomatis pada halaman mambo. Pada bagian ini juga didefinisikan standar ISO yang dipergunakan pada web mambo Anda. ISO ini lah -cut- 
 
harusnya joomla kan??? CMIIW
 
» Report this comment to administrator

Posted by sikumbang, on 30-06-2007 07:18,
2. ...
@salim 
thx, dah dibenerin :D
 
» Report this comment to administrator

Posted by salim, on 30-06-2007 11:35,
3. ...
sip om....dilanjut :)
 
» Report this comment to administrator

Posted by arekganteng, on 30-06-2007 12:06,
4. ...
bos terima kasih atas sharing ilmunya moga tambah manfaat buat orang lain..
 
» Report this comment to administrator

Posted by goldenisland, on 30-06-2007 18:33,
5. pm
tq banget, saya akan coba dulu, tapi tampaknya ok ya, 
sekali lagi tq deh... nanti komen berikutnya setelah saya cpoba ya.....
 
» Report this comment to administrator

Posted by freedomfighter, on 02-07-2007 05:30,
6. ...
aku biasanya pakai template sekarang mau coba buat sendiri sapa tau biar jelek buatan sendiri ya pak..
 
» Report this comment to administrator

Posted by iwatasu, on 03-07-2007 06:49,
7. ...
btw, thx banyak2...! walo saya masih bingung, mungkin karena saya orang graphic kali ye, bukan programmer :) tapi semoga suatu saat, mas kumbang ini membahasnya dari sisi designer graphic heheheh ... :D THX
 
» Report this comment to administrator

Posted by andhi, on 17-07-2007 15:34,
8. ...
Terima kasih banyak ilmunya,semoga yg menulis, ilmunya terus terus bertambah juga rezekinya :)
Oleh Karena saya baru saja mengenal joomla (kemarin2 tidur),bisa ga saya request seri 1 dan 2 nya?by japri juga boleh..:D 
terima kasih sekali lagi.
 
» Report this comment to administrator

Posted by uwong, on 22-09-2007 11:39,
9. gak mumet lagi
siip deh, jadi otak ini agak terbuka n gak mumet lagi setelah baca langkah 3 ini. :roll  
btw, langkah 4nya belum dirilis ya oom? jd nge-fan nih :zzz
 
» Report this comment to administrator

Posted by shoesilo, on 27-09-2007 05:19,
10. JS extention ga cmpatible dg dreamweaver
:upset mumet om iki wong ndeso. mo tanya kenapa joomla solutionnya ga bisa di install. pesan errornya THE EXTENTION PACKAGE NOT COMPATIBLE WITH THIS VERSION. 
saya menggunakan Dreamweaver MX versi 6.1 terus JSEnya versi 1.0. 
emang harus menggunakan versi berapa biar bisa diinstall?
 
» Report this comment to administrator

Posted by gylangzone, on 02-12-2007 08:18,
11. mau nanya nih mas
wah ternyata di internet sangat banyak template joomala yg bagus2 ya! :grin Lho?! tapi koq ad tulisan "your company name" -nya? :? Bisa dihilangin atau diganti ga mas? :sigh
 
» Report this comment to administrator

Posted by biasaja, on 24-12-2007 14:59,
12. Lanjuutannya di mana bang andy
trus klo ganti template dan menu yang ada agar tidak kacau, banyak yang harus dirubah (css nya)ya?
 
» Report this comment to administrator

Posted by gejrotz, on 04-01-2008 17:12,
13. tanya penting..
mas maaf mau tanya  
gimana caranya ngilangin menu/modul yg dikiri ama kanan 
jadi main pagenya luas ga kepotong ama menu/modul kiri dan kanan 
 
makasih sebelumnya..
 
» Report this comment to administrator

Posted by hermant, on 23-01-2008 08:06,
14. ditunggu
lanjutanya ditunggu juragan.. :)
 
» Report this comment to administrator

Posted by serdadu, on 23-01-2008 21:10,
15. thx
perasaan ini tak tertahan. trimakasih.. bro :cry
 
» Report this comment to administrator

Posted by egcool, on 30-01-2008 19:22,
16. Ditunggu..
Ditunggu tutorial selanjutnya, thx :)
 
» Report this comment to administrator
» 

Posted by asnaldi, on 30-03-2008 10:47,
17. Minta Pencerahan Boss
tq banget, saya akan coba dulu, merasa tertantang neh,  
sekali lagi tq deh... tapi saya minta bantu neh bisa lihat http://elearning-po.unp.ac.id, apa nya salah tuh boss. saya nantikan komen berikutnya setelah boss lihat web saya itu, cpoba ya.....
 
» Report this comment to administrator

Posted by Dwi Kisjanto, on 01-05-2008 01:22,
18. upload di template manager
teng u banget atas nih atas sharing info. ada tambahan dikit dong ... gimana caranya template yang kita buat bisa masuk ke dalam template manager di administrator joomla
 
» Report this comment to administrator

Posted by dwee, on 04-07-2008 19:36,
19. Installation
@Dwi ... Untuk menginstal template caranya: Installers > Template Site > Browser (Upload & Install)
 
» Report this comment to administrator

Posted by Gober, on 27-07-2008 00:53,
20. Mana seri 4nya?
Saya cari2, kok gak ada lanjutan seri 4 nya artikel ini y? padahal pengetahuan praktis ini yang justru gak ada di buku2 joomla. mas kumbang, kalo emang njenengan mau nulis buku ttg ini, kasih tau saya y? saya pasti beli! kalo nggak, ya tolong dilanjut ke seri 4.. :)
 
» Report this comment to administrator

Add your comment



mXcomment 1.0.2 © 2007-2009 - visualclinic.fr
License Creative Commons - Some rights reserved
 
< Sebelumnya   Berikutnya >