syahzul » Tutorial

Kod .htaccess yang berguna untuk website

syahzul — Fri, 03 Sep 2010 20:09:15 +0000

Jika kita perhatikan, kebanyakan web hosting di Malaysia biasanya menggunakan Apache Web Server. Ianya jauh lebih murah berbanding dengan menggunakan IIS yang ada pada platform Windows. Dan saya lebih suka dengan Apache berbanding dengan IIS.

Apache terkenal dengan .htaccess yang mana kita boleh mengawal beberapa aspek untuk website kita. Antaranya, yang paling popular ialah membuat redirection dari URL yang tiada www ke URL yang mempunyai www, contohnya, jika anda cuba masuk ke http://syahzul.com, server saya akan redirect anda ke http://www.syahzul.com. Ini dapat menjamin PageRank™ saya tidak terbahagi kepada dua. Kali ini saya nak share beberapa kod .htaccess yang berguna pada website kita.

Cara menggunakan kod ini adalah mudah, hanya masukkannya ke dalam fail .htaccess sahaja. Jika anda belum ada fail tersebut, boleh create baru. Dan jangan lupa tukar kepada domain anda sendiri dalam kod tu.

Redirect dari URL yang tiada www ke URL yang ada www

Seperti yang saya terangkan di atas tadi, kod berikut akan membuat redirect ke URL domain anda yang tiada www ke URL yang ada www.

RewriteEngine On
RewriteCond %{HTTP_HOST} ^syahzul.com
RewriteRule (.*) http://www.syahzul.com/$1 [R=301,L]

Redirect dari URL yang ada www ke URL yang tiada www

Manakala kod berikut pula akan membuat redirect ke URL domain anda yang ada www ke URL yang tiada www.

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.syahzul.com [NC]
RewriteRule ^(.*)$ http://syahzul.com/$1 [L,R=301]

Prevent directory browsing

Jika anda mempunyai satu folder di dalam webserver yang digunakan untuk menyimpan fail fail seperti ebook, software dan lain lain, sekiranya folder tersebut tiada fail index.html, pelawat boleh selongkar isi dalam folder tersebut. Kod di bawah ini boleh mengelakkan folder tersebut daripada diselongkar oleh pelawat anda.

# Added to prevent directory browsing
Options -Indexes

File execution order

Jika di dalam folder public_html anda mempunyai fail index.html dan index.php, fail index.html mempunyai priority yang lebih tinggi dan akan dipanggil terlebih dahulu. Dan kebanyakan web scripts menggunakan fail index.php sebagai entry point. Anda boleh delete sahaja fail index.html tersebut, tiada masalah. Tapi kod di bawah ini juga boleh kita gunakan untuk memberikan priority kepada fail index.php.

DirectoryIndex index.php index.html

Compress fail CSS, Javascript, Text dan XML

Kod ini bertujuan untuk compress output kod kod CSS, Javascript, Text dan XML sebelum dipaparkan ke browser. Tujuannya, untuk menjimatkan masa proses dan juga menjimatkan penggunaan bandwidth.


	AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/x-javascript

Cache image

Pada website kita, setiap kali pelawat datang melawat, web server akan dapatkan semua fail yang diperlukan, seperti fail fail CSS dan Javascripts, dan juga gambar atau imej. Kita boleh gunakan kod di bawah ini untuk cache fail fail tesebut pada website kita, jadi setiap kali pelawat yang sama datang, server akan load fail dari cache. Ini dapat mempercepatkan masa loading.


	ExpiresActive On
	ExpiresByType image/gif A432000
	ExpiresByType image/jpg A432000
	ExpiresByType image/jpeg A432000
	ExpiresByType image/png A432000
	ExpiresByType image/ico A432000
	ExpiresByType image/bmp A432000
	ExpiresByType text/css A432000
	ExpiresByType text/javascript A432000
	ExpiresByType application/javascript A432000
	ExpiresByType application/x-javascript A432000

Nota:
Kod di atas ini akan cache fail fail itu selama 5 hari (atau 432000 saat). Anda boleh tukar tempoh untuk cache itu valid, pastikan gunakan format saat.

Protect .htaccess file

Kod berikut bertujuan mengelakkan fail .htaccess kita dibaca secara terus daripada web browser.


	order allow,deny
	deny from all

Prevent hotlinking

Ada kalanya blogger lain suka buat hotlinking imej daripada blog atau website kita. Jika blog mereka itu banyak pelawat yang tengok post yang ada imej dari website kita, bandwidth kita yang akan di makan, bukan bandwidth mereka. Jadi anda boleh gunakan kod di bawah untuk elakkan hotlinking daripada berlaku, dan kita gantikannya dengan imej lain.

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?syahzul\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*\.(jpg|gif|bmp|png)$ http://hotlink.syahzul.com/hotlinking-is-not-allowed.jpg [L]

Nota:
Anda boleh gunakan upload imej notis itu di imej hosting site seperti ImageShack untuk mengelakkan bandwidth anda di makan.

Ubah lokasi folder untuk domain anda dari public_html ke folder lain

Sebagai contoh, jika saya telahpun mempunyai website yang berada di dalam folder public_html, dan kemudian saya ingin update website tersebut, tapi tak mahu orang lain tengok lagi, dan tak mahu kacau website yang sedia ada. Cara yang paling mudah ialah membina website baru itu di dalam satu subfolder lain di dalam public_html, contohnya saya letakkan di dalam public_html/v2. Selepas selesai, saya ingin gantikan website lama tersebut dengan yang baru ini. Untuk memindahkan fail dan folder yang sedia ada, amatlah menyusahkan. Jadi, kita boleh gunakan kod .htaccess untuk memberitahu Apache untuk menggunakan folder v2 itu tadi untuk domain kita.

RewriteEngine On
RewriteCond %{HTTP_HOST} ^syahzul\.com$ [OR]
RewriteCond %{HTTP_HOST} ^www\.syahzul\.com$
RewriteCond %{REQUEST_URI} !^/v2/
RewriteRule (.*) /v2/$1 [L]

