Tampilkan postingan dengan label Web. Tampilkan semua postingan

TUTORIAL SINGKAT CARA INSTAL DAN SETTING WEB SERVER XAMPP DI LINUX (CentOS 6) – STUDI KASUS KPDE PEMPROV JAMBI

by ronald on Selasa, 19 Juni 2012 · 0 Comments

Fiuh.. lama tidak menulis kembali karena kesibukan penulis dalam beberapa projek dan aktifitas mengajar. Nah.. Kali ini penulis akan membagikan sedikit pengalaman dalam melakukan instalasi XAMPP pada Linux.

Instalasi dan setting web server pada Linux meruapakan suatu hal penting yang harus kita lakukan dalam pembangunan Aplikasi Web menggunakan PHP. Mengapa ? Karena web server apache yang dijalankan pada OS Linux cenderung lebih bebas virus dan aman dibandingkan OS Windows. Pada kasus kali ini penulis akan menggunakan distro Linux CentOS (Karena di KPDE Pemprov telah lama menggunakan Linux ini sehingga penulis hanya melakukan upgrade versi dan melakukan penyesuaian hehe..:)


Apa saja yang harus dipersiapkan sebelum memulai ??
•    XAMPP for Linux
•    Kabel UTP yang telah siap pakai (Gunakan cross over jika Anda ingin menguji meggunakan 2 komputer)


Setelah melakukan persiapan, berikut adalah langkah – langkah instalasi dan setting web server XAMPP pada Linux :
1.    Kopikanlah file XAMPP Anda kedalam folder opt

Baca selengkapnya »

Memperbaiki Cacat Pada Laporan PDF Menggunakan FPDF

by ronald on Kamis, 23 Februari 2012 · 16 Comments

Pada pembahasan artikel yang lalu, kita pernah membahas cara pembuatan laporan PDF menggunakan PHP memanfaatkan library FPDF. Namun, tahukah Anda laporan dengan memanfaatkan FPDF ini memliki banyak kelemahan. Salah satu contohnya adalah apabila terdapat sebuah konten yang melewati batas garis dari kolom yang diijinkan. Bingung?? Mari perhatikan contoh kode berikut ini :

    define('FPDF_FONTPATH', 'fpdf/font/');
    require('fpdf/fpdf.php');
    $pdf=new FPDF('P','cm',"Legal");
    $pdf->Open();
    $pdf->AddPage();
    $pdf->AliasNbPages();
    $pdf->SetMargins(1,1,1);
    $pdf->SetFont('times','B',12);

    $pdf->Cell(0,0.9,'Laporan Barang',0,0,'C');
    $pdf->Ln();   
    $tgl=date('Y-m-d');
    $pdf->SetFont('times','B',8);

    $pdf->SetFont('times','B',10);
    $pdf->Cell(1,0.6,"NO",'LTR',0,'C');
    $pdf->Cell(8,0.6,"NAMA",'LTR',0,'L');
    $pdf->Cell(1.8,0.6,"SATUAN",'LTR',0,'C');   
    $pdf->Cell(2.1,0.6,"STOK",'LTR',0,'C');
    $pdf->Ln();   
   
    $pdf->SetFont('times','',10);
    $pdf->Cell(1,0.6,"1",'LTR',0,'C');
    $pdf->Cell(8,0.6,"Buku Tulis Matematika Kualitas ABCD Kiki 80 gram 1 Lusin ",'LTR',0,'L');
    $pdf->Cell(1.8,0.6,"Lusin",'LTR',0,'C');   
    $pdf->Cell(2.1,0.6,"100",'LTR',0,'C');
    $pdf->Output();
?>

Kode diatas apabila dijalankan akan terlihat seperti gambar dibawah ini :
 

Baca selengkapnya »

Javascript Dasar

by ronald on Sabtu, 19 November 2011 · 0 Comments

Apa itu Javascript ?
Javascript merupakan bahasa pemrograman yang dijalankan pada sisi klien. Walaupun bahasa ini menggunakan kata “java” namun sesungguhnya bahasa ini bukanlah java yang diciptakan oleh James Gosling. Javascript adalah pemrograman structural sedangkan java adalah bahasa pemrograman berorientasi objek. Pada pemrograman yang dijalankan pada sisi klien (client-side) semua kode diletakan pada file html yang kemudian akan dieksekusi oleh browser.

