Tutorial Laman Web mudah untuk anda!

Pelajari teknik-teknik membangunkan laman web secara percuma menggunakan Joomla, Wordpress, Drupal, Blogger, Dreamweaver dan Web percuma.

Joomla!

Laman web Content Management System (CMS) yang terbaik dan digunakan oleh individu mahupun syarikat serta institusi pendidikan.

Wordpress

Blog yang paling popular dikalangan pengguna kerana boleh diintegrasikan bersama laman web HTML ataupun PHP.

Drupal

Salah satu CMS popular disamping Joomla dan mempunyai ciri-ciri seperti blog yang mudah dikendalikan.

Blogger

Blog percuma dan popular dikalangan pelbagai peringkat pengguna. Pelbagai template percuma yang menarik untuk blog ini dan sesuai untuk blog peribadi mahupun perkongsian maklumat.

Adobe Dreamweaver

Perisian popular untuk membangunkan laman web mengikut kreativiti individu. Menyokong HTML, PHP, JavaScript, dan CSS. Sesuai untuk laman web dinamik ataupun statik. Anda juga boleh membangunkan sebuah sistem berasaskan web.

Webs

Laman web percuma yang disediakan secara online untuk tujuan peribadi mahupun perniagaan. Sesuai untuk individu, kumpulan, syarikat dan sesiapa sahaja. Anda hanya perlu mendaftar sahaja sebagai pengguna.

27 April 2011

Mereka blog di Blogger dengan mudah!

Sudahkah anda mempunyai blog? jika belum ikuti langkah-langkah mudah ini untuk mencipta blog melalui blogger.com.
1. Mula-mula pergi ke alamat URL http://www.blogger.com/ kemudian, klik “Get started”.
2011-04-27_111647
2. Langkah seterusnya, adalah “CREATE ACCOUNT”. Masukkan maklumat yang diperlukan.
2010-09-22_223749
3. Seterusnya, “Name your blog” dengan memilih nama yang sesuai untuk blog anda. Pilih alamat URL blog anda mengikut kesesuaian kanduangan blog anda. Klik “Check Availability” untuk memeriksa sekiranya alamat yang anda masukkan telahpun ada atau sebaliknya. Klik “CONTINUE” untuk meneruskan.
2010-09-22_224655
4. Pilih template blog yang sedia ada.
2010-09-22_224753
5. Akhir sekali, blog anda telah siap dan sedia untuk anda memulakan penulisan anda. Klik “start posting now”.
2010-09-22_224833
6. Terdapat 6 tab tetapan blog iaitu Posting, Comments, Settings, Design, Monetize, dan Stats. Sekiranya anda ingin menerbitkan artikel anda diruangan blog anda, klik “PUBLISH POST” atau “SAVED” untuk menyimpannya sebagai draft. Masukkan labels yang bersesuaian dengan tajuk artikel anda.
2010-09-22_225110
-SELAMAT MENCUBA-

Menghasilkan Imej Menu

Imej menu merupakan menu yang mempunyai imej/logo seperti gambarajah dibawah.


Untuk menghasilkannya di blogger, ikuti langkah-langkah berikut.

1. Mula-mula dapatkan dahulu imej logo untuk link menu yang dikehendaki. Klik pada kekunci PrintScreen keyboard komputer. Kemudian buka aplikasi Paint dan Paste kan.


2. Pilih kawasan logo tersebut dan klik "Crop" untuk memilih imej logo yang telah dipilih itu. Simpan sebagai imej berformat JPG atau PNG.



3. Pastikan saiz imej logo adalah sama untuk kesemuanya. Misalnya 200px x 80px.

4. Kemudian, pilih menu New Post dari tab Posting. Masukkan tajuk artikel dan pilih ikon imej untuk memasukkan imej logo yang telah disunting tadi.



5. Pilih imej logo yang dikehendaki dan klik "Add selected".


6. Setelah itu, klik "SAVED" untuk menyimpannya sebagai draft dan bukannya "PUBLISH POST" kerana imej logo ini tidak akan dipaparkan sebagai artikel blog tetapi untuk mendapatkan link nya sahaja. Biarkan juga Labels kosong.


7. Right Click pula untuk tab Design dan "Open link in new tab" kerana ruang kerja menu tersebut masih diperlukan.


8. Lihat pada ruangan sidebar dan tambahkan gadget.


9. Pilih gadget "HTML/JavaScript" dengan klik pada butang "+".


10. Copy dan Paste kod dibawah ini.
-------------------------------------------------------------------------------------------------------------
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.example.com/" target="_new"><img border="0" src="http://examplelogo.png" /></a></div>
-------------------------------------------------------------------------------------------------------------
dan tukarkan "http://www.example.com/" kepada alamat sebenar imej logo tersebut 