Tutorial: Bina Slideshow Plugin Untuk WordPress 3.0.x

syahzul — Sun, 22 Aug 2010 23:18:10 +0000

Atas permintaan saudara lazaac, tutorial ini sama seperti tutorial saya sebelum ini, Tutorial: Bina Module Slideshow untuk Joomla! 1.5.x cuma kali ini saya jadikan ia plugin untuk WordPress pula. Ini merupakan percubaan kali pertama saya membina plugin untuk WordPress, jadi sebarang komen dan feedback amatlah saya hargai. Sama seperti tutorial membina module slideshow untuk Joomla! yang lepas, plugin ini juga menggunakan jQuery dan Coin Slider.

Keperluan

WordPress 3.0.x (sila gunakan yang terkini)

Code Editor (saya guna PSPad, percuma)

Coin Slider for jQuery

Langkah 1

Perbezaan antara WP dan Joomla! ialah cara kita install extension (plugin untuk WP, component, module, plugin untuk Joomla!). Pada Joomla!, kita perlu gunakan Joomla! Extension Installer bagi memastikan ianya dipasang dengan betul. Berbeza dengan WP yang mana kita hanya perlu create folder di dalam wp-content/plugins pada WP kita sahaja. Cukup mudah.

Sekarang, create satu folder di dalam wp-content/plugins, dan berikan nama myslideshow. Kemudian, create file myslideshow.php di dalam folder myslideshow tadi. Di dalam fail coin-slider.zip yang anda download terdapat 3 files. Copy file berikut sahaja

coin-slider-styles.css ke dalam folder myslideshow
coin-slider.min.js ke dalam folder myslideshow

* Rujuk gambar di sebelah.

** Kita tidak perlukan file jQuery untuk WordPress kerana WordPress sudah sediakan file ini, kita hanya perlu load menggunakan kod wp_enqueue_script(‘jquery’) sahaja.

Langkah 2

Buka file myslideshow.php, dan kita akan mulakan dengan kod kod PHP plugin ini.


Kod ini perlu ada bagi memastikan WP dapat detect plugin kita. Anda boleh tukar maklumat yang ada, tetapi pastikan keyword yang diperlukan tetap ada. Sila rujuk page ini untuk maklumat lanjut: Writing a Plugin.
if ( is_admin() )
{
	add_action( 'admin_menu', 'myslideshow_plugin_menu' );
	add_action( 'admin_init', 'myslideshow_register_settings' );
}
else
{
	add_action( 'wp_head'	, 'myslideshow_scripts');
}

Pada bahagian ini, kita akan check jika kita berada di bahagian backend, kita akan add satu link pada menu Settings untuk plugin kita dan seterusnya register settings untuk slideshow kita di dalam database. Jika bukan di bahagian backend, kita akan masukkan kod kod javascript di dalam wp_head.
function myslideshow_register_settings()
{
	register_setting( 'myslideshow-group', 'mys_slider_image_path' );
	register_setting( 'myslideshow-group', 'mys_slider_effect' );
	register_setting( 'myslideshow-group', 'mys_slider_width' );
	register_setting( 'myslideshow-group', 'mys_slider_height' );
	register_setting( 'myslideshow-group', 'mys_slider_spw' );
	register_setting( 'myslideshow-group', 'mys_slider_sph' );
	register_setting( 'myslideshow-group', 'mys_slider_image_delay' );
	register_setting( 'myslideshow-group', 'mys_slider_square_delay' );
	register_setting( 'myslideshow-group', 'mys_slider_navigation' );
	register_setting( 'myslideshow-group', 'mys_slider_navigation_opacity' );
	register_setting( 'myslideshow-group', 'mys_slider_pause_mouseover' );
}

Kita akan gunakan function ini untuk add option di dalam database WP kita. Semua value di atas itu akan kita gunakan ketika kita nak paparkan slideshow dan juga pada option page kita.
function myslideshow_plugin_menu()
{
	add_options_page('MySlideshow Settings', 'MySlideshow', 'manage_options', 'myslideshow', 'myslideshow_plugin_options');
}

