KANDUNGAN
TAJUK Mukasurat
Pengenalan JavaScript 8
Pengenalan HTML 12
Pengenalan CSS 47
Jika anda mempunyai persoalan diatas, disini saya cuba berikan anda jawapan yang
terbaik untuk anda dengan ilmu saya yang tidak seberapa ini.
Soalan ini sering dikemukan oleh ramai pengguna yang ingin membuat web. Dan
kebiasaanya anda akan dijawab dengan:
3. Google saje.
Jika jawapan di atas mengelirukan anda dan menambahkan persoalan yang bermain
difikiran anda seperti "Saya tahu kena belajar HTML ni, tetapi sampai mana harus saya
belajar sehingga saya boleh membuat laman web ni".
Jadi, jangan salahkan orang lain jika jawapan diatas diberikan kerana semuanya betul.
Tetapi yang paling penting, soalan anda itu tidak jelas dan luas. Bila kita sebut mengenai
laman web, laman web ini mempunyai banyak cabang.Laman web boleh dipecahkan
kepada beberapa cabang seperti:
1. Blog
2. Forum
5. Portal
6. E-commerce
7. Help Desk
8. Gallery
9. Wiki
Oleh itu, sebelum anda meminta bantuan sila jelaskan tentang tepat, apakah jenis web
yang ingin anda bangunkan. Contohnya, tolong saya membina laman web perniagaan.
Di sini saya cuba huraikan serba sedikit panduan untuk membuat jenis-jenis web di atas.
1. Blog - Biasanya untuk membuat blog anda tidak perlu mengetahui koding-koding yang
kompleks, dan hanya perlu tahu serba sedikit dalam HTML dan CSS terutamanya dalam
bahagian koding background, color, font size. Anda tidak perlu membuat koding sendiri
untuk blog kerana terdapat banyak koding yang sudah siap untuk digunakan seperti
Wordpress dan Drupal. Di samping itu, terdapat website yang menawarkan perkhidmatan
blog online seperti blogspot.com.
2. Forum - Forum juga sama seperti blog, gunakan koding yang sudah siap seperti
Vbulletin dan phpBB. Berkenaan dengan antaramuka forum pula, pengetahuan sedikit
dalam CSS sudah cukup untuk membolehkan anda mereka bentuk forum anda.
3. Laman web peribadi - laman web peribadi biasanya kita mulakan dari kosong, untuk
membina laman web ini penegtahuan dalam HTML dan CSS amatlah penting.
4. Laman web perniagaan - untuk membina laman web perniagaan, saya sarankan akan
menggunakan Joomla untuk meningkatkan keselamatan website anda. Walau
bagaimanapun, jika anda sudah mahir dalam PHP dan SQL, mulakan dari kosong adalah
terbaik.
5. Portal - Membina portal tidak memerlukan pengetahuan yang tinggi kerana sudah
terdapat koding yang sudah siap seperti Drupal, Joomla, XOOPS, serta PHP-Nuke.
Walau bagai manapun, pengetahuan yang tinggi dalam bidang PHP akan dapat
membantu anda membuat modul-modul anda sendiri.
Ini satu lagi masalah ramai pengguna yang baru ceburi bidang pembangunan laman web.
Disini saya cuba senaraikan keperluan yang anda mesti ada untuk membina laman web.
1. Dreamweaver - perisian ini sangat mudah untuk digunakan terutama untuk orang-
orang yang baru mula belajar membuat web. Tutorial dreamweaver banyak terdapat di
internet. Saya dalam proses untuk membuat tutorial menggunakan dreamweaver.
2. PhotoShop - Perisian ini digunakan untuk membina gambar bagi laman web anda.
Terdapat banyak lagi perisian seumpana ini seperti PaintShop Pro, tetapi saya sarankan
anda menggunakan Photoshop. Sebagai permulaan, saya sarankan anda cuba mempelajari
perkara yang berkaitan dengan layer.
Ini adalah asas perisin penting dalam pembangunan laman web. Di sini juga saya cuba
senarikan beberapa lagi perisian yang pilihan bagi anda untuk anda gunakan dalam proses
pembinaan laman web.
2. Microsoft Studios 2008 - Perisian ini kebiasaanya digunakan untuk pembangun laman
web dalam bahasa ASP. Perisian ini cukup berkuasa. Kemahiran yang agak tinggi
diperlukan untuk menggunakan perisian ini.
3. CSS Validator - Perisian ini boleh dimuat turun dari W3.org. Perisian ini digunakan
untuk memastikan koding CSS anda adalah sah.
Statik vs Dinamik
Statik - laman web yang mempunyai beberapa laman dan isi kandungannya tidak
berubah.
Dinamik - laman web yang memerlukan pangkalan data sebagai tempat simpanan
maklumat.
Persoalan seterusnya.
Saya sering terbaca persoalan tentang bahasa apa yang perlu saya gunakan untuk
membuat web? HTML ke? Flash ke? Atau PHP.
Di sini saya ingin nyatakan, setiap laman web asasnya adalah HTML, walaupun website
anda itu menggunakan FLASH, tetapi ia perlu dimasukkan di dalam HTML. Oleh itu
pengetahuan dalam HTML adalah penting.
Pembinaan laman web menggunakan Flash dapat menarik minat pelayar, walau
bagaimanapun, berhati-hati semasa membuat web menggunakan Flash kerana anda perlu
mengambil kira keupayaan pelayar anda. Sesetengah pengguna tidak dilengkapi dengan
pemain Flash, dan sesetengah pula mempunyai sambungan internet yang perlahan.
Untuk asas membina laman web, saya tidak sarankan anda menggunakan PHP, kerana
untuk memahami PHP, anda perlu mahir dalam HTML terlebih dahulu. Mulakan dengan
HTML dan bila anda rasa selesa dengan HTML, baru anda membuka langkah dalam
bidang PHP.
Terus terang saya ingin nyatakan kepada mereka yang baru berkecimpung dalam bidang
laman web, tiada laman web yang sempurna dan tidak dapat digodam. Cuma
perbezaanya adalah lambat atau cepat. Di sini saya ingin berkongsi pengetahuan yang
saya ada dalam bidang pengodam laman web.
SQL Injection - teknik ini digunakan untuk mencapai pangkalan data anda dan membuat
kerosakan pada data. Jika keadaan lebih teruk, pangkalan data anda mungkin dipadam.
Brute Force - teknik ini digunakan untuk memecahkan kata laluan anda.
Access Driver Tech - Salah satu teknik yang bagi saya, cukup berkuasa untuk mereka
yang tidak mempunyai asas dalam bidang mengodam untuk mengodam laman web anda.
Namun anda tidak perlu bimbang jika anda menggunakan CMS, kerana sistem
keselamatan bagi CMS ditulis dan diperiksa oleh golongan pakar. Apa yang anda perlu
bimbang, jika anda membuat laman web anda bermula dari kosong. Pastikan anda
mengetahui serba sedikit tentang SSL dan certificate. Ini dapat membantu anda
menlindungi laman web anda.
Hosting
Anda tidak perlu bimbang mengenai hosting, kerana banyak syarikat peniagaan di
Malaysia menawarkan khidmat hosting. Pilih yang bersesuaian dengan anda. Bagi
peringkat permulaan, dapatkan hosting yang menawarkan package sekurang-kurangnya
1Gb untuk ruangan hardisk dan 10Gb untuk bandwidth.
Untuk menjadi seorang webmaster, anda perlu mengetahu banyak bahasa pengaturcaraan
laman web, bagi saya sendiri perjalanan saya untuk menjadi seorang webmaster masih
jauh. Saya ingin berkongsi sedikit info tentang perkara yang perlu anda tahu untuk
menjadi seorang webmaster
Bahasa Pangkalan Data : MySQL, Post SQL, mSQL, SQL dan Access.
Keselamatan : SSL, Certificate, exploit dan juga Real Time Coding Error.
Perangai : Mesra pelanggan, menepati masa projek dan juga mudah dibawa berbicara.
Sebagai penutup ingin saya jelaskan satu perkara yang penting dalam proses
pembelajaran membina laman web, banyakan permbacaan, sabar dan janganla
mengharapkan jawapan atau respon yang cepat daripada meraka yang mahir. Dan yang
paling penting, jangan terlupa untuk menggunakan khidmat terbaik daripada
UNCLE GOOGLE.
Pengenalan JavaScript
JavaScript -Book
• JavaScript
o Apa Itu JavaScript
o Paparan Slide Gambar Rawak
o Kombo Tiga Pilihan
JavaScript digunakan oleh berjuta orang untuk mencantikkan lagi laman web,
mengesahkan borang, membuat pengecaman pelayar, membuat 'cookies' dan banyak lagi.
TIDAK.
JavaScript dan java adalah dua bahasa pengaturcaraan yang berbeza konsep dan cara
menggunakannya, Java dibangunkan oleh Sun Microsystem, adalah lebih kompleks dan
lebih berkuasa seperti C dan C++.
Javascript ini akan menghasilkan kesan paparan slaid gambar secara rawak. Ia berlainan
dengan jawascript yang biasa digunakan iaitu susunan pertukarannya adalah mengikut
turutan. Tetapi ini secara rawak.
Contoh:
Arahan:
<script language="javascript">
randomimages[0]="1.jpg"
randomimages[1]="5.jpg"
randomimages[2]="2.jpg"
randomimages[3]="4.jpg"
randomimages[4]="3.jpg"
randomimages[5]="6.jpg"
for (n=0;n<randomimages.length;n++)
{
preload[n]=new Image()
preload[n].src=randomimages[n]
}
document.write('<img name="defaultimage"
src="'+randomimages[Math.floor(Math.random()*(randomimages.length
))]+'">')
function rotateimage()
{
if
(curindex==(tempindex=Math.floor(Math.random()*(randomimages.leng
th)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex
document.images.defaultimage.src=randomimages[curindex]
}
setInterval("rotateimage()",delay)
</script>
Pengubahsuaian:
randomimages[0]="1.jpg"
Javascript ini akan memaparkan tiga kotak pilihan jatuh secara kombo. Bila pilihan
pertama dipilih, pilihan kedua akan dipaparkan dalam kotak pilihan kedua bersebelahan
bergantung kepada pilihan pertama dan seterusnya pada kotak pilihan jatuh yang ketiga.
Contoh:
Arahan:
<FORM name="isc">
<table border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td nowrap height="11">
<script>
<!--
var groups=document.isc.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()
var temp=document.isc.stage2
function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
redirect1(0)
}
var secondGroups=document.isc.stage2.options.length
var secondGroup=new Array(groups)
for (i=0; i<groups; i++) {
secondGroup[i]=new Array(group[i].length)
for (j=0; j<group[i].length; j++) {
secondGroup[i][j]=new Array() }}
var temp1=document.isc.stage3
function redirect1(y){
for (m=temp1.options.length-1;m>0;m--)
temp1.options[m]=null
for
(i=0;i<secondGroup[document.isc.example.options.selectedIndex][y]
.length;i++){
temp1.options[i]=new
Option(secondGroup[document.isc.example.options.selectedIndex][y]
[i].text,secondGroup[document.isc.example.options.selectedIndex][
y][i].value)
}
temp1.options[0].selected=true
}
function redirect2(z){
window.location=temp1[z].value
}
//-->
</script>
</td>
</tr>
</table>
</FORM>
Konfigurasi:
Anda boleh mengubah suai setiap pautan dan pilihan mengikut kehendak anda. Semasa
pengubah suai, sila perhatikan array yang telah diberikan contoh.
Pengenalan HTML
HTML-book
• HTML
o Asas
Apa Itu HTML
Rekabentuk HTML
TAG
Penulisan Koding
o TAG Asas
Headings
o Attribute
o Background
o Font
o Formatting
o Images
o Links
o Senarai
o Warna
o Entiti
o Form @ Borang
o Rujukan
HTML adalah bahasa pengaturcaraan bagi membina sesebuah lama web. HTML adalah
bahasa termudah dan asas kepada membangunkan laman web. Oleh tu pengetahuan asas
dalam HTML akan membantu anda memahami Bahasa Pengaturcaraan yang lebih sukar
seperti PHP, ASP dan JavaScript.
HTML ada singkatan daripada akronim Hyper Text Markup Language. HTML ditulis
dalam text file dan ia merupakan bahasa pengaturaan yang tidak memerlukan kompiler
untuk mengkompil. Ianya terus dapat dibaca oleh Web Browser.Oleh hal yang demikian,
HTML boleh ditulis dengan menggunakan perisian yang paling ringkas iaitu Notepad.
Walau bagaimana pun terdapat editor WYSIWYG, ("What You See Is What You Get"),
tidak memerlukan kemahiran dalam bahasa HTML kerana proses pembangunan di buat
dalam bentuk gambar bukannya tulis. Contohnya DreamWeaver dan Frontpage.
Pengetahuan dalam bahasa HTML akan dapat memudahkan anda memahami sesuatu
pengaturcaraan dan menjimatkan masa untuk anda mengubahsuai sesuatu laman web.
Head
(Kepala)
Body
(Badan)
• Head adalah ruangan untuk meletakan tajuk, koding tambahan seperti JavaScript,
ruangan ini tidak akan dipaparkan.
• Body adalah ruangan untuk paparan sesuatu laman web di mana ke semua
elemen-elemen atau koding yang dimasukkan akan di baca oleh pelayan
(browser) dan diterjemahkan dalam bentuk visual.
Penggunaan <HTML> dan </HTML> akan memberitahu pelayar atau web browser dimana ia
patut bermula dan berakhir.
<HTML>
<HEAD>
.
.
</HEAD>
<BODY>
.
.
</BODY>
</HTML>
Secara umumnya TAG adalah tanda bagi komputer untuk memahami bahasa
pengaturcaraan.
Penggunaan tag yang mesti ada dalam sesuatu laman web ialah
<HEAD> --- Kebanyakkan koding seperti Javascript, XML dan ASP di masukkan di
sini. Kebiasaannya "script" di dalam <HEAD> perlu dijalankan sebelum keseluruhan
halaman dimuat turun sebagai persediaan.
<BODY> --- Sebarang koding yang ditulis di ruangan ini akan dipaparkan
Di samping itu terdapat pelbagai lagi TAG yang terdapat dalam HTML dan akan
diterangkan secara khusus kemudiannya.
Setiap TAG perlu ada pembuka TAG and perlu ditutup pada akhir penggunaannya.
Sekiranya tidak ditutup, elemen-elemen selepas TAG dibuka akan memberikan kesan
TAG tersebut sehinggalah tag penutup </HTML>.
Penulisan koding perlulah teratur dan kemas bagi memudahkan anda mengenali dan
memahami setiap koding yang digunakan. Sekiranya penulisan koding tidak teratur akan
menyukarkan anda untuk mencari bahagian-bahagian koding yang terlibat. Penerangan
lebih lanjut dalam "Penulisan Koding".
Bagi pengguna yang lebih suka untuk menulis koding dengan menggunakan Notepad
atau software yang seakannya, corak dan cara penulisan koding adalah penting.
<html>
<head><title>Selamat Datang</title></head>
<body>
<table>
<tr><td>Hai... <p>Terima kasih atas lawatan sekali lagi</p>
</td>
<tr></table>
</body></html>
Sepintas lalu, memang tiada masalah untuk menganalisis koding yang senang. Tetapi
bayangkan kalu terdapat koding yang lebih panjang dari ini. Sudah pasti akan lebih
memeningkan. Jadi, untuk menyenangkan kerja anda semasa membina laman web
penulisan koding seperti di bawah ini amat-amat digalakkan.
<html>
<head>
<title>Selamat Datang</title>
</head>
<body>
<table>
<tr>
<td>Hai... <p>Terima kasih atas lawatan sekali lagi</p>
</td>
<tr>
</table>
</body>
</html>
Penulisan koding yang lebih teratur akan dapat memberikan gambaran terus kepada anda
dan lebih menjimatkan masa serta tidak memeningkan anda.
Headings
Heading digunakan untuk membuat tajuk, Heading terdapat 6 peringkat iaitu 1 hingga 6,
bermula dari besar sehinggalah kecil.
<h1>Tajuk</h1>
<h2>Tajuk</h2>
<h3>Tajuk</h3>
<h4>Tajuk</h4>
<h5>Tajuk</h5>
<h6>Tajuk</h6>
HTML akan menambah satu barisan kosong selepas Heading secara automatis.
Contoh :
Tajuk menggunakan H1
Tajuk menggunakan H2
Tajuk menggunakan H3
Tajuk menggunakan H4
Tajuk menggunakan H5
Tajuk menggunakan H6
Attributes
Attributes digunakan bersama-sama dengan tag. Apabila web browser membaca kod
attribute, ia juga akan mencari tag yang digunakan. Dengan menggunakan attribute,
pembangun laman web dapat mencantikan lagi laman web tersebut.
Terdapat banyak set attribute yang dapat digunakan bagi setiap tag. Walau bagaimana
pun, dalam tutorial ini, kita hanya akan memfokus kepada attribute yang umum sahaja,
iaitu attribute yang boleh digunakan oleh kebanyakan tag.
Attribute diletakkan dalam ruangan tag dan sebelum penutup untuk setiap tag.
Class or ID Attribute
Kegunaan CLASS adalah hampir sama dengan ID attribute. Ia tidak akan menghasilkan
sesuatu paparan atau tag. Namun ia digunakan sebagai tanda apabila anda menggunakan
CSS. Dengan erti kata lainnya, penggunaan CLASS adalah merujuk kepada
pengkumpulan atribute kepada ID tertentu bukan keseluruhan ID.
Idea penggunaan CLASS atau ID Attribute ini adalah supaya jika anda ingin
menggunakan tag yang sama contohnya perenggan atau <p> didalam laman web anda
tetapi setiap perenggan mempunyai gaya yang tersendiri.
HTML Code:
<p id="italicsparagraph">Paragraph type 1 Italics</p>
<p id="boldparagraph">Paragraph type 2 Bold</p>
Preview:
Sekiranya tiada penggunaan CLASS dimasukkan dalam atribute tadi, maka kesan kepada
keseluruhan <p> akan ditonjolkan.
Name Attribute
Name attribute adalah sama fungsingnya dengan Class atau ID Attribute tetapi ia
digunakan dalam JavaScript, ASP, ataupun PHP. Name attribute akan bertindak sebagai
pengasing sesuatu elemen. Dengan menamakan elemen tersebut, "script" (sama ada
JavaScript, PHP atau ASP) hanya akan bertindak pada elemen yang dinamakan sahaja
dan bukan kesemua elemen dalam laman web.
HTML Code:
<input type="text" name="TextField" />
Output:
Penggunaan "name" tidak akan menghasilkan apa-apa paparan atau kesan bagi INPUT di
atas, tetapi ia memainkan peranan yang besar sebagai identiti kepada kotak tersebut
apabila sebarang "script" dijalankan.
Title Attribute
Title attribute adalah attribute yang jarang digunakan. Walau bagaimanapun, ia berfungsi
sebagai info ringkas kepada sesuatu teks dan gambar apabila penunjuk tetikus digerakan
ke atas elemen bersebut (erti kata lain "mouseOver"). Apabila penunjuk tetikus berada di
atas teks atau gambar yang mempunyai title attribute, ia akan mengeluarkan kekotak
kecik berhampiran elemen tersebut (erti kata lain "popup").
HTML Code:
<h2 title="Selamat datang..!">Letakkan penunjuk anda disini</h2>
Title Attribute:
Align Attribute
Jika anda ingin mengubah posisi kedudukan teks atau gambar anda, ALIGN attribute
adalah jawapannya. Align attribute berfungsi untuk mengubah posisi kedudukan teks atau
gambar supaya ia berada di kanan, tengah atau dikiri. Jika Align attribute tidak
dinyatakan, teks akan disusun dalam posisi sebelah kiri.
HTML Code:
<h2 align="center">Tajuk ditengah</h2>
Paparan:
Tajuk ditengah
HTML Code:
<h2 align="left">Tajuk dikiri</h2>
<h2 align="center">Tajuk ditengah</h2>
<h2 align="right">Tajuk dikanan</h2>
Display:
Tajuk dikiri
Tajuk ditengah
Tajuk dikanan
Generic Attributes
Di bawah ini adalah koleksi set attribute yang secara umumnya boleh digunakan oleh
kebanyakan tag-tag yang terdapat didalam HTML.
Backgrounds
Tag bagi <body> mempunyai 2 attribute yang membolehkan anda membuat mewarnakan
latar belakang. Anda boleh menggunakan warna biasa atau menggunakan gambar.
Bgcolor
Attribute bgcolor menetapkan warna latar belakang bagi HTML, nilai bagi attribute ini
boleh dalam bentuk Hexadecimal, RBG atau pun nama warna.
<body bgcolor="#000000">
atau
<body bgcolor="rgb(0,0,0)">
atau
<body bgcolor="black">
Kod diatas akan menukarkan latar belakang laman web anda kepada warna hitam
Background
<body background="clouds.gif">
atau
<body background="http://www.kripkornstudios.co.cc/clouds.gif">
teks. Penggunaan tag <basefont> adalah untuk mensetkan text anda dalam satu style
yang sama.
Namun penggunaan <basefont> adalah tidak digalakan, oelh itu kita akan menggunakan
CSS atau Cascading Style Sheet..
Font Size
Menentukan paparan saiz tulisan. Nilainya bermula dari 1 (kecil) sehingga 7 (besar).
HTML Code:
<p> <font size="5">Tulisan ini bersaiz 5</font> </p>
Font Size:
Font Color
Mewarnakan tulisan anda
HTML Code:
<font color="#990000">Tulisan ini mempunyai nilai hexadecimal #990000</font> <br />
<font color="red">Tulisan ini berwarna merah</font>
Font Color:
Tulisan ini mempunyai nilai hexadecimal #990000
Tulisan ini berwarna merah
Font Face
Attribute ini digunakan untuk mengubah jenis tulisan yang akan dipaparkan. Untuk
keselamatan, sila gunakan beberapa jenis font kerana jika jenis tulisan yang anda
gunakan tidak terdapat didalam sistem pelayar lain, tulisan anda akan kelihatan cacat.
Oleh itu, biasakan dengan menambah tulisan default dibelakang senarai font face anda.
Contoh tulisan default ialah tahoma dan arial.
HTML Code:
<p> <font face="Bookman Old Style, Book Antiqua, Garamond">Perengggan ini mempunyai
jenis tulisan</font> </p>
Font Face:
Attribute Review
Attributes:
Attribute= "Value" Description
size= "Num. Value 1-7" Size of your text, 7 is biggest
color= "rgb,name,or hexidecimal" Change font color
face= "name of font" Change the font type
HTML Code:
<p><font size="7" face="Georgia, Arial" color="maroon">S</font>erlahkan kecantikan
tulisan anda</p>
Beauty:
HTML Code:
<p>Contoh <b>Bold Text</b></p>
<p>Contoh <em>Emphasized Text</em></p>
<p>Contoh <strong>Strong Text</strong></p>
<p>Contoh <i>Italic Text</i></p>
<p>Contoh <sup>superscripted Text</sup></p>
<p>Contoh <sub>subscripted Text</sub></p>
<p>Contoh <del>struckthrough Text</del></p>
<p>Contoh <code>Computer Code Text</code></p>
HTML Formatting:
Contoh Bold Text
Contoh Emphasized Text
Contoh Strong Text
Contoh Italic Text
Contoh superscripted Text
Contoh subscripted Text
Contoh struckthrough Text
Contoh Computer Code Text
Images
Gambar adalah nadi pengerak kepada website anda. Jadi ianya sangat penting untuk anda
memahami cara menggunakan gambar dengan sebaiknya. Gunakan tag <img /> untuk
meletakan gambar pada web page.
HTML Code:
<img src="pantai.jpg" />
Image:
Image src
Di atas kita telah letakkan attribute src. SRC bermaksud source ataupun lokasi bagi
gambar tersebut. Dalam link sebelum ini, anda boleh menggunakan URL untuk lokasi
bagi gambar atau lokasi dalaman.
Terdapat dua cara untuk menetapkan lokasi bagi gambar. Pertama anda menggunakan
standart URL seperti src="http://www.kripkorn.co.cc/pantai.jpg" dan cara yang kedua
anda boleh mengupload file anda terus kedalam web server anda dan anda boleh
mencapainya menggunakan method pokok iaitu src="pantai.jpg". Lokasi bagi gambar
adalah relatif dengan lokasi .html anda.
URL Types:
Local Src Location Description
src="pantai.jpg" gambar berada dalam folder yang sama dengan file html anda
src="../pantai.jpg" gambar berada dalam folder sebelum file html
gambar berada dalam folder sebelum file html dan di dalam folder
src="../pics/pantai.jpg"
pics
URL mestila tidak mempunya drive letter, Oleh itu lokasi bagi gambar seperti ini
src="C:\\www\web\gambar\" tidak akan berhasil. Gambar mestilah diupload bersama-
sama dengan file html anda ke dalam web server.
Alternative Attribute
Attibute bagi alt adalah memaparkan teks ringkas mengenai gambar yang dipapar,
ataupun jika gambar tersebut gagal dipaparkan, alt teks akan dipaparkan.
HTML Code:
Alternative Text:
HTML Code:
<img src="pantai.jpg" height="50" width="100">
1. align (Horizontal)
o right
o left
o center
2. valign (Vertical)
o top
o bottom
o center
HTML Code:
<p>Ini Perenggan pertama<..../p>
<p>
<img src="pantai" align="right">
Gambar akan terpapar disebelah kanan bukan?
</p>
<p>Ini perenggan ke tiga...</p>
Ini Perenggan pertama bagi menunjukan cara penggunaan attribute gambar align
Images as Links
Berikut adalah menggunakan gambar untuk menjadikan link. Kebiasaanya kita
menggunakan text, walau bagaimana pun, gambar akan dapat mempercantikan lagi
website anda.
HTML Code:
<a href="http://www.kripkorn.co.cc">
<img src="pantai.jpg"> </a>
Image Links:
Now your image will take you to our home page when you click it. Change it to your
home page URL.
Thumbnails
Thumbnails adalah gambar yang berskala kecil yang dilinkkan kepada gambar asal .
Anda perlu membuat gambar yang dimensi kecil dan kualiti rendah untuk dijadikan
thumnail.
HTML Code:
<a href="pantai.jpg"> <img src="thumb_pantai.jpgf"> </a>
Thumbnails:
Text Links
tag <a> dan </a> adalah pembuka dan penutup bagi links. Kemudian attribute href
digunakan untuk menetapkan sambungan link. Dibawah ini contoh penggunaan tulisan
sebagai link.
HTML Code:
<a href="http://www.espn.com/" _fcksavedurl="http://www.espn.com/"
_fcksavedurl="http://www.espn.com/" _fcksavedurl="http://www.espn.com/"
target="_blank" >ESPN Home</a> <a href="http://www.yahoo.com/" target="_blank"
>Yahoo Home</a>
Global Link:
Link Targets
Attribute target digunakan untuk menetapkan cara link tersebut dibuka sama dalam
dalam window yang sama, atau dalam window yang baru.
HTML Code:
target=" _blank" Buka dalam window yang baru
_self" Buka dalam window yang sama
_parent" Buka dalam frame utama
_top" Buka dalam windows yang sama dan batalkan semua frame
Contoh dibawah akan membuka laman web ESPN.COM dengan menggunakan window
baru
HTML Code:
_blank Target:
ESPN.COM
Anchors
Anchor digunakan untuk link yang berada dalam webpage yang sama. Untuk permulaan
anda mestila mensetkan kedudukan anchor anda. Contohnya seperti dibawah.
Example:
<h2>Links and Anchors<a name="top"></a></h2>
<h2>Text Links<a name="text"></a></h2>
<h2>Email<a name="email"></a></h2>
Anchor Code:
<a href="#top">Tajuk Utama</a>
<a href="#text">Text Links</a>
<a href="#email">Email Links</a>
Links ruangan:
Tajuk Utama
Text Links
Email Links
Email Links
Untuk link untuk email adalah mudah. Sebaiknya anda perlu meletakkan subjet terus agar
memudahkan pelayar menghantar email
HTML Code:
<a href="mailto:kripkorn@yahoo.com?subject=Feedback"
_fcksavedurl="mailto:kripkorn@yahoo.com?subject=Feedback"
_fcksavedurl="mailto:kripkorn@yahoo.com?subject=Feedback"
_fcksavedurl="mailto:kripkorn@yahoo.com?subject=Feedback" >kripkorn@yahoo.com</a>
Email Links:
kripkorn@yahoo.com
Anda juga boleh membuat tambahan dengan meletakn sedikit isi kandungan didalam
email tersebut secara automatik
HTML Code:
<a href="mailto:kripkorn@yahoo.com?subject=Feedback&body=Bagus Portal ini">
kripkorn@yahoo.com</a>
Complete Email:
kripkorn@yahoo.com
Download Links
Meletakkan link untuk proses download atau muat turun adalah seperti meletakan text
link. Bezanya anda perlu meletakkan nama file yang ingin didownload oleh pelayar
bersama-sama dengan extnya sekali.
HTML Code:
<a href="http://www.kripkorn.co.cc/blank.zip">Text Document</a>
HTML Code:
<head>
<base href="http://www.kripkorn.co.cc/">
</head>
Lists
List ialah tag yang digunakan untuk membuat senarai dalam HTML.Terdapat 3 jenis list
iaitu
Ordered Lists
Gunakan tag <ol> untuk memulakan proses meletakkan senarai. Kemudian letakan tag
<li> diantara pembuka <ol> dan penutup </ol> untuk membuat list. Ordered List
bermakna senarai disusun dalam turutan nombor. Perhatikan list dibawah sebagai
demontrasi.
HTML Code:
Hobi Saya
1. Membaca
2. Berbasikal
3. Memancing
Untuk memulakan senarai anda dengan menggunakan nombor permulaan yang lain
contohnya 6 kita menggunakan attribute start.
HTML Code:
Hobi Saya
6. Membaca
7. Berbasikal
8. Memancing
HTML Code:
Unordered Lists
Untuk membuat senarai yang tidak menggunakan nombor, anda boleh mengguakan tag
<ul>. Senarai dalam <ul> akan disusan dengan menggunakan bullet,circle atau disc. Jika
attribute <ul> tidak digunakan, jenis bullet akan dipaparkan.
HTML Code:
Unordered Lists:
Barang Dapur
• Susu
• Milo
• Roti
• Beras
Dibawah adalah jenis <ul> yang menggunakan attribute lain. penggunakan type adalah
untuk emngantikan paparan asal iaitu bullet.
HTML Code:
HTML Code:
HTML Code:
Fromage
French word for cheese.
Voiture
French word for car.
16 Warna asal:
RGB Values
Cara yang kedua adalah menggunakan RGB, walau bagai manapun saya tidak
merekemenkan anda menggunakan cara ini kerana ia tidak bersesuaikan dengan IE.
Namun, pengetahuan dalam RGB mungkin dapat membantu anda pada masa hadapan.
RGB bermaksud Red,Green, Blue, Setiap warna ini mempunyai nilai dari 0(tidak
mempunyai warna itu) sehingga 255(sepenuhnya warna itu). Format untuk menggunakan
RGB adalah - rgb(RED,GREEN,BLUE).
bgcolor="rgb(255,255,255)" Putih
bgcolor="rgb(255,0,0)" Merah
bgcolor="rgb(0,255,0)" Hijau
bgcolor="rgb(0,0,255)" Biru
Hexadecimal
Hexadecimal ada cara ke tiga dan merupakan cara yang agak sukar untuk difahami pada
awalnya. Walau bagai manapun, jika anda fasih tentang Hexadecimal, proses untuk
membangunkan laman web menjadi sangat mudah. Cara ini diguna secara meluas oleh
pembangun laman web.
Hexadecimal mempunyai 6 digit yang mewakili warna, 2 digit pertama mewakili merah,
2 digit seterusnya mewakili hijau dan 2 digit terakhir mewakili biru.
Anda tidak perlu bimbang tentang kod-kod hexadecimail kerana, dengan menggunakan
Photoshop, anda boleh mengetahu kod hexadecilmal bagi sesuatu warna.
Contoh Hexadecil
Hexadecimal:
bgcolor="#acacac"
Kod Hexadecimal
Dibawah ini adalah kod bagi Hexadecimal
A Real Hexadecimal:
bgcolor="#FFFFFF"
Hexadecimal Formula:
Formulanya sangat mudah, kita mengambil huruf F yang pertama dan didarabkan dengan
16 dan kita mencampurkan dengan nilai F kedua yang bernilai 15. 255 adalah nilai
malsimum bagi sesuatu warna
Contoh 2:
bgcolor="#CC7005" CC(RR - Red) (12 * 16) + (12) = 204 70(GG - Green) (7 * 16) +
(0) = 112 05(BB - Blue) (0 * 16) + (5) = 5
Character Entities
Entiti ialah tanda nama atau huruf special yang tidak terdapat di dalam keyboard. Untuk
memaparkan entiti anda perlu mengetahui 4 bahagian penting.
HTML Code:
Copyright:
Gabungkan © untuk membuat tanda - © - copyright.
Contohnya
HTML Code:
<p>Perjuangan ini belum selesai!</p>
Spaces:
Dalam HTML, untuk mengunakan tanda lebih besar atau lebih kecil, kita perlu
menggunakan entiti walaupun huruf tersebut terdapat pada papan kekunci.
HTML Code:
<p> Kurang dari - < <br /> Lebih dari - > <br /> Body tag - <body>
</p>
HTML Forms
Form atau borang adalah teknik yang paling kepada webmaster untuk mendapatkan info
atau maklumat daripada pelayar seperti nama, alamat ataupun nombor kredit kad. Borang
terdiri daripada beberapa jenis bergantung kepada keperluan webmaster dan juga anda
boleh menyimpan data-data dari borang ini dalam bentuk fail ataupun database.
Text Fields
Sebelum anda belajar untuk membuat borang yang sempurna, anda mestila belajar
daripada asas, Input yang paling asas kita akan gunakan ialah Text Field. Tag yang akan
kita gunakan untuk membuat form adalah <form> dan tag bagi memasukan jenis data
adalah <input> . Tag <input> mempunyai beberapa attribute iaitu:
HTML Code:
<form method="post" action="mailto:youremail@email.com">
Nama: <input type="text" size="10" maxlength="40" name="name">
<br />
Kata Kunci: <input type="password" size="10" maxlength="10" name="password">
</form>
Input Forms:
Nama:
Kata Kunci:
Sekarang kita akan belajar borang yang paling mudah, iaitu menghantar email
menggunakan borang. Kebiasaanya butang adalah input yang paling terakhir didalam
borang anda dan nilai bagi attribute name disetkan sebagai Hantar. Attribute Name adalah
nilai paparan bagi label butang tersebut.
• method -Terdapat dua jenis method iaitu POST dan GET. Kebiasaanya kita akan
menggunakan method POST.
• action - Menentukan alamat atau lokasi padi data-data didalam form dihantar.
HTML Code:
<form method="post" action="mailto:youremail@email.com">
Nama: <input type="text" size="10" maxlength="40" name="name">
<br /> Kata Kunci:
<input type="password" size="10" maxlength="10" name="password"><br />
<input type="submit" value="Hantar"> </form>
Email Forms:
Nama:
Kata Kunci:
Hantar
Cuma ubahkan alamat email anda, dan koding untuk menghantar email menggunakan
borang selesai.
Radio Buttons
Butang jenis Radio adalah bentuk yang popular untuk membuat pilihan. Anda bleh
menggunakannya untuk membuat kuiz atau pun soalanner aneka jawapan.Dibawah ini
adalah senari attribute yang berkaitan dengan butang Radio..
HTML Code:
<form method="post" action="mailto:youremail@email.com">
Hobi anda?
<br /> Memancing:
<input type="radio" name="memancing" value="kolam">Kolam
<input type="radio" name="memancing" value="pantai">Pantai
<br />
Membaca:
<input type="radio" name="membaca" value="novel">
Novel<input type="radio" name="membaca" value="Majalah">Majalah
<input type="radio" name="membaca" value="komik">Komik <br>
<input type="submit" value="Hantar Email"></form>
Radios:
Hobi anda?
Memancing: Kolam Pantai
Membaca: Novel Majalah Komik
Hantar Email
Jika anda mengantikan alamat email kepada alamat email anda, anda akan mendapat
email yang bertulis "Memancing=(pilihan) Membaca=(pilihan)"
Check Boxes
Checkbox membenarkan pengguna memilih lebih dari satu pilihan. name dan value
attrubute bagi checkbox adalah sama dengan radio
HTML Code:
<form method="post" action="mailto:youremail@email.com">
Minuman Kegemaran saya
Check Boxes:
Teh O Beng
Kopi
Air Kosong
Fresh Orange
Hantar
Drop down adalah satu teknik pilihan yang hampir sama dengan radio tetapi ia dalam
bentuk dropdown. Tag bagi dropdown adalah <select> dan </select> . Manakala bagi
membuat senarai dalam dropdown, anda boleh menggunakan tag <option> dan
</option> .
HTML Code:
<form method="post" action="mailto:youremail@email.com">
Pelajaran?<select name="sekolah">
<option>Pilih Satu</option>
<option>Sekolah Rendah</option>
<option>Sekolah Menengah</option>
<option>Kolej</option>
<option>Universiti</option>
<option>PhD</option>
<input type="submit" value="Hantar">
</select>
</form>
Selection Forms
HTML Code:
<form method="post" action="mailto:youremail@email.com">
Muzik Kegemaran Anda <select multiple name="music" size="4">
<option value="emo" selected>Emo</option>
<option value="metal/rock" >Metal/Rock</option>
<option value="hiphop" >Hip Hop</option>
<option value="ska" >Ska</option>
<option value="jazz" >Jazz</option>
<option value="country" >Country</option>
<option value="classical" >Classical</option>
<option value="alternative" >Alternative</option>
<option value="oldies" >Oldies</option>
<option value="techno" >Techno</option>
</select> <input type="submit" value="Hantar">
</form>
Selection Forms:
Emo
Metal/Rock
Hip Hop
Hantar
Ska
Muzik Kegemaran Anda
Upload Forms
Upload Form digunakan oleh pengguna untuk menhantar file ke server tanpa peru
mengetahui kata kunci kepada web server anda. Namun, untuk membolehkan form ini
digunakan, anda perlula menggunakan PHP,Perl,ASP ataupun JavaScript. Anda hanya
perlu meletakkan type="file" menggunakan form jenis ini.
HTML Code:
<input type="hidden" name="MAX_FILE_SIZE" value="100" />
<input name="file" type="file" />
Upload Form:
Text Areas
Text Area biasanya digunakan untuk menghantar komen atau penerangan yang panjang.
Tag bagi memgunakan Text area ialah <textarea> ... </textarea> .
Text area mempunyai 2 attribute yang penting iaitu laju dan baris. Anda boleh
menentukan saiz text area anda dengan menggunakan attribute rows dan column.
Terdapat satu lagi attibute yang menentukan bagaimana perenggan dibuat. Kita
menggunakan attibute wrap. Warp 3 nilai iaitu :
• wrap=
o "off"
o "virtual"
o "physical"
• Virtual hanya pelayar yang menulis akan dapat melihat perenggan diwarpkan
semasa dia menulis.
• Physical Text area disimpan dalma bentuk wrap
• Off Matikan wrapContoh dibawah menggunakan text area yang mempunyai 5
baris dan 20 lajur.
HTML Code:
<form method="post" action="mailto:youremail@email.com">
<textarea rows="5" cols="20" wrap="physical" name="comments">
Letakkan Komen anda</textarea>
<input type="submit" value="Hantar">
</form>
Text Area:
Letakkan Komen
anda
Hantar
DarkSalmon #E9967A
DarkSeaGreen #8FBC8F
DarkSlateBlue #483D8B
DarkSlateGray #2F4F4F
DarkSlateGrey #2F4F4F
DarkTurquoise #00CED1
DarkViolet #9400D3
DeepPink #FF1493
DeepSkyBlue #00BFFF
DimGray #696969
DimGrey #696969
DodgerBlue #1E90FF
FireBrick #B22222
FloralWhite #FFFAF0
ForestGreen #228B22
Fuchsia #FF00FF
Gainsboro #DCDCDC
GhostWhite #F8F8FF
Gold #FFD700
GoldenRod #DAA520
Gray #808080
Grey #808080
Green #008000
GreenYellow #ADFF2F
HoneyDew #F0FFF0
HotPink #FF69B4
IndianRed #CD5C5C
Indigo #4B0082
Ivory #FFFFF0
Khaki #F0E68C
Lavender #E6E6FA
LavenderBlush #FFF0F5
LawnGreen #7CFC00
LemonChiffon #FFFACD
LightBlue #ADD8E6
LightCoral #F08080
LightCyan #E0FFFF
LightGoldenRodYellow #FAFAD2
LightGray #D3D3D3
LightGrey #D3D3D3
LightGreen #90EE90
LightPink #FFB6C1
LightSalmon #FFA07A
LightSeaGreen #20B2AA
LightSkyBlue #87CEFA
LightSlateGray #778899
LightSlateGrey #778899
LightSteelBlue #B0C4DE
LightYellow #FFFFE0
Lime #00FF00
LimeGreen #32CD32
Linen #FAF0E6
Magenta #FF00FF
Maroon #800000
MediumAquaMarine #66CDAA
MediumBlue #0000CD
MediumOrchid #BA55D3
MediumPurple #9370D8
MediumSeaGreen #3CB371
MediumSlateBlue #7B68EE
MediumSpringGreen #00FA9A
MediumTurquoise #48D1CC
MediumVioletRed #C71585
MidnightBlue #191970
MintCream #F5FFFA
MistyRose #FFE4E1
Moccasin #FFE4B5
NavajoWhite #FFDEAD
Navy #000080
OldLace #FDF5E6
Olive #808000
OliveDrab #6B8E23
Orange #FFA500
OrangeRed #FF4500
Orchid #DA70D6
PaleGoldenRod #EEE8AA
PaleGreen #98FB98
PaleTurquoise #AFEEEE
PaleVioletRed #D87093
PapayaWhip #FFEFD5
PeachPuff #FFDAB9
Peru #CD853F
Pink #FFC0CB
Plum #DDA0DD
PowderBlue #B0E0E6
Purple #800080
Red #FF0000
RosyBrown #BC8F8F
RoyalBlue #4169E1
SaddleBrown #8B4513
Salmon #FA8072
SandyBrown #F4A460
SeaGreen #2E8B57
SeaShell #FFF5EE
Sienna #A0522D
Silver #C0C0C0
SkyBlue #87CEEB
SlateBlue #6A5ACD
SlateGray #708090
SlateGrey #708090
Snow #FFFAFA
SpringGreen #00FF7F
SteelBlue #4682B4
Tan #D2B48C
Teal #008080
Thistle #D8BFD8
Tomato #FF6347
Turquoise #40E0D0
Violet #EE82EE
Wheat #F5DEB3
White #FFFFFF
WhiteSmoke #F5F5F5
Yellow #FFFF00
YellowGreen #9ACD32
Pengenalan CSS
CSS-Book
• CSS
o Apa itu CSS
o Sintaks
o Bagaimana Hendak:
o Latar Belakang
o Tulisan
o Aksara
Sebelum anda meneruskan pembelajaran dalam CSS, anda perlulah mengetahui terlebih
dahulu sedikit asas tentang HTML/XHTML.
CSS Demo
Laman web ini dibina dengan menggunakan CSS untuk memaparkan pelbagai jenis
element dengan menarik.
Tag HTML direka untuk memaparkan isi kandungan di dalam dokumen. Tag in akan
dibaca oleh web browser contohnya "Ini adalah tajuk", "Ini adalah perenggang", "Ini
adalah jadual", dengan menggunakan tag seperi <h1> , <p> , <table> dan seterusnya. Tag-
tag diseperti ini dipaparkan oleh web browser secara automatik tanpa sebarang
perubahan.
Walau bagaimana pun setiap, web browser ingin menambahkan tag menereka sendiri dan
ini menyebabkan berlaku perbezaan diantara cara web browser memaparkan content
tersebut, oleh itu satu standart telah diperkenalkan dalam HTML 4.0 iaitu Style. Style
disokong oleh semua web browser yang menyokong HTML 4.0
Style menerangkan bagaimana HTML element dipaparkan, seperti tag <font> dan
<color> . Style biasanya disimpan dalam fail .CSS. CSS luaran akan dapat merubah
kesemua paparan HTML dengan hanya menambah satu baris kod sahaja, dan anda boleh
merubah kesemua paparan HTML dengan hanya mengubah satu fail CSS sahaja.
Style sheet membenarkan pelbagai jenis style dinyatakan dalam pelbagai keadaan. Style
boleh dinyatakan dalam satu elemen HTML sahaja, Di antara tag <head> ataupun di
dalam sumber luaran aitu fail CSS. Anda juga boleh memasukkan beberapa Style luaran
dalam satu dokumen HTML.
Style manakah akan digunakan jika lebih dari satu style dinyatakan untuk satu
elemen HTML?
• Web Browser
• Style luaran
• Style dalaman (di antara tag <head> ... </head> )
• Inline Style (style yang dinyatakan di dalam elemen itu sendiri)
Oleh itu, Inline Style akan dipilih untuk paparan walau pun style untuk elemen tersebut
dinyatakan juga didalam Style luaran atau dalaman.
Sintaks
CSS syntax dibahagikan kepada 3 bahagian iaitu selector, property dan value.
Selector ialah element/tag HTML yang ingin anda ubah, property ialah attribute yang
ingin diubah, manakala value ialah nilai bagi attribute tersebut. Property dan value
dipisahkan dengan menggunakan titik bertindah dan pada diletakan dalam kurungan.
Contohnya:
body {color:black}
• Selector : Body
• Property : Color
• Value : Black
Jika nilai yang diubah mempunyai perkataan lebih daripada satu contohnya tulisan jenis
sans serif anda perlu meletakkan pembuka pengikat kata atau quotes.
Note: Jika anda ingin nyatakan lebih dari satu property, anda mesti asingkan dengan
menggunakan semicolon. Contoh dibawah menerangkan bagai mana membuat perenggan
diletakan ditengah-tengah dan tulisan bagi perkataan tersebut diwarnakan dengan merah.
p {text-align:center;color:red}
Anda juga boleh menerangkan setiap property anda dalam satu baris agar ianya mudah
dibaca seperti ini :
p {
text-align: center;
color: black;
font-family: arial
}
Kumpulan
Anda boleh meletakan pelbagai selector dalam satu kumpulan hanya dengan
menggunakan comma, Contoh dibawah kita mengubah semua jenis heading atau tajuk
ajar mempunyai warna tulisan yang sama iaitu hijau.
h1,h2,h3,h4,h5,h6
{
color: green
}
Class Selector
Dengan menggunakan class selector, anda boleh membuat style yang berbeza untuk
element atau tag HTML yang sama.
Andakan dalam laman web anda mempunyai 2 jenis perenggan, satu ditulis dengan
bermula dari kiri manakala yang satu lagi ditulis bermula dari kanan. Anda boleh
membuat begitu dengan menggunakan style.
Di dalam kod HTML anda, gunakan class untuk memanggil style tersebut.
<p class="right">
Ayat ini akan dijajarkan ke kanan.
</p>
<p class="center">
Ayat ini akan ditengahkan.
</p>
Note: Untuk memanggil lebih dari satu class dalam satu element, penggunaannya seperti
berikut:
Perenggan diatas akan dipaparkan dengan menggunakan style yang mempunyai class
"center" dan "bold".
Anda juga boleh emnggukan kelas yang sama untuk elemen yang berbeza contonya,
kelas dibawah menerangkan agar tulisan disusun di tengah-tengah.
Dan didalam HTML kita menggunakan class ini didalam tag atau element <h1> dan <p>
<h1 class="center">
Heading ini akan ditengahkan.
</h1>
<p class="center">
Ayat ini akan ditengahkan.
</p>
Jangan mulakan class dengan nombor. Ini kerana Mozzila tidak dapat membaca
style anda.
Anda boleh menggunakan style untuk element HTML yang mempunyai attribute yang
tersendiri. Style dibawah akan digunakan jika elemen input mempunyai attribute "text".
Id Selector
Anda juga boleh menggunakan style bagi element HTML dengan menggunakan id. Id
dinyatakan dengan menggunakan simbol #. Contoh dibawah akan memaparkan tulisan
berwarna hijau jika mempunyai id "green".
Kome digunakan untuk menerangkan koding anda agar mudah difahami bila anda
mengubahsuai pada kemudian hari. Komen bagi css bermula dengan " /* " dan berakhir
dengan " */ " seperti ini.
Apabila web browser membaca Style Sheet, ia akan mengubah paparan dokumen
tersebut mengikut apa yang terkandung dalam Style Sheet. Terdapat 3 cara untuk
memasukan Style Sheet.
Style Sheet Luaran sesuai untuk digunakan jika anda ingin mengubah banyak dokumen
dengan hanya menggunakan satu Style Sheet. Setiap laman yang ingin menggunakan
Style Sheet Luaran perlulah dimasukkan tag <link> di antara tag <head> . Contohnya
seperti berikut :
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Browser akan membaca style daripada fail mystyle.css dan mengubah paparan dokumen
tersebut seperti yang terkandung didalam fail tersebut. Fail CSS tesebut mestilah
mengandungi hanya style sahaja dan jangan masukkan HTML tag di dalam fail tersebut.
Contoh apa yang terkandung dalam fail mystyle.css ialah :
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
Style Sheet dalaman biasanya digunakan apabila satu dokumen mempunyai style yang
unik dan tersendiri. Cara menggunakan Style Sheet dalaman adalah dengan
menggunakan tag <style> diantara tag <head> . Contohnya seperti berikut :
Style Inline
Style Inline hanya digunakan jika anda ingin mengubah satu elemen dalam HTML.
Inline Style akan mengantikan kesemua jenis Style yang telah anda nyatakan di dalam
Style Sheet dalaman atau Style Sheet Luaran jika ada. Cara menggunakan Inline Style
adalah menggunakankan attribute style="" di dalam elemen tersebut. Contoh dibawah
mengubah perenggan.
Jika satu Style dinyatakan didalam dua jenis Style tetapi mempunyai property yang
berbeza maka style akan diwariskan atau diturunkan. Contohnya seperti berikut, Jika
anda mempunyai Style Sheet Luaran yang mengubah paparan hagi <h3> :
h3
{
color: red;
text-align: left;
font-size: 8pt
}
h3
{
text-align: right;
font-size: 20pt
}
color: red;
text-align: right;
font-size: 20pt
Warna bagi <h3> akan mengikut Style Sheet Luaran kerana di dalam Style Sheet
Dalaman kita hanya mengubah cara sususan perkataan dan saiz bagi tulisan sahaja.
Contoh
Property yang digunakan untuk membuat warna bagi latar belakang ialah background-
color. Terdapat tiga cara untuk meletakan warna iaitu menggunakan kod warna, RGB
ataupun Hexadecimal.
<style type="text/css">
body
{
background-image:
url('pantai.jpg')
}
</style>
</head>
<body>
</body>
</html>
Contoh
Anda boleh membuat latar belakang tersebut diulang beberapa kali sehingga memenuhi
satu dokumen dengan menggunakan property, background-repeat: repeat seperti
berikut :
<style type="text/css">
body
{
background-image: url('pantai.jpg');
background-repeat: repeat
}
</style>
Jika anda ingin membuat latar belakang anda hanya diulang secara menegak, property
background-repeat: repeat-y, boleh digunakan. Contohnya seperti berikut :
<style type="text/css">
body
{
background-image: url('pantai.jpg');
background-repeat: repeat-y
}
</style>
<style type="text/css">
body
{
background-image: url('pantai.jpg');
background-repeat: repeat-x
}
</style>
scroll
fixed
rgb
hex
name
transparent
url(URL)
none
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
repeat
repeat-x
repeat-y
no-repeat
Mewarnakan tulisan
Anda boleh mewarnakan tulisan anda dengan menggunakan property color. Value bagi
property itu boleh dalam nilai RBG,HEX ataupun Kod Warna. Contohnya seperti
berikut :
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
Bagi membuat latar belakang untuk tulisan pula, penggunaan property background-
color boleh digunakan. Contohnya penuh seperti berikut:
<html>
<head>
<style type="text/css">
span.highlight
{
background-color:yellow
}
</style>
</head>
<body>
<p>
<span class="highlight">Latar belakang tulisan ini berwarna kuning</span> Latar
belakang tulisan ini tidak berwarna <span class="highlight">Diwarnakan kuning
juga.</span>
</p>
</body>
</html>
Jarak
Bagi menetapkan jarak diantara huruf, property letter-spacing boleh digunakan, value
bagi property ini dinyatakan dalam nilai px atau cm. Contohnya seperti berikut:
h1 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}
Bagi jarak diantara baris pula, penggunaan property line-height boleh digunakan. Value
bagi property ini dinyatakan dalam nilai px atau %. Contohnya seperti berikut:
Susunan Tulisan
Anda boleh menyusun kedudukan tulisan anda dengan menggunakan property text-
align. Terdapat 5 value bagi property text-align iaitu : left, center,right,inherit dan
juga justify. Contohnya seperti berikut:
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
Mengubahsuai Tulisan
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration: blink}
a {text-decoration: none}
Indent
Cara membuat indent adalah seperti berikut dengan menggunakan property text-indent.
Value boleh nyatakan dalam px atau cm.
p {text-indent: 1cm}
Mengubah Huruf
Property text-transform, mengubah tulisan anda untuk menjadi kesemua huruf besar,
huruf kecil atau pun huruf besar pada permulaan perkataan. Value bagi property ini
ialah, lowercase,uppercase dan capitalize. Contohnya seperti berikut :
Jenis Tulisan
Tentunya anda akan busan jika website anda hanya menggunakan jenis tulisan yang sama
sahaja, oleh itu, property font-family, boleh digunakan untuk menukar jenis tulisan
anda. Contohnya seperti berikut:
h3 {font-family: times}
p {font-family: courier}
p.sansserif {font-family: sans-serif}
Awas, tulisan yang dipilih mestilah merupakan tulisan asas dan terdapat dalam semua
komputer. Jika tidak, tulisan anda mungkin akan kelihatan lain dari yang sepatutnya.
Saiz Tulisan
Anda boleh menetapkan saiz tulisan anda dengan menggunakan property font-size.
Value bagi property ini boleh dinyatakan dalam unit px, %. Contohnya seperti berikut :
h1 {font-size: 14px}
h2 {font-size: 130%}
p {font-size: 100%}
Anda boleh membuat tulisan anda menjadi italic, dengan menggunakan property font-
style. Contohnya seperti dibawah :
h1 {font-style: italic}
h2 {font-style: normal}
p {font-style: oblique}
Variasi Tulisan
Anda boleh membuat tulisan anda menjadi kesemuanya huruf besar atau huruf kecil
dengan menggunakan property font-variant. Contohnya seperti di bawah:
Bold
Berikut adalah contoh lengkap untuk menyatakan kesemua jenis style bagi font dalam
satu ungkapan sahaja:
<html>
<head>
<style type="text/css">
p
{
font: italic small-caps 900 12px arial
}
</style>
</head>
<body>
<p>Ini adalah perenggan</p>
</body>
</html>
Saya akan mengajar anda menggunakan perisian yang lengkap dengan PHP, Apache dan
MySql, bagaimana pun anda boleh menginstall satu persatu perisian ini.
2. Klik perisian yang sudah didownload itu, ini adalah paparan antaramuka bagi wamp
server version 2 semasa artikel ini ditulis.
3. Klik Next.
5. Langkah ini adalah penting kerana di sinilah lokasi bagi server anda di install. Saya
membuat satu folder baru yang dinamakan Server dan disimpan di dalam cakera keras
saya yang mempunyai nama H:.
7. Selepas selesai anda menginstall perisian tersebut. Anda bolehlah mencuba untuk
memulakan perisian tersebut dengan mengklik icon wamp di desktop anda, Jika tidak
terdapat icon di situ, anda boleh memulakannya dengan
Start > All Program > Wamp Server > start Wamp Server.
8. Perhatikan icon disudut bawah sebelah kanan bawah anda, iaitu yang berhampiran
dengan jam anda, terdapat satu icon baru muncul, seperti berikut :
9 Tunggu sehingga icon tersebut berubah menjadi kesemuanya warna putih seperti
berikut:
10. Jika berwarna putih itu menandakan server anda telah sedia untuk digunakan, anda
boleh mencuba dengan membuatkan web browser anda dan menaip http://localhost. Jika
anda mendapat paparan berikut, bererti anda telah berjaya.
11. Sebarang fail yang berkaitan dengan website anda mestila di simpan dalam folder di
mana wamp server di install.
12. Cara untuk mencapai folder tersebut adalah dengan mengklik icon wamp pada bucu
kanan bawah dan pilih www directory
13. Sebarang pertanyaan atau kemusykilan boleh anda postkan di ruangan forum. Sekian.
PHP menyokong banyak jenis database seperti MySql, Oracle dan PosthreSQL.
PHP diproses dibahagian server dan dihantar kepada browser dalam format HTML.
PHP + MySQL
• PHP yang digabungkan dengan MySQL adalah multi platform iaitu anda boleh
membangunkan website anda dalam platform Unix atau Windows.
PHP disokong oleh semua jenis server seperti Apache dan IIS.
<?php
$txt="Hello World";
echo $txt;
?>
Hello World
Concatenation Operator
Concatenation Operator digunakan untuk mengabungkan 2 String Kita akan gunakan dot
(.) operator untuk membuat fungsi ini. Contohnya seperti dibawah :
<?php
$txt1="Hello World";
$txt2="1234";
echo $txt1 . " " . $txt2;
?>
Jika anda perhatikan kod diatas, kita menggunakan dot(.) sebanyak 2 kali. Ini kerana kita
memasukan String yang ketiga iaitu space di antara Hello World dan 1234.
Penggunaan strlen()
Fungsi strlen() adalah untuk mencari jumlah perkataan yang terdapat dalam String.
Contohnya seperti dibawah :
<?php
echo strlen("Hello world!");
?>
12
Penggunaan strpos()
Fungsi strpos() adalah mencari perkataan atau huruf yang terdapat dalam String anda.
Kita data ditemui, fungsi akan mengembalikan nilai kedudukan huruf pertama. Jika tidak
ditemui, fungsi akan mengembalikan nilai FALSE.
<?php
echo strpos("Hello world!","world");
?>
Mungkin anda keliru kenapa angka 6 ditunjukkan sedangkan huruf 'w' dalah huruf yang
ke 7 dalam String tersebut. Ini kerana, pengiraan posisi atau kedudukan bagi String
dimulakan dengan 0 bukannya 1.
PHP Syntax
Kod dalam PHP mesti bermula dengan <?php dan diakhiri dengan ?>. Kod ini boleh
diletakkan di mana-mana sahaja dalam dokumen anda. Disesetengah server, ringkasan
bagi PHP dibenarkan iaitu tag permulaan bagi PHP hanyala <?. Walau bagaimana pun,
saya sarankan anda menggunakan <?php. Fail PHP kebiasaanya mempunyai tag-tag
HTML seperti fail HTML biasa dan mempunyai kod PHP. Di bawah adalah contoh
mudah menggunakan PHP.
<html>
<body>
<?php
echo "Hello World";
?>
</body>
</html>
Setiap baris dalam kod PHP mestilah diakhiri dengan semicolon. Semicolon membeza
satu set arahan dengan set arahan yang lain. Terdapat dua output dalam PHP iaitu echo
dan print. Contoh diatas saya menggunakan echo untuk memaparkan perkataan "Hello
World".
Nota : Anda mestilah simpan save PHP dengan format .php, jika tidak, kod PHP tidak
akan dibaca.
<html>
<body>
<?php
/*
Komen
Pelbagai
Baris
*/
?>
</body>
</html>
$nama_pembolehubah = data;
Bagi programmer baru dalam PHP, mereka sentiasa terlupa untuk meletakkan simbol $
dihadapan pembolehubah.
Seterusnya, contoh dibawah menunjukan cara untuk membuat pembolehubah untuk data
berjenis perkataan atau rentetan dan guna nombor.
<?php
$txt = "Hello World!";
$number = 25;
?>
Mungkin ada keliru kena ada penggunaan " " pada perkataan Hello World, tetapi tidak
pada 25. Ini kerana dalam PHP, perkataan atau rentetan mestilah diletakkan diantara "".
Penggunaan huruf besar dan huruf kecil adalah berbeza contohnya $nama dengan $Nama
adalah 2 pembolehubah yang berbeza.
PHP Operators
Tutorial ini menerangkan operator yang terdapat dalam PHP
Arithmetic Operators
Assignment Operators
Comparison Operators
Logical Operators
! not x=6
y=3
Array ialah satu variable atau pembolehubah yang boleh menyimpan banyak data dengan
menggunakan satu nama sahaja.
Array bernombor
Setiap elemen dalam array ini disimpan dengan menggunakan ID berjenis nombor bulat.
Terdapat pelbagai cara untuk anda membuat array ini.
Contoh 1
$nama = array("Abu","Along","Yunus");
Contoh 2
$nama[0] = "Abu";
$nama[1] = "Along";
$nama[2] = "Yunus";
ID tersebut digunakan untuk memaparkan elemen dalam array tersebut. Dibawah adalah
contoh bagaimana cara untuk memaparkan array.
<?php
$nama[0] = "Abu";
$nama[1] = "Along";
$nama[2] = "Yunus";
Array Gabungan
Array gabungan menggunakan ID yang tersendiri. Array gabungan biasanya digunakan
untuk menyimpan sesuatu yang lebih spesifik. Berikut adalah cara untuk mengunakan
array gabungan.
Contoh 1
$umur = array("Abu"=>32, "Along"=>30, "Yunus"=>34);
Contoh 2
$umur['Abu'] = "32";
$ages['Along'] = "30";
$ages['Yunus'] = "34";
<?php
$umur['Abu'] = "32";
$umur['Along'] = "30";
$umur['Yunus'] = "34";
Multidimensi array
Multidimensi array adalah gabungan 2 array. Setiap elemen dalam array yang pertama
adalah berjenis array juga.
Contoh
$keluarga = array
(
"Abu"=>array
(
"Siti",
"Minah",
"Halim"
),
"Along"=>array
(
"Joyah"
),
"Yunus"=>array
(
"Maria",
"Nor",
"Farah"
)
);
Array
(
[Abu] => Array
(
[0] => Siti
[1] => Minah
[2] => Halim
)
[Along] => Array
(
[0] => Joyah
)
[Yunus] => Array
(
[0] => Maria
[1] => Nor
[2] => Farah
)
)
The if, elseif and else statements in PHP are used to perform different actions based on
different conditions.
Conditional Statements
Pada kebiasaannya apabila anda menulis kod, anda inginkan kod anda diproses
bergantungan kepada kriteria-kretirea yang tertentu, contohnya jika penggunaan berasal
dari Malaysia, anda ingin memaparkan bendara Malaysia, manakala jika pengguna
berasal dari Singapura, anda ingin memaparkan bendera Singapura
if...else statement untuk kod yang mempunyai 2 kriteria sahaja sama ada benar atau
paslu.
If...Else Statement
Jika anda inginkan kod anda diproses jika kriteria yang dinyakan adalah benar dan kod
lain jika kriteria yang dinyatakan adalah palsu, gunakan IF...Else Statement.
Syntax
if (kriteria)
kod akan diproses jika kriteria adalah benar;
else
kod akan diproses jika kriteria adalah palsu;
Contoh dibawah akan memaparkan Selamat Bercuti jika hari ini adalah Jumaat manakala
Selamat bekerja jika hari ini bukanla hari Jumaat
<html>
<body>
<?php
$d=date("D");
if ($d=="Fri")
echo "Selamat Bercuti!";
else
echo "Selamat Bekerja!";
?>
</body>
</html>
Jika kod anda melebih dari satu baris, maka curly braces patut digunakan, contohnya
seperti berikut :
<html>
<body>
<?php
$d=date("D");
if ($d=="Fri")
{
echo "Hello!<br />";
echo "Selamat Bercuti!";
echo "Jumpa Hari Isnin Nanti!";
}
?>
</body>
</html>
Jika anda ingin kod anda diproses bergantung kepada beberapa kriteria, maka elseif
Statement perlula digunakan.
Syntax
if (kriteria 1)
kod akan diproses jika kriteria 1 adalah benar;
elseif(kriteria 2)
else
kod akan diproses jika semua kriteria adalah palsu;
Contoh:
Contoh dibawah akan memaparkan "Selamat Bercuti" jika hari yang dinyatakan adalah
hari Jumaat. "Hari Ahad", jika hari dinyatakan Ahad, dan "Selamat Bekerja" jika bukan
hari ahad dan Jumaat.
<html>
<body>
<?php
$d=date("D");
if ($d=="Fri")
echo "Selamat Bercuti";
elseif ($d=="Sun")
echo "Hari Ahad";
else
echo "Selamat Bekerja";
?>
</body>
</html>
Syntax
switch (pembolehubah)
{
case kriteria1:
kod untuk diproses jika pembolehubah = kriteria1;
break;
case kritiria2:
kod untuk diproses jika pembolehubah = kriteria1;
break;
default:
kod untuk diproses jika semua kriteria
tidak sama dengan pembolehubah
kriteria 1 dan 2
}
Penggunaan break; adalah sangat penting diakhir setiap case. Ini mengelakkan kod anda
dibaca kesemuanya. Oleh itu, anda harusla meletakkan fungsi break; disetiap
penghujung kriteria anda.
Contoh:
Contoh dibawah akan memaparkan jika pemboleh ubah yang diberikan adalah sama
dengan kriteria yang dinyatakan.
<html>
<body>
<?php
switch ($x)
{
case 1:
echo "Nombor 1";
break;
case 2:
echo "Nombor 2";
break;
case 3:
echo "Nombor 3";
break;
default:
echo "Nombor tidak tersenarai diantara 1 dan 3";
}
?>
</body>
</html>
Gelung adalah cara syntax dalam PHP untuk melakukan pengulangan sesuatu kod secara
berterusan sehingga beberapa koding dimasukkan untuk menghadkan sesuatu
pengulangan itu.
Syntax while
Gelung while akan memproses kod sehingga semua syarat-syarat dipenuhi.
while (syarat){
kod untuk diproses;
}
Contoh:
<html>
<body>
<?php
$i = 1; // Nilai awal bagi i disetkan sebagai 1
while($i <= 5) // Syarat untuk gelung diulang adalah apabila i
lebih kecil atau sama dengan 5
{
echo "Nombor sekarang ialah " . $i . "<br />"; // Output
$i++; // Nilai bagi i ditambah dengan satu
}
?>
</body>
</html>
Output ialah:
Syntax do...while
do
{
kod untuk diproses;
}
while (syarat);
Contoh:
<html>
<body>
<?php
$i = 0; // Setkan nilai awalan bagi i sebagai 0
do
{
$i++; // Nilai bagi i ditambah dengan 1
echo "Nombor ialah " . $i . "<br />"; // Output
}
while ($i < 5); // Syarat
?>
</body>
</html>
Output:
Nombor ialah 1
Nombor ialah 2
Nombor ialah 3
Nombor ialah 4
Nombor ialah 5
Syntax for
Gelung for paling banyak digunakan dalam PHP kerana ianya lebih mudah dan senang.
<html>
<body>
<?php
for ($i=1; $i<=7; $i++)
{
echo "Hello World!<br />";
}
?>
</body>
</html>
Syntax foreach
foreach (array)
{
kod untuk diproses;
}
Contoh:
<html>
<body>
<?php
$arr = array("satu", "dua", "tiga");
</body>
</html>
Output
satu
dua
tiga
<html>
<body><form action="nama.php" method="post">
Name: <input type="text" name="nama" />
Umur: <input type="text" name="umur" />
Borang diatas mempunyai 2 input dan 1 butang hantar. Apabila seseorang pengguna
mengisi borang diatas dan menekan butang hantar, data dalam borang tersebut akan
dihantar kepada fail 'nama.php'.
<html>
<body>
</body>
</html>
Pengesahan Borang
Setiap input dalam borang mestilah disahkan jika boleh. Ini mengelakkan data yang
dihantar adalah salah. Pengesahan borang boleh dilakukan di dua bahagian, pertama pada
komputer pelayar dan kedua pada server itu sendiri. Pengesahan pada komputer pelayar
adalah lebih pantas berbanding pada server.
Cara yang terbaik untuk membuat pengesahan adalah dengan menggunakan borang itu
sendiri berbanding data dihantar kepada laman yang lain.
Dalam tutorial kali ini, kita akan belajar cara-cara untuk menggunakan fungsi fopen()
untuk membuka fail.
Membuka fail
Contohnya:
<html>
<body>
<?php
$file=fopen("selamatdatang.txt","r");
?>
</body>
</html>
Format Keterangan
r Dibaca sahaja. Bermula dari awal
r+ Dibaca dan ditulis. Bermula dari awal
w Ditulis sahaja. Jika fail telah wujud, kesemua isi kandungan fail akan
dipadam. Jika fail tidak wujud, fail baru akan dicipta.
w+ Dibaca dan ditulis. Jika
a Menambah, fail akan dibuka dan ditulis pada akhir isi kandungan fail
a+ Dibaca dan ditulis, isi kandungan dikekalkan
x Ditulis sahaja, mencipta fail baru. Jika fail telah wujud ralat akan
dikembalikan
x+ Dibaca dan ditulis, jika fail tidak wujud, fail baru akan dicipta. Jika
wujud, ralat akan dikembalikan
Nota: Jika fungsi fopen() tidak dapat membuka fail, ralat akan dikembalikan dengan nilai
0.
<html>
<body>
<?php
$file=fopen("selamatdatang.txt","r") or exit("Fail tidak dapat dibuka!");
?>
</body>
</html>
Menutup Fail
Fungsi fclose() digunakan untuk menutup fail yang dibuka:
<?php
$file = fopen("test.txt","r");
fclose($file);
?>
Fungsi ini digunakan jika anda mempunyai data yang berulang yang tidak diketahui
penghujungnya.
Contoh:
<?php
Contoh:
<?php
Server Side
Anda boleh memasukkan isi kandungan sesuatu fail dalam PHP sebelum pelayan web
mambaca koding tersebut dengan menggunakan fungsi include() dan require(). Kedua-
dua fungsi ini mempunyai tugas yang sama tetapi berlainan cara untuk mengatasi ralat.
Fungsi include() akan memaparkan ralat dan meneruskan koding anda sementara
require() akan memaparkan ralat dan menghentikan sebarang koding selepas ralat
tersebut.
Kebiasaanya kedua-dua fungsi ini digunakan untuk mencipta header,footer atau isi
kandungan yang berulang untuk bilangan laman yang banyak.
Ini akan dapat menjimatkan masa, contohnya jika anda mempunyai 10 laman, anda perlu
mengubah setiap satu laman tersebut jika terdapat perubahan pada header anda. Dengan
menggunakan fungsi ini, anda hanya perlu mengubah satu fail sahaja, dan kesemua laman
tersebut akan berubah.
Fungsi include()
Fungsi include akan mengambil kesemua isi kandungan dalam fail yang dinyatakan.
Contoh:
<html>
<body>
</body>
</html>
Contoh 2:
Jika anda mempunyai menu yang digunakan untuk kesemua laman web anda, anda boleh
menggunakan fungsi ini.
Ini koding yang perlu anda letak dalam setiap laman yang memerlukan menu diatas.
<html><body>
<?php include("menu.php"); ?>
<h1>Selamat datang ke laman web saya</h1>
<p>Sedikit isi kandungan</p>
</body>
</html>
Jika anda melihat koding pada setiap laman web anda,koding ini akan dihasilkan.
<html>
<body>
<a href="index.php">Home</a>
<a href="profil.php">Profil</a>
<a href="hubungi.php">Hubungi</a>
</body>
</html>
Fungsi require()
Fungsi require() adalah sama dengan include(), cuba perbezaannya pada cara ia
mengatasi ralat. Dibawah saya masukkan contoh perbezaan antara include() dan require()
<html>
<body>
<?php
include("tiadafail.php");
echo "Selamat Datang!";
?>
</body>
</html>
Selamat datang!
Jika anda perhatikan walaupun fail "tiadafail.php" tidak wujud, koding anda masih lagi
diproses. Sekarang kita akan melihat contoh require()
<html>
<body>
<?php
require("tiadafail.php");
echo "Selamat datang!";
?>
</body>
</html>
Jika anda perhatikan, koding anda untuk memaparkan "Selamat datang" tidak diproses.
Ini kerana dalam fungsi require(); jika fail tidak ditemui, fungsi akan menghentikan
pemprosesan koding selepas fungsi tersebut.
Adalah disarankan agar anda menggunakan fungsi require() untuk memasukkan fail-fail
yang penting, contohnya seperti header, menu.
Pembolehubah $_GET
Pembolehubah $_GET adalah array bagi pemboleh ubah nama dan nilai yang di hantar
melalui kaedah HTTP GET.
Pemboleh ubah $_GET mengumpul semua data daripada borang (form) yang
menggunakan kaedah 'method="get"'. Maklumat yang dihantar oleh kaedah GET boleh
dilihat oleh pelayar. Ianya akan dipaparkan pada ruangan 'address bar' pelayar dan
mempunyai had panjang (100 huruf).
Contoh:
Apabila pelayar menekan butang Hantar, URL pada 'address bar' akan kelihatan seperti
ini
http://www.kripkornstudios.com/nama.php?nama=Halim&age=24
Fail "nama.php" akan mengumpul data daripada alamat tersebut dengan menggunakan
pemboleh ubah $_GET.
Pembolehubah $_REQUEST
PHP $_REQUEST merupakan pemboleh ubah yang boleh mengumpul data dari
$_GET, $_POST dan juga $_COOKIE.
Contoh:
Pembolehubah $_POST
Pembolehubah $_POST adalah tatasusunan yang mengandungi nama dan nilai yang
dihantar dengan menggunakan "method POST".
Pembolehubah $_POST akan mengumpul data dan nilai yang dihantar oleh "method
HTTP POST".
Contoh:
Apabila pelayar menekan butang Hantar, URL anda akan kelihatan seperti berikut:
http://www.kripkornstudios.com/nama.php
Kenapa $_POST?
Data yang menggunakan kaedah POST tidak akan dipaparkan pada URL.
Kuasa sebenar dalam PHP adalah fungsi atau function. Dalam PHP terdapat lebih 700
fungsi terbina didalamnya yang boleh anda gunakan.
Fungsi
Dalam tutorial kali ini, anda belajar cara-cara untuk membuat fungsi anda sendiri.
Contoh:
<html>
<body>
<?php
function Namaportal()
{
echo "KripkornStudios";
}
Namaportal();
?>
</body>
</html>
KripkornStudios
Contoh 2:
<html>
<body>
<?php
function NamaPortal()
{
echo "KripkornStudios";
}
</body>
</html>
Hello semua!
Portal ini bernama KripkornStudios.
Penggunaan Parameter.
Fungsi diatas adalah fungsi yang ringkas dan mudah. Ia hanya memaparkan satu rentetan
atau string yang statik.
Contoh
<html>
<body>
<?php
function TulisNama($nama)
{
echo $fname . "<br>";
}
</body>
</html>
<html>
<body>
<?php
function Nama($fname,$umur)
{
echo $fname . " berumur" . $umur . " tahun<br />";
}
</body>
</html>
<html>
<body>
<?php
function add($x,$y)
{
$total = $x + $y;
return $total;
}
</body>
</html>
1 + 16 = 17
Dengan Menggunakan PHP, anda boleh mengupload fail kedalam pelayan web anda
memlalui pelayar web.
<html>
<body>
</body>
</html>
<?php
if ($_FILES["file"]["error"] > 0)
{
echo "Ralat: " . $_FILES["file"]["error"] . "<br />";
}
else
{
echo "Upload: " . $_FILES["file"]["name"] . "<br />";
echo "Jenis: " . $_FILES["file"]["type"] . "<br />";
echo "Saiz: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
echo "Simpan: " . $_FILES["file"]["tmp_name"];
}
?>
Ini cara yang paling ringkas untuk mengupload fail. Untuk keselamatan, kita perlu
meletakan had bagi fail yang diupload
Dalam koding ini, kita hanya membenarkan pelayar mengupload fail berjenis .gif atau
.jpeg sahaja. Dan saiznya mestila kurang dari 30kb
<?php
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/pjpeg"))
&& ($_FILES["file"]["size"] < 30000))
{
if ($_FILES["file"]["error"] > 0)
{
echo "Ralat: " . $_FILES["file"]["error"] . "<br />";
}
else
{
echo "Upload: " . $_FILES["file"]["name"] . "<br />";
echo "Jenis: " . $_FILES["file"]["type"] . "<br />";
echo "Saiz: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
echo "Simpan: " . $_FILES["file"]["tmp_name"];
}
}
else
{
echo "Fail tidak sah";
}?>
Fail yang disimpan dalam direktori tersebut akan hilang selepas koding selesai diproses,
oleh itu kita mestila menyimpan fail yang diupload ke lokasi lain. Berikut adalah koding
untuk memindahkan fail tersebut.
<?php
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/pjpeg"))
&& ($_FILES["file"]["size"] < 30000))
{
if ($_FILES["file"]["error"] > 0)
{
echo "Ralat: " . $_FILES["file"]["error"] . "<br />";
}
else
{
echo "Upload: " . $_FILES["file"]["name"] . "<br />";
echo "Jenis: " . $_FILES["file"]["type"] . "<br />";
if (file_exists("upload/" . $_FILES["file"]["name"]))
{
echo $_FILES["file"]["name"] . " already exists. ";
}
else
{
move_uploaded_file($_FILES["file"]["tmp_name"],
"upload/" . $_FILES["file"]["name"]);
echo "Simpan dalam: " . "upload/" . $_FILES["file"]["name"];
}
}
}
else
{
echo "Fail tidak sah";
}
?>
Fungsi Date()
Fungsi PHP date() digunakan untuk memanipulasi format tarikh dan masa.
Tatatanda
date(format,timestamp)
Parameter Keterangan
format Wajid, menentukan cara paparan masa
timestamp Pilihan. Jika tidak diletakan, komputer akan memilih waktu pada
koding itu dibaca.
Timestamp adalah bilangan saat semenjak 1 January 1970 pada 00:00:00 GMT. Ini juga
dikenali sebagai Unix Temstamp.
Simbol seperti "/", ".", atau "-" boleh digunakan diantara huruf tersebut untuk
memudahkan tarikh dibaca.
In our next example we will use the mktime() function to create a timestamp for
tomorrow.
Fungsi mktime akan mengembalikan nilai Unix Timestamp berdasarkan tarikh yang
ditetepkan.
Tatatanda
mktime(jam,minit,saat,bulan,hari,tahun,timestamp)
Output
Pengenalan MySQL
PHP MySql - Book
• PHP MySQL
o Membuat Sambungan
o Mencipta Pangkalan Data
o Memasukan Data Dalam MySQL
o Mencapai Data Dari Pangkalan Data
o Penggunaan WHERE
o Penggunaan Order By
o Memadam Data dari Pangkalan
o Pengunaan Mysql Update
Data dalam MySql disimpan didalam objek pangkalan data yang dinamakan
jadual,(tables)
Jadual adalah sekumpulan data yang berkaitan dan mempunyai lajur dan baris. (row,
column)
Pangkalan data sangat berguna untuk menyimpan maklumat dalam bentuk kategori.
Contohnya sebuah syarikat ingin menyimpan maklumat mengenai pekerja, produk dan
pelanggan.
Jadual diatas mempunyai 3 baris(setiap satu untuk pelajar) dan 4 lajur. Laju adalah atribut
atau keterangan tentang pelajar.
Query
Query adalah soalan atau permintaan.
Dengan Query kita boleh mencapai rekod dalam pangkalan data untuk data-data tertentu.
Query diatas akan mengembalikan rekod Nama Ayah bagi semua pelajar. Rekod yang
dikembalikan adalah seperti berikut:
Razak
Ismail
Halim
• Membuat Sambungan
• Mencipta Pangkalan Data
• Memasukan Data Dalam MySQL
• Mencapai Data Dari Pangkalan Data
• Penggunaan WHERE
• Penggunaan Order By
• Memadam Data dari Pangkalan
• Pengunaan Mysql Update
Dalam PHP, ini boleh dilakukan dengan mudah menggunakan fungsi mysql_connect().
Tatatanda
mysql_connect(servername,username,password);
Parameter Keterangan
servername Pilihan, menentukan sambungan kepada pelayan web. Nilai asal adlaah
"localhost:3306"
username Pilihan, menentukan nama pengguna yang untuk log masuk kedalam
pelayan web.
password Pilihan, menentukan kata kunci bagi nama pengguna.
Contoh:
Dalam contoh dibawah, kita akan menggunakan pemboleh ubah ($con) untuk
menyimpan sambugan dan "die" untuk menentukan sama ada sambungan berjaya atau
tidak.
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Sambungan gagal: ' . mysql_error());
}
// kod anda
?>
Memusnahkan sambungan
Setiap sambungan kepada pangkalan data mestila dimusnahkan. Untuk memusnahkan
sambungan ini, fungsi mysql_close() akan digunakan.
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Sambugan gagal: ' . mysql_error());
}
// kod anda
mysql_close($con);
?>
Tatatanda
Untuk memboleh PHP memproses kod diatas, kita mestilah menggunakan fungsi
mysql_query(). Fungsi ini digunakan untuk menghantar query kepada sambungan
MySQL.
Contoh:
Contoh dibawah menunjukan cara untuk mencipta atau membina pangkalan data yang
dinamakan "db_saya";
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Sambungan Gagal: ' . mysql_error());
}
if (mysql_query("CREATE DATABASE db_saya",$con))
{
echo "Pangkalan data berjaya dicipta";
}
else
{
echo "Terdapat ralat dalam process penciptaan
pangkalan data: " . mysql_error();
}
mysql_close($con);
?>
Mencipta Jadual
Tatatanda CREATE TABLE digunakan untuk mencipta jadual didalam MySQL.
Tatatanda:
Contoh:
Kita akan mencipta satu jadual yang dinamakan pelajar dan mempunyai 3 lajur. Lajur ini
akan dinamakan Nama, NamaAyah, Umur.
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Sambungan gagal: ' . mysql_error());
}
// Mencipta pangkalan data
if (mysql_query("CREATE DATABASE db_saya",$con))
{
echo "Database dicipta";
}
else
{
echo "Terdapat ralat dalam process penciptaan: " .
mysql_error();
}
// Mencipta jadual
mysql_select_db("db_saya", $con);
$sql = "CREATE TABLE Pelajar
(
Nama varchar(15),
NamaAyah varchar(15),
Umur int
)";
// Melaksanakan query
mysql_query($sql,$con);
mysql_close($con);
?>
Nota: Pangkalan data mestila dipilih terlebih dahulu sebelum jadual dicipta. Pangkalan
data boleh dipilih menggunakan fungsi mysql_select_db().
Nota: Apabila anda mencipta lajur yang menggunakan jenis varchar, anda mestila
menetapkan hak maksimum bagi lajur tersebut. Contohnya : varchar(15).
Primary key digunakan untuk mengenal pasti rekod yang terdapat didalam jadual. Setiap
primary key mestila unik dan tidak boleh dibiarkan kosong atau null..
Contoh dibawah, penggunaan lajur yang baru iaitu IDPelajar digunakan sebagai primary
key. dan nilai data dalam lajur ini akan bertambah secara otomatik apabila rekod
ditambah. Untuk memastikan lajur ini tidak dibiarkan kosong, kita akan menggunakan
tatatanda NOT NULL untuk memastikan ruangan ini diisi.
Contoh:
Contoh yang kedua untuk memasukan data kedalam lajur yang spesifik:
Sekarang kita akan cuba memasukan data menggunakan PHP. Dalam pembelajaran
terdahulu kita telah mencipta jadual yang bernama "Pelajar" yang mempunyai lajur
Nama, NamaAyah, dan Umur. Kita akan menggunakan contoh yang sama untuk
memasukkan 2 data baru kedalam jadual tersebut.
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Sambugan gagal ' . mysql_error());
}
mysql_select_db("db_saya", $con);
);
);
mysql_close($con);
?>
<html>
<body>
</form>
</body>
</html>
Apabila pengguna menekan butang hantar (submit) didalam borang HTML, data akan
dihantar kepada "masuk.php".
Fail "masuk.php" akan menerima data menggunakan pembolehubah global PHP $_POST
dan membuat sambungan kepada pangkalan data.
Kemudian fungsi mysql_query() akan memproses data dan memasukan data kedalam
pangkalan data .
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Sambungan gagal: ' . mysql_error());
}
mysql_select_db("db_saya", $con);
VALUES ('$_POST[Nama]','$_POST[NamaAyah]','$_POST[Umur]')"
if (!mysql_query($sql,$con))
{
die('Ralat: ' . mysql_error());
}
echo "1 Data ditambah";
mysql_close($con)
?>
Tatatanda
SELECT lajur
FROM jadual
Seperti biasa kita memerlukan fungsi mysql_query() untuk memproses pernyataan kita
dan menghantar kod kepada sambungan MySQL.
Contoh:
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Sambungan gagal ' . mysql_error());
}
mysql_select_db("db_saya", $con);
while($row = mysql_fetch_array($result))
{
echo $row['Nama'] . " " . $row['NamaAyah'];
echo "<br />";
}
mysql_close($con);
?>
Fungsi mysql_fetch_array() adalah mengembalikan setiap data dalam baris kepada PHP.
Untuk memaparkan data tersebut, kita akan menggunakan pembolehubah PHP $row iaitu
$row['Nama'] dan $row['NamaAyah'].
Ali Razak
Yunus Ismail
Abu Halim
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Sambungan gagal: ' . mysql_error());
}
mysql_select_db("db_saya", $con);
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['Nama'] . "</td>";
echo "<td>" . $row['NamaAyah'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>
Penggunaan WHERE
Perkataan "WHERE" digunakan untuk mencapai data yang spesifik daripada pangkalan
data.
Tatatanda
SELECT nama_lajur
FROM nama_jadual
Contoh:
Contoh dibawah, kita akan mencapai semua data dalam pangkalan data Pelajar yang
mempunyai nama "Ali".
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Sambungan gagal: ' . mysql_error());
}
mysql_select_db("db_saya", $con);
while($row = mysql_fetch_array($result))
{
echo $row['Nama'] . " " . $row['Nama_Ayah'];
echo "<br />";
}
?>
Output
Ali Razak
Penggunaan ORDER BY
Penggunaan Order By adalah untuk meyusun data yang dicapai dalam bentuk menurun
atau menaik.
Jika anda ingin membuat susunan secara menurun adalan boleh menambah perkataan
DESC.
Tatatanda
SELECT * nama_lajur
FROM nama_jadual
Contoh dibawah akan memaparkan data dalam jadual Pelajar berdasarkan lajur "Umur".
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Sambungan gagal: ' . mysql_error());
}
mysql_select_db("db_saya", $con);
while($row = mysql_fetch_array($result))
{
echo $row['Nama'];
echo " " . $row['Nama_Ayah'];
echo " " . $row['Umur'];
echo "<br />";
}
mysql_close($con);
?>
Output:
Ali Razak 33
Yunus Ismail 35
Abu Halim 46
Tatatanda
SELECT nama_lajur
FROM nama_jadual
Memadam data
Penggunakan pernyataan DELETE boleh digunakan untuk memadam data dalam
pangkalan data.
Tatatanda
Nota : Penggunaan WHERE dalam tatatanda DELETE akan membuang semua rekod
yang mempunyai kriteria yang dinyatakan.
Contoh:
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Sambungan gagal: ' . mysql_error());
}
mysql_select_db("db_saya", $con);
mysql_close($con);
?>
Tatatanda
UPDATE nama_jadual
SET nama_lajur=nilai,
Nota : Jika anda menggunakan pernyataan WHERE, semua data yang berkaitan akan
dikemaskini.
Contoh:
Jika akan mengubah "Nama_Ayah" bagi data pelajar yang bernama "Ali" dari "Razak"
kepada "Abdul Razak".
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Sambungan gagal: ' . mysql_error());
}
mysql_select_db("db_saya", $con);
mysql_close($con);
?>
Pengenalan PhpMyAdmin
Phpmyadmin - Book
• PhpMyAdmin
o Mengimport Data
o Mengeksport Data
PhpMyAdmin digunakan untuk mencapai pangkalan data secara GUI melalui pelayar
anda. Phpmyadmin boleh digunakan untuk mengubah, menambah, membuang dan
membuat salinan pangkalan data anda.
Localhost
http://localhost/phpmyadmin
Live Site
Anda boleh mencapai phpmyadmin dengan memasukkan ruangan CPanel dan klik icon
Phpmyadmin
Pada sebelah kanan adalah senari pangkalan data anda, manakala sebelah kiri ada
maklumat tentang pangkalan data anda.
Jika anda mencapai phpmyadmin daripada localhost, anda mungkin mendapati pada
bahagian Create New Database adalah berlainan dengan Live Site. Ini kerana pada Live
Site, pengguna tidak dibenarkan mencipta pangkalan data yang baru menggunakan
phpmyadmin, sebaliknya pengguna perlula menggunakan MySql Management.
Untuk mengimport data, anda perlula mempunyai pangkalan data terlebih dahulu.
Untuk Localhost, anda hanya perlu mencapai ruangan utama phpmyadmin dan
mencipta pangkalan data dengan menaip nama pangkalan data pada ruangan Create New
Database.
Untuk Live Site, anda boleh mencipta pangkalan data baru dengan mencapai ruangan
MySql Management pada ruangan utama CPanel anda.
Anda guna boleh mengunakan pangkalan data yang sedia ada, walau bagaimanapun harus
diingatkan, data atau jadual yang sedia ada akan ditindah atau Overwrite.
Untuk mengimport data, anda hanya perlu memilih nama pangkalan data pada bahagian
kiri ruangan Phpmyadmin anda dan memilih tab Import pada bahagian kiri atas.
Langkah-langkah :
2. Klik Go
1. Jika berlaku kerosakan anda mempunyai salinan untuk memulihkan website anda.
3. Untuk memindah laman web anda dari localhost ke live site atau sebaliknya.
Untuk mengeksport pangkalan data, anda perlula terlebih dahulu memilih pangkalan data
anda pada bahagian kiri dengan mengklik pangkalan data tersebut. Kemudian tekan tab
Export
Klik Select All pada bahagian Export, dan pastikan pada bahagian Structure, ruangan
Add DROP TABLE / VIEW / PROCEDURE / FUNCTION dipilih seperti berikut:
Pada bahagian bawah, iaitu ruangan Save as File, pastikan kotak tersebut diklik dan pilih
"gzipped" sebagai format dan klik Go.
Pengenalan SQL
SQL - Book
• SQL
o Apa itu SQL
o Tatatanda SQL
SQL adalah bahasa piawaian yang digunakan untuk mencapai dan mengubah pangkalan
data atau database.
• Untuk membina laman web yang mempunyai pangkalan data, anda memerlukan
RDBMS seperti (Ms Access, SQL Server, MySQL)
• Bahasa pengaturcaraan seperti PHP dan ASP
• SQL
• HTML/CSS
RDBMS
Sebuah pangkalan data biasanya mempunyai satu atau lebih jadual. Setiap jadual
mempunyai nama yang unik, contohnya "Pelajar", "Guru". Baris dalam jadual
menyimpan data.
Penyata SQL
Untuk menggunakan SQL, kita perlu mengetahu penyata yang terdapat dalam SQL.
Contoh di bawah menunjukkan cara untuk memanggil kesemua data dalam jadual.
Nota : SQL adalah aturcara yang tidak mementingkan perbezaan huruf besar atau kecil.
SQL boleh dibahagikan kepada 2 bahagian iaitu DML(Data Manipulation Language) dan
satu lagi DDL(Data Defination Language).
Pengenalan Joomla
Ciri-ciri unik Joomla! termasuklah laman cache untuk meningkatkan prestasi, RSS,
laman boleh cetak, berita terkini, blog, undian, carian laman, dan bahasa-bahasa.
Nama "Joomla" diambil daripada perkataan Swahili iaitu jumla yang bermaksud "mari
bersama-sama" atau "secara keseluruhannya". Ia dipilih bagi menunjukkan komitmen
pasukan pembangunan dan komuniti projek berkenaan. Keluaran pertama Joomla!
(Joomla! 1.0.0) diumumkan pada 16 September 2005. Ini adalah keluaran penjenamaan
semula Mambo 4.5.2.3 digabungkan dengan pembaikan keselamatan serta pepijat
komputer. Di peta laman projek ini, pasukan pembangunan asas menyatakan bahawa
Joomla! 1.5 adalah kod yang ditulis semula dengan dibinan menggunakan bahasa
pengaturcaraan PHP 5.
SEJARAH
Joomla! mula terjadi apabila terjadinya pembangunan perisian daripada versi Mambo
diantara Miro Corporation dari Australia, pemegang hak cipta Mambo pada masa itu, dan
kesemua ahli pemaju pusat. Kedua-dua kumpulan berpisah pada 17 Ogos 2005. Miro
Corporation menubuhkan sebuah yayasan dengan tujuan untuk menaja projek itu dan
melindunginya daripada tindakan undang-undang. Pasukan pembangunan mendakwa
bahawa banyak struktur yayasan berkenaan melanggari perjanjian yang dibuat oleh
Jawatankuasa Mambo yang dilantik. Mereke juga mendakwa kurangnya perbincangan
dengan pemegang saham utama dan melanggari nilai-nilai asas Sumber Terbuka.
"MasterChief," menulis sepucuk surat terbuka kepada komuniti, yang mucul di papan
pemberitahuan di forum awam di mamboserver.com.
Peristiwa ini telah mengakibatkan komuniti sumber terbuka berfikir semula tentang apa
tafsiran "Sumber Terbuka". Laman-laman forum di kebanyakan projek sumber terbuka
dibanjiri dengan mesej-mesej menyokong dan menentang tindakan kedua-dua pihak
berkenaan. Khabar-khabar angin dan tuduhan tentang kesilapan yang dilakukan oleh
Miro dan Yayasan Mambo mula menjadi hangat.
Dalam masa dua minggu selepas pengumuman Eddie, pasukan-pasukan mula disusun
semula dan komuniti ini mula tumbuh. Pada 1 September 2005 nama baru diumumkan
dengan sambutan berbeza oleh 3000+ penyokong setia Pasukan Pembangunan.
1. Muat turun fail joomla yang lengkap dan extract pakej tersebut.
2. Pastikan server Wamp anda berfungsi dengan baik dengan melihat icon pada taskbar
dan pindah fail yang diextract tadi kedalam direktori www dan ubah nama tersebut
kepada Joomla (anda boleh menggunakan sebarang, penggunaan nama Joomla adalah
untuk memudahkan proses pembelajaran). Pastikan fail dalam direktori www dan
direktori www/joomla adalah seperti berikut:
3. Buka pelayar web anda, dan taip alamat ini diruangan Address Bar:
localhost/joomla
6. Ruangan Pre-Installation akan ditunjukan, pastikan Semua ditulis Yes seperti dibawah:
8. Lisence akan dipaparkan, anda boleh baca jika anda mahu atau teruskan dengan
menekan butang Next.
11. Ruangan FTP akan dipaparkan. Buat masa ini, kita tidak memerlukan konfigurasi
FTP, oleh itu, biarkan ruangan ini kekal seperti asal dan tekan Next.
12. Ruangan Main Coonfiguration akan dipaparkan. Pada ruangan Site Name, masukkan
nama website anda. Dalam Tutorial ini saya akan menggunakan Portal Saya.
14. Jika anda inginkan sample data, anda boleh menekan butang sample data. Walau
bagai manapun, dalam tutorial ini, saya tidak akan menggunakan Sample Data. Kita akan
membiarkan kosong sahaja agar memudahkan proses pembelajaran. Tekan Next.
15. Satu dialog box akan dipaparkan jika anda tidak memilih Sample Data. Klik Ok.
17. Sebelum anda melihat laman web anda atau joomla adalah, adalah lebih baik anda
membuang fail bernama installation yang terdapat didalam direktori www/joomla.
18. Setelah selesai, anda bolehla melayari laman web anda dengan menekan butang Site
atau menggunakan alamat berikut: localhost/joomla.
Terima kasih kepada Badang kerana telah menyediakan tutorial yang lengkap mengenai
migrasi dari Joomla 1.0 ke Joomla 1.5 hasil dari pengalamannya sendiri.
NOTA:
Tutorial ini dihasilkan bagi membantu pengguna Joomla dengan menjelaskan langkah-
langkah yang lebih terperinci, di samping menyediakan tips-tips yang perlu sebelum,
semasa dan selepas proses migrasi dijalankan.
Tutorial adalah berdasarkan kepada pengalaman sendiri setelah merujuk kepada tutorial
sedia ada di http://docs.joomla.org/Migrating_from_1.0.x_to_1.5_Stable.
AMAT PENTING:
Sila baca keseluruhan tutorial ini dahulu sebelum anda mengambil keputusan
menggunakannya sebagai rujukan migrasi anda. Ia penting sebagai persediaan
awal serta dapat mengelakkan anda menghadapi masalah semasa proses migrasi
dijalankan.
Perkara yang wajib dilakukan sebelum proses migrasi dijalankan ialah melakukan
‘backup’ terhadap pangkalan data dan laman web Joomla anda. Jika anda masih belum
mempunyai sebarang komponen “backup”, dapatkan komponen “JoomlaPack” untuk
Joomla 1.0.x di sini: http://www.joomlapack.net/download/JoomlaPack-
Componentsdownload.html
Langkah 2: Jika perlu (untuk saiz portal yang terlalu besar), pilih mana-mana direktori
yang perlu dikecualikan dengan memilih menu “Exclude Directories”. Kadang-kadang,
saiz direktori yang besar seperti galeri gambar akan menyebabkan ralat, sama ada masa
‘backup’ yang terlalu lama atau pun pelayar web akan tergantung (not responding).
Bagaimana pun, jika portal anda bersaiz kecil dengan kebanyakan gambar diletakkan di
penyedia galeri percuma seperti ImageShack, PhotoBucket, Flickr dan lain-lainnya, anda
tidak perlu bimbang untuk melakukan "backup" ke atas semua direktori.
NOTA: Perlu diingat bahawa, jika anda melakukan pengecualian ke atas mana-mana
direktori komponen, pastikan juga anda melakukan pengecualian ke atas pangkalan data
untuk komponen tersebut dengan memilih “Exclude DB Tables”.
Langkah 3: Seterusnya, muat turun fail xml untuk konfigurasi "backup" anda dengan
memilih menu “Configuration Migration”. Kemudian, pilih “Export Configuration as
XML”.
NOTA: Fail ini hanya untuk Migrasi versi Joomla yang sama ke pelayan web yang lain.
Langkah 4: Melakukan ‘backup’ terhadap laman web dan juga pangkalan data dengan
memilih menu “Backup Now”.
Setelah selesai, sekali lagi pilih menu “Backup Now” pada pusat kawalan dan diikuti
dengan menu “Backup Your Database”.
Jika kedua-dua proses tidak menghadapi masalah, anda akan dipaparkan dengan paparan
yang berikutnya seperti di bawah ini:
Kemudian, muat turun fail laman web dan pangkalan data yang telah di’backup’
sebelumnya dengan memilih butang “Administer Backup Files”.
Sekarang, anda telah pun selesai melakukan proses ‘backup’ laman web dan juga
pangkalan data. Anda tidak perlu lagi bimbang untuk melakukan proses migrasi Joomla
anda.
Perkara yang tidak kurang pentingnya sebelum memulakan proses migrasi ini ialah
dengan membuat senarai semak. Antaranya ialah:
1. Semak komponen, modul, plugin yang digunakan pada laman web asal.
Kemudian, cari komponen, modul atau plugin yang anda gunakan samada
disediakan untuk Joomla 1.5 atau pun tidak.
2. Jika perlu, tanggalkan (uninstall) dahulu SEF ‘third-party’ yang digunakan.
Pastikan anda tahu untuk menukarkan SEF ‘third-party’ kepada URL asal Joomla
selepas ianya ditanggalkan.
3. Sekurang-kurangnya anda telah melakukan pemasangan Joomla 1.5 sebanyak
sekali samada di ‘localhost’ (komputer) atau pun di ‘live server’. Kalau belum,
tidak salah untuk anda mencubanya!
4. Menulis maklumat pangkalan data seperti jenis pangkalan data (Database type),
nama hos (host name – biasanya “localhost”), nama pengguna (Username), kata
laluan (Password), dan nama pangkalan data (Database name).
NOTA: Perlu diingat bahawa, untuk proses migrasi ini, anda akan menggunakan nama
pangkalan data yang sama dengan pangkalan data Joomla yang asal. Hanya folder sahaja
yang berbeza.
PROSES-PROSES MIGRASI
Terdapat dua kaedah proses migrasi Joomla 1.0 ke Joomla 1.5 yang boleh dijalankan iaitu
Migrasi Semasa dan Migrasi Selepas Pemasangan Joomla.
NOTA: Jika sekiranya anda telah pun memasang Joomla 1.5 dan berhasrat untuk
memindah semua pangkalan data dan kandungan dari web Joomla 1.0 anda yang lama,
anda boleh teruskan pembacaan untuk kaedah yang kedua.
KAEDAH PERTAMA
Migrasi Semasa Pemasangan Joomla 1.5
Untuk tutorial ini, anda akan menggunakan komponen “Migrator” yang boleh didapati
dari laman web http://joomlacode.org/gf/project/pasamioprojects/frs/.
Langkah 2: Anda seterusnya akan dipaparkan dengan paparan seperti di bawah. Buat
masa ini, anda hanya perlu fokuskan kepada pautan “Create Migration SQL File”.
Berikutnya, pilih pautan “Download” untuk memuat turun fail migrasi yang telah
disiapkan.
Langkah 4: Login ke cPanel penyedia web anda, pilih menu “File Manager” pada
ruangan “File”.
NOTA: Setiap penyedia web mungkin berbeza dari segi pusat pengurusan direktori fail
dan juga paparan cPanel.
Langkah 5: Cipta satu folder baru di dalam root/public_html. Nama folder bergantung
kepada kesesuaian dan kehendak anda sendiri.
Langkah 6: Muat naik folder Joomla 1.5 ke dalam direktori baru dicipta menggunakan
menu “Upload”. Kemudian, pilih dan ekstrak fail tersebut dengan memilih menu
“Extract”.
Langkah 7: Mulakan proses pemasangan Joomla 1.5 dengan menaip URL laman web
anda pada tetingkap pelayar web, misalnya http://www.namaweb.com/v1/
Teruskan proses tersebut sehingga anda tiba pada halaman “Database Configuration”
seperti gambaran di bawah. Isikan maklumat asas berkaitan dengan pangkalan data anda
seperti berikut:
1. Database Type – jenis pangkalan data yang disediakan oleh penyedia web anda.
2. Host Name – nama host yang mengendalikan pangkalan data. Biasanya ialah
“localhost”.
3. Username – nama pengguna yang digunakan untuk login ke cPanel.
4. Password – kata laluan yang digunakan untuk login ke cPanel.
5. Database Name – nama pangkalan data yang digunakan pada Joomla 1.0.x anda.
Kemudian, pilih menu “Advanced Setting”. Pastikan anda memilih “Backup Old
Tables” dan juga gunakan prefix pangkalan data “jos_” (atau pun nama-nama yang lain
selain “bak_” kerana ia digunakan untuk pangkalan data yang bakal di’backup’).
Langkah 8: Setelah selesai mengisi maklumat pangkalan data, tekan butang “Next”.
Sekiranya maklumat yang diberikan adalah tepat, anda seterusnya akan ditunjukkan
dengan halaman seterusnya iaitu “Main Configuration”.
Halaman “Main Configuration” ini merupakan bahagian yang paling kritikal dan
menentukan samada proses migrasi yang dijalankan berjaya atau sebaliknya. Oleh itu,
sila ikutinya dengan teliti mengikut langkah-langkah yang telah ditetapkan seperti
gambar berikutnya ini:
Langkah 9: Jika segalanya berjalan seperti yang dirancangkan, paparan halaman berikut
akan dipaparkan:
Kemudian, klik butang “Next” seperti yang dicadangkan untuk mengisi maklumat laman
web terbaru anda.
Anda telah pun selesai melakukan proses migrasi semasa pemasangan Joomla 1.5.
KAEDAH KEDUA
NOTA: Biasanya, migrasi ini dijalankan memandangkan pengguna telah pun memasang
Joomla 1.5 tanpa berhasrat menutup laman web asal, atau juga tidak mahu memasang
Joomla 1.5 pada pangkalan data asal Joomla 1.0.
Langkah 1: Terlebih dahulu, lakukan proses migrasi pada laman web asal anda seperti
dalam ‘Langkah 1 hingga Langkah 3’ pada “Kaedah Pertama: Migrasi Semasa
Pemasangan Joomla 1.5”.
Langkah 2: Pasang komponen “Migrator Assistant” yang juga boleh didapati di laman
web http://joomlacode.org/gf/project/pasamioprojects/frs/
Langkah 4: Pada paparan ini, beberapa perkara perlu diberi perhatian seperti yang
dimaklumkan pembangunnya, iaitu:
Jika anda memahami situasi yang dinyatakan dan ingin meneruskan proses migrasi pada
laman baru anda, klik butang “Browse” untuk memilih skrip migrasi. Untuk “Old Site
Encoding”, kekalkan default iso-8859-1 jika sekiranya anda tidak mengubah apa-apa
konfigurasi penyahkodan (encoding) pada pangkalan data Joomla 1.0 yang asal.
Jika tiada sebarang masalah, satu paparan “Migration Successful” akan ditunjukkan.
NOTA: Default penyahkodan untuk Joomla 1.0 ialah “latin1_” atau “UTF-8”.
Beberapa perkara perlu diberi perhatian selepas anda melakukan proses migrasi
menggunakan komponen “Migrator” ini. Antaranya ialah:
1. Komponen, modul dan plugin ‘third-party’ tiada. Ini kerana tiadanya skrip
‘thirdparty’ yang disediakan untuk komponen “Migrator” (sehingga tutorial ini
dihasilkan).
2. Kandungan berita atau artikel yang bukan dalam kategori asal Joomla menjadi
“Uncategorised”.
3. Gambar-gambar yang diletakkan pada artikel juga akan hilang kerana masalah
“broken URL”.
Bagi mengatasi masalah ini, adalah dinasihatkan agar anda tidak menghapuskan sebarang
dokumen, folder, fail-fail, serta pangkalan data yang asal terlebih dahulu. Dengan
menggunakan senarai semak yang sediakan sebelumnya, dapatkan semula komponen,
modul dan plugin yang digunakan pada laman web asal, jika ada.
Untuk berita atau artikel dan juga gambar-gambar pada artikel tidak akan dibincangkan
secara panjang lebar pada tutorial ini kerana ia agak mudah untuk diatasi iaitu dengan
cara mengemaskini semula seksyen dan kategori serta url bagi gambar. Malah, folder
untuk gambar juga boleh dipindahkan dari folder laman web Joomla yang lama.
Hanya komponen seperti “Community Builder” sahaja dibincangkan pada tutorial ini
kerana ia melibatkan data penting iaitu pangkalan data ahli-ahli.
Kemudian, login pada cPanel > pilih “PHPMyAdmin”. Pilih pangkalan data Joomla
anda, klik pada table jos_comprofiler (default Joomla). Anda akan dapati bahawa
ruangan sebelah kanan akan memaparkan struktur bagi table jos_comprofiler.
Seterusnya, pilih menu “Operations” pada ruangan kanan untuk table jos_comprofiler.
Kemudian, pada ruangan “Table Options”, tukarkan nama table jos_comprofiler di
bahagian “Rename table to”, misalnya menjadi bak1_comprofiler. Kemudian, tekan
butang “Go”.
Selanjutnya, lakukan perkara yang sama untuk table bak_comprofiler. Tetapi, pada kali
ini, setelah menu “Operations” dipilih, pada ruangan “Table options”, namakan pada
“Rename table to” menjadi jos_comprofiler (jos_ merupakan default). Kemudian,
pastikan pada “Collation” anda telah memilih “utf8_general_ci”. Dan tekan butang
“Go”.
NOTA: Cara yang sama boleh digunakan untuk komponen lain seperti FireBoard.
Selamat Mencuba!
TUTORIAL TAMAT
Pengenalan Drupal
Drupal merupakann sebuah CMS (Content Management System). Drupal telah
memenangi Award CMS terbaik bagi tahun 2008.
Drupal sangat senang untuk digunakan dan mudah untuk membuat proses
pengubahsuaian pada modul-modulnya.
Dalam tutorial ini, anda akan belajar cara-cara menggunakan drupal dari peringkat
awalan sehinggala ke pelayan web. Tutorial kali ini tidak akan menggunakan Fantatisco
De Luxe, kita akan belajar untuk mengupload drupal menggunakan FTP.
1. Server PHP + Apache + MySQL. Rujuk disini jika anda belum mempunyai.
Nota: Pastikan anda memggunakan PHP5 dan guna MySql version 5 untuk mengelakkan
sebarang masalah.
3. Perisian untuk membuka fail .tar.gz Sila muat winrar untuk memudahkan anda.
Berikut adalah langkah-langkah untuk meminstall drupal didalam Komputer anda atau
kita panggil 'localhost'.
1. Extractkan fail drupal anda. Lihat gambar dibawah untuk membantu anda.
- Klik kanan pada fail drupal, dan pilih Extract to drupal 6.6
-Open direktori itu anda akan dpaat melihat satu lagi direktori Drupal 6.6
-Salin Direktori tersebut atau pindah ke dalam server anda iaitu didalam direktori www
(jika anda menggunakan wamp) atau htdocs(jika anda menggunakan xampp)
-Ubah nama 'drupal 6.6' kepada nama yang anda inginkan, dalam tutorial ini kita akan
mengambil nama 'websaya' sebagai contoh.
2. Pastikan server wamp anda sedang berjalan. Anda boleh pastikan dengan melihat icon
pada bawah kanan skrin anda.
Nota: Jika icon tidak kelihatan sila pergi Start>Program>Wamp Server>Start Wamp
Server (Jika anda menggunakan wamp dan juga Windows XP)
localhost/websaya
4. Jika anda mendapat paparan berikut, anda telah hampir siap untuk proses installation
drupal.
5. Sebelum anda teruskan proses installation anda, anda perlu terlebih dahulu membuat
pangkalan data yang baru kerana drupal tidak mempunyai koding untuk membuat
pangkalan data baru.
locahost/phpmyadmin
-pada ruangan create new database, cipta satu pangkalan data baru. Dalam tutorial ini,
kita akan menggunakan websaya sebagai contoh.
-klik create
Nota: Anda boleh menggunakan pangkalan data yang sudah ada, tetapi saya sarankan
agar anda menggunakan pangkalan data baru agar memudahkan proses pembelajaran.
7. Setelah selesai membuat pangkalan data, kita berbalik pada laman drupal,
(www/websaya/sites/default/)
-Anda akan dapati terdapat satu fail yang bernama default.settings.php, ubah nama fail
tersebut kepada settings.php.
8. Jika anda mendapat paparan berikut, anda telah berjaya untuk membuat proses
installation.
Pada ruangan
Database Usernam - root (ni adalah nama pengguna yang asal, jika anda telah membuat
pindaan, sila masukan nama pengguna tersebut.)
Database password - kata laluan untuk database anda. Jika tiada kata laluan, biarkan
kosong.
Nota: Jika anda dipaparkan dengan skrin yang sama, iaitu Database configuration
anda boleh lakukan cara dibawah. (Ralat bagi drupal yang biasa dialami oleh
pengguna)
-Pada file settings.php terdahulu, klik kanan dan open with wordpad atau notepad.
$db_url = 'mysql://username:password@localhost/databasename';
$db_url = 'mysql://root@localhost/websaya';
dan simpan.
-Isikan ruangan
Site Name
Bahagian administrator.
10. Jika anda mendapat paparan berikut, anda dah berjaya menginstall drupal dengan
sempurna.
Anda bolehlah mencapai laman web drupal anda menggunakan URL dibawah
localhost/websaya
http://localhost/websaya
Nota: Jika anda mendapat paparan tentang warning.mail seperti dibawah, abaikan kerana
ia tidak menganggu fungsi drupal.
Sekarang kita akan lihat antara muka drupal yang asal selepas proses installation selesai.
Nota: Anda boleh mencapai laman web drupal anda dengan menaip alamat dibawah pada
pelayar web anda
http://localhost/<direktori drupal> (dalam tutorial ini direktori yang kita gunakan adalah
websaya.)
Berikut adalah beberapa "region" yang terdapat pada antaramuka asal drupal.
"Block" ialah kod-kod yang ringkas seperti Maklumat Pelawat, Menu, Statistik dan guna
Profail.
Anda boleh menambah "block" dengan memuat turun daripada laman web drupal
ataupun anda boleh menciptanya sendiri.
"Region" adalah bergantung kepada tema. Sesetengah tema hanya mempunyai 4 "region"
iaitu, header, footer, left, right. Manakala sesetengah teman mempunyai lebih dari 8
"region". Kita akan mempelajari cara membuat "region" dalam tutorial berkenaan dengan
tema.
2.Anda akan dapat perhatikan pada menu sebelah kiri anda terdapat perkataan "Create
Content". Klik link tersebut.
3. Anda mempunyai 2 pilihan iaitu page atau story. Gunakan page untuk membuat artikel
dan story untuk membuat ulasan berita atau artikel-artikel yang berubah-ubah.
(Nota:Drupal membenarkan anda mencipta sebanyak mungkin jenis isi kandungan. Kita
akan belajar cara-cara untuk membuat blog, forum dan juga E-commerce.)
Menu Setting : Menu setting membolehkan anda membuat link atau patutan pada artikel
yang sedang anda tulis. Jika anda tidak memlih sebarang Menu, artikel anda tidak akan
mempunyai pautan pada menu. Walau bagai manapun, anda boleh membuat pautan pada
artikel tersebut secara manual iaitu dengan menaip alamat artikel anda pada isi
kandungan.
Nota: Dalam tutorial ini, letakan Menu Link title sebagai Artikel Pertama, dan pada
ruangan Parent item pilih <primary Link>
Revision Information: Isikan ruangan ini jika artikel anda diubah suai dari masa ke
semasa ataupun anda mempunyai ramai penulis. (Biarkan kosong)
Comment Settings: Ruangan ini membenarkan anda membuat pilihan sama ada artikel
anda boleh dikomen atau tidak.
Authoring Information: Ruangan untuk nama penulis dan tarikh artikel ditulis.
Publishing option : Ruangan ini membenarkan anda membuat pilihan beberapa pilihan.
1. Published : Tandakan kotak ini jika anda ingin artikel anda dipapar terus. (Biarkan
kosong jika anda rasa artikel anda masih belum siap untuk dibaca oleh orang awam.
Nota: Jika anda membiarkan kosong, artikel anda akan disimpan didalam pangkalan data
dan disimpan untuk diubahsuai.).
2. Promoted to Frontpage:Tandakan kotak ini jika anda ingin artikel akan diletakan
pada laman utama web anda.
3.Sticky at top of list: Artikel ini akan sentiasa berada diatas walaupun anda menulis
artikel-artikel yang lain.
6. Pilih save
7. Anda akan dapat melihat artikel anda dan juga pautan pada artikel tersebut di atas
Hak Cipta© 2000 Aziemart dot Com Enterprise. Semua Hak Cipta Terpelihara..
Hak Cipta
Segala isi kandungan (teks, grafik dan fail animasi) yang ada dalam laman web Aziemart
dot COM Enterprise adalah hak milik Aziemart dot COM Enterprise, rakan-rakan kongsi
perniagaannya dan/atau pemberi maklumatnya, adalah tertakluk kepada hak cipta dan
lain-lain perlindungan hak milik intelektual oleh undang-undang hak cipta Malaysia dan
antarabangsa. Kandungan ini tidak boleh disalin atau dicetak untuk tujuan dagangan atau
pengedaran, malah ia tidak boleh diubahsuai atau dipindah ke laman web yang lain. Apa-
apa jenis penggunaan yang lain termasuklah peniruan, pengubahsuaian, pengedaran,
penyiaran, penerbitan semula, pameran atau persembahan segala isi kandungan laman
web ini adalah dilarang sama sekali.
Tanda Dagangan
Semua tanda dagangan yang dipamerkan dalam laman web Aziemart dot COM
Enterprise adalah tertakluk di bawah hak tanda dagangan Aziemart dot COM Enterprise.
Logo Rhythm dan logo-logo produk adalah tanda dagangan Aziemart dot COM
Enterprise. Anda tidak dibenarkan mengguna atau mempamer tanda dagangan Aziemart
dot COM Enterprise dalam bentuk/keadaan apa sekalipun tanpa kebenaran daripada
syarikat ini.
Penafian
Aziemart dot COM Enterprise tidak akan membuat apa-apa jenis kenyataan atau jaminan,
secara nyata atau tersirat mengenai operasi laman web, maklumat, isi kandungan, bahan-
bahan atau produk-produk yang ada dalam laman web ini. Mengikut skop kebenaran
daripada undang-undang yang bersesuaian, Aziemart dot COM Enterprise menafikan
segala jaminan (yang nyata atau tersirat), termasuklah mana-mana jaminan tersirat
mengenai kemampuan pedagang, penyesuaian yang dibuat untuk tujuan tertentu, atau
bukan pelanggaran hak. Walaupun maklumat yang diberikan diyakini tepat, namun ia
mungkin masih mempunyai kesalahan atau tidak bertepatan. Aziemart dot COM
Enterprise tidak akan bertanggungjawab terhadap mana-mana kesulitan (secara langsung
atau tidak langsung), kesulitan sampingan dan akibat daripada kesulitan itu yang timbul
daripada penggunaan laman web ini. Sila rujuk pada pemilik syarikat-syarikat berkenaan
untuk mengetahui tawaran harga terkini dan maklumat produk-produk mereka. Aziemart
dot COM Enterprise mengisytiharkan bahawa segala maklumat akan diperlakukan secara
sulit dan mengikut syarat-syarat undang-undang berkenaan perlindungan data.
Hubungan
Aziemart dot COM Enterprise berkemungkinan dihubungkan dengan Laman Web yang
lain di serata dunia atau sumber-sumber yang lain. Memandangkan Aziemart dot COM
Enterprise tidak mempunyai kawalan terhadap laman-laman web dan sumber-sumber
tersebut, anda dengan ini mengakui dan bersetuju bahawa Rhythm Consolidated tidak
bertanggungjawab terhadap kewujudan/keupayaan laman-laman web luaran dan sumber-
sumber tersebut dan tidak menyokong serta bertanggungjawab atau berkewajipan
terhadap mana-mana ISI KANDUNGAN, pengiklanan, produk-produk, atau lain-lain
bahan yang terdapat pada atau yang diperoleh daripada laman-laman web atau sumber-
sumber tersebut. Anda juga mengakui dan bersetuju bahawa Aziemart dot COM
Enterprise tidak akan dipertanggungjawabkan atau diperwajibkan, secara langsung atau
tidak langsung terhadap sebarang kerosakan atau kehilangan (kerugian) yang dialami atau
dituduh sebagai penyebab atau mempunyai perkaitan dengan penggunaan atau
kepercayaan terhadap mana-mana ISI KANDUNGAN, barangan atau perkhidmatan yang
terdapat pada atau melalui mana-mana laman-laman web atau sumber-sumber tersebut.
• Di mana terletaknya bahan dalam laman web yang anda dakwa telah melanggari
hak cipta.
• Kenyataan bahawa maklumat dalam notis tersebut adalah tepat, dan pihak yang
membuat aduan boleh dijatuhi hukuman sekiranya didapati bersumpah bohong,
dan bahawa pihak yang membuat aduan diberi kebenaran untuk bertindak
mewakili pemilik hak cipta yang menurut tuduhan haknya telah dicabuli.