serta "http://examplelogo.png" kepada alamat sumber emej tersebut dengan cara pergi semula ke ruangan menu tadi dan right click imej logo tersebut dan "Copy link address" untuk mendapatkan alamat sumber imejnya.



11. Contoh link yang lengkap adalah:
-------------------------------------------------------------------------------------------------------------
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.joomla24.com/" target="_new"><img border="0" src="http://2.bp.blogspot.com/_a-meLv45DG4/TS0lV7YpLkI/AAAAAAAAA4U/4S2pCRqlphs/s1600/2011-01-12_113900.png" /></a></div>
-------------------------------------------------------------------------------------------------------------
<div class="separator" style="clear: both; text-align: center;">
<a href="http://freetemplate24.com/" target="_new"><img border="0" src="http://2.bp.blogspot.com/_a-meLv45DG4/TS0lcRHdd-I/AAAAAAAAA4s/RgU553LC3IA/s1600/2011-01-12_114916.png" /></a></div>
-------------------------------------------------------------------------------------------------------------



 dan ulangi link kod tersebut untuk setiap imej logo yang ada.


12. Klik "SAVE" setelah selesai.


12. Klik "SAVE" untuk template blog anda.



-TAMAT-

xampp server

Apa Itu XAMPP?
XAMPP merupakan pakej aplikasi server (pelayan) didalam komputer yang bertindak sebagai localhost. Sekiranya laman web hendak diakses melalui internet, web hosting diperlukan tetapi localhost hanya dapat diakses didalam komputer sahaja. Antara aplikasi yang disediakan seperi MySQL, Apache, FileZilla dan Mercury. Kesemua ini diperlukan untuk membolehkan laman web yang dibina didalam localhost dapat disiapkan sama seperi apa yang dijalankan di web hosting sebenar nanti.
Cara Install di Komputer
Sebelum anda memulakan pemasangan (install) Joomla, Wordpress, Drupal CMS ataupun membangunkan laman web HTML, muat turun terlebih dahulu perisian XAMPP ini melalu http://www.apachefriends.org/en/xampp.html. Pilih versi yang terbaru dan sesuai dengan sistem operasi anda. Didalam contoh saya ini menggunakan XAMPP versi 1.7.3:
2011-01-03_122958
1. Install dengan memilih lokasi pemasangan terlebih dahulu dengan cara klik “Browse”. Lokasi default adalah pada drive C. Anda bebas untuk memilih lokasi mengikut kehendak anda.  Klik “Install” untuk meneruskannya.


2. Setelah proses pemasangan selesai, tetingkap command prompt Windows akan muncul menunjukkan pilihan yang perlu anda tentukan iaitu “Should I add shortcuts to the startmenu/desktop?:” Tekan Y untuk yes.

2011-01-03_124049

3. Kemudian diikuti “Should I proceed?” Tekan Y lagi.
2011-01-03_124115

4. Pilihan seterusnya, “Should I make a portable XAMPP without drive letters?. Tekan N untuk no kerana pemasangan XAMPP dilakukan didalam drive C dan bukannya pada USB drive.
2011-01-03_124159

5. Tekan Enter setelah relocate servis XAMPP.
2011-01-03_124235

6. Selanjutnya, ada 7 pilihan dan tekan 1 untuk memulakan Control Panel aplikasi XAMPP kemudian tekan Enter. Contol Panel akan bermula. Tekan x untuk menamatkan pilihan command prompt tersebut.
2011-01-03_124345

2011-01-03_124439

7. Terdapat 2 modul asas yang wajib anda mulakan ketika menggunakan localhost melalui XAMPP, iaitu Apache dan MySql. Klik “Start” untuk Apache dahulu.
2011-01-03_124517

8. Kemudian, tetingkap Windows Security Alert akan muncul yang mengkehendaki anda untuk memberi laluan tanpa sekatan melalui Windows Firewall. Tandakan kedua-dua pilihan kotak itu dan klik “Allow access”.
2011-01-03_124608

9. Klik “Start” untuk MySql pula dan tandakan juga kedua-dua kotak pilihan Windows Firewall yang muncul.
2011-01-03_124637

2011-01-03_124703

10. Pastikan Apache dan MySql “running” dan tekan pula “Admin” masing-masing untuk Apache terlebih dahulu diikuti MySql.
2011-01-03_124736

11. Tetingkap admin untuk xampp akan dipaparkan melalui web browser anda. Klik “English” untuk bahasa.
2011-04-26_233020

12. Apabila anda tekan “Admin” untuk MySql pula, tetingkap pangkalan iaitu phpmyadmin data akan dipaparkan melalui web browser.
2011-01-03_124849

13. Anda juga boleh mengakses secara terus melalui web browser anda di alamat URL http://localhost/xampp untuk Apache dan http://localhost/phpmyadmin untuk MySql.