Menggunakan Javascript
·    Untuk Anda dapat dengan mudah memahami javascript, marilah kita mempraktekkannya dengan membuat file baru dengan nama latihan4.php.

Baca selengkapnya »

Rapikan Cetakan Dengan CSS

by ronald on Jumat, 25 Februari 2011 · 0 Comments

Selamat datang kembali di BLOG resmi Jambispirit.com

Maaf lama tidak berjumpa karena penulis disibukkan dengan proyek yang menumpuk dan disibukkan dalam penyusunan tesis. >,<

Baiklah, lalu apa artikel kali ini.?
Oke kali ini penulis akan membahas cara merapikan laporan dengan CSS. Lho.?? lalu apa bedanya dengan artikel sebelumnnya yang membahas cara mencetak laopran dengan FPDF.??

Baiklah, dalam beberapa kasus, terkadang kita sulit menggunakan FPDF khususnya untuk data-data yang panjang sekali dan data yang asimetris. Masih bingung.?? baiklah berikut akan saya uraikan.

Pernahkah Anda memiliki data yang cukup panjang, jika ya, apa yang akan terjadi jika data tersebut melewati garis yang ada pada table dalam FPDF anda.?? untuk lebih jelas perhatikan gambar dibawah ini :

Baca selengkapnya »

MENGEMBALIKAN HASIL FILTER XSS KE BENTUK NORMAL : CONTOH KASUS PEMBUATAN LAPORAN

by ronald on Kamis, 16 Desember 2010 · 0 Comments

Pada beberapa kasus lalu, kita membahas cara membuat editor sederhana menggunakan NICeditor. Pada kasus tersebut kita mengubah textarea mejadi layaknya seperti MS.Word. Sebenarnya editor tersebut mengkonversi apa yang kita pemformatan karakter masukkan mejadi dalam format HTML. Misalnya :

Halo, Apa Kabar menjadi <b>Halo, Apa Kabar</b>

Seperti yang kita ketahui segala sesuatu pasti memiliki suatu dampak baik itu posititf maupun negative. Untuk dampak positifnya, tentunya penulis tidak perlu menjelaskannya lagi. Nah.. Untuk dampak negatifnya adalah ketika Anda akan membuat laporan yang berisi data dari hasil konversi tersebut.

Baiklah untuk lebih jelasnya, coba buatlah sebuah database xss dimana didalamnya terdapat juga reverse dengan field sebagai berikut :


Baca selengkapnya »

MEMBUAT EDITOR SANGAT SEDERHANA DENGAN NICEDITOR

by ronald on Selasa, 14 Desember 2010 · 2 Comments

Pada ulasan lalu, kita telah mengulas tentang serangan XSS. Pada ulasan tersebut kita membahas cara menangkal serangan tersebut dengan melakukan filter pada elemen form. Akan tetapi.. sebenarnya untuk hal sederhana seperti jika kita menggunakan editor khusus, kita sudah tidak perlu lagi melakukan filter tersebut. hanya saja kita sebaiknya tidak memasang editor tersebut pada seluruh textfield.


Baca selengkapnya »

CARA MUDAH MENANGKAL SERANGAN XSS

by ronald on Minggu, 12 Desember 2010 · 2 Comments

Anda adalah seorang developer web?? Jika jawabannya adalah “Ya”, maka Anda tentu sudah tidak asing lagi dengan yang namanya XSS. XSS atau juga biasa disebut dengan Cross Site Scripting adalah sebuah teknik serangan terhadap suatu sistus web dengan cara menyisipkan kode pada komponen form sehingga script (biasanya bersifat merusak) tersebut dijalankan secara tidak sengaja oleh website itu sendiri.

Untuk lebih jelasnya kita langsung saja ke contoh kasus. pertama buatlah sebuah file PHP dengan sebuah form yang didalamnya terdapat sebuah text area. Tak lupa jangan ketinggalan tombol submitntya ya.. :]

Selanjutnya, berilah nama textarea tersebut dengan nama “xss”.
Jika sudah sampai disini, kita harus membuat sebuah database untuk mengetahui efek serangan dari XSS ini, untuk itu bukalah phpmyadmin Anda dan buat lah sebuah database dengan nama “xss”.


Baca selengkapnya »

MEMBUAT SUDUT OVAL PADA GAMBAR ATAU KOMPONEN LAIN PADA WEB