Function inilah yang akan create satu link untuk option page plugin kita.
function myslideshow_plugin_options()
{
	if (!current_user_can('manage_options'))  {
		wp_die( __('You do not have sufficient permissions to access this page.') );
	}
	?>
	
	

        
        

        

        	
        		
					Image Path
					
						
					    wp-content folder.'); ?>
					
				

				
					Slider Effect
					
						
						
					
				

				
					Slider Width
					
						
						
					
				

				
					Slider Height
					
						
						
					
				

				
					Square per Width
					
						
						
					
				

				
					Square per Height
					
						
						
					
				

				
					Delay Between Images
					
						
						
					
				

				
					Delay Between Squares
					
						
						
					
				

				
					Show navigation?
					
						
						
					
				

				
					Navigation opacity
					
						
						
					
				

				
					Pause on mouse over?
					
						
						
					
				
        	

        	

        	
			
		
        
    
    
Dan ini merupakan kod untuk option page pada backend WP kita. Lihat contoh option page pada gambar di bawah ini.

function myslideshow_init()
{
	/* Register our script. */
	wp_register_script('myslideshow_script', WP_PLUGIN_URL . '/myslideshow/coin-slider.min.js');

	/* Register our css. */
	wp_register_style('myslideshow_style', WP_PLUGIN_URL . '/myslideshow/coin-slider-styles.css');

	wp_enqueue_script('jquery');
	wp_enqueue_script('myslideshow_script', WP_PLUGIN_URL . '/myslideshow/coin-slider.min.js');
	wp_enqueue_style('myslideshow_style', WP_PLUGIN_URL . '/myslideshow/coin-slider-styles.css');
}
add_action('init', 'myslideshow_init');

Kod ini kita perlukan untuk load file Javascript dan CSS menggunakan function wp_enqueue_script dan wp_enqueue_style yang disediakan oleh WP.
function myslideshow_scripts()
{
	$html  = '';
	echo $html;
}

Function yang akan dapatkan option value kita dari database dan kemudian generate kod kod javascript untuk slideshow nanti.
function myslideshow_get_images()
{
	if ( !defined('DS') )
		define( 'DS', DIRECTORY_SEPARATOR );

	// get path from parameter
	$image_path = get_option('mys_slider_image_path');

	// add root into our path
	$abspath = WP_CONTENT_DIR . DS . $image_path . DS;

	// convert '/' to proper directory separator, just in case
	$abspath = str_replace( '/', DS, $abspath );

	// Run through the source folder
	$folder = opendir( $abspath );

	$images	= array();

	// loop the source
	while( $file = readdir( $folder ) )
	{
		// make sure the item is not a folder
	    if( !is_dir( $file ) )
		{
		    $parts = explode(".", $file);                    // pull apart the name and dissect by period

		    if (is_array($parts) && count($parts) > 1)
			{    // does the dissected array have more than one part

		        $extension = end($parts);        // set to we can see last file extension

		        if ($extension == 'jpg' OR $extension == 'JPG' OR $extension == 'png' OR $extension == 'PNG' OR $extension == 'gif' OR $extension == 'GIF')
		        {
		        	$images[] = WP_CONTENT_URL . '/' . $image_path . '/' . $file;
		        }
		    }
	    }
	}

	return $images;
}

Seterusnya, function ini akan dapatkan senarai image untuk slideshow dan add dalam array $images. Dalam function ini, kita akan check file extensions, dan hanya dapatkan file .jpg, .png dan .gif sahaja.
function myslideshow_html()
{
?>
	
	
		
		" />
		
	
	

Dan ini merupakan function yang akan generate output untuk slideshow kita. Kita akan panggil function ini dari file theme kita nanti.
Langkah 3
Create satu folder di dalam wp-content dan namakan myslideshow. Kemudian, save 4 gambar berikut di dalam folder tersebut.
    
* Nota: Klik pada gambar untuk view fullsize.
Langkah 4
Masukkan kod ini myslideshow_html() di dalam file theme anda. Untuk contoh ini, saya gunakan theme twentyten, saya masukkan kod di bawah ini di dalam file index.php.

Langkah 5
Sekarang anda perlu configure plugin ini terlebih dahulu, bagi membolehkan WP save settings untuk slideshow ini.
Penerangan Parameters

Image Path

Lokasi imej yang kita nak gunakan. Pastikan ianya berada di dalam folder wp-content. Untuk tutorial ini, sila masukkan myslideshow.
Slider effect

Ada 3 effects yang boleh kita gunakan; Swirl, Rain, Straight. Dan boleh combine semua, gunakan Random.
Slider width

Lebar slideshow anda. Pastikan lebar imej juga sama bagi mendapatkan hasil yang memuaskan hati anda.
Slider height

Tinggi slideshow anda. Pastikan tinggi imej juga sama bagi mendapatkan hasil yang memuaskan hati anda.
Square per width

Jumlah kotak berdasarkan lebar, sila tengok demo untuk fahamkan.
Square per height

Jumlah kotak berdasarkan tinggi, sila tengok demo untuk fahamkan.

 
Delay between images

Had masa antara setiap satu image. Dalam format miliseconds; 1000 miliseconds sama dengan 1 saat.
Delay between squares

Had masa antara setiap satu kotak. Dalam format miliseconds; 1000 miliseconds sama dengan 1 saat.
Show navigation

Perlu tunjukkan button Next dan Prev?
Navigation opacity

Opacity untuk button Next dan Prev.
Pause on mouse over

Slideshow berhenti bila user letak mouse atas slideshow tu.

Demo
http://www.syahzul.com/demo/wordpress/
Download
Kalau rasa buat tak menjadi tu, sila download dari sini, free. Boleh guna pada mana mana website jika sudi.
http://bit.ly/cAQLwx
Penutup
Walaupun sebenarnya ini bukan macam tutorial sangat, tapi kalau rajin  kaji kod kod di atas tadi untuk belajar konsep plugin untuk WordPress. Dan ini merupakan kali pertama saya cuba bina pluginuntuk WordPress, jadi komen dan feedback amatlah dihargai.
Nota lagi:
Gambar tu untuk tujuan pembelajaran sahaja, sila jangan gunakan untuk tujuan lain.

Image Path	wp-content folder.'); ?>
Slider Effect
Slider Width
Slider Height
Square per Width
Square per Height
Delay Between Images
Delay Between Squares
Show navigation?
Navigation opacity
Pause on mouse over?

Tutorial: Bina Module Slideshow untuk Joomla! 1.5.x

syahzul — Tue, 17 Aug 2010 07:22:37 +0000

Nota:

Tedapat tutorial yang sama tetapi untuk WordPress plugin di sini: Tutorial: Bina Slideshow Plugin Untuk WordPress 3.0.x.

Kebanyakan laman web sekarang mempunyai image slideshow pada laman utama. Ianya sudah boleh dikatakan satu benda yang wajib ada, bergantung kepada jenis laman web itu sendiri. Tapi jika kita perhatikan, memang kebanyakan pemilik laman web suka dengan slideshow di laman web mereka. Lagi banyak animation, lagi mereka suka. Dan kalau boleh semua diorang nak animate

Jika kita search Joomla! Extensions Directory, terdapat banyak module slideshow yang ada di sana, Commercial atau Non-commercial. Tapi, pernahkah anda terfikir untuk cuba menghasilkannya sendiri? Kali ini saya ingin menunjukkan cara cara menghasilkan module slideshow untuk Joomla! 1.5.x yang menggunakan jQuery dan juga Coin Slider. Slideshow ini akan menggunakan semua imej yang terdapat di dalam folder yang kita akan tetapkan nanti.

Keperluan

Joomla! 1.5.x (terkini)

Code Editor (saya guna PSPad, percuma)

jQuery 1.4.x (terkini)

Coin Slider for jQuery

Langkah 1

Sekarang, pada mana mana bahagian di dalam komputer anda, cipta satu folder dan namakan mod_myslideshow. Kemudian, create 3 file seperti di bawah ini, dan biarkan ianya kosong terlebih dahulu.

mod_myslideshow.php
mod_myslideshow.xml
helper.php

Di dalam folder myslideshow, create 3 folder seperti di bawah:

css
js
tmpl

Seterusnya, create satu file baru, default.php di dalam folder tmpl. Biarkan ia kosong. Lihat gambar di sebelah sebagai rujukan.

Download file jQuery dan masukkan di dalam folder js. Pada fail coin-slider.zip yang anda download tadi, extract dengan apa apa software zip. Di dalamnya terdapat 3 files. Copy file berikut sahaja

coin-slider-styles.css ke dalam folder css
coin-slider.min.js ke dalam folder js

Langkah 2

Kita mulakan dengan file metadata untuk module ini terlebih dahulu. Buka file mod_myslideshow.xml dan ikut turutan langkah di bawah ini.

Kod bagi module Joomla! 1.5. Perlu ada.

	MySlideshow
	Syahril Zulkefli
	Aug 2010
	Copyright (C) 2005 - 2010 Syahril Zulkefli. All rights reserved.
	http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
	syah@syahzul.com
 	www.syahzul.com
 	1.0.0
 	Module MySlideshow, original jQuery plugin by http://workshop.rs, ported to Joomla! module by Syahril Zulkefli a.k.a. syahzul.

Kod ini pula lebih kepada maklumat developer. Boleh tukar dengan maklumat anda sendiri, jangan malu malu ye

	
		mod_myslideshow.php
		helper.php
		css
		js
		tmpl

Bahagian ini pula menerangkan apa files atau folders yang terdapat di dalam module kita. Tak perlu tukar apa apa di sini.

Ini pula bahagian parameter untuk module kita. Di sini, jika anda perhatikan (atau baca kod itu) terdapat beberapa parameter yang kita perlukan, contohnya width, height, slideshow effects, delay dan lain lain. Sama juga, copy sahaja kod ini tanpa perlu ubah apa apa.

Penutup untuk file ini. Dah siap, save file tersebut dan bersedia untuk kod PHP pula.

Langkah 3

Buka file mod_myslideshow.php dengan code editor, dan tambah kod kod di bawah ini.

Langkah 4

Buka file helper.php dengan code editor, dan tambah kod di bawah ini.

get('path');

		// split the folder into array
		$_path = explode('/', $path);

		// implode it into absolute path
		$abspath = implode( DS, $_path);

		// add root into our path
		$abspath = JPATH_ROOT . DS . $abspath . DS;

		// now, get all the image files inside these folder
		$files = JFolder::files($abspath, '\.jpg$|\.png$|\.gif$');

		// time to re-construct the url to the images
		for ( $x = 0; $x < count( $files ); $x++ ) {
			$files[$x] = JURI::root() . $path . '/' . $files[$x];
		}
		return $files;
	}

	function addAssets(&$params)
	{
		$document =& JFactory::getDocument();

		// add CSS file
		$document->addStylesheet( JURI::root() . 'modules/mod_myslideshow/css/coin-slider-styles.css' );

		$js  = '';
		$js .= '';
		$js .= '';

		$document->addCustomTag( $js );
	}
}

