Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan

Senin, Mei 10, 2010

Membangun Komunitas dengan Joomla 1.5.x

Halo sobat - sobat blogger sekalian, sebelumnya saya minta maaf dalam minggu ini barulah kali ini saya dapat kembali lagi memposting di blog ini,, akhir - akhir ini  saya mengalami titk jenuh dalam perkuliahan  (agak stres untuk masalah perkuliahan), belum lagi kesibukan - kesibukan offline saya yang padat, pokoknya mminggu ini depresi berat deh..  . 

Oke langsung aja ya,,,. Posting kali ini saya masih akan membahas tentang Joomla (walaupun baru kenal dengan namanya Joomla) , yaitu membangun komunitas dengan Joomla 1.5.x,  artikel ini mungkin sudah basi untuk para master - master Joomla,  ya seperti biasa artikel ini hanyalah sebagai arsip kita sebagai newbie.
Untuk membangun Komunitas Joomla kita membutuhkan file instalasi yang terdiri dari component , plugin dan module nya, anda  bisa  mendownload filenya disini

Tahap pertama : Kebutuhan dasar dan instalasi
Setelah anda mendownload file di atas yang berupa file zip, ekstrak lah terlebih dulu.
 Pertama kali pilih Menu -> Ekstensions -> Install/Uninstall pada halaman Admin Anda

 
Tekan tombol browse , kemudian temukan file com_compofiler.zip di folder yang telah anda ekstrak tadi.



Tekan Upload file & Install
 
Proses Instalasi berhasil

 

Langkah selanjutnya adalah mengupload file  mod_cblogin, mod_comprofilerModerator,  dan  mod_comprofilerOnline, caranya mengupload sama dengan diatas. Untuk memeriksa file yang sudah terinstal silahkan anda memilih menu  Components -> Community Builder 

Sedangkan untuk memeriksa Module yang telah terinstal silahkan anda memilih menu Ekstensions  -> Module Manager. Module yang baru diinstal dalam kondisi tidak dipublikasikan (tanda x). Aktifkan Module tersebut dengan cara menekan ikon tanda silang (tanda x). 

Modul CB Login berfungsi untuk form login yang berintegrasi dengan Community Builder, Modul CB Online berfungsi untuk menampilkan anggota komunitas yang online.

Sampai sini dulu ya,, nanti Tahap Kedua : Mengatur Konfigurasi akan disambung pada postingan selanjutnya.
Selengkapnya

Kamis, April 29, 2010

FAQ Joomla (Hal - Hal yang sering ditanyakan Tentang Joomla)

Menyambung artikel kemarin tentang bagaimana kita menginstall Joomla di localhost, untuk kali ini saya akan mencoba merangkum Beberapa FAQ atau hal- hal yang sering ditanyakan tentang Joomla, FAQ ini diambil dari beberapa Forum - Forum Joomla.di Indonesia.
Berikut beberapa FAQ dari Joomla 1.5x
  
Q : Merubah Tampilan FrontPage menjadi 1 kolom
A : Login ke halaman administrator anda, pilih menu -> mainmenu -> kemudian  klik home,Setelah itu, pada bagian parameter di halaman pengaturan Home ganti kolom isian Columns menjadi 1

Q : Merubah tulisan Welcome to the Fron Page
A :  Sama seperti diatas , namun pada bagian halaman pengaturan Home pilih Parameter(System), ganti Page Title


Q :Mengubah Bahasa Site kita 
A : Download languange Indonesia disini, setelah mendownload pilih ekstensions -> instal/uninstal pada halaman admin anda, upload file yg udah didownload tadi.
 


setelah di upload kemudian pilh lagi Ekstensions -> Languange Manager, kemudian set Indonesian(Indonesia) sebagai default

Q: Insert HTML di Module
A :Pilih Ekstension -> Module Manager -> new. klik Custom HTML, pada bagian Custom Output ,klik html,kemudian copas script anda , klik update dan save module.

Udah dulu ya FAQ nya, lagi malas nulis nih, semoga bermanfaat ya walaupun sedikit,
Keep Spirit..!!!!!!
Selengkapnya

Senin, April 26, 2010

Belajar Joomla Ah...!!!