by ronald on Selasa, 07 Desember 2010 · 0 Comments

Beberapa tahun lalu, saya ingat ketika itu saya masih membuat sebuah gambar sendiri dengan menggunakan Photoshop atau aplikasi lain sejenis. Saya melakukan itu semata mata untuk memperindah tampilan web Saya. Untuk memudahkan nolstalgia Anda, Coba perhatikan gambar berikut :



Pada gambar diatas, saya sengaja membuat sudut yang tumpul untuk memperindah tampilan yang terkadang mungkin terasa merepotkan. Namun lain dulu lain sekarang, Sekarang untuk membuat hal tersbut, pejam sebelah mata pun bisa. hehehe..

Ah benar ne.?! Mari simak bahasan berikut ini kalau tidak pecaya. :p
Pertama- tama bukalah Dreamwever CS kesayangan Anda (Dalam kasus ini penulis masih menggunakan DW CS4 sebagai pamungkas)

Baca selengkapnya »

CARA MEMBUAT TAMPILAN GLASSY PADA WEB

by ronald on Jumat, 03 Desember 2010 · 0 Comments

Jika Anda sering berselancar ke dunia maya, ,mngkin Anda sering menjumpai beberapa halaman web yang bergaya glassy dimana pada web tersebut Anda masih dapat melihat background web pada sebuah konten.

Ok, langsung saja tanpa basa basi kita langsung mulai saja. pertama-tama, bukalah Dreamwever kesayangan Anda (disini saya memakai DW CS4).


Selanjutnya, buatlah sebuah file CSS dan buatlah link dari halaman php sebelumnya ke halaman CSS tersebut :
<link href="glass.css" rel="stylesheet" type="text/css" />
Jika sudah siapkanlah sebuah gambar yang nantinya akan kita jadikan background. Disini, penulis menggunakan gambar tulip yang ada pada windows 7 (sebaiknya gambar ini direname terlebih dahulu dengan menghilangkan spasi dan menjadi huruf kecil semua agar tidak mengalamai error pada saat upload—jika ada rencana).


Baca selengkapnya »

Hal Pertama Yang Harus Diingat Dalam Membuat Mobile Web, Mobile Web Touch Screen Dan Web Dekstop

by ronald · 0 Comments

Mobile Web adalah sebuah website yang khusus dibuat untuk perangkat-perangkat mobile dengan kapasitas sumber daya yang kecil seperti handphone, smartphone dan keluarga-keluarganya. Meskipun begitu, mobile web memiliki perbedaan dengan web dekstop yaitu ukuran file yang kecil dan flexibilitas ukuran layar. Selain itu masih ada beberapa aturan lainnya. ok simak tulisan dibawah ini dengan seksama.

Pada saat pertama kali membangun web mobile, penulis mengira penulis hanya perlu membuat sebuah web tableless yang ukurannya dikecilkan sehingga semua ponsel pasti dapat membukanya. Memang asumsi penulis ada benar dan ada salahnya. Benarnya yaitu hampir semua ponsel dapat membuka web mobile penulis, namun untuk ukuran ponsel touchscreen bersistem operasi Android, maka ponsel tersbut tersebut akan membuka halaman penulis seperti layaknya web dekstop sehingga penulis perlu melakukan zooming,

Setelah penulis selidiki ternyata yang membedakannya adalah tulisan dibagian atas sebuah web mobile. perhatikan gambar berikut (Anda juga bisa membuka langsung sebuah web dekstop biasa dengan browser Anda) :


Baca selengkapnya »

Cara Membuat Radio Online Kurang Dari 5 Menit atau Kurang !

by ronald on Kamis, 02 Desember 2010 · 0 Comments

Bagi Anda pemilik stasiun radio atau yang berminat dalam hal broadcasting. Radio online dapat menjadi alternative. Kenapa.?? karena jika Anda ingin membuka stasiun radio sendiri, maka Anda memerlukan ijin dari ORARI dan ijin-ijin lainnya yang mungkin memerlukan dana lebih. Hal ini belum lagi ditambah dengan infrastruktur radio lainnya yang perlu dibangun.

Ada pepatah “Tak Ada Rotan Akar Pun Jadi”.  Artinya jika tidak ada radio konvensional maka radio online pun jadi. Sebenarnya radio online banyak dijadikan pendukung radio konsensional yang telah ada karena beberapa kelebihan, diantaranya :