Langkah 5

Buka file tmpl/default.php dan tambah kod di bawah ini.



	" />

Langkah 6

Sekarang, select semua files dan folders di dalam folder mod_myslideshow tadi, dan zipkannya.

Pastikan masa nak create zip file tu, pilih extension .zip, bukan .rar atau .7z. Dan gunakan file tersebut, contohnya mod_myslideshow.zip dan install pada mana mana Joomla!.

Langkah 7

Sekarang create satu folder baru di dalam folder images dan berikan nama myslideshow. Kemudian, save 4 gambar berikut di dalam folder tersebut.

* Nota: Klik pada gambar untuk view fullsize.

Langkah 8

Lepas dah install, boleh configure module tadi untuk kesesuaian website kita.

Penerangan Parameters

Image Path
Lokasi imej yang kita nak gunakan. Pastikan ianya berada di dalam folder Joomla!.
Slider effect
Ada 3 effects yang boleh kita gunakan; Swirl, Rain, Straight. Dan boleh combine semua, gunakan Random.
Slider width
Lebar slideshow anda. Pastikan lebar imej juga sama bagi mendapatkan hasil yang memuaskan hati anda.
Slider height
Tinggi slideshow anda. Pastikan tinggi imej juga sama bagi mendapatkan hasil yang memuaskan hati anda.
Square per width
Jumlah kotak berdasarkan lebar, sila tengok demo untuk fahamkan.
Square per height
Jumlah kotak berdasarkan tinggi, sila tengok demo untuk fahamkan.
Delay between images
Had masa antara setiap satu image. Dalam format miliseconds; 1000 miliseconds sama dengan 1 saat.
Delay between squares
Had masa antara setiap satu kotak. Dalam format miliseconds; 1000 miliseconds sama dengan 1 saat.
Show navigation
Perlu tunjukkan button Next dan Prev?
Navigation opacity
Opacity untuk button Next dan Prev.
Pause on mouse over
Slideshow berhenti bila user letak mouse atas slideshow tu.

Demo

http://www.syahzul.com/demo/joomla/

Download

Kalau rasa buat tak menjadi tu, sila download dari sini, free. Boleh guna pada mana mana website jika sudi.

http://bit.ly/bH23Hl

Penutup

Walaupun sebenarnya ini bukan macam tutorial sangat, tapi kalau rajin kaji kod kod di atas tadi untuk belajar konsep MVC Joomla!. Mungkin nanti saya akan extend lagi, tambah title dengan description ke, tambah component untuknya ke, dan mungkin juga jadikan utk content, bukan setakat imej. Tapi buat masa ini, setakat ini sahaja. Feedback amatlah dihargai.

Nota lagi:

Gambar tu untuk tujuan pembelajaran sahaja, sila jangan gunakan untuk tujuan lain.

Gunakan Google Apps Pada Domain Anda

syahzul — Thu, 10 Jun 2010 17:46:41 +0000