Akhir - akhir ini net saya agak lola (Loading Lambat) maklum aja sih saya memakai modem tanpa kabel , cdm* lagi, hii,, hii,,!!! daripada browser saya nganggur karena net saya lola banget mending coba - coba belajar Joomla aja. Sobat  - sobat sekalian pasti sudah tahukan Joomla, kalau pengen lebih tahu tentang Joomla klik aja disini.
Karena ini artikel pertama kali dengan kategori Tutorial Joomla, mungkin saya akan bahas cara pasang Joomla di localhost aja dulu ya ...! 
Untuk memasang Joomla di localhost kita membutuhkan beberapa komponen  seperti Webserver, Apache dan Mysql, namun di artikel ini saya menggunakan WampServer yang  sudah membundel komponen - komponen tersebut,  anda dapat mendownloadnya disini.
  • Setelah  anda mendownload WampServer dan menginstalnya di drive c, siapkan Joomla nya dalam artikel ini saya menggunakan Joomla 1.5x, anda bisa mendownload Joomla nya disini
  • Kemudian pada folder C:\wamp\www\ buat folder sitesaya. Folder sitesaya ini akan menjadi url web yang nantinya kita buat dengan Joomla di localhost
  • Ekstrak Joomla 1.5x yang sudah didownload tadi di folder sitasaya.
  • Lalu jalankan WampServer dengan cara mengklik Start Menu pada komputer anda -> WampServer -> klik 2 kali Start WampServer.
  • Bukalah web browser anda, terserah anda mau pakai firefox, crhome, IE atau lainnya
  • Ketikkan http://localhost pada andress bar di browser anda,  Jika muncul halaman seperti dibawah ini, berarti kita sudah berhasil menginstal localhost pada komputer kita.untuk kali ini kita skip aja pengaturan username, host dan password dari localhost kita
  • Tahap selanjutnya yaitu instalasi Joomla, ketikkan http://localhost/sitesaya pada andress bar browser anda, maka akan muncul halaman seperti dibawah ini
  • Pilh Bahasa yang akan digunakan,disini saya akan menggunakan Bahasa Indonesia. Setelah memilih bahasa klik next
  • Pada Steps 2 - 3 klik berikutnya .
  • Steps 4 isikan Nama Host dengan localhost, Nama Pengguna dengan root, sandi lewat kosongkan saja, dan nama basis data isikan dengan sitesaya atau terserah anda, kemudian klik berikutnya, lihat contoh gambar dibawah ini.
  • Untuk step 5 (ftp configuration) karena di installnya di localhost, pilih saja tidak , kemudian klik berikutnya
  • Pada step 6, isikan Nama site nya, Alamat Email (harus diisi), sandi,dan konfirmasi sandi, jangan lupa juga klik pasang contoh data (didalam lingkaran merah pada gambar) agar webnya tidak kosong. 
  • Tahap instalasi selesai. Sebelum membuka web kita, hapus folder installation yang ada di folder C:\wamp\www\sitesaya
  • Sekarang, masukan url http://localhost/sitesaya/.
  • Jika ingin mengubah isi web, masuk ke halaman administrator : http://localhost/sitesaya/administrator/
Selamat mencoba Keep spirit...!!!



Selengkapnya

Sabtu, April 17, 2010

Membuat Rounded Corner Sederhana

Beberapa hari ini  sudah blog saya ini tidak update,  ya dalam beberapa hari ini kesibukan offline saya lebih banyak dan  juga komputer saya baru upgrade motherboard dan proses instalasinya , sehingga saya harus dalam keadaan offline untuk sementara, nah barulah malam ini kembali lagi ke blog tercinta ini, ^_^  ,, !!!!!
Wokeh postingan kali ini saya akan kembali dengan tutorial html lagi,..!! langsung aja ya....!!
Sobat - sobat sekalian sudah tahukan yang namanya sidebar, yang berbentuk kotak - kotak itu lo, biasanya berada disamping disebuah halaman blog atau website, nah kali ini kita akan memberikan effect sedehana dengan  rounded corner (border lengkung) menggunakan image dan css..!!!
Memang teknik ini sudah banyak dibahas di blog - blog atau website lain, namun kali ini akan saya posting lagi itung - itung nambahin arsip ,, hee
Oh iya hampir lupa, anda membutuhkan tiga buah gambar berfornat gif, untuk bagian atas , isi, dan bawah. Nah untuk bagian atas dan bawahnya , buatllah gambar berbentuk lengkung, sebagai contoh ketiga gambar tersebut dapat anda lihat dibawah ini :
atas.gif

isi.gif
 bawah.gif