1.    Biaya pembangunan yang relative lebih murah
2.    Jangkauan pendengar yang sangat luas (asal ada koneksi internet)
3.    Dapat dibangun dalam waktu 5 menit bahkan kurang.!! Hahahaha

Ok, mari kita buktikan apakah benar bisa kurang dari 5 menit.

1.    Kunjungilah situs http://listen2myradio.com/
2.    Tekan link signup, dan isikan data-data yang diminta berserta email Anda.

3.    Jika sudah, masuk ke email Anda dan tekan link konfiemasi dari http://listen2myradio.com/
 

Baca selengkapnya »

MEMBUAT LABEL DIDALAM TEXTFIELD PADA WEB

by ronald on Sabtu, 20 November 2010 · 7 Comments

Beberapa waktu yang lalu, saya ditelepon oleh teman saya dari Batam. Teman Saya pernah membuat sebuah web perhotelan di provinsi Jambi. Namun, karena pemilik hotel ingin mengubah tampilannya agar lebih baik, maka teman saya diminta untuk membuat sebuah label yang tampil pada sebuah texfield.


Bagi anda seorang web developer, tentu anda sering menemukan kendala tersebut. Beberapa diantaranya yang cukup sering adalah pemasangan form login atau form pencarian pada sisi-sisi sempit. untuk lebih jelasnya perhatikan gambar berikut ini:


Pada gambar diatas, diketahui bahwa sebuah label yang memberikan informasi kepada pengguna mengenai data yang seharusnya diisi pada texfield pada gambar diatas MEMAKAN SPACE. Selain itu, hal diatas juga dapat mengurangi keindahan form yang Anda buat karena seringkali membuat form terlipat atau terlihat memanjang kebawah.

Nah.. salah satu cara yang sering dilakukan untuk mengatasi hal diatas adalah dengan cara memasukan sedikit kode javascript pada textbox Anda. Sebenarnya masih ada cara lain melalui CSS. Namun menurut penulis, inilah cara yang paling mudah. hehehe..


Baca selengkapnya »

Cara Super Mudah Membuat Front End Website

by ronald on Jumat, 24 September 2010 · 1 Comment

Musim liburan telah usai. Para mahasiswa STIKOM DB JAMBI mulai disibukan dengan kegiatan skripsi. Bagi yang akan menyusun tentang proyek sebuah website, disini ada sedikit sharing dari saya untuk kamu" skalian. Di jamin deh pekerjaan kamu bakal lebih mudah. so.? check it out!! hehe

Dalam membuat front End, hal yang terpenting adalah membuat sebuah prototype dahulu. Prototype harus direncanakan dari awal sehingga dapat menghemat sumber daya dalam pengerjaannya kelak. Adapun tampilan prototype yang diharapkan dari website ini adalah sebagai berikut :

Dari gambar prototype front end diatas, dapat diketahu bahwa website kita terdiri atas beberapa modul yang bersifat dinamis sepeti menu, mitra kami, seputar sekolah dan jajak pendapat dimana data-data dari modul tersebut disimpan didalam database.

Untuk menghemat waktu pengejaan, penulis memutuskan untuk mencari template yang hampir sama dengan gambar prototype diatas. Saat ini, banyak cara mendapatkan template baik dengan cara klik kanan dan memilih save page as ataupun dengan mendownload dari website khusus yang menyediakan template gratis. Berdasarkan prototype diatas tadi, maka template yang akan penulis buat secara garis besar dapat disederhanakan seperti berikut :


Baca selengkapnya »

Mari Membuat Form Dinamis Sederhana Dengan Javascript

by ronald on Rabu, 11 Agustus 2010 · 2 Comments


Bagi Anda pengembang software berbasis desktop tentu sudah tidak asing lagi dalam membuat perhitungan secara dinamis dalam sebuah form. Misalnya seperti gambar berikut : 


Pada gambar diatas, bila pengguna memilih jenis paket yang ada dalam combobox, maka secara otomatis textbox detail akan ikut berubah sesuai dengan paket yang dipilih oleh pengguna. Kemudian, bila pengguna mengisikan harga beserta jumlah, secara otomatis total akan ditampilkan.
 
Nah bagaimana jika cara tersebut dibuat menjadi web based ??
Apakah hal tersebut dapat dibuat dengan menggunakan bahasa pemrograman PHP ?