Bagaimana Jika Localhost Tidak Berfungsi di Komputer Saya?

1. Jika alamat URL http://localhost/xampp menunjukkan “error” ataupun tidak dapat ditunjukkan melalui web browser, terdapat cara untuk menyelesaikannya.

2. Pergi ke folder installation xampp yang telah siap. (Drive C—>xampp). Lihat pada folder “apache” dan masuk kedalamnya. Anda juga boleh klik “Explore” di XAMPP Control Panel.
2011-01-03_152428
2011-01-03_152303

3. Lihat pula folder “conf” didalam folder “apache” tersebut dan cari fail bernama “httpd.conf”. Buka aplikasi Notepad Windows dan tarik fail itu kepadanya. Anda akan melihat isi kandungan fail “httpd.conf” itu.
2011-01-03_152353

2011-01-03_152817
2011-01-03_152840

4. Cari ayat “Listen 0.0.0.0: 80”, “Listen [::]: 80” dan “Listen 80”. Tambahkan 80 kepada ketiga-tiga nombor itu menjadi “Listen 0.0.0.0: 8080”, “Listen [::]: 8080” dan “Listen 8080”.
2011-01-03_152848
2011-01-03_152930

5. Setelah itu cari pula ayat “ServerName localhost:80” dan tukarkan juga menjadi “ServerName localhost:8080”.
2011-01-03_152947
2011-01-03_152955

6. Justeru itu alamat URL default localhost anda telah bertukar menjadi localhost:8080. Contohnya, http://localhost/xampp menjadi http://localhost:8080/xampp.

7. Ingat! anda cuma perlu menukar alamat URL localhost ini sekiranya komputer anda bermasalah dan tidak dapat mengenalpasti localhost sebenar disebabkan konflik dengan perisian lain yang telah menggunakan alamat 127.0.0.1 terlebih dahulu.

26 April 2011

Localhost

Sebelum anda mempelajari lebih mendalam tentang membangunkan laman web menerusi komputer, anda perlulah tahu berkenaan pangkalan data (database) dan juga pelayan (server) skrip pengaturcaraan yang digunakan untuk laman web. Apa yang perlu anda ambil tahu adalah “localhost” yang menjadi tunjang kepada pembinaan laman web didalam komputer. Localhost yang bermaksud “this computer” ataupun “komputer ini” merupakan local server (pelayan tempatan) yang digunakan untuk menjalankan pemprograman PHP-MySQL ataupun dengan kata lain untuk menguji laman web yang akan anda bina. Anda tidak perlu membangunkan laman web menggunakan web hosting sebenar kerana localhost lah yang menjadi hosting (perumah) kepada fail-fail laman web yang kemudiaannya diuji dengan menggunakan web browser (Internet Explorer, Firefox, Chrome dll) komputer tanpa memerlukan talian internet secara langsung. Dengan adanya localhost ini, anda dapat menyiapkan laman web terlebih dahulu dengan sempurna sebelum memuatnaiknya ke dalam web hosting. Sekiranya anda sudah mahir menyiapkan laman web didalam localhost, mungkin anda boleh terus menggunakan web hosting untuk menyiapkan laman web kerana fungsinya sama seperti localhost

Jikalau laman web yang sempurna dijalankan didalam web hosting, tentunya alamat URL seperti “www.example.com” tetapi laman web yang dijalankan didalam localhost pula akan didahulukan dengan perkataan “localhost” seperti http://localhost/example yang mana “example” adalah folder untuk laman web yang sedang dibangunkan. Secara automatik, fail yang bernama “index.php” ataupun “index.html” akan dipaparkan. Hal ini kerana localhost tidak menggunakan nama domain (example.com, example.org dll) tetapi hanya menggunakan alamat Internet Protocol komputer iaitu 127.0.0.1. Justeru itulah anda boleh juga menggunakan alamat URL localhost seperti http://127.0.0.1/example.

2011-04-26_2218552011-04-26_221916

Bagi membolehkan komputer anda dijadikan sebagai localhost, beberapa program yang menyokong pangakalan data dan skrip pemprograman untuk laman web adalah diperlukan. Antaranya seperti MySQL, Apache, FileZilla, dan Mercury. Akan tetapi, semua itu telah digabungkan dibawah satu perisian yang dikenali sebagai XAMPP.

2011-04-26_222854

Localhost menyokong pangkalan data MySQL dan juga skrip PHP kerana kedua-duanya adalah saling bergantungan. Misalnya anda memerlukan laman web interaktif yang tentunya menggunakan skrip PHP kemudian penyimpanan data iaitu MySQL. Kesemuanya akan saya jelaskan didalam artikel XAMPP nanti.

2011-04-26_223149

Related Posts Plugin for WordPress, Blogger...
Twitter Delicious Facebook Digg Stumbleupon Favorites More