Script html nya sebagai berikut :
<html>
<head>
<title>box</title>
<style type="text/css">
#kotak
{ margin:0px; padding:0px; position:absolute; width:250px; float:left; }
#kotak h2
{ font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-weight: bold; color: #FF0000; text-decoration: none; background:url("atas.gif") 0 0 no-repeat; width:250px; height:30px; padding-left:17px; padding-top:10px; margin:0px; }

#kotak .isi
{ background:url("isi.gif") 0 0 repeat-y ; width:240px; padding:20px; margin:0px;}

#kotak p
{ font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: bold; color: #000000; text-decoration: none; margin:0px; padding:0px; }

#kotak .bawah
{ background:url("bawah.gif") 0 0 no-repeat; width:250px; height:30px; }
</style>
</head>
<body>
<div id="kotak">
<h2>Rounded Box By Spirit 89 Blog</h2>
<div class="isi">
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
</div>
<div class="bawah">
</div>
</div>
</body>
</html>

Simpanlah dengan ektensi html, liat hasilnya di browser web anda., maaf nih ya sobat - sobat untuk tutorial kali tidak terlalu saya bahas secara detail,, he

Sekian dulu postingan kali ini,, Semoga bermanfaat,,, keep spirit...!!!!
Selengkapnya

Kamis, April 08, 2010

Navigasi Menu Horizontal Hitam (Cara Membuatnya) Part II

Seperti janji saya pada postingan yang berjudul Navigasi Menu Horizontal Hitam Part I  untuk memposting kembali cara  pembuatannya maka dari itu pada postingan kali ini saya akan coba contohkan cara pembuatan Navigasi menu tersebut.

Navigasi menu ini hanya dibuat dengan bahasa html sederhana dan css nya saja dan masih jauh dari pengembangan yang sebenarnya. Untuk penerapannya ke blog atau website sobat – sobat sekalian saya mohon maaf karena tidak saya bahas pada artikel ini.

 Di bawah ini adalah cara – cara Membuat Navigasi Menu Hitam yang telah saya contohkan pada postingan sebelumnya, untuk melihat bentuk dari navigasi menu ini anda dapat mengklik disini.

Untuk membuat navigasi menu ini kita membutuhkan empat file pendukung sebagai berikut menu.html , style.css, kiri_menu.gif dan kanan_menu.gif Software yang akan kita gunakan hanyalah notepad,  atau anda bisa menggunakan dreamweaver jika diperlukan

Nah langkah pertama simpanlah kedua gambar di bawah ini dengan cara klik kanan dan save image. Simpanlah dalam satu folder di hardisk anda (folder ini juga akan digunakan untuk menyimpan file menu.html dan style.css )




Selanjutnya bukalah sofware notepad dikomputer anda , ketikkan css di bawah ini :

#menu { float:left; font: bold 10px/1.3em Verdana; width:100%; background:#ffffff; font-size:90%; line-height:normal; }
#menu ul {margin:0; padding:10px 10px 0 50px; list-style:none; }
#menu li { display:inline; margin:0; padding:0; }
#menu a { float:left; background:url("kiri_menu.gif") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; }
#menu a span { float:left; display:block; background:url("kanan_menu.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; }
#menu a span {float:none;}
#menu a:hover span { color:#FF0000; }
#menu a:hover { background-position:0% -42px; }
#menu a:hover span { background-position:100% -42px; }

Simpanlah dengan ektension *.css, untuk cara meyimpan pada notepad klik file > save dan pada box save as ketikkan File name dengan nama  style.css dan Save as Type ubah menjadi All Files



Langkah selanjutnya adalah membuat tag html nya, Ketikkan tag html dibawah ini pada notepad :

<html>
<head>
<title>Navigasi Menu</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
   <div id="menu">
      <ul>
         <li><a href="http://dede-spirit89.blogspot.com"><span>Spirit 89 Blog</span></a></li>
         <li><a href="http://dede-spirit89.blogspot.com"><span>Spirit 89 Blog</span></a></li>
         <li><a href="http://dede-spirit89.blogspot.com"><span>Spirit 89 Blog</span></a></li>
         <li><a href="http://dede-spirit89.blogspot.com"><span>Spirit 89 Blog</span></a></li>
         <li><a href="http://dede-spirit89.blogspot.com"><span>Spirit 89 Blog</span></a></li>
      </ul>
  </div>
</body>
</html>

Gantilah http://dede-spirit89.blogspot dengan link- link yang ingin anda tuju dan Spirit 89 Blog dengan nama dari linknya. Simpanlah dengan ekstension *.html , cara pemyimpanannya sama dengan cara meyimpan style.css, namun gantikan File Name dengan nama menu.hmtl

** catatan : Semua file disimpan dalam satu folder

Nah setelah semua sudah siap, bukalah file menu.html dengan browser web anda.
Selamat mencoba dan semoga bermanfaat..!!
Selengkapnya

Senin, Maret 01, 2010

Membuat Form Shoutbox dengan PHP

Kali ini saya akan memposting tutorial PHP yang sederhana (di sesuaikankan dengan kemampuan saya,, maklum masih newbie :p).
Yang udah pada master dengan PHP , mungkin artikel ini sudah basi,, so yang sudah tahu mending blog walking aja ke blog- blog yang lain. :p :p
Baiklah saudara – saudara yang masih melanjutkan membaca  artikel ini, kita akan memulai untuk pembuatan form shoutbox dengan PHP.
Bagi Anda yang belum menginstal sistem PHP pada komputer anda, anda dapat dapat menginstal Apache Web Server, PHP dan MySQL dengan XAMPP atau WAMPP
Yang pertama harus kita lakukan adalah pembuatan database dengan nama shoutbox. Anda bisa membuka web browser anda dan mengetikkan URL http://localhost/phpmyadmin/ pada bagian andress bar , dan  klik Query window   dan run sql berikut :

CREATE DATABASE shoutbox;
use shoutbox;
CREATE TABLE `testimonial` (
  `id_testimonial` int(11) NOT NULL auto_increment,
  `name` varchar(40) default NULL,
  `email` varchar(50) default NULL,
  `web` varchar(70) default NULL,
  `ip_client` varchar(16) default NULL,
  `date` datetime default NULL,
  `comment` text,
  PRIMARY KEY  (`id_testimonial`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;


Setelah selesai membuat database shoutbox, selanjutnya kita akan membuat sciprt – script  berikut  menggunakan notepad atau text editor yang lain. Buatlah folder baru dengan nama shoutbox pada folder web directory anda untuk penyimpanan script – script  berikut.

1.     Koneksi database ->  config.php
<?php
    $dbhost="localhost";
    $dbuser="root";
    $dbpass="";
    $dbname="shoutbox";
   
    $koneksi= mysql_connect ($dbhost,$dbuser,$dbpass);
   
    mysql_select_db($dbname,$koneksi) or die ();
?>

2.    Form Shoubox -> shoutbox.php

<html>
<head>
<title>.:Comment:.</title>
<h3>Leave a Comment</h3>
<form name="form1" method="post" action="proses.php">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
    <tr>
        <td width="10%">Name</td>
        <td width="90%"><input type="text" name="name"></td>
    </tr>
    <tr>
<td>Email</td>
<td><input type="text" name="email"></td>
    </tr>
    <tr>
        <td>Web</td>
<td><input type="text" name="web" value="http://"></td>
    </tr>
    <tr>
        <td>Comment</td>
        <td><textarea name="comment"></textarea></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>
<input type="submit" name="submit" value="submit">
        <input type="reset" name="clear" value="clear">
</td>
    </tr>
</table>
</form>
</body>
</html>

3.    Proses data -> proses.php
<?php
include 'config.php';

$name=$_POST["name"];
$email=$_POST["email"];
$web=$_POST["web"];
$comment=$_POST["comment"];
$date=date("Y-n-d H:i:s");
$ip_client=$_SERVER["REMOTE_ADDR"];

    if(!ereg('^.+@.+\\..+$',$email))
    { $MAIL="1" ; }
   
    if( trim($name) &&  $mail<>1 && trim($comment))
    {
        if( trim($web)=="http://")
        { $web=""; }
       
        $sql="insert into testimonial (name,email,web,ip_client,date,comment)
        values
        ('".$name."','".$email."','".$web."','".$ip_client."','".$date."','".$comment."')";
   
        $sq=mysql_query($sql);
        if($sql)
        {
            header("location:tampil_shoutbox.php");
            die;
        }
    }
header("location:shoutbox.php");
die;
?>

4.    menampilkan Shoutbox -> tampil_shoutbox.php
<?php
include "config.php";

$sql="select * from testimonial order by id_testimonial desc limit 0,10";
$sq=mysql_query($sql);
while($hasil=mysql_fetch_array($sq))
{
    $id_testimonial=$hasil["id_testimonial"];
    $name=$hasil["name"];
    $email=$hasil["email"];
    $web=$hasil["web"];
    $ip_client=$hasil["ip_client"];
    $date=$hasil["date"];
    $comment=$hasil["comment"];
   
    if($web)
    {
        $name='<a href="'.$web.'" target="_blank" title="'.$web.'">'.$name.'</a>';
    }
   
    $content=$content. '<p>'.
    $date.' | '.$ip_client.' | <br> comment by '.$name.'<br />
    <table border="0" width="200"  cellpadding="0" cellsapcing="0">
    <tr bgcolor="#FFFFFF"><td>
    '.$comment.'
    </td></tr></table></p>';
}
$content=$content.'<p><a href=”shoutbox.php”>back</a></p>';
echo $content;
?>

Setelah databse dan semua script – scriptnya siap  mari kita coba menginputkan data shoutbox
Bukalah web browser anda dan ketikkan http://localhost/shoutbox/shoutbox.php. Masukkanlah data - data pada kolom Name, Email, Web, dan comment dan klik submit, kalau script anda benar anda akan melihat tampilan data yang sudah anda masukkan tadi. Namun script – script ini belum menggunakan  fungsi htmlentities() yang digunakan untuk mengkonversi karakter – karakter tertentu di dalam tag HTML, fungsi ini sih maksudnya supaya web kita ga ke inject.
Selamat mencoba,, semoga bermanfaat…!!!!



Selengkapnya

Sabtu, Februari 20, 2010

Navigasi Menu Horizontal Hitam Part I

Hari ini setelah berjam - jam di depan kompi melakukan eksperimen yang selalu gagal, timbulah inisiatif saya untuk memodifikasi navigasi menu yang satu ini.
Yup walaupun tidak bagus - bagus amat, paling tidak saya hanya membagi hasil karya saya yang sederhana ini kepada anda.
Dengan ilmu css yang apa adanya saya coba bikin navigasi menu hitam seperti dibawah ini,, ya lumayan lah buat coba - coba bikin situs,, he,,
Silahkan di nikmati aja navigasi menu hitam di bawah ini..!!



Horizontal Navigation Menu Hitam






Kalau ada yang pengen tahu cara membuat navigasi menu seperti ini, mungkin lain kali aja ya saya posting cara membuatnya,

Oh iya,,, yang punya css buat side bar,, bagi- bagi donk,,
Selengkapnya

Rabu, Februari 10, 2010

Marquee dengan OnMouseOver dan Out

Postingan ini berawal dari saya melihat blogroll saya yang memanjang kebawah, nah disitu saya memikirkan gimana kalau di pasang marquee aja dengan direction up,. Marquee itu adalah salah satu tag html yang membuat text dapat berjalan keatas , kebawah, kekanan, atau kekiri.
Tutorial kali ini terbilang sangat sederhana, mungkin sudah banyak yang membahas tentang ini, tapi gak apa - apalah kalau diposting lagi oleh saya, kali aja ada sobat - sobat sekalian ada yang membutuhkan,, he,, he :)

Dibawah ini adalah contoh  tag marquee dengan attribut Direction , Scrollamount, OnMouseOver, dan OnMouseOut  

<marquee  height='100' width='100' direction='up'   scrollamount=3 onmouseover='this.stop();' onmouseout='this.start();'>
Text Anda
</marquee>

Saya coba jelaskan ya Attribut2 diatas :
height dan width adalah lebar area dari marquee, untuk menentukan ini tergantung pada anda.
direction , nah direction ini berfungsi untuk menetukan posisi text berjalan kemana,. jika anda menggunakan up, maka text akan berjalan keatas, untuk opsi yang lainnya anda dapat menggunakan down, right, dan left.
scrollamount, attribut ini berfungsi untuk menentukan kecepatan dari marquee, semakin kecil nilainya semakin lambat pergerakannya.
onmouseover, ini merfungsi untuk menghentikan text pada marquee  jika mouse disorot pada text tersebut, sebaliknya onmouseout , text akan berjalan kembali jika mouse tidak menyorot text didalam marquee itu.

Berikut contoh penggunaan marquee dengan direction up dan down :


Contoh
Contoh
Contoh
Contoh
Contoh


Contoh
Contoh
Contoh
Contoh
Contoh




Dan dibawah ini marquee dengan direction Left dan Right :



Contoh
Contoh
Contoh
Contoh





Contoh
Contoh
Contoh
Contoh

Nah semoga bermanfaat ya  postingan kali ini,, Keep spirit...!!!!!
Selengkapnya