Berdasarkan fakta, PHP tidak diciptakan untuk bekerja secara langsung pada komputer client. Semua data harus dikirim terlebih dahulu ke server yang kemudian hasil perhitungan akan dikembalikan lagi kepada client. Berdasarkan fakta tersebut, pembuatan form dinamis menggunakan PHP hampir dipastikan MUSTAHIL karena PHP bersifat server side.


Jika memang begitu, apa alternatifnya ?
Sebenarnya, terdapat banyak alternative yang mungkin bisa digunakan. Salah satunya kita akan menggunakan client side scripting yang akan dibahas dalam tutorial kali ini, so?? CeKidOt..!! hahaha..
Agar memudahkan pemahaman Anda, kasus kali ini kami sajikan dalam bentuk sampel. Langkah pertama, buatlah tampilan seperti menggunakan editor kesayangan Anda sehingga tampak seperti gambar berikut :


Baca selengkapnya »

Cara Mudah Membuat Laporan PDF Menggunakan PHP

by ronald on Rabu, 04 Agustus 2010 · 22 Comments

Pernahkan Anda membuka sebuah situs untuk mencari suatu informasi.? Jawabannya pasti YA. Namun, sering kali informasi yang kita butuhkan terlalu banyak sehingga kita merasa perlu untuk mencetaknya diatas kertas untuk membacanya sewaktu-waktu. Cara yang sering digunakan untuk mencetak sebuah halaman web adalah langsung dari browser dengan memilih file->print.

Namun, cara yang isebutkan diatas seringkali tidak efisien dimana bagian yang tidak penting juga akan ikut tercetak. Untuk mengatasi masalah ini, sebagian web menyediakan fasilitas untuk mencetak dalam bentuk PDF yang lebih siap ready to print. Nah.. pada artikel kali ini kita akan membahas cara untuk membuat file PDF dengan menggunakan PHP dimana ini juga berfungsi untuk membuat ebook, kartu nama dan lainya. So Don’t Miss It.! CeKidOt..!! (alias Check It Out hehe..).

Jika Anda ingin memca secara offline, silahkan download file PDF berikut

Sebelum kita memulai membuat aplikasi sederhana ini, ada baiknya Anda menyediakan beberapa kebutuhan software berikut:
• Paket Web Server(XAMPP, WAMPP, Appserv, dan lain sebagainya)
• Editor PHP (disini penulis menggunakan Dreamveawer CS4)
• Library FPDF (dapat di unduh dari http://www.fpdf.org)

Jika sudah, langkah selanjutnya adalah mengkopi file FPDF yang anda unduh ke direktori server lokal Anda (www atau htdocs) :


Baca selengkapnya »
by ronald on Rabu, 21 Mei 2008 · 0 Comments

J2ME & PHP
J2ME merupakan bahasa bahasa pemrograman java yang khusus diperuntukan untuk aplikasi wireless/mobile. Umumnya, J2ME sering dikombinasikan dengan saudaranya yaitu J2EE tetapi bukan tidak mungkin kalau J2ME dikombinasikan denfan PHP. Pada artikel kali ini penulis berusaha menyajikan sedikit contoh bagaimana J2ME berinteraksi dengan PHP. Berikut adalah contoh skripnya:
Kode J2ME :
import java.io.*;
import javax.microedition.io.*;
import javax.microedition.lcdui.*;
import javax.microedition.midlet.*;
public class SimpleGETExample extends MIDlet {
private Display display;
public SimpleGETExample() {
display = Display.getDisplay(this);
}
public void startApp() {
try {
testGET(url);
} catch (IOException e) {
System.out.println("IOException " + e);
e.printStackTrace(); }
}
public void pauseApp() { }
public void destroyApp(boolean unconditional) { }

void testGET(String url) throws IOException {

HttpConnection connection = null;

InputStream is = null;

OutputStream os = null;

StringBuffer stringBuffer = new StringBuffer();

TextBox textBox = null;

try {

connection = (HttpConnection)Connector.open(url);

connection.setRequestMethod(HttpConnection.GET);
connection.setRequestProperty("IF-Modified-Since","20 Jan 2001 16:19:14 GMT");
connection.setRequestProperty("User-Agent","Profile/MIDP-2.0 Confirguration/CLDC-1.0");
connection.setRequestProperty("Content-Language", "en-CA");
connection.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
os = connection.openOutputStream();
is = connection.openDataInputStream();
int ch;
while ((ch = is.read()) != -1) {
stringBuffer.append((char) ch);
}
textBox = new TextBox("Simple GET Test", stringBuffer.toString(), 1024, 0);
} finally {
if(is!= null) {
is.close();
}
if(os != null) {
os.close();
}
if(connection != null) {
connection.close();
}
}
display.setCurrent(textBox);
}
}
Kode PHP :

case 1: $response = "Good Morning"; break;
case 2: $response = "Good Afternoon"; break;
case 3: $response = "Good Evening"; break;
default: $response = "Hello"; break; }
}
echo $response;?>

