NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 1
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 2
KANDUNGAN TAJUK Mukasurat Panduan Membuat Web 3
Pengenalan JavaScript 8
Pengenalan HTML 12
Pengenalan CSS 47
Membuat Server PHP Sendiri 63
Pengenalan Asas PHP 65
Pengenalan MySQL 100
Pengenalan PhpMyAdmin 114
Pengenalan SQL 117
Pengenalan Joomla 120
Pengenalan Drupal 139
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 3
Panduan Membuat Web
Adakah anda ingin membuat web sendiri? Tetapi anda mempunyai persoalan berikut:
• Apa yang perlu saya tahu untuk membuat web? • Apa yang perlu saya guna untuk membuat web? • CMS? Drupal? Joomla. Apa itu? • Keselamatan Web saya macam mana? • Hosting yang mane sesuai?
Jika anda mempunyai persoalan diatas, disini saya cuba berikan anda jawapan yang terbaik untuk anda dengan ilmu saya yang tidak seberapa ini.
Apa yang perlu saya tahu?
Soalan ini sering dikemukan oleh ramai pengguna yang ingin membuat web. Dan kebiasaanya anda akan dijawab dengan:
1. Pergi belajar HTML CSS PHP serta setaranya.
2. Guna Joomla, Drupal CMS
3. Google saje.
4. Saya pun tengah belajar lagi, jom kita belajar bersama-sama.
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
3. Laman web sendiri
4. Laman web perniagaan
5. Portal
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 4
6. E-commerce
7. Help Desk
8. Gallery
9. Wiki
10. dan macam-macam lagi.
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.
Apa yang perlu saya guna?
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 5
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.
1. Notepad - Saya lebih suka menggunakan notepad untuk kerja-kerja pengubahsuai koding yang ringkas. Pastikan akan mahir dalam HTML dan CSS untuk menggunakan notepad.
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.
HTML vs FLASH vs PHP
Saya sering terbaca persoalan tentang bahasa apa yang perlu saya gunakan untuk membuat web? HTML ke? Flash ke? Atau PHP.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 6
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.
Keselamatan Laman web
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.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 7
Menjadi webmaster sebagai pekerjaan
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 Pengaturcaraan Laman Web : HTML,PHP,XML,XHTML,DHTML,JavaScript, ASP dan juga ColdFusion.
Bahasa Pangkalan Data : MySQL, Post SQL, mSQL, SQL dan Access.
Server : Apache, IIS, Linux, Unix
Teknik SEO : Google, Yahoo,
Keselamatan : SSL, Certificate, exploit dan juga Real Time Coding Error.
E-Commerce : Paypal, E-Gold, Liberty,
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.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 8
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.
Benda yang anda patut tahu
Sebelum anda meneruskan tentang JavaScript, anda mestilah mempunyai pengetahuan dalam HTML dan juga XHTML.
Apa itu JavaScript
• JavaScript digunakan bersama HTML untuk mencantikan lagi laman web • JavaScript adalah bahasa pengaturcaraan • JavaScript biasanya dimasukan terus kedalam HTML • JavaScript boleh digunakan terus tanpa perlu dikompile. • JavaScript adalah percuma dan boleh digunakan oleh sesiapa sahaja.
Adakah Java dan JavaScript sama?
Ramai yang beranggapan Java dan JavaScript adalah sama, jawapannya
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++.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 9
Apa yang anda boleh buat dengan JavaScript?
• JavaScript boleh mengesahkan data dalam borang anda (form) • JavaScript boleh berinteraksi dengan 'event' • JavaScript boleh membaca dan menulis HTML. • JavaScript boleh menentukan jenis pelayar dan resolusi. • JavaScript boleh membuat 'cookies'
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:
<script type="text/javascript"> /* Random image slideshow- By Tyler Clarke ([email protected]) For this script and more, visit http://www.javascriptkit.com */ var delay=1000 //set delay in miliseconds var curindex=0 var randomimages=new Array() randomimages[0]="/news/1.gif" randomimages[1]="/news/1.gif" randomimages[2]="/news/1.gif" randomimages[3]="/news/1.gif" randomimages[4]="/news/1.gif" randomimages[5]="/news/1.gif" var preload=new
Array() for (n=0;n ') function rotateimage() { if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){ curindex=curindex==0? 1 : curindex-1 } else curindex=tempindex document.images.defaultimage.src=randomimages[curindex] } setInterval("rotateimage()",delay) </script>
Arahan:
Masukkan kod tersebut di dalam <BODY> laman web anda.
<script language="javascript"> var delay=1000 //set jurang masa dalam miliseconds var curindex=0 var randomimages=new Array() randomimages[0]="1.jpg" randomimages[1]="5.jpg" randomimages[2]="2.jpg" randomimages[3]="4.jpg" randomimages[4]="3.jpg" randomimages[5]="6.jpg" var preload=new Array()
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 10
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.length)))){ curindex=curindex==0? 1 : curindex-1 } else curindex=tempindex document.images.defaultimage.src=randomimages[curindex] } setInterval("rotateimage()",delay) </script>
Pengubahsuaian:
randomimages[0]="1.jpg"
• masukkan nama-nama gambar yang ingin anda tukarkan. • pastikan [0],[1],[2] ... [10] adalah mengikut array susunan untuk gambar anda
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:
---Select1------------- ---Select2-------------- ---Select3----------------
<script> 0;m--) temp1.options[m]=null for (i=0;i </script>
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 11
Arahan:
Masukkan kesemua script ini di bahagian <BODY>:
<FORM name="isc"> <table border="0" cellspacing="0" cellpadding="0"> <tr align="center"> <td nowrap height="11"> <select name="example" size="1" onChange="redirect(this.options.selectedIndex)"> <option selected>---Select1-------------</option> <option>Webmaster Sites</option> <option>News Sites</option> </select> <select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)"> <option value=" " selected> </option> <option value=" " selected>---Select2--------------</option> <option value=" " selected>---Select2--------------</option> </select> <select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)"> <option value=" " selected> </option> <option value=" " selected>---Select3----------------</option> <option value=" " selected>---Select3----------------</option> </select> <script> <!-- var groups=document.isc.example.options.length var group=new Array(groups) for (i=0; i<groups; i++) group[i]=new Array() group[0][0]=new Option("---Select2---"," "); group[1][0]=new Option("Now Select This One"," "); group[1][1]=new Option("JavaScript","47"); group[1][2]=new Option("CSS","46"); group[1][3]=new Option("Ajax","45"); group[2][0]=new Option("Now Select This One"," "); group[2][1]=new Option("General News","115"); group[2][2]=new Option("Technology News","116");
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 12
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() }} secondGroup[0][0][0]=new Option("---Select 3---"," "); secondGroup[1][0][0]=new Option("---Select 3---"," "); secondGroup[1][1][0]=new Option("Now Select This One"," "); secondGroup[1][1][1]=new Option("JavaScript Kit","http://javascriptkit.com"); secondGroup[1][1][2]=new Option("Dynamic Drive","http://www.dynamicdrive.com"); secondGroup[1][1][3]=new Option("Java-Scripts.net","http://java-scripts.net"); secondGroup[1][2][0]=new Option("Now Select This One"," "); secondGroup[1][2][1]=new Option("CSS Drive","http://www.cssdrive.com"); secondGroup[1][2][2]=new Option("CSS Library","http://www.dynamicdrive.com/style/"); secondGroup[1][2][3]=new Option("CSS Help Forums","http://www.codingforums.com/forumdisplay.php?f=13"); secondGroup[1][3][0]=new Option("Now Select This One"," "); secondGroup[1][3][1]=new Option("Ajaxian","http://www.ajaxian.com"); secondGroup[1][3][2]=new Option("Ajax Scripts","http://www.javascriptkit.com/script/cutindex11.shtml"); secondGroup[2][0][0]=new Option("---Select 3---"," "); secondGroup[2][1][0]=new Option("Now Select This One"," "); secondGroup[2][1][1]=new Option("CNN","http://www.cnn.com"); secondGroup[2][1][2]=new Option("MSNBC","http://www.msnbc.com"); secondGroup[2][1][3]=new Option("ABC News","http://www.abcnews.com");
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 13
secondGroup[2][2][0]=new Option("Now Select A Page"," "); secondGroup[2][2][1]=new Option("News.com","http://www.news.com"); secondGroup[2][2][2]=new Option("Wired","http://www.wired.com"); 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.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 14
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
Pembelajaran HTML dalam forum boleh dilihat disini
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.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 15
Pengetahuan dalam bahasa HTML akan dapat memudahkan anda memahami sesuatu pengaturcaraan dan menjimatkan masa untuk anda mengubahsuai sesuatu laman web.
Kebiasaanya bagi sesuatu laman web, rekabentuknya adalah seperti berikut.
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.
Koding yang paling ringkas dalam HTML ialah:
<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
<HTML> --- Permulaan bagi bahasa HTML
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 16
<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.
</HEAD> --- Penamat bagi <HEAD>
<BODY> --- Sebarang koding yang ditulis di ruangan ini akan dipaparkan
</BODY> --- Penamat bagi paparan
</HTML> --- Penamat bagi bahasa HTML
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>.
Pastikan anda sentiasa menutup sebarang TAG yang digunakan.
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.
Berikut adalah contoh penulisan koding yang tidak teratur.
<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>
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 17
</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
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 18
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:
Paragraph type 1 Italics
Paragraph type 2 Bold
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.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 19
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:
Letakan penunjuk anda disini
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.
ALIGN = left (default) | center | right
HTML Code: <h2 align="center">Tajuk ditengah</h2>
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 20
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.
Attribute Pilihan Fungsi
align right, left, center Menyusun teks atau gambar dalam keadaan mendatar
valign top, middle, bottom Menyusun teks atau gambar dalam keadaan menegak
bgcolor numeric, hexidecimal, RGB values
Mewarnakan latar belakang
background URL Meletakan image sebagai latar belakang
id User Defined Nama bagi element untuk CSS
class User Defined Class bagi element untuk CSS
width Numeric Value Menentukan panjang element contohnya table
height Numeric Value Menentukan tinggi element contohnya table
title User Defined "Pop-up" untuk teks atau gambar
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 21
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
Attribute bagi background membolehkan anda menggunakan gambar sebagai latar belakang sesutu laman web. Anda hanya perlu meletakan URL untuk nilai attribute ini. Gambar akan diulangi sehingga memenuhi keseluruhan laman web.
<body background="clouds.gif">
atau
<body background="http://www.kripkornstudios.co.cc/clouds.gif">
Font and Basefont
Tag <font> gidunakan untuk menambahkan style,saiz dan warna pada text didalam laman web anda. Penggunaan attribute size, color, dan face adalah untuk mengubahsuai
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 22
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:
Tulisan ini bersaiz 5
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.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 23
HTML Code: <p> <font face="Bookman Old Style, Book Antiqua, Garamond">Perengggan ini mempunyai jenis tulisan</font> </p>
Font Face:
Perengggan ini mempunyai jenis tulisan
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
Beautiful First Letter Style
Contoh penggunaan attribute untuk mencantikan tulisan anda
HTML Code: <p><font size="7" face="Georgia, Arial" color="maroon">S</font>erlahkan kecantikan tulisan anda</p>
Beauty:
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 24
Serlahkan kecantikan tulisan anda
Formatting Elements Tags
Apabila anda sudah meletakan banyak element dalam website anda, sudah tentu anda inginkan kelainan bagi setiap element. Kita tidak mahu pengunjung melihat laman web kita dalam bentuk yang simple sangat. Bak kata orang putih plain. Oleh itu, penggunaakan tag FORMATING akan dapat menyerikan lagi laman web anda. Formating tag berfungsi untuk membuat tulisan tebal, condong dan banyak lagi.
Bold, Italic and More
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.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 25
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
src="../pics/pantai.jpg" gambar berada dalam folder sebelum file html dan di dalam folder 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.
Setiap method mempunyai kelebihan dan kekurangannya tersendiri, keburukan URL apabila gambar asal tersebut diubah oleh web master, maka gambar tersebut tidak akan dipaparkan, manakala mengupload gambar terus kedalam web server akan memakan ruangan cakera keras. Oleh itu, buatlah pilihan yang terbaik.
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:
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 26
<img src="pantai.jpg" alt="Indahnya Pantai" />
Alternative Text:
Image Height and Width
Untuk mengubah suai gambar, atrribute height dan width boleh digunakan
HTML Code: <img src="pantai.jpg" height="50" width="100">
Height and Width:
Vertically and Horizontally Align Images
Gunakan attribute align dan vAlign untuk menyusun kedudukan gambar anda dalam body,table(jadual) ataupun layer.
1. align (Horizontal) o right o left o center
2. valign (Vertical) o top o bottom o center
Dibawah adalah contoh untuk menyusun gambar disebelah kiri
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>
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 27
Gambar kedudukan kanan:
Ini Perenggan pertama bagi menunjukan cara penggunaan attribute gambar align
Gambar akan terpapar disebelah kanan bukan? Gambar yang dipaparkan adalah bersebelahan dengan perenggan ke dua. Ini adalah teknik yang menarik untuk anda gunakan supaya pelayar tidak akan berasa janggal melihat website anda. Jika attribute align tidak diletakkan, perenggan ini akan dipaparkan dibawah gambar
Ini perenggan ke tiga yang terpapar dibawah gambar.
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>
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 28
Thumbnails:
Links and Anchors
Hypelink digunakan untuk membuat sambungan kepada laman web yang lain, sama ada laman web anda sendiri atau pun luar dari laman web anda. Laman web tanpa link ibarat pokok yang tidak berdaun.
Hypertext Reference (href)
Penggunaan attribute href adalah tuntuk membuat sambungan kepada laman web lain
Sambungan mungkin dari sumber ruangan, dalam atau luaran.
• Ruangan- Links kepada webpage yang sama. • Dalam - Links kepada webpage dalam domain anda • Luaran - Links kepada website lain.
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:
Tizag Home ESPN Home Yahoo Home
Link Targets
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 29
Attribute target digunakan untuk menetapkan cara link tersebut dibuka sama dalam dalam window yang sama, atau dalam window yang baru.
HTML Code:
_blank" Buka dalam window yang baru
_self" Buka dalam window yang sama
_parent" Buka dalam frame utama
target="
_top" Buka dalam windows yang sama dan batalkan semua frame
Contoh dibawah akan membuka laman web ESPN.COM dengan menggunakan window baru
HTML Code:
<a href="http://www.ESPN.com" target="_blank">ESPN.COM</a>
_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>
Seterusnya anda perlu membuat link kepada anchor tersebut.
Anchor Code: <a href="#top">Tajuk Utama</a> <a href="#text">Text Links</a> <a href="#email">Email Links</a>
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 30
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:[email protected]?subject=Feedback" _fcksavedurl="mailto:[email protected]?subject=Feedback" _fcksavedurl="mailto:[email protected]?subject=Feedback" _fcksavedurl="mailto:[email protected]?subject=Feedback" >[email protected]</a>
Email Links:
Anda juga boleh membuat tambahan dengan meletakn sedikit isi kandungan didalam email tersebut secara automatik
HTML Code: <a href="mailto:[email protected]?subject=Feedback&body=Bagus Portal ini">
Complete Email:
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.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 31
HTML Code: <a href="http://www.kripkorn.co.cc/blank.zip">Text Document</a>
Download a Text Document:
Text Document
Default Links; Base
Penggunaan tag base adalah untuk menetapkan link asas. Ini amat digalakan kerana jika link ada rosak, base link akan digunakan. Kebiasaanya base link akan ditujukan kepada laman utama website anda.
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
• <ul> - unordered list; bullets • <ol> - ordered list; numbers • <dl> - definition list; dictionary
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:
<h4 align="center">Hobi Saya</h4> <ol> <li>Membaca</li> <li>Berbasikal</li> <li>Memancing</li> </ol>
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 32
List dalam turutan nombor :
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:
<h4 align="center">Hobi Saya</h4> <ol start="6"> <li>Membaca</li> <li>Berbasikal</li> <li>Memancing</li> </ol>
Numbered List Start:
Hobi Saya
6. Membaca 7. Berbasikal 8. Memancing
Sambungan Ordered List
Terdapat 4 jenis senarai yang boleh dibuat selain meggunakan nombor. iaitu menggunakan abjad atau angka roman. Untuk menggunakan jenis ini anda perlukan mengguna attribute type.
HTML Code:
<ol type="a"> <ol type="A"> <ol type="i"> <ol type="I">
Jenis Ordered List :
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 33
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:
<h4 align="center">Barang Dapur</h4> <ul> <li>Susu</li> <li>Milo</li> <li>Roti</li> <li>Beras</li> </ul>
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:
<ul type="square"> <ul type="disc"> <ul type="circle">
Unordered List Types:
Definition Term Lists
Penggunaan Definition List adalah untuk membuat senarai dalam bentuk kamus atau definisi. Perkataan akan diboldkan manakala makna akan diletakkan dibawah perkataan.
• <dl> - tag untuk memulakan definition list • <dt> - tag untuk perkataan
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 34
• <dd> - tag untuk makna
HTML Code:
<dl> <dt><b>Fromage</b></dt> <dd>French word for cheese.</dd> <dt><b>Voiture</b></dt> <dd>French word for car.</dd> </dt>
HTML Code:
Fromage French word for cheese. Voiture French word for car.
Color Coding System - Color Names
Terdapat 3 cara untuk mensetkan warna. Cara yang paling mudah adalah menggunakan Generic. Iaitu penggunakan perkataan english black, white, green and blue.Dibawah ini adalah senarai Generic yang boleh digunakan dan difahami oleh web browser.
16 Warna asal:
Black Gray Silver White
Yellow Lime Aqua Fuchsia
Red Green Blue Purple
Maroon Olive Navy Teal
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).
Red, Green, and Blue Values:
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 35
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
Nilai warna bagi Hexadecimal:
Decimal 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Hexadecimal 0 1 2 3 4 5 6 7 8 9 A B C D E F
Kita menggunakan huruf bagi mengantikan nombor dari 10 dan ke atas.
A Real Hexadecimal:
bgcolor="#FFFFFF"
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 36
Setiap huruf F diatas mewakili nilai bagi 15.
Hexadecimal Formula:
(15 * 16) + (15) = 255
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
Kita cuba sekali lagi:
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.
Ada 3 bahagian dalam entiti
HTML Code:
• Entiti bermula dengan tanda dan atau ampersand - & • Diikuti dengan nama entiti - copy • Dan akhir sekali tanda semi-colon - ;
Copyright:
Gabungkan © untuk membuat tanda - © - copyright.
Ruangan Kosong dan <>.
Seperti yang anda pelajari dalam perenggan dan heading tag, browser hanya mengenali format 1 ruang kosong saja di antara perkataan atau huruf, oleh itu walaupun anda membuang banyak ruangan kosong, hanya 1 sahaja akan dipaparkan. Oleh itu, entiti digunakan untuk menambahkan ruangan kosong.
Contohnya
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 37
HTML Code: <p>Perjuangan ini belum selesai!</p>
Spaces:
Perjuangan ini belum selesai!
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>
Kurang atau Lebih dari :
Kurang dari - < Lebih dari - > Body tag - <body>
Sila perhatikan senarai entiti yang terdapat didalam HTML
Symbol Makna Numeric Value Correlating Name
Non-Breaking Space   < Less Than < < > Greater Than > > " Quotation Mark " " ¡ Inverted Exclamation ¡ ¡ ¢ Cent ¢ ¢ £ English Pound £ £ ¤ Currency ¤ ¤ ¥ Yen ¥ ¥ ¦ Broken Vertical Bar ¥ ¦ § Section § § ¨ Double Dot ¨ ¨ © Copyright © © ª Feminine Ordinal Indicator ª ª « Left Angle Quotation Mark « « » Right Angle Quotation Mark » » ¬ Negation ¬ ¬ ® Registered Trademark ® ® ¯ Spacing Macron ¯ ¯ ° Degree(s) ° ° ± Plus or Minus ± ± ² Superscript 2 ² ²
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 38
³ Superscript 3 ³ ³ ´ Spacing Acute ´ ´ µ Micro µ µ ¶ Paragraph ¶ ¶ · Middle Dot · · ¸ Spacing Cedilla ¸ ¸ ¹ Superscript 1 ¹ ¹ º Masculine Ordinal Indicator º º ¼ ¼ Fraction ¼ ¼ ½ ½ Fraction ½ ½ ¾ ¾ Fraction ¾ ¾ ¿ Inverted Question Mark ¿ ¿ À Grave Accent-Captial A À À Á Acute Accent-Capital A Á Á Â Circumflex Accent-Capital AÂ Â Ã Tilde-Capital A Ã Ã Ä Umlaut Mark-Capital A Ä Ä Å Ring-Capital A Å Å Æ Capital ae Æ Æ Ç Cedilla-Capital C Ç Ç È Grave Accent-Capital E È È É Acute Accent-Capital E É É Ê Circumflex Accent-Capital E Ê Ê Ë Umlaut Mark-Capital E Ë &Eml; Ì Grave Accent-Capital I Ì Ì Í Acute Accent-Capital I Í Í Î Circumflex Accent-Capital I Î Î Ï Umlaut Mark-Capital I Ï Ï Ð Capital eth Ð ∓ETH; Ñ Tilde-Capital N Ñ ∓Ntilde; Ò Grave Accent-Capital O Ò Ò Ó Acute Accent-Capital O Ó Ó Ô Circumflex Accent-Capital OÔ Ô Õ Tilde-Capital O Õ Õ Ö Umlaut Mark-Capital O Ö %amp;)uml; × Multiplecation × × Ø Slash-Capital O Ø Ø Ù Grave Accent-Capital U Ù Ù Ú Acute Accent-Captital U Ú Ú Û Circumflex Accent-Capital UÛ Û Ü Umlaut Mark-Capital U Ü Ü Ý Acute Accent-Capital Y Ý Ý Þ Thorn Þ Þ ß Small Sharp ß ß æ Small ae æ æ ð Small eth ð ð
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 39
ø Slash-Small o ø ø þ Small Thorn þ þ Œ Capital Ligature Œ Œ œ Small Ligature œ œ ˆ Modifier Circumflex Accent ˆ ˆ ˜ Small Tilde ˜ ˜ Zero Width Joiner ‍ ‍ – En Dash – – — Em Dash — — ‘ Left Single Quote ‘ ‘ ’ Right Single Quote ’ ’ ‚ Single Low Quote ‚ ‚ “ Left Double Quote “ “ ” Right Double Quote ” ” „ Double Low Quote „ „ † Dagger † † ‡ Double Dagger ‡ ‡ ‰ Per Mile ‰ ‰ ‹ Left Single Arrow Quote ‹ ‹ › Right Single Arrow Quote › › € Euro Mark € € ™ TradeMark ™ ™
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:
• type - menentukan jenis input. • name - nama bagi input. Sangat penting untuk rujukan. • size - Saiz bagi input. • maxlength - Menentukan had maksimum bagi jumlah huruf yang boleh
dimasukkan.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 40
HTML Code: <form method="post" action="mailto:[email protected]"> 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:
HTML Form Email
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.
Untuk menambahkan butang Hantar, pertama sekali kita mestilah menambahkan 2 attribute kedalam tag <form> iaitu
• 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:[email protected]"> 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.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 41
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..
• value - nilai yang akan dihantar oleh butang radio • name - mensetkan nama bagi butang radio.
HTML Code: <form method="post" action="mailto:[email protected]"> 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:[email protected]"> Minuman Kegemaran saya
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 42
<input type="checkbox" name="teh" value="teh">Teh O Beng <input type="checkbox" name="kopi" value="kopi">Kopi <input type="checkbox" name="kosong" value="kosong">Air Kosong <input type="checkbox" name="orange" value="orange">Fresh Orange <input type="submit" value="Hantar"></form>
Check Boxes:
Minuman Kegemaran saya
Teh O Beng
Kopi
Air Kosong
Fresh Orange
Hantar
Drop Down Lists
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:[email protected]"> 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>
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 43
Drop Down Lists:
Pelajaran? Hantar
Selection Forms
Pengguna dapat membuat pelbagai pilihan dengan menggunakan Selection From, fungsinya hampir sama dengan checkbox tetapi dalam Selection Form, user perlu menggunakan Shift untuk membuat banyak pilihan.
HTML Code: <form method="post" action="mailto:[email protected]"> 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:
Muzik Kegemaran Anda
Emo
Metal/Rock
Hip Hop
SkaHantar
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" />
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 44
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:[email protected]"> <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
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 45
Senarai Nama Warna.
Berikut adalah senarai penuh warna
Color Name Color HEX Color
AliceBlue #F0F8FF AntiqueWhite #FAEBD7 Aqua #00FFFF Aquamarine #7FFFD4 Azure #F0FFFF Beige #F5F5DC Bisque #FFE4C4 Black #000000 BlanchedAlmond #FFEBCD Blue #0000FF BlueViolet #8A2BE2 Brown #A52A2A BurlyWood #DEB887 CadetBlue #5F9EA0 Chartreuse #7FFF00 Chocolate #D2691E Coral #FF7F50 CornflowerBlue #6495ED Cornsilk #FFF8DC Crimson #DC143C Cyan #00FFFF DarkBlue #00008B DarkCyan #008B8B DarkGoldenRod #B8860B DarkGray #A9A9A9 DarkGrey #A9A9A9 DarkGreen #006400 DarkKhaki #BDB76B DarkMagenta #8B008B DarkOliveGreen #556B2F Darkorange #FF8C00 DarkOrchid #9932CC DarkRed #8B0000
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 46
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
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 47
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
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 48
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
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 49
Pengenalan CSS
CSS-Book
• CSS o Apa itu CSS o Sintaks o Bagaimana Hendak: o Latar Belakang o Tulisan o Aksara
Perkara asas yang perlu anda tahu
Sebelum anda meneruskan pembelajaran dalam CSS, anda perlulah mengetahui terlebih dahulu sedikit asas tentang HTML/XHTML.
Jika anda ingin belajar HTML. sila klik di sini
Apa itu CSS
• CSS adalah akronim badi Cascading Style Sheets • Style menerangkan bagaimana untuk memaparkan element HTML • Style biasanya disimpan didalam Style Sheet • Style ditambah dalam HTML 4.0 untuk menyelesaikan masalah • Style Sheet Luaran dapat menjimatkan masa • Style Sheet Luaran disimpan dalam fail CSS • Pelbagai style boleh disatukan.
CSS Demo
Laman web ini dibina dengan menggunakan CSS untuk memaparkan pelbagai jenis element dengan menarik.
Bagaimana Style meyelesaikan masalah
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
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 50
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 Sheet menjimatkan masa
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.
Pelbagai style boleh disatukan
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?
Style sheet akan dipilih seperti berikut :
• 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
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 51
CSS syntax dibahagikan kepada 3 bahagian iaitu selector, property dan value.
selector {property: 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.
p {font-family: "sans serif"}
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
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 52
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.
p.right { text-align: right } p.center { text-align: center }
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:
<p class="center bold"> Ayat ini akan ditebalkan dan ditengahkan. </p>
Perenggan diatas akan dipaparkan dengan menggunakan style yang mempunyai class
"center" dan "bold".
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 53
Anda juga boleh emnggukan kelas yang sama untuk elemen yang berbeza contonya, kelas dibawah menerangkan agar tulisan disusun di tengah-tengah.
.center { text-align: center }
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.
Menambah Style bagi Elemen yang mempunyai Attibute
Anda boleh menggunakan style untuk element HTML yang mempunyai attribute yang tersendiri. Style dibawah akan digunakan jika elemen input mempunyai attribute "text".
input[type="text"] { background-color: blue }
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".
#green { color: green }
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 54
Jangan mulakan ID anda dengan menggunakan nombor.
Komen dalam CSS
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.
/* Ini adalah komen */ p { text-align: center; /* Ini komen yang lain */ color: black; font-family: arial }
Memasukkan Style Sheet
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
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 :
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 55
hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}
Style Sheet dalaman
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.
<p style="color: sienna; margin-left: 20px"> Ini adalah perenggan </p>
Pelbagai Style Sheets
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 }
Dan anda menggunakan Style Sheet Dalaman untuk <h3>
h3 {
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 56
text-align: right; font-size: 20pt }
Oleh itu, paparan untuk <h3> akan mengikut Style berikut :
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.
Membuat warna bagi latar belakang
<html> <head> <style type="text/css"> body { background-color: yellow } h1 { background-color: #00ff00 } h2 { background-color: transparent } p { background-color: rgb(250,0,255) } </style> </head> <body> <h1>Tajuk 1</h1> <h2>Tajuk 2</h2> <p>Perenggan 1</p> </body> </html>
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.
Menggunakan gambar sebagai latar belakang
<html> <head> <style type="text/css">
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 57
body { background-image: url('pantai.jpg') } </style> </head> <body> </body> </html>
Contoh
Property untuk menggunakan gambar sebagai latar belakang ialah background-
image:url('nama_gambar').
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>
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 58
Untuk membuat ulangan mendatar, property background-repeat: repeat-x boleh digunakan seperti berikut :
<style type="text/css"> body { background-image: url('pantai.jpg'); background-repeat: repeat-x } </style>
Berikut adalah senarai property dan value bagi latar belakang.
background-attachment - untuk menentukan latar belakang patut bergerak atau tidak jika window di scroll ke bawah.
scroll
fixed
background-color - mewarnakan latar belakang
rgb
hex
name
transparent
background-image - menghasilkan latar belakang dari gambar
url(URL)
none
background-position - menentukan posisi bagi latar belakang, hanya untuk latar belakang yang menggunakan gambar sahaja.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 59
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
background-repeat - menentukan latar belakang patut diulang, hanya untuk latar belakang yang menggunakan gambar sahaja.
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>
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 60
</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:
p.small {line-height: 10px} p.big {line-height: 200%}
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
Property text-decoration digunakan untuk mengubah suai tulisan seperti underline,italic.Contohnya seperti berikut:
h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline}
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 61
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 :
p.uppercase {text-transform: uppercase} p.lowercase {text-transform: lowercase} p.capitalize {text-transform: capitalize}
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.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 62
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%}
Membuat Style Tulisan
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:
p.normal {font-variant: normal} p.small {font-variant: small-caps}
Bold
Penggunaan property font-weight membolehkan anda menetapkan ketebalan tulisan anda. Contoh penggunaannya seperti dibawah.
p.normal {font-weight: normal} p.thick {font-weight: bold} p.thicker {font-weight: 900}
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 63
Semua dalam satu
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>
Membuat Server PHP Sendiri
Jika anda sudah memahami HTML, dan anda ingin mula belajar menggunakan PHP, apa yang anda perlu ialah mempunyai sebuah server sendiri untuk memproses fail-fail PHP anda, berikut adalah teknik yang paling mudah untuk membuat server PHP.
Saya akan mengajar anda menggunakan perisian yang lengkap dengan PHP, Apache dan MySql, bagaimana pun anda boleh menginstall satu persatu perisian ini.
Tutorial ini hanyala untuk Windows Sahaja.
Berikut adalah langkah-langkah untuk membuat server PHP.
1. Kunjungi http://www.wampserver.com/en/ dan downlad wamp server yang terbaru.
2. Klik perisian yang sudah didownload itu, ini adalah paparan antaramuka bagi wamp server version 2 semasa artikel ini ditulis.
3. Klik Next.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 64
4. Klik Accept the Agreement
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:.
6. Klik Next dan Next, dan seterusnya Klik Install.
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.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 65
Pengenalan Asas PHP
• PHP o Apa Itu PHP o String o Syntax o Variable o Operator o Array o IF....Else o Switch Statement o Gelung (Looping) o Borang o Fail o Include o PHP GET o PHP POST o Fungsi o Upload Fail
Apa Itu PHP
Apa yang patut anda tahu
Sebelum anda meneruskan pengajian anda tentang PHP, anda seharusnya sudah mahir dengan HTML, jika belum, sila klik disini
Apa itu PHP?
PHP adalah akronim untuk PHP : HyperText Prepocessor
PHP diproses dibahagian server seperti ASP
PHP menyokong banyak jenis database seperti MySql, Oracle dan PosthreSQL.
PHP adalah open source
PHP percuma untuk didownload dan digunakan.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 66
Apakah fail PHP?
PHP fail mungkin mempunyai tag HTML dan script.
PHP diproses dibahagian server dan dihantar kepada browser dalam format HTML.
PHP mempunyai fail yang berformat ".php", ".php3" atau ".phtml"
PHP + MySQL
• PHP yang digabungkan dengan MySQL adalah multi platform iaitu anda boleh membangunkan website anda dalam platform Unix atau Windows.
Kenape memilih PHP
PHP adalah multi platform ( Windows,Unix, Linux dan sebaginya.)
PHP disokong oleh semua jenis server seperti Apache dan IIS.
PHP percuma untuk didownload.
PHP mudah untuk dipelajari.
Dimana saya patut bermula?
Perkara pertama adalah anda perlu mempunyai sebuah server PHP, anda boleh mendapatkan hosting secara percuma atau bayaran. Dan anda juga boleh membuat server PHP anda sendiri. Tutorial untuk membuat server PHP telah saya sediakan. Sila Klik Disini.
String dalam PHP
String atau dalam melayunya rentetan adalah data yang mempunyai lebih dari satu huruf. Dalam tutorial kali ini, kita akan melihat beberapa fungsi yang terdapat dalam PHP untuk mengubah String. Kita mulakan dengan membuat satu permbolehubah dan masukan nilai kepada pembolehubah itu dengan nilai Hello World.
<?php
$txt="Hello World";
echo $txt;
?>
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 67
Paparan bagi kod diatas adalah seperti berikut:
Hello World
Sekarang kita akan menggunakan fungsi-fungsi yang terdapat dalam PHP.
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;
?>
Paparan bagi kod diatas adalah seperti berikut:
Hello World 1234
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 :
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 68
<?php
echo strlen("Hello world!");
?>
Paparan bagi kod diatas ialah:
12
Space juga dikira sebagai perkataan.
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.
Berikut adalah contoh penggunaan strpos()
<?php
echo strpos("Hello world!","world");
?>
Paparanya adalah seperti berikut:
6
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
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 69
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.
Komen dalam PHP
Dalam PHP, kita akan menggunakan // untuk membuat komen satu barus atau /* dan */ untuk membuat komen yang mempunyai banyak baris. Contohnya seperti berikut:
<html>
<body>
<?php
//Komen satu baris
/*
Komen
Pelbagai
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 70
Baris
*/
?>
</body>
</html>
Variable dalam PHP.
Variable atau dalam Melayunya, pembolehubah digunakan untuk menyimpan data-data seperti perkataan, nombor atau pun array. Array adalah satu data multidimensi. Setiap pembolehubah dalam PHP mestilah dimulakan dengan simbol $. Dibawah ada contoh untuk membuat pemboleh ubah:
$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 "".
PHP Bahasa yang Mudah
Dalam PHP, setiap pembolehubah boleh digunakan terus tanpa sebarang pernyataan awalan seperti C dan C++. PHP juga akan menentukan sendiri jenis data yang atan masukan. Berbanding dengan bahasa pengaturcaraan lain, anda perlu menyatakan jenis data yang anda gunakan untuk pembolehubah tersebut.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 71
Cara Menamakan Pembolehubah
Pembolehubah mestilah bermula dengan huruf atau underscore "_"
Pembolehubah hanya boleh mengandungi huruf, nombor dan underscore (a-Z,0-9,_)
Nama Permbolehubah mestilah tidak mempunyai jarak atau space.
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
Operator Keterangan Contoh Keputusan
+ Tambah x=2 x+2
4
- Tolak x=2 5-x
3
* Darab x=4 x*5
20
/ Bahagi 15/5 5/2
3 2.5
% Baki 5%2 10%8 10%2
1 2 0
++ Penambahan x=5 x++
x=6
-- Pengurangan x=5 x--
x=4
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 72
Assignment Operators
Operator Contoh Sama Seperti
= x=y x=y
+= x+=y x=x+y
-= x-=y x=x-y
*= x*=y x=x*y
/= x/=y x=x/y
.= x.=y x=x.y
%= x%=y x=x%y
Comparison Operators
Operator Keterangan Contoh
== sama dengan 5==8 returns false
!= tidak sama dengan 5!=8 returns true
> lebih besar dari 5>8 returns false
< kurang dari 5<8 returns true
>= lebih besar atau sama 5>=8 returns false
<= kurang atau sama 5<=8 returns true
Logical Operators
Operator Keterangan Contoh
&& and x=6 y=3
(x < 10 && y > 1) returns true
|| or x=6 y=3
(x==5 || y==5) returns false
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 73
! not x=6 y=3
!(x==y) returns true
Apa itu Array?
Array ialah satu variable atau pembolehubah yang boleh menyimpan banyak data dengan menggunakan satu nama sahaja.
Sebagai seorang pembangunan laman web, memahami array adalah sangat penting.Daripada anda mempunyai banyak pembolehubah yang menyimpan data berjenis yang sama, lebih baik anda yang mempunyai array. Setiap data dalam array di panggil element, dan setiap elemen ini mempunyai ID yang tersendiri supaya boleh dicapai.
Terdapat 3 jenis array.
• Array Bernombor - Arary yang mempunyai ID bernombor • Array Gabungan - Array yang mempunyai ID tersendiri • Multidimensi Array - gabungan 2 atau lebih array
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
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 74
$nama[0] = "Abu";
$nama[1] = "Along";
$nama[2] = "Yunus";
echo $nama[1] . " dan " . $nama[2] .
" adalah jiran ". $nama[0] ;
?>
Koding diatas akan menghasilkan output berikut :
Along dan Yunus adalah jiran Abu
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";
Cara menggunakan array gabungan adalah seperti berikut:
<?php
$umur['Abu'] = "32";
$umur['Along'] = "30";
$umur['Yunus'] = "34";
echo "Abu berumur " . $ages['Abu'] . " tahun.";
?>
Koding diatas akan menghasilkan output berikut:
Abu berumur 32 tahun.
Multidimensi array
Multidimensi array adalah gabungan 2 array. Setiap elemen dalam array yang pertama adalah berjenis array juga.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 75
Contoh
$keluarga = array
(
"Abu"=>array
(
"Siti",
"Minah",
"Halim"
),
"Along"=>array
(
"Joyah"
),
"Yunus"=>array
(
"Maria",
"Nor",
"Farah"
)
);
Dalam multidimensi array, ID akan disetkan secara otomatik. Dibawah adalah contoh untuk membolehkan anda memahami bagaimana multidimensi array
Array
(
[Abu] => Array
(
[0] => Siti
[1] => Minah
[2] => Halim
)
[Along] => Array
(
[0] => Joyah
)
[Yunus] => Array
(
[0] => Maria
[1] => Nor
[2] => Farah
)
)
Berikut adalah cara koding untuk memaparkan multidimensi array:
echo "Adakah " . $families['Abu'][2] .
" adalah keluarga Abu?";
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 76
Koding diatas akan menghasilkan output berikut:
Adakah Halim adalah keluarga Abu?
Fungsi If... Else digunakan apabila anda ingin membuat pilihan berdasarkan penyataan atau kriteria.
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.
elseif statement untuk kod yang mempunyai lebih dari 2 kriteria.
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;
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 77
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>
The ElseIf Statement
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 78
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)
kod akan diproses jika kriteria 2 adalah benar;
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>
The Switch Statement
Jika anda ingin kod anda diproses berdasarkan beberapa kriteria, penggunaan Switch lebih efektif berbanding dengan IF...Else.
Syntax
switch (pembolehubah)
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 79
{
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";
}
?>
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 80
</body>
</html>
Gelung adalah cara syntax dalam PHP untuk melakukan pengulangan sesuatu kod secara berterusan sehingga beberapa koding dimasukkan untuk menghadkan sesuatu pengulangan itu. Terdapat 4 jenis Gelung dalam PHP iaitu :
• while - gelung ini akan diulang sehingga kesemua syarat-syarat dipenuhi • do ... while - gelung ini akan diulang sehingga syarat-syarat dipenuhi sama seperti
while, tetapi bezanya do akan memproses kod terlebih dahulu dan diikuti pengesahan syarat yang dimasukkan.
• for - gelung akan diulang beberapa kali seperti yang dinyatakan dalam syarat • foreach - gelung akan diulang untuk setiap elemen-elemen dalam array.
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>
Gelung di atas akan diulang sebanyak 5 kali sebelum syarat dipenuhi.
Output ialah:
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 81
Nombor sekarang ialah 1 Nombor sekarang ialah 2 Nombor sekarang ialah 3 Nombor sekarang ialah 4 Nombor sekarang ialah 5
Syntax do...while
Do...while akan memproses kod terlebih dahulu sebelum syarat diperiksa.
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:
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 82
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.
for (nilai awal; syarat; pertambahn) { Kod untuk diproses; }
Contoh di bawah akan memaparkan Hello World! sebanyak 7 kali
<html> <body> <?php for ($i=1; $i<=7; $i++) { echo "Hello World!<br />"; } ?> </body> </html>
Syntax foreach
Gelung foreach digunakan untuk memanipulasikan array. Gelung foreach akan memproses setiap elemen dalam array dengan berpandukan kepada syarat yang ditetapkan.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 83
foreach (array) { kod untuk diproses; }
Contoh: Contoh dibawah akan memaparkan semua elemen dalam array.
<html> <body> <?php $arr = array("satu", "dua", "tiga"); foreach ($arr as $nombor) { echo "Nombor: " . $nombor . "<br />"; } ?> </body> </html>
Output
satu dua tiga
Borang & PHP
PHP boleh memproses borang yang dibuat dengan menggunakan HTML. Selain PHP, ASP dan CGI boleh digunakan untuk menproses borang.
Contoh borang PHP.
<html>
<body><form action="nama.php" method="post">
Name: <input type="text" name="nama" />
Umur: <input type="text" name="umur" />
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 84
<input type="submi" value="Hantar" />
</form></body>
</html>
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'.
Di dalam file 'nama.php' kodingnya adalah seperti berikut:
<html>
<body>
Selamat datang <?php echo $_POST["nama"]; ?>.<br />
Anda berumur <?php echo $_POST["umur"]; ?> tahun.
</body>
</html>
Output daripada koding diatas ialah:
Selamat datang halim.
Anda berumur 23 tahun.
PHP $_GET dan $_POST akan diterangkan dalam tutorial seterusnya.
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.
Walau bagaimanapun, pengesahan pada komputer pelayar akan meningkatkan risiko website tersebut untuk diceroboh.
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
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 85
Fungsi fopen() mempunyai dua parameter, parameter pertama digunakan untuk menentukan fail mana yang patut dibuka, dan parameter kedua, menentukan format fail tersebut dibuka.
Contohnya:
<html>
<body>
<?php
$file=fopen("selamatdatang.txt","r");
?>
</body>
</html>
Berikut adalah format-format untuk menentukan cara fail tersebut dibuka
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.
Contoh menggunakan fopen().
<html>
<body>
<?php
$file=fopen("selamatdatang.txt","r") or exit("Fail tidak dapat dibuka!");
?>
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 86
</body>
</html>
Menutup Fail
Fungsi fclose() digunakan untuk menutup fail yang dibuka:
<?php
$file = fopen("test.txt","r");
//kod untuk diproses
fclose($file);
?>
Memeriksa sehingga akhir kandungan fail
Fungsi feof() digunakan untuk memeriksa jika kandungan fail yang dibaca sudah sampai pada penghujung.
Fungsi ini digunakan jika anda mempunyai data yang berulang yang tidak diketahui penghujungnya.
Nota: Anda tidak boleh membaca fail dalam format w, a dan x.
if (feof($file)) echo "Penghujung Fail";
Membaca fail baris kebaris
Fungsi fgets() digunakan untuk membaca dari baris ke baris
Contoh:
<?php
$file = fopen("selamatdatang.txt", "r") or
exit("Gagal membuka fail!");
//Paparkan output sehingga penghujung fail
while(!feof($file))
{
echo fgets($file). "<br />";
}
fclose($file);
?>
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 87
Membaca huruf demi huruf
Fungsi fgetc() digunakan untuk membaca huruf demi huruf dalam satu fail.
Contoh:
<?php
$file=fopen("selamatdatang.txt","r") or exit("Gagal membuka fail!");
while (!feof($file))
{
echo fgetc($file);
}
fclose($file);
?>
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>
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 88
<?php include("header.php"); ?>
<h1>Selamat datang ke Laman web saya</h1>
<p>Sedikit isi kandungan</p>
</body>
</html>
Contoh 2:
Jika anda mempunyai menu yang digunakan untuk kesemua laman web anda, anda boleh menggunakan fungsi ini.
contoh koding dalam fail "menu.php"
<a href="www.kripkornstudios.com/index.php">Laman Utama</a> <a href="www.kripkornstudios.com/profil.php ">Profil</a><a href="www.kripkornstudios.com/hubungi.php ">Hubungi</a>
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>
<h1>Selamat datang ke laman web saya</h1>
<p>Sedikit isi kandungan</p>
</body>
</html>
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 89
Fungsi require()
Fungsi require() adalah sama dengan include(), cuba perbezaannya pada cara ia mengatasi ralat. Dibawah saya masukkan contoh perbezaan antara include() dan require()
Contoh ralat menggunakan include()
<html>
<body>
<?php
include("tiadafail.php");
echo "Selamat Datang!";
?>
</body>
</html>
Paparan ralat bagi include()
Warning: include(tiadafail.php) [function.include]:
failed to open stream:
No such file or directory in C:\home\website\test.php on line 5
Warning: include() [function.include]:
Failed opening 'tiadafail.php' for inclusion
(include_path='.;C:\php5\pear')
in C:\home\website\test.php on line 5
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>
Dan paparan ralat:
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 90
Warning: include(tiadafail.php) [function.include]:
failed to open stream:
No such file or directory in C:\home\website\test.php on line 5
Warning: include() [function.include]:
Failed opening 'tiadafail.php' for inclusion
(include_path='.;C:\php5\pear')
in C:\home\website\test.php on line 5
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:
<form action="nama.php" method="get"> Nama: <input type="text" name="name" /> Umur: <input type="text" name="umur" /> <input type="submit" value="Hantar"/> </form>
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.
Selamat datang <?php echo $_GET["nama"]; ?>.<br /> Anda berumur <?php echo $_GET["umur"]; ?> tahun.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 91
Kenapa menggunakan $_GET?
Kaedah GET digunakan supaya laman tersebut boleh ditanda atau 'bookmark'. Walau bagaimanapun jangan menggunakan kaedah GET untuk menghantar kata laluan. Ini kerana kata laluan yang dihantar menggunakan GET akan dipapar pada 'address bar'.
Pembolehubah $_REQUEST
PHP $_REQUEST merupakan pemboleh ubah yang boleh mengumpul data dari $_GET, $_POST dan juga $_COOKIE.
Contoh:
Selamat datang <?php echo $_REQUEST["nama"]; ?>.<br /> Anda berumur <?php echo $_REQUEST["aga"]; ?> tahun!
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:
<form action="nama.php" method="post"> Nama: <input type="text" name="name" /> Umur: <input type="text" name="umur" /> <input type="submit" value="Hantar"/> </form>
Apabila pelayar menekan butang Hantar, URL anda akan kelihatan seperti berikut:
http://www.kripkornstudios.com/nama.php
Koding di dalam nama.php yang menggunakan "method POST" adalah:
Selamat datang <?php echo $_POST["nama"]; ?>.<br /> Anda berumur <?php echo $_POST["umur"]; ?> tahun.
Kenapa $_POST?
Data yang menggunakan kaedah POST tidak akan dipaparkan pada URL.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 92
Pembolehubah ini tidak mempunyai had maksimum untuk huruf.
Laman yang menggunakan kaedah POST tidak akan dapat ditanda.
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.
Membuat fungsi PHP
Fungsi adalah ada blok kod yang akan diproses apabila anda memerlukannya.
Cara-cara membuat fungsi dalam PHP
1. Semua fungsi mestila bermula dengan perkataan 'function()' 2. Nama fungsi boleh bermula dengan menggunakan abjad atau pun underscore.
Nombor tidak dibenarkan. 3. Gunakan 'curly braces' "{" untuk petanda permulaan koding anda. 4. Tuliskan koding anda. 5. 'curly braces' "}" untuk petanda koding anda tamat.
Contoh:
Koding dibawah menggunakan fungsi untuk menulias nama portal ini.
<html>
<body>
<?php
function Namaportal()
{
echo "KripkornStudios";
}
Namaportal();
?>
</body>
</html>
Koding diatas akan memaparkan output:
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 93
KripkornStudios
Contoh 2:
<html>
<body>
<?php
function NamaPortal()
{
echo "KripkornStudios";
}
echo "Hello semua!<br />";
echo "Portal ini bernama ";
NamaPortal();
echo ".<br />Saya ulang sekali lagi, ";
NamaPortal();
echo " adalah nama portal ini.";
?>
</body>
</html>
Koding di atas akan memaparkan output:
Hello semua!
Portal ini bernama KripkornStudios.
Saya ulang sekali lagi, KripkornStudios adalah nama portal ini
Penggunaan Parameter.
Fungsi diatas adalah fungsi yang ringkas dan mudah. Ia hanya memaparkan satu rentetan atau string yang statik.
Untuk menambahkan kebolehkan fungsi, Parameter digunakan. Parameter bertindak seperti pembolehubah. Parameter dimasukan didalam kurung selepas nama fungsi,
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 94
Contoh
<html>
<body>
<?php
function TulisNama($nama)
{
echo $fname . "<br>";
}
echo "Nama saya ialah ";
TulisNama("Abu");
echo "Nama saya ialah ";
TulisNama("Ali");
echo "Nama saya ialah ";
TulisNama("Mamat");
?>
</body>
</html>
Koding diatas akan memaparkan output :
Nama saya ialah Abu
Nama saya ialah Ali
Nama saya ialah Mamat
Contoh 2 menggunakan 2 parameter::
<html>
<body>
<?php
function Nama($fname,$umur)
{
echo $fname . " berumur" . $umur . " tahun<br />";
}
echo "Nama saya ";
Nama("Ali","32");
echo "Nama saya ";
Nama("Abu","40");
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 95
echo "Nama saya ";
Nama("Minah","18");
?>
</body>
</html>
Koding diatas akan menghasilkan output berikut:
Nama saya Ali berumur 32 tahun
Nama saya Abu berumur 40 tahun
Nama saya Ali berumur 32 tahun
Fungsi yang mengembalikan nilai
Fungsi juga boleh memulangkan nilai, contohnya seperti dibawah.
<html>
<body>
<?php
function add($x,$y)
{
$total = $x + $y;
return $total;
}
echo "1 + 16 = " . add(1,16);
?>
</body>
</html>
Output diatas ialah:
1 + 16 = 17
Dengan Menggunakan PHP, anda boleh mengupload fail kedalam pelayan web anda memlalui pelayar web.
Mencipta Borang Upload
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 96
Untuk membolehkan pengguna mengupload fail kedalam pelayan web anda, menggunakan borang adalah jalan yang terbaik. Koding dibawah adalah koding untuk jadual bagi memboleh proses mengupload.
<html>
<body>
<form action="upload.php" method="post"
enctype="multipart/form-data">
<label for="file">Nama Fail:</label>
<input type="file" name="file" id="file" />
<br />
<input type="submit" name="submit" value="Hantar" />
</form>
</body>
</html>
Mencipta Koding Upload
Koding untuk membolehkan fail diupload ditulis didalam fail "upload.php"
<?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"];
}
?>
Berikut adalah parameter yang digunakan
• $_FILES["file"]["name"] - nama fail yang diupload • $_FILES["file"]["type"] - jenis fail • $_FILES["file"]["size"] - saiz dalam byte • $_FILES["file"]["tmp_name"] - nama direktori dimana fail tersebut disimpan • $_FILES["file"]["error"] - memaparkan ralat jika fail gagal diupload
Ini cara yang paling ringkas untuk mengupload fail. Untuk keselamatan, kita perlu meletakan had bagi fail yang diupload
Had untuk Upload
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 97
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";
}?>
Menyimpan Fail yang diupload
Koding diatas menggunakan direktori sementara untuk memindahkan fail dari komputer pelayar kepada pelayan web. Direktori tersebut ialah temp.
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 />";
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 98
echo "Saiz: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />"; echo "Direktori Sementara: " . $_FILES["file"]["tmp_name"] . "<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.
Apa itu Timestamp?
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 99
Timestamp adalah bilangan saat semenjak 1 January 1970 pada 00:00:00 GMT. Ini juga dikenali sebagai Unix Temstamp.
Membuat Format Tarikh
Parameter pertama dalam fungsi date() ialah bagaimana paparan bagi tarikh dan masa. Ia menggunakan huruf untuk menunjukan fomat tarikh dan masa. Dibawah ini adalah senarai huruf yang boleh digunakan.
• d - Hari dalam bulan tersebut dalam nombor (01-31) • m -Bulan dalam nombor (01-12) • Y - Tahun ini dengan menggunakan 4 digit nombor (2008)
Simbol seperti "/", ".", atau "-" boleh digunakan diantara huruf tersebut untuk memudahkan tarikh dibaca.
"; echo date("Y.m.d"); echo " "; echo date("Y-m-d"); ?>
Akan memaparkan output:
2008/11/11 2008.11.11 2008-11-11
Menggunakan fungsi mktime()
The second parameter in the date() function specifies a timestamp. This parameter is optional. If you do not supply a timestamp, the current time will be used.
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)
Contoh meggunakan mktime() untuk mengetahui hari esok.
Output
Hari ini ialah 2008/11/08 Esok ialah 2008/11/09
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 100
MySQL adalah pangkalan data open source yang paling terkenal.
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
MySQL adalah pangkalan data
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 Pangkalan Data
Setiap pangkalan data kebiasaanya mempunyai 1 atau lebih jadual. Setiap jadual ini pula dibezakan dengan menggunakan nama yang unik. Contohnya pelajar, guru, pelanggan. Setiap jadual mempunyai baris yang meyimpan rekod.
Dibawah adalah contoh jadual bagi Pelajar
Nama NamaAyah Alamat Bandar
Ali Razak Tok Bali Pasir Putih
Yunus Ismail Kg Palekbang Tumpat
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 101
Abu Halim Mersing Miri
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.
Contohnya seperti dibawah:
SELECT NamaAyah FROM Pelajar
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
Membuat Sambugan kepada MySQL
Sebelum anda membuat pencapaian kedalam pangkalan data, anda mestila membuat sambungan terlebih dahulu kepada pangkalan data.
Dalam PHP, ini boleh dilakukan dengan mudah menggunakan fungsi mysql_connect().
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 102
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()); }
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 103
// kod anda mysql_close($con); ?>
Mencipta Pangkalan Data
Tatatanda CREATE DATABASE digunakan untuk mencipta pangkalan data dalam MySQL.
Tatatanda
CREATE DATABASE database_name
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.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 104
Tatatanda:
CREATE TABLE nama_jadual ( nama_lajur1 jenis_data, nama_lajur2 jenis_data, nama_lajur3 jenis_data, .... )
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 RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 105
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 Keys dan Auto Increment Fields
Nota: Kami tidak mengalihbahasa perkataan Primary Key dan auto Increment untuk memudahkan process pembelajaran.
Setiap jadual sepatutnya mempunyai satu lajur primary key.
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.
$sql = "CREATE TABLE Pelajar ( IDPelajar int NOT NULL AUTO_INCREMENT, PRIMARY KEY(IDPelajar), Nama varchar(15), NamaAyah varchar(15), Umur int )"; mysql_query($sql,$con);
Memasukan Data Dalam Jadual
Tatatanda INSERT INTO digunakan untuk menambah data atau rekod baru didalam pangkalan data.
Contoh:
INSERT INTO nama_jadual VALUES (data1, data2, data3,...)
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 106
Contoh yang kedua untuk memasukan data kedalam lajur yang spesifik:
INSERT INTO nama_jadual(lajur1, lajur2, lajur3,...) (data1, data2, data3,...)
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_query("INSERT INTO Pelajar (Nama, NamaAyah, Umur)
VALUES ('Mamat', 'Husin', '14')"
); mysql_query("INSERT INTO Pelajar (Nama, NamaAyah, Umur)
VALUES ('Hasmuni', 'Arifin', '16')"
); mysql_close($con); ?>
Memasukan Data Menggunakan Borang
Sekarang kita akan membina borang HTML supaya data boleh dimasukkan dengan kedalam jadual "Pelajar".
<html> <body> <form action="masuk.php" method="post"> Nama: <input type="text" name="Nama" /> NamaAyah: <input type="text" name="NamaAyah" />
Umur: <input type="text" name="Umur" /> <input type="submit" />
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 107
</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 .
Ini koding untuk "masuk.php"
<?php $con = mysql_connect("localhost","root",""); if (!$con) { die('Sambungan gagal: ' . mysql_error()); } mysql_select_db("db_saya", $con); $sql="INSERT INTO Pelajar (Nama, NamaAyah, Umur)
VALUES ('$_POST[Nama]','$_POST[NamaAyah]','$_POST[Umur]')"
; if (!mysql_query($sql,$con)) { die('Ralat: ' . mysql_error()); } echo "1 Data ditambah"; mysql_close($con) ?>
Mencapai Data dari Pangkalan Data
Tatatanda Select digunakan untuk mecapai data dari pangkalan data.
Tatatanda
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 108
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); $result = mysql_query("SELECT * FROM Pelajar"); while($row = mysql_fetch_array($result)) { echo $row['Nama'] . " " . $row['NamaAyah']; echo "<br />"; } mysql_close($con); ?>
Penggunaan * bermaksud pilih kesemua data dalam jadual tersebut.
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'].
Output bagi kod diatas ialah:
Ali Razak
Yunus Ismail
Abu Halim
Memaparkan Data dalam Jadula HTML
Contoh dibawah adalah sama dengan diatas cuma bezakan, data akan dipaparkan dalam jadual HTML.
<?php
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 109
$con = mysql_connect("localhost","root",""); if (!$con) { die('Sambungan gagal: ' . mysql_error()); } mysql_select_db("db_saya", $con); $result = mysql_query("SELECT * FROM Pelajar"); echo "<table border='1'> <tr> <th>Nama</th> <th>Nama Ayah</th> </tr>"; 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); ?>
Output bagi koding diatas ialah
Nama Nama Ayah
Ali Razak
Yunus Ismail
Abu Halim
Penggunaan WHERE
Perkataan "WHERE" digunakan untuk mencapai data yang spesifik daripada pangkalan data.
Tatatanda
SELECT nama_lajur
FROM nama_jadual
WHERE nama_lajur operator kriteria_anda
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 110
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); $result = mysql_query("SELECT * FROM Pelajar WHERE Nama='Ali'"); 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.
Pada asasnya, Order By akan menyusun secara menaik
Jika anda ingin membuat susunan secara menurun adalan boleh menambah perkataan DESC.
Tatatanda
SELECT * nama_lajur
FROM nama_jadual
ORDER BY nama_lajur ASC/DESC
Contoh dibawah akan memaparkan data dalam jadual Pelajar berdasarkan lajur "Umur".
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 111
<?php $con = mysql_connect("localhost","root",""); if (!$con) { die('Sambungan gagal: ' . mysql_error()); } mysql_select_db("db_saya", $con); $result = mysql_query("SELECT * FROM Pelajar ORDER BY Umur"); 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
Order by Menggunakan 2 lajur
Anda juga boleh membuat susun menggunakan 2 lajur. Susunan akan dibuat menggunakan lajur pertama (jika data sama susan akan menggunakan lajur kedua)
Tatatanda
SELECT nama_lajur
FROM nama_jadual
ORDER BY lajur_pertama, lajur_kedua
Memadam data
Penggunakan pernyataan DELETE boleh digunakan untuk memadam data dalam pangkalan data.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 112
Tatatanda
DELETE FROM nama_jadual
WHERE nama_lajur = nilai
Nota : Penggunaan WHERE dalam tatatanda DELETE akan membuang semua rekod yang mempunyai kriteria yang dinyatakan.
Contoh:
Kita akan membuang data "Pelajar" yang bernama "Ali"
<?php $con = mysql_connect("localhost","root",""); if (!$con) { die('Sambungan gagal: ' . mysql_error()); } mysql_select_db("db_saya", $con); mysql_query("DELETE FROM pelajar WHERE Nama='Ali'"); mysql_close($con); ?>
Mengemaskini data menggunakan UPDATE
Pernyataan UPDATE digunakan untuk mengemaskini data dalam pangkalan data.
Tatatanda
UPDATE nama_jadual
SET nama_lajur=nilai,
WHERE nama_lajur_yang_ingin_diubah = 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".
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 113
<?php $con = mysql_connect("localhost","root",""); if (!$con) { die('Sambungan gagal: ' . mysql_error()); } mysql_select_db("db_saya", $con); mysql_query("UPDATE Pelajar SET Nama_Ayah = 'Abdul Razak' WHERE Nama = 'Ali'"); mysql_close($con); ?>
Ouput selepas dikemaskini:
Nama Nama Ayah
Ali Abdul Razak
Yunus Ismail
Abu Halim
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 114
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
Anda boleh mencapai phpmyadmin dengan menaip
http://localhost/phpmyadmin
Live Site
Anda boleh mencapai phpmyadmin dengan memasukkan ruangan CPanel dan klik icon Phpmyadmin
Berikut adalah paparan antara muka phpmyadmin.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 115
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.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 116
Langkah-langkah :
1. Klik Browse dan cari Fail yang dikehendaki.
2. Klik Go
Dengan menggunakan Phpmyadmin, anda boleh mengeksport atau membuat salinan pangkalan data anda untuk disimpan didalam komputer anda. Proses ini dilakukan kerana beberapa tujuan :
1. Jika berlaku kerosakan anda mempunyai salinan untuk memulihkan website anda.
2. Untuk memboleh proses migrasi Joomla dilakukan secara manual.
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
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 117
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.
Apa itu SQL
• SQL adalah akronim untuk Strcutured Query Language, • SQL membenarkan anda mencapai pangkalan data.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 118
• SQL adalah ANSI standard.
Apa yang SQL boleh lakukan?
• SQL boleh memproses arahan terdapat pangkalan data • SQL boleh mengambil data dari pangkalan data • SQL boleh memasukkan data ke dalam pangkalan data • SQL boleh mengubah data dalam pangkalan data • SQL boleh memadam data dalam pangkalan data • SQL boleh membuat pangkalan data yang baru • SQL boleh membuat jadual baru dalam pangkalan data. • SQL boleh menyimpan set-set arahan dalam pangkalan data. • SQL boleh membuat 'view' untuk pangkalan data. • SQL boleh membenarkan sebahagian pengguna sahaja yang dapat melihat
pangkalan data.
SQL dan Laman Web Anda
• 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
• RDBMS akronim bagi Relational Database Management System. • RDBMS adalah asas untuk SQL. • Data yang disimpan dalam RDBMS panggil jadual (table). • Jadual mempunyai lajur dan baris.
Jadual Pangkalan Data
Sebuah pangkalan data biasanya mempunyai satu atau lebih jadual. Setiap jadual mempunyai nama yang unik, contohnya "Pelajar", "Guru". Baris dalam jadual menyimpan data.
Contoh dibawah adalah jadual yang bernama "Pelajar"
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 119
P_Id Nama Ayah Negeri Umur
1 Abu Mamat Johor 20
2 Ali Yunus Kelantan 19
3 Husin Ismail Perlis 12
Jadual di atas mempunyai 3 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.
SELECT * FROM Pelajar
Nota : SQL adalah aturcara yang tidak mementingkan perbezaan huruf besar atau kecil.
SQL DML dan DDL
SQL boleh dibahagikan kepada 2 bahagian iaitu DML(Data Manipulation Language) dan satu lagi DDL(Data Defination Language).
DML berfungsi untuk mengambil, mengubah, membuang dan menambah data dalam SQL
Contoh tatatanda dalam DML
• SELECT - mencapai data dalam jadual • UPDATE - mengubah data • DELETE - membuang data • INSERT INTO memasukan data
DDL pula berfungsi untuk membuat pengubahsuaian pada pangkalan data.
• CREATE DATABASE - membuang pangkatan data baru • ALTER DATABASE - mengubahsuai pangkalan data • CREATE TABLE - membuat jadual baru • ALTER TABLE - mengubahsuai jadual • DROP TABLE - memadam jadual • CREATE INDEX - mencipta index • DROP INDEX - memadam index.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 120
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.
Joomla! dibebaskan di bawah Lesen Dokumentasi Bebas GNU.
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.
Pasukan pembangunan mencipta sebuah laman web yang dipanggil OpenSourceMatters untuk mengedarkan maklumat kepada para pengguna, pemaju, pereka web dan komuniti secara amnya. Ketua projek pada waktu itu, Andrew Eddie, juga dikenali sebagai
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 121
"MasterChief," menulis sepucuk surat terbuka kepada komuniti, yang mucul di papan pemberitahuan di forum awam di mamboserver.com.
Menjelang keesokkan hari, 1000 orang telah menyertai laman forum opensourcematters.org dengan kebanyakan mesej menunjukkan perkataan-perkataan semangat dan galakan kepada Pasukan Pembangunan. Laman web berkenaan menerima komen dan artikel berita berhubung peristiwa berkenaan di newsforge.com, eweek.com, and ZDnet.com. CEO Miro, Peter Lamont, memberi respon awam di dalam artikel bertajuk Kontroversi Sumber Terbuka - 20 Soalan Bersama Miro.
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.
Proses Menginstall Joomla
Perkara yang diperlukan sebelum proses installion bermula ialah:
1. Server php (Wamp,Xampp, atau EasyPHP) Tutorial tentan Wamp boleh didapati disini : www.kripkornstudios.com.my/video/cara-cara-memasang-server-wamp Dalam tutorial ini, saya akan menggunakan server Wamp.
2. Pakej Joomla yang lengkap. Anda boleh mendownload disini: www.joomla.org/download.html Dalam tutorial ini, saya akan menggunakan English (UK) 1.5.9 Full Package
Langkah-langkah menginstall Joomla 1.5.x
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
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 122
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
4. Anda akan mendapat paparan seperti berikut:
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 123
5. Klik Next pada ruangan atas.
6. Ruangan Pre-Installation akan ditunjukan, pastikan Semua ditulis Yes seperti dibawah:
7. Klik Next pada ruangan atas.
8. Lisence akan dipaparkan, anda boleh baca jika anda mahu atau teruskan dengan menekan butang Next.
9. Pada ruangan Database Configuration, Masukan nilai berikut: Database Type : Mysql
Host Name : Localhost Username: root
Password: Database Name:Joomla
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 124
10. Klik 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.
13. Masukkan email admin dan kata kunci.
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.
16. Jika anda berjaya, anda akan mendapat paparan berikut:
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 125
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.
Tahniah, anda telah berjaya meninstall Joomla.
Tutorial disediakan oleh Badang
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.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 126
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.
SEBELUM MEMULAKAN MIGRASI
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
Lakukan proses pemasangan komponen “JoomlaPack” seperti mana biasa. Seterusnya ialah melakukan proses ‘backup’ sistem Joomla 1.0 menggunakan “JoomlaPack” seperti berikut:
Langkah 1: Mula dari menu – “Components” – “JoomlaPack” – “Control Panel”
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
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 127
‘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 RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 128
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”.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 129
Pilih “Backup Your Site” dan tunggu sehingga selesai.
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.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 130
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/.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 131
Langkah 1: Setelah pemasangan selesai, mulakan komponen “Migrator” anda. Klik pada menu “Components” > “Migrator”.
Langkah 2: Anda seterusnya akan dipaparkan dengan paparan seperti di bawah. Buat masa ini, anda hanya perlu fokuskan kepada pautan “Create Migration SQL File”.
Langkah 3: Kemudian, anda perlu menunggu sehingga “Migrator” selesai menjalankan tugasnya tanpa sebarang ralat seperti paparan berikut:
Berikutnya, pilih pautan “Download” untuk memuat turun fail migrasi yang telah disiapkan.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 132
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:
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 133
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:
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 134
1. Pilih “Load Migration Script” . 2. Pada “Old Table Prefix”, isikan maklumat prefiks untuk pangkalan data yang
digunakan pada Joomla 1.0 anda. Secara default, Joomla menggunakan prefiks jos_ pada pangkalan data semasa proses pemasangan.
3. Manakala, “Old Site Encoding” pula merujuk kepada jenis penyahkodan pangkalan data yang digunakan. Jika anda tidak mengubah defaultnya semasa pemasangan Joomla 1.0, pangkalan data lama dinyahkod dalam bentuk “latin1_” atau “UTF-8”. Jadi, kekalkan default pemasangan dicadangkan iaitu iso-8859-1.
4. Pilih skrip migrasi anda pada komputer dengan menekan butang “Browse” untuk dimuatnaik.
5. Pastikan ruangan ini yang ditanda, kecuali anda melakukan pemasangan Joomla secara manual.
6. Tekan butang “Upload and Execute”.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 135
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 3: Pilih menu “Components” > “Migration Assistant”.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 136
Langkah 4: Pada paparan ini, beberapa perkara perlu diberi perhatian seperti yang dimaklumkan pembangunnya, iaitu:
1. Versi komponen Migrator yang digunakan untuk proses migrasi. 2. Amaran bahawa semua data asal laman baru anda akan dipadamkan
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”.
SELEPAS SELESAI MIGRASI
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 137
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.
Profil Ahli: Komponen “Community Builder - CB” Untuk pengguna yang tidak menggunakan sebarang komponen bagi profil ahli, semua rekod keahlian dapat dipindahkan dengan baik semasa proses migrasi sebelumnya.
Bagaimana pun, jika anda menggunakan komponen “Community Builder”, anda terpaksa melakukan pemindahan ahli secara manual. Sekiranya, semua profil keahlian CB berada pada pangkalan data yang sama, ianya agak mudah untuk diselesaikan. Muat turun komponen tersebut untuk Joomla 1.5 Native. Pasangkannya pada laman web baru anda. Sebagai permulaan, hanya lakukan konfigurasi pada komponen CB yang baru dipasang.
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”.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 138
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”.
Setelah semuanya selesai, kembali kepada bahagian Administrator (back-end), untuk meneruskan ketetapan (setting) pada komponen “Community Builder” anda.
NOTA: Cara yang sama boleh digunakan untuk komponen lain seperti FireBoard.
Selamat Mencuba!
TUTORIAL TAMAT
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 139
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.
Proses Installation Drupal pada Localhost.
Perkara yang anda perlukan sebelum membuat proses installation
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.
2. Drupal Core - muat turun disini. Dapatkan version terbaru.
Nota : Semasa artikel ini ditulis, version drupal adalah 6.6
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.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 140
- Klik kanan pada fail drupal, dan pilih Extract to drupal 6.6
-Anda akan perhatikan satu direktori bernama '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 RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 141
Nota: Jika icon tidak kelihatan sila pergi Start>Program>Wamp Server>Start Wamp Server (Jika anda menggunakan wamp dan juga Windows XP)
3. Buka pelayar web anda, dan tuliskan alamat berikut:
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.
6. Tuliskan alamat berikut pada pelayar web anda
locahost/phpmyadmin
-pada ruangan create new database, cipta satu pangkalan data baru. Dalam tutorial ini, kita akan menggunakan websaya sebagai contoh.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 142
-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,
- Pilih 'Install Drupal in English'
-Mesej berikut akan terpapar:
-Dalam direktori websaya, cara direktori yang bernama sites/default.
(www/websaya/sites/default/)
-Anda akan dapati terdapat satu fail yang bernama default.settings.php, ubah nama fail tersebut kepada settings.php.
-Kembali pada laman installation drupal dan klik refresh (F5).
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 143
Bersambung pada halaman berikutnya...
8. Jika anda mendapat paparan berikut, anda telah berjaya untuk membuat proses installation.
Pada ruangan
Database Name : websaya
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.
-Klik Save and Continue
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.
-Cari perkataan dibawah ini
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 144
$db_url = 'mysql://username:password@localhost/databasename';
dan ubahkan kepada ini
$db_url = 'mysql://root@localhost/websaya';
dan simpan.
-Refresh atau F5 pelayar web anda.
9. Anda akan mendapat paparan berikut jika tiada sebarang masalah:
-Isikan ruangan
Site Name
Site email address
Bahagian administrator.
-Klik Save and Continue.
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.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 145
Antaramuka Asas 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.)
Perkara seterusnya, adalah amat penting anda memahami bahagian-bahagian dalam drupal. Bahagian-bahagian ini dinamakan sebagai "region" di dalam drupal.
Berikut adalah beberapa "region" yang terdapat pada antaramuka asal drupal.
Pada setiap "region" anda boleh meletakan "block"
"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.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 146
Membuat kandungan dalam Drupal
Berikut adalah cara- cara untuk membuat kandungan dalam drupal.
1. Login sebagai admin
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.)
4.Dalam tutorial ini saya akan menggunakan Page sebagai contoh.
5. Klik page. Dibawah adalah gambar bagi paparan page.
Title : Tajuk bagi artikel anda.
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>
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 147
Body : Ruangan untuk menulis artikel.
Input Format : Jenis format yang ingin anda gunakan.
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
sebelah kanan laman web anda.
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 148
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. Aziemart dot COM Enterprise 101, Pantai Street, Sri Pantai Village, 86800 Mersing Johor, Malaysia. Tel : 607 -7921778 Faks : 607 -7921778 Hak Cipta Terpelihara 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
NOTA RUJUKAN KURSUS WDA –DIOLAH OLEH PENULIS: CIKGUITI
Kursus Web Development and Administrator © Hakcipta Terpelihara Aziemart.com™ 149
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. Tuntutan-tuntutan Pelanggaran Hak Cipta Perlu Mempunyai Syarat-syarat Berikut :
• Tandatangan (secara elektronik atau tidak) orang yang bertanggungjawab bertindak mewakili pemilik hak cipta.
• Gambaran hasil/karya yang anda dakwa telah melanggari hak cipta.
• Di mana terletaknya bahan dalam laman web yang anda dakwa telah melanggari
hak cipta.
• Alamat, nombor telefon dan alamat e-mel anda.
• Kenyataan yang menyatakan bahawa pihak yang membuat aduan, iaitu dia/mereka mempunyai sepenuh keyakinan bahawa penggunaan bahan yang diadukan tidak mendapat keizinan daripada pemilik hak cipta, agen, atau undang-undang.
• 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.
Top Related