Jika anda mempunyai domain sendiri, sudah tentu anda juga mempunyai web hosting. Dan pada setiap web hosting kebiasaannya ada menawarkan email untuk domain anda. Tetapi tahukah anda bahawa ruangan untuk setiap email itu dalam lingkungan 2GB sahaja? Dan seandainya web hosting anda down, anda tidak boleh access email anda tadi. Untuk sesuatu organisasi yang bergantung penuh kepada email, hal sebegini tidak boleh diterima sama sekali. Tapi, tahukah anda yang kita boleh gunakan Gmail untuk email kita dan boleh menggunakan domain kita sendiri?

Google menawarkan satu set aplikasi web yang mana boleh kita gunakan pada domain kita, secara percuma. Antara aplikasi yang boleh kita gunakan dan datang dalam satu pakej ialah Gmail, Calendar, Docs dan juga Sites. Ini bermakna, anda bukan sahaja boleh gunakan email tetapi juga aplikasi lain seperti Google Docs yang boleh menggantikan aplikasi Microsoft Office atapun Open Office. Dan ianya percuma!

Mari saya tunjukkan bagaimana caranya untuk anda gunakan perkhidmatan percuma dari Google ini pada domain anda.

Keperluan

Domain name
FTP access ke web hosting anda
cPanel atau DirectAdmin pada web hosting anda

Langkah 1

Masuk ke halaman web Google Apps Standard Edition ini. Klik pada butang Get Started.

Langkah 2

Pilih Administrator: I own or control this domain daripada pilihan yang ada, kemudian masukkan nama domain anda dan tekan butang Get Started.

Langkah 3

Isikan maklumat yang diperlukan pada halaman seterusnya.

Langkah 4

Isikan maklumat akaun Administrator. Akaun ini merupakan akaun utama yang akan digunakan untuk menambah pengguna email anda nanti. Sebaiknya akaun ini adalah akaun yang akan anda gunakan nanti.

Langkah 5

Pilih kaedah untuk megesahkan domain anda. Untuk cara yang mudah, saya galakkan anda pilih Upload an HTML file to … untuk tujuan ini.

Langkah 6

Pada paparan seterusnya, Google akan memberikan anda satu kod unik untuk pengesahan domain anda. Buka Notepad atau Wordpad, salin kod yang diberikan itu dan save file tersebut sebagai googlehostedservice.html. Ketika hendak save file tersebut, pastikan anda pilih Save as type: All Files (*.*). Jika sudah selesai, tekan butang I’ve completed the steps above.

Langkah 7

Gunakan FTP client yang sesuai seperti FileZilla untuk upload file tadi ke folder /public_html di web hosting anda. Sekarang, jika anda tengok Dashboard Google Apps anda, boleh dikatakan kesemua aplikasi masih belum aktif. Ini kerana Google mengambil masa sehingga 48 jam untuk untuk membuat pengesahan pada domain anda.Kita teruskan ke langkah seterusnya terlebih dahulu sementara menunggu Google menjalankan tugasnya.

Langkah 8

Untuk membolehkan semua email yang dihantar ke domain kita masuk ke Google Apps, kita perlu aktifkan aplikasi ini. Klik pada Activate email pada Dashboard Google Apps kita. Google ada menerangkan cara bagaimana kita boleh tukar MX Records pada web hosting kita. Di sini saya sertakan dua cara di sini, satu untuk pengguna cPanel dan satu lagi untuk DirectAdmin.

MX Server address	Priority
ASPMX.L.GOOGLE.COM.	10
ALT1.ASPMX.L.GOOGLE.COM.	20
ALT2.ASPMX.L.GOOGLE.COM.	20
ASPMX2.GOOGLEMAIL.COM.	30
ASPMX3.GOOGLEMAIL.COM.	30
ASPMX4.GOOGLEMAIL.COM.	30
ASPMX5.GOOGLEMAIL.COM.	30

cPanel

Pada bahagian Mail, klik pada link MX Entry.

Delete semua record yg ada, dan kemudia tambah mengikut jadual di atas.

DirectAdmin

Pada bahagian Email Management, klik di MX Records.

Kemudian, padam semua record yang sedia ada, dan tambahkan record baru berdasarkan jadual di atas tadi. Tambah sebanyak yang mungkin.

Setelah selesai, kembali pada Google akan memeriksa MX Records ini, dan ianya mengambil masa sehingga 48 jam untuk selesai. Buat masa ini anda hanya perlu tunggu proses pengesahan dari Google selesai. Kebiasaannya, tak sampai satu jam, tapi ada juga kalanya 48 jam pun belum selesai jugak. Bergantung kepada keadaan.

Dan jika anda ingin mengakses Google Apps anda, gunakan URL begini, http://www.google.com/a/nama_domain_anda. Untuk domain saya, saya gunakan URL http://www.google.com/a/syahzul.com, jadi anda hanya perlu tukarkan domain itu kepada domain anda sendiri.

Selamat mencuba!.

Cara memasang Facebook Connect di CakePHP

syahzul — Thu, 15 Apr 2010 00:26:03 +0000

Kebanyakan aplikasi web pada masa ini menawarkan kelebihan kepada pengguna untuk menggunakan akaun Facebook mereka untuk log masuk. Ada juga yang menawarkan lebih dari itu, seperti OpenID, Twiter dan lain lain lagi. Kelebihan utama fungsi sebegini ialah memudahkan pengguna mendaftar tanpa perlu mengisi form yang panjang berjela, hanya klik beberapa button, semua siap sedia digunakan.

Untuk project terbaru, saya cuba untuk integrate Facebook Connect di dalam aplikasi saya yang menggunakan CakePHP 1.2.6 (terbaru pada waktu artikel ini di tulis). Pada mulanya memang agak susah untuk menjadi, tapi selepas 15 kali mencuba akhirnya berjaya juga. Dan saya ingin share cara caranya di sini, untuk tujuan rujukan sesama kita pada masa akan datang.

Keperluan

Integrate Auth Component