by ronald on Senin, 19 Mei 2008 · 0 Comments

Efek Dari Register Globals

Pada posting sebelumnya, kita sudah membahas perbedaan register globals. Mungkin ada sebagian dari kita bertanya-tanya apakah dampaknya bagi web yang kita buat antara register globals On dan register globals Off. Berikut Adalah pengaruh register globals Off :

  • Karena tidak memperdulikan sumber dari variabel, maka masalah akan timbul apabila mterdapat nama variable yang sama. Misalkan kita memberikan nama $username menggunakan GET,kemudian $username juga digunakan pada SESSION, maka tentunya PHP harus memilih salah satu saja dimana variable lain tidak berfungsi atau dinggap sama.
  • Karena alasan rentannya keamanan yang cukup tinggi apabila register global di set On, terutama jika skripnya diketahui banyak orang.

by ronald · 2 Comments

Perbedaan Register Globals ‘On’ dan ‘Off’ Dalam PHP


Dalam pemrograman PHP, tentu kita mengenal suatu setingan yang disebut dengan ‘Register Globals’. Register globals adalah salah satu seting yang terdapat didalam file php.ini yang bertugas untuk mengatur apakah variable-variabel EGCPS(Environment ,Get , Post, Cookie, Server).
Pada awal perkembngannya, secara defult register globals di set On dengan tujuan memberi kemudahan pengguna dalam mempelajari PHP, sehingga pengguna dapat mengambil/memilih variable cukup menyebutkan nama variabelnya, tidak perduli apakah variable tersebut berasal dari GET, POST, COOKIE atau SESSION. Perhatikan Contoh Berikut:



If ($oke)==’kirim’){
Echo “Nama Anda adalah : $nama”; }


Apabila Register globals off, maka dalam penulisan skrip perlu dilakukan penyesuaian berikut:

If ($GET[oke])==’kirim’){
Echo “Nama Anda adalah : $_GET[nama]”; }


Sumber : Membongkar trik rahasia para master php, Lukmanul Hakim, Lokomedia 2008

by ronald on Sabtu, 17 Mei 2008 · 1 Comment

Cara Instan Membuat Template Joomla Sederhana(part 2)




Langkah keempat, Membuat struktur folder template

Berikut ini adalah struktur template mambo, tetapi dapat juga digunakan pada joomla:


  • Buatlah folder baru dengan nama ‘terserah’
  • Bukalah folder tersebut dan buatlah lagi 2 folder dengan nama ‘css’ dan image’
  • Simpanlah file dreamweaver yang kita buat pada folder ‘terserah’ dengan nama ‘index.php’
  • Selanjutnya buatlah file xml dengan cara file -> new ->basic page -> xml
  • Kopikan file berikut, save pada folder ‘terserah’ dan beri nama 'templateDetails.xml'

-------------------------------------------------------------------------------------------------





ms_dwtutorial

Dec 2004

mambosolutions

This template is released under GNU/GPL License.

info@mambosolutions.com

www.mambosolutions.com

1.0

mambosolutions dreamweaver/MSAS tutorial template



index.php

template_thumbnail.png





images/header.jpg

images/header_bg.jpg





css/template_css.css



------------------------------------------------------------------------------------------------

  • Sekarang buatlah file css dan kopikan kode berikut dan simpanlah dengan nama ‘template_css.css’

------------------------------------------------------------------------------------------------

BODY {

margin : 0px 0px 0px 0px;

background-color : #FFFFFF;

color : #000000;

background-color: #F8F8FF;

scrollbar-base-color: #778899;

}



td, tr, p, div {

font-family : Verdana, Arial, Helvetica, sans-serif;

font-size : 11px;

color : #333333;

}



ul {

margin : 0px 0px 0px 0px;

}



hr {

background : #CCCCCC;

height : 1px;

width : 100%;

}



.title {

font-family: sans-serif;

font-size: 24px;

font-weight: bold;

color : #7B8DA1;

}



.pathway {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

color: #000000;

}



a.pathway:link, a.pathway:visited {

color : #000000;

font-weight : normal;

}



a.pathway:hover {

color : #000000;

font-weight : normal;

text-decoration : underline;

}



/* --Default Class Settings-- */



a.mainlevel:link, a.mainlevel:visited {

color: #333333;

background-position: left;

text-align: left;

font-weight: bold;

}



a.mainlevel:hover {

color: #00000;

background-position: left;

text-align: left;

}







a.mainmenu:link, a.mainmenu:visited {

color: #333333; font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, serif;

font-weight: bold;

}



a.mainmenu:hover, {

color: #000000; text-decoration: underline;

}



a.sublevel:hover {

color: #000000; text-decoration: underline;

}



a.sublevel:link, a.sublevel:visited {

color: #333333; font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, serif;

font-weight: normal;

}





table.moduletable {

margin: 0px 0px 0px 0px;

width: 95%;

border-left: solid 0px #000000;

border-right: solid 0px #000000;

border-top: solid 0px #000000;

border-bottom: solid 0px #000000;

margin-left: 5px;

}



table.moduletable th {

font-size : 11px;

font-weight : bold;

color : #000000;

text-align : left;

width : 100%;

padding: 10px 10px 10px 10px;

margin: 20px 5px 20px 5px;



}



table.moduletable td {

font-size: 10px;

font-weight: normal;

border: 1px solid #333;

padding: 10px 10px 10px 10px;

margin: 20px 5px 20px 5px;

background-color: #F8F8FF;

}



.poll {

font-family : Arial, Helvetica, sans-serif;

font-size : 10px;

color : #666666;

line-height : 14px;

}





.sectiontableheader {

background-color : #CCCCCC;

color : #7B8DA1;

font-weight : bold;

}



.sectiontableentry1 {

background-color : #F0F0F0;

}



.sectiontableentry2 {

background-color : #E0E0E0;

}





.small {

font-family : Verdana, Arial, Helvetica, sans-serif;

font-size : 10px;

color : #3366C0;

text-decoration : none;

font-weight : medium;

}



.smalldark {

font-family : Verdana, Arial, Helvetica, sans-serif;

font-size : 10px;

color : #000000;

text-decoration : none;

font-weight : normal;

}





.contentpane {

background : #FFFFFF;

}



.contentpaneopen {

background : #FFFFFF;

}



.contentheading, .componentheading {

font-family : Verdana, Arial, Helvetica, sans-serif;

font-size : 11px;

font-weight : bold;

color : #7B8DA1;

text-align : left;

}



.createdate {

font-family : Arial, Helvetica, sans-serif;

font-size : 10px;

color : #999999;

text-align : left;

}





.button {

font-family : Verdana, Arial, Helvetica, sans-serif;

font-style : normal;

font-size : 10px;

font-weight : bold;

background-color : #F0F0F0;

color : #000000;

border : 1px solid #CCCCCC;

}



.inputbox {

font-family : Verdana, Arial, Helvetica, sans-serif;

font-size : 10px;

color : #000000;

background-color : #F0F0F0;

border : 1px solid #CCCCCC;

}





a:link, a:visited {

font-size : 11px;

color : #000000;

text-decoration : none;

font-family : Verdana, Arial, Helvetica, sans-serif;

}



a:hover {

color : #000000;

text-decoration : underline;

}



/* For content item titles that are hyperlink instead of Read On */

a.contentpagetitle:link, a.contentpagetitle:visited {

font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;

font-size: 13px;

font-weight: bold;

color: #000000;

text-align:left;

}



a.contentpagetitle:hover {

font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;

font-size: 13px;

font-weight: bold;

text-align:left;

color: #7B8DA1;

text-decoration: underline;

font-weight: bold;

}



a.category:link, a.category:visited {

color : #333333;

font-weight : bold;

}



a.category:hover {

color : #7B8DA1;

}



/* Styles for dhtml tabbed-pages */

.ontab {

background-color: #ffae00;

border-left: outset 2px #ff9900;

border-right: outset 2px #808080;

border-top: outset 2px #ff9900;

border-bottom: solid 1px #d5d5d5;

text-align: center;

cursor: hand;

font-weight: bold;

color: #FFFFFF;

}

.offtab {

background-color : #e5e5e5;

border-left: outset 2px #E0E0E0;

border-right: outset 2px #E0E0E0;

border-top: outset 2px #E0E0E0;

border-bottom: solid 1px #d5d5d5;

text-align: center;

cursor: hand;

font-weight: normal;

}

.tabpadding {

}



.tabheading {

background-color: #ffae00;

text-align: left;

}



.pagetext {

visibility: hidden;

display: none;

position: relative;

top: 0;

}



/* for modifying {moscode} output. Dont set the colour! */

.moscode {

background-color: #f0f0f0;

}



/* Text passed with mosmsg url parameter */

.message {

font-family : Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

font-size : 10pt;

color : #ff6600;

text-align: center;

}

/* custom stuff */

.container

{

border: solid;

border-width: 1px;

border-color: #efefef;

background-color: White;

}

.boxes {

border: solid;

border-color: #efefef;

border-width: 1px;


}

-------------------------------------------------------------------------------------------------

Nah template kita jadi. Anda dapat menjalankan joomla anda dan menginstallnya. Namun tampilannya masih kosong(misalnya memasukan gambar hehehe...). Anda dapat memodifikasinya sesuka hati anda dengan dreameaver atau tool yang lainnya. Selamat mencoba….

Cara Instan Membuat Template Joomla Sederhana (part1)

by ronald · 4 Comments

Cara Instan Membuat Template Joomla Sederhana(part 1)

Dewasa ini joomla makin popular karena sifatnya yang simple dan open source. Misalnya kita ingin mengubah tampilan web yang kita buat kita hanya perlu menginstal sebuah template yang disediakan oleh pihak lain. Namun, Bagaimana kalau kita ingin membuat template sendiri??. Nah berikut adalah Contoh pembuatan template joomla sederhana.

Sebelum memulai sebaiknya kita memiliki tool(minimal trial) berikut:


Langkah pertama , jalan dreamweaver kesayangan anda dan installah Joomlasolution


  • Bukalah dreamweaver, pada menu pilihlah ‘commands’ dan pilihlah ‘extention manage’
  • Pada extention manager, pilihlah ‘file’ kemudian ‘install extention’. Carilah lokasimambosolutions451a2.mxp dan installah.
  • Setelah menginstalnya, keluarlah dari dreamweaver
  • Sekarang jalankan dreamweaver dan anda dapat melihat joomlasolution1


Langkah kedua, Memebuat file PHP

  • Jalankan Dreamweaver dan pilihlah ‘create new’->’php’
  • Pilihlah panel ‘code’, Tampilan kode harusnya seperti ini:



  • Hapuslah kode keatas
  • Kemudian Sisipkanlah Joomlasolution head

Langkah ketiga, membuat tabel

  • Buatlah tabel (Ctrl+Alt+T) dengan seting berikut :


  • Ulangi langkah diatas sampai Anda memiliki tiga tabel yang tersusun vertical
  • Kliklah tabel yang berada ditengah
  • Kemudian masukanlah tabel dengan 3 buah kolom.


  • Kliklah pada sel sebelah kiri dan aturlah property witdhnya menjadi 18 % percent, align vertical=top.jangan lupa lakukan juga pada sel disebelah kanan.
  • Pada sel tengan aturlah menjadi rata tengah

Langkah ketiga, memasukan kode.

  • Kliklah pada sel tengah, kemudian sisipkan kode komponen ‘main body’ yang berada pada pallete joomlasolution1
  • Kliklah pada sel kiri dan sisipkan komponen ‘left’ disusul dengan ‘user1’ yang juga masih berada pada joomlasolution1
  • Kliklah pada sel kanan dan sisipkan komponen ‘search’, komponen ‘right’ disusul dengan ‘user2’ yang juga masih berada pada joomlasolution1
  • Kliklah tabel bagian bawah dan sisipkanlah komponen ‘banner’
  • Kembali ke table bagian atas kemudian masukanlah table dengan jumlah kolom=2.
  • Kliklah pada sel bagain kanan dan ubahlah property witdhnya menjadi 30%
  • Kemudian masukanlah komponen ‘date’
  • Klik pada sel desebelah kanannya dan masukanlah komponen ‘pathway’

Bersambung.....

« Previous Entries