Anda perlu buat tutorial ini terlebih dahulu sebelum boleh mula. Ini kerana kita memerlukan Auth component yang berjaya dipasang pada CakePHP kita. Jika anda belum buat, sila siapkan tutorial itu terlebih dahulu dan kemudian baru buat yang ini. Peratus untuk tutorial ini gagal jika tutorial tentang ACL itu tak disiapkan ialah 100%. Tetapi untuk pro bakers, boleh abaikan.

VirtualHost

Untuk menggunakan Facebook Connect pada local server, kita tidak boleh menggunakan address http://localhost ketika kita hendak cipta aplikasi Facebook baru. Oleh itu, apa yang kita boleh buat ialah menggunakan VirtualHost pada Apache dan kita buat satu dummy domain pada komputer kita. Untuk tujuan tutorial ini saya ingin gunakan domain fbconnect.com.

Buka fail X:\xampp\apache\conf\extra\httpd-vhosts.conf dengan code editor anda (saya gunakan PSPad) dan masukkan kod berikut:

NameVirtualHost *:80


 ServerAdmin syahzul@gmail.com
 DocumentRoot "X:/xampp/htdocs"
 ServerName localhost
 
 AllowOverride FileInfo AuthConfig Limit Indexes
 Options MultiViews Indexes SymLinksIfOwnerMatch IncludesNoExec
 
 Order allow,deny
 Allow from all
 
 
 Order deny,allow
 Deny from all
 
 



 ServerAdmin syahzul@gmail.com
 DocumentRoot "X:/xampp/htdocs/fbconnect"
 ServerName fbconnect.com
 
 AllowOverride FileInfo AuthConfig Limit Indexes
 Options MultiViews Indexes SymLinksIfOwnerMatch IncludesNoExec
 
 Order allow,deny
 Allow from all
 
 
 Order deny,allow
 Deny from all

Kemudian, buka pula fail C:\Windows\system32\drivers\etc\hosts dengan code editor anda dan tambahkan kod berikut di dalamnya:

127.0.0.1		fbconnect.com

Dan restart Apache anda.

Nota: Sila tukarkan drive X: kepada drive di mana anda install xampp anda.

Facebook Application Client’s File

Muat turun files yang diperlukan dari sini: http://svn.facebook.com/svnroot/platform/clients/packages/facebook-platform.tar.gz, extract semuanya dan masukkan di dalam X:\xampp\htdocs\fbconnect\vendors\facebook.

Kemudian, pada folder webroot, create satu file baru dan namakan xd_receiver.htm dan masukkan kod berikut:



	
		Cross-Domain Receiver Page

Create Facebook Application

Sekarang tiba masanya untuk kita create satu Facebook Apps baru di sini: http://www.facebook.com/developers/.

1. Set up application baru

2. Berikan nama yang sesuai

3. Pada tab Basic, masukkan contact email untuk application anda

4. Pada tab Authentication, masukkan URL domain yang kita gunakan.

5. Pada tab Connect, masukkan URL (beserta trailing slash), base domain (domain tanpa http://) dan URL sekali lagi.

6. Simpan API Key dan Application Secret untuk kita gunakan kemudian.

Database

Kita perlu tambahkan 2 fields baru pada table users kita.

ALTER TABLE `users`
ADD `fbid` BIGINT( 20 ) NOT NULL DEFAULT '0' AFTER `password` ,
ADD `fbpassword` BIGINT( 20 ) NOT NULL AFTER `fbid`;

AppController.php

Buka file AppController.php dan tambahkan kod berikut:

var $uses = array('User');
var $facebook;
var $__fbApiKey = '7d8e96e4ddf047b5611f5fcbaee04133';
var $__fbSecret = '56480e8655ceecaa36ad2e599bda3604';

syahzul@gmail.com

Dan tambah kod berikut di dalam file yang sama.

	function __construct() {
		parent::__construct();

		// Prevent the 'Undefined index: facebook_config' notice from being thrown.
		$GLOBALS['facebook_config']['debug'] = NULL;

		// Create a Facebook client API object.
		$this->facebook = new Facebook($this->__fbApiKey, $this->__fbSecret);
	}

Seterusnya, tambah kod ini di dalam method beforeFilter() di dalam file yang sama.

//check to see if user is signed in with facebook
$this->__checkFBStatus();

//send all user info to the view
$this->set('user', $this->Auth->user());

Dan kod seterusnya:

    private function __checkFBStatus(){

        //check to see if a user is not logged in, but a facebook user_id is set
        if ( !$this->Auth->User() && $this->facebook->get_loggedin_user() ) {

            //see if this facebook id is in the User database; if not, create the user using their fbid hashed as their password
            $user_record =
                $this->User->find('first', array(
                    'conditions' => array('fbid' => $this->facebook->get_loggedin_user()),
                    'fields' => array('User.fbid', 'User.fbpassword', 'User.password'),
                    'contain' => array()
                ));

            //create new user
            if(empty($user_record)):
                $user_record['fbid'] = $this->facebook->get_loggedin_user();
                $user_record['fbpassword'] = $this->__randomString();
                $user_record['group_id'] = 3; // we have to set group_id manually here, put the lowest level
                $user_record['password'] = $this->Auth->password($user_record['fbpassword']);
                $this->User->create();
                $this->User->save($user_record);
            endif;

            //change the Auth fields
            $this->Auth->fields = array('username' => 'fbid', 'password' => 'password');

            //log in the user with facebook credentials
            $this->Auth->login($user_record);

        }

        // if user is logged in, and fb also logged in
        elseif ( $this->Auth->User() && $this->facebook->get_loggedin_user() ) {

        	$user_record = $this->User->find('first', array('conditions' => array('User.id' => $this->Auth->User('id'))));

            //create new user
            if(empty($user_record)):
            	$user_record['id']			= $user['User']['id'];
                $user_record['fbid'] 		= $this->facebook->get_loggedin_user();
                $user_record['fbpassword'] 	= $this->__randomString();
                $user_record['group_id'] 	= $user['User']['group_id'];
                $this->User->save($user_record);
            endif;
        }
    }

    private function __randomString($minlength = 20, $maxlength = 20, $useupper = true, $usespecial = false, $usenumbers = true){
        $charset = "abcdefghijklmnopqrstuvwxyz";
        if ($useupper) $charset .= "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        if ($usenumbers) $charset .= "0123456789";
        if ($usespecial) $charset .= "~@#$%^*()_+-={}|][";
        if ($minlength > $maxlength) $length = mt_rand ($maxlength, $minlength);
        else $length = mt_rand ($minlength, $maxlength);
        $key = '';
        for ($i=0; $i<$length; $i++){
            $key .= $charset[(mt_rand(0,(strlen($charset)-1)))];
        }
        return $key;
    }

Ini merupakan hasil akhir yang ada pada file AppController.php saya.

facebook = new Facebook($this->__fbApiKey, $this->__fbSecret);
	}

    function beforeFilter() {
        // Configure AuthComponent
        $this->Auth->authorize = 'actions';
        $this->Auth->loginAction = array('controller' => 'users', 'action' => 'login');
        $this->Auth->logoutRedirect = array('controller' => 'users', 'action' => 'login');
        $this->Auth->loginRedirect = array('controller' => 'pages', 'action' => 'display');

	    // check to see if user is signed in with facebook
	    $this->__checkFBStatus();

	    // send all user info to the view
	    $this->set('user', $this->Auth->user());

        $this->Auth->allowedActions = array('display');
    }

    private function __checkFBStatus(){

        //check to see if a user is not logged in, but a facebook user_id is set
        if ( !$this->Auth->User() && $this->facebook->get_loggedin_user() ) {

            //see if this facebook id is in the User database; if not, create the user using their fbid hashed as their password
            $user_record =
                $this->User->find('first', array(
                    'conditions' => array('fbid' => $this->facebook->get_loggedin_user()),
                    'fields' => array('User.fbid', 'User.fbpassword', 'User.password'),
                    'contain' => array()
                ));

            //create new user
            if(empty($user_record)):
                $user_record['fbid'] = $this->facebook->get_loggedin_user();
                $user_record['fbpassword'] = $this->__randomString();
                $user_record['group_id'] = 3; // we have to set group_id manually here, put the lowest level
                $user_record['password'] = $this->Auth->password($user_record['fbpassword']);
                $this->User->create();
                $this->User->save($user_record);
            endif;

            //change the Auth fields
            $this->Auth->fields = array('username' => 'fbid', 'password' => 'password');

            //log in the user with facebook credentials
            $this->Auth->login($user_record);

        }

        // if user is logged in, and fb also logged in
        elseif ( $this->Auth->User() && $this->facebook->get_loggedin_user() ) {

        	$user_record = $this->User->find('first', array('conditions' => array('User.id' => $this->Auth->User('id'))));

            //create new user
            if(empty($user_record)):
            	$user_record['id']			= $user['User']['id'];
                $user_record['fbid'] 		= $this->facebook->get_loggedin_user();
                $user_record['fbpassword'] 	= $this->__randomString();
                $user_record['group_id'] 	= $user['User']['group_id'];
                $this->User->save($user_record);
            endif;
        }
    }

    private function __randomString($minlength = 20, $maxlength = 20, $useupper = true, $usespecial = false, $usenumbers = true){
        $charset = "abcdefghijklmnopqrstuvwxyz";
        if ($useupper) $charset .= "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        if ($usenumbers) $charset .= "0123456789";
        if ($usespecial) $charset .= "~@#$%^*()_+-={}|][";
        if ($minlength > $maxlength) $length = mt_rand ($maxlength, $minlength);
        else $length = mt_rand ($minlength, $maxlength);
        $key = '';
        for ($i=0; $i<$length; $i++){
            $key .= $charset[(mt_rand(0,(strlen($charset)-1)))];
        }
        return $key;
    }
}
?>

Default.ctp

File seterusnya yang kita perlu edit ialah D:\xampp\htdocs\fbconnect\views\layouts\default.ctp. Cari kod

dan gantikan dengan

Dan tambahkan kod di bawah ini di bahagian

Nota: Jangan lupa tukarkan API Key anda!

Sekarang kita perlukan kod untuk button Facebook Connect, masukkan kod dibawah ini pada mana mana view yang sesuai. Saya gunakan file default.ctp yang sama untuk memudahkan pembelajaran.

			create('User', array('action' => 'login'));
					echo $form->inputs(array(
						'legend' => __('Login', true),
						'username',
						'password'
					));
					echo $form->end('Login');
					echo '';

				else:
					echo $user['User']['name'] . '
';
					echo $html->link('Logout', '#', array('onclick' => 'logout();'));
					if($user['User']['fbid'] == 0) :
						echo '';
					endif;
				endif;
			?>

Sekarang kita boleh test Facebook Connect kita. Katakan kita dah ada satu user dalam database, kemudian dia login, dia masih nampak button Facebook Connect dan boleh gunakan fungsi tersebut. Dan kita akan add Facebook ID dia lepas connect. Jadi kita bukan saja boleh add new user, tapi boleh integrate existing user yang ada.

Download Sample Code

Boleh download di sini: http://bit.ly/aeuwSy

Isu Yang Dikenalpasti

Lepas user yang dah login tu Connect, button FB Connect tetap wujud. Kena refresh page baru dia hilang. Boleh buang guna javascript, tapi tak disertakan di sini, minta maaf.

Kredit

Artikel asal yang menunjukkan cara menggunakan Facebook Connect oleh CutFromTheNorth.com. Pautan untuk article asal di sini.

Import Database MySQL dengan BigDump

syahzul — Fri, 26 Feb 2010 20:42:26 +0000

Jika anda mempunyai website ataupun forum yang mempunyai banyak post, saiz database anda pastinya amat besar. Sebagai contoh, untuk portal Joomla-My.org, saiz database sudah mencecah 150MB! Dan adalah menjadi masalah apabila kami ingin import database ini ke web server kami kerana saiz maksimum untuk upload file biasanya dalam 16MB hingga 128MB sahaja, bergantung kepada web hoster. Antara error yang biasanya kami dapat ialah:

You probably tried to upload too large file. Please refer to documentation for ways to workaround this limit.

Berbagai cara yang kami cuba lakukan, antaranya ialah membahagikan database itu kepada beberapa bahagian yang lebih kecil, contohnya satu bahagian hanya ada beberapa tables sahaja. Tapi table untuk post sahaja mencecah 72MB! Itu belum masuk lagi table untuk users.

Setelah merujuk pada documentation yang diberikan, kami mencuba BigDump, satu script PHP yang dicipta oleh Alexey Ozerov. Ternyata script ini banyak membantu. Mari kita tengok cara cara menggunakannya.

Langkah 1

Download script ini dari halaman web Big Dump dan kemudian extract file zip tersebut menggunakan Winzip atau 7zip atau Winrar, terpulang pada anda.

Langkah 2

Ubahsuai kod di bawah ini, mengikut maklumat MySQL database pada server anda

// Database configuration
$db_server   = 'localhost';        // biarkan localhost
$db_name     = '';                // nama database yang ingin anda gunakan
$db_username = '';                // username untuk mysql
$db_password = '';                // password untuk mysql

Itu sahaja yang perlu anda tukar.

Langkah 3

Dengan menggunakan mana mana FTP client yang sesuai, upload script tadi ke web server anda. Untuk hasil yang lebih baik, cipta satu folder baru di dalam /public_html/ anda. Kami gunakan nama folder dump, dan set permission (CHMOD) kepada 777.

Langkah 4

Upload file database yang ingin digunakan, sama ada format .sql ataupun .gz di dalam folder yang sama.

Langkah 5

Run script bigdump.php itu pada web browser anda, contohnya: http://www.joomla-my.org/dump/bigdump.php. Pada paparan seterusnya, anda akan mendapati fail database tadi berada di dalam senarai.

Langkah 6

Sekarang, untuk mulakan proses import database yang besar itu, klik pada link Start Import.

Langkah 7

Masa yang terbaik untuk anda membancuh teh atau kopi sambil menunggu proses ini selesai. Setiap bahagian yang telah berjaya akan di paparkan pada web browser anda.

Selesai!

Nota: Sekiranya anda menggunakan format file .sql untuk proses ini, dan tiba tiba screen web browser anda tidak memaparkan apa apa, cuba gunakan format .gz.

Video Tutorial: Pemasangan Web Server Xampp dan Joomla!

syahzul — Thu, 25 Feb 2010 09:39:19 +0000

Video tutorial kali ini, saya akan menunjukkan cara cara memasang web server xampp dan Joomla! di dalam komputer anda.

www.youtube.com/watch?v=eFQHTPHy4Kg

Host subdomain di server yang lain menggunakan DirectAdmin

syahzul — Tue, 16 Feb 2010 14:15:45 +0000

Sekiranya anda mempunyai domain sendiri, anda boleh menambah subdomain yang anda mahukan, bergantung kepada berapa banyak yang web hoster beri. Kebiasaannya jumlah subdomain adalah unlimited. Pada setiap subdomain, anda boleh install apa sahaja script yang anda mahukan; WordPress, Joomla!, Drupal, PHPBB dan lain lain.

Dan subdomain yang anda create itu sebenarnya boleh di host di server yang lain, bukan setakat pada server yang anda gunakan sahaja. Kurang faham? Mari tengok contoh.

Saya mempunyai 2 web server, dan maklumatnya seperti di bawah.

Server A

Domain: syahzul.com
Web hoster: ABC Host, US
IP Address: 111.333.444.555

Server B

Domain: syahzul.net
Web hoster: DEF Host, Malaysia
IP Address: 333.555.666.777

Nota: Maklumat di atas adalah dummy data sahaja.

Apa yang ingin saya lakukan ialah, saya ingin host subdomain project.syahzul.com di Server B. Berikut adalah langkah langkah yang saya lakukan.

Server A

Pada server A, di control panel DirectAdmin, saya pergi ke DNS Management.

Kemudian, pada bahagian bawah page tersebut, saya masukkan data yang diperlukan.

1. Masukkan subdomain yang ingin digunakan, saya ingin gunakan project.syahzul.com, jadi saya hanya masukkan project sahaja di dalam text box itu.

2. Masukkan IP address server ke 2.

Server B

Pada server B pula, saya hanya perlu add project.syahzul.com sebagai domain baru. Masuk ke dalam DirectAdmin server B, pilih Domain Setup.

Kemudian, pada page seterusnya, saya pergi ke Add Another Domain.

Seterusnya, saya masukkan subdomain project.syahzul.com pada text box Domain.

Sekarang, jika saya kembali ke Home pada DirectAdmin server B, subdomain project.syahzul.com sudahpun berada di dalam senarai. Jika saya click pada subdomain tersebut, saya boleh manage macam domain yang lain seperti tambah FTP akaun, tambah database dan lain lain lagi.

Selamat mencuba!

Nota lagi:

Kaedah ini hanya untuk sesiapa yang menggunakan DirectAdmin pada web server. Untuk cPanel, rasanya agak sukar kerana biasanya cPanel tidak sertakan DNS management.

Video Tutorial : Light Effect Menggunakan Photoshop

syahzul — Sat, 13 Feb 2010 09:09:57 +0000

Mari belajar membuat Light Effect menggunakan Adobe Photoshop. Video tutorial ini akan menunjukkan cara membuat Light Effect menggunakan Pen Tool dan Brush Tool. Panjang video: 6 minit 31 saat.

www.youtube.com/watch?v=Q0dKNmFCriQ

Nota:
* Ini merupakan video tutorial saya yang pertama, jadi harap anda semua dapat memberikan feedback supaya saya dapat memperbaiki lagi kualiti video tutorial akan datang.
** Kualiti video pada Youtube agak mengecewakan, mungkin sebab guna akaun percuma. Tapi anda boleh download full HD video dari link di bawah ini.

Download high quality video