Tutorial Melayu

Rounded corners menggunakan CSS

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */

List navigasi (menu) standard

Pautan (link) navigasi atau menu biasanya dibuat dengan menggunakan unordered list atau “ul” seperti contoh di bawah.

<ul id="nav">
   <li><a title="Home Page" href="#" rel="nofollow">Home</a></li>
   <li><a title="About Page" href="#" rel="nofollow">About</a></li>
   <li><a title="Clients Page" href="#" rel="nofollow">Clients</a></li>
   <li><a title="Contact Page" href="#" rel="nofollow">Contact Us</a></li>
</ul>

List ini kemudiannya boleh ditukar rupanya dengan menggunakan CSS. Salah satu contoh penggunaan CSS untuk list ul di mana dengan menggunakan selector list-style: none, saya membuang dot hitam di tepi setiap elemen di dalam list tersebut.

#nav {
	margin: 0;
	padding: 0;
}
#nav li {	
	list-style: none;
	display: inline;
}
#nav li a{
	padding: 5px;
	color: black;
	text-decoration: none;
	background-color: #f7deba;
}
#nav li a:hover{
	background-color: #f99679;
}

Belajar CSS (positioning) dalam 10 langkah

Untuk tutorial ini, saya menggunakan html ini sebagai panduan.

<div id="wrapper">
<div id="div-sebelum"><p>div-sebelum</p></div>
<div id="div-1">
<div id="div-1-padding">
<p>id = div-1</p>
<div id="div-1a">
<p>div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Integer pretium dui sit amet felis. Integer sit amet diam. 
Phasellus ultrices viverra velit.</p>
</div>
<div id="div-1b">
<p>div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Integer pretium dui sit amet felis. Integer sit amet diam. 
Phasellus ultrices viverra velit.</p>
</div>
<div id="div-1c"><p>div-1c</p></div>
</div>
</div>
<div id="div-selepas"><p>div-selepas</p></div>
</div>

1. Posisi:static

Jika tidak ditentukan, posisi untuk setiap elemen adalah position:static yang bermaksud elemen tersebut diposisikan ditempat yang sepatutnya di dalam dokumen.

#div-1 {
 position:static;
}

2. Posisi:relative

Jika menggunakan posisi relative, kita boleh menggunakan top, bottom, right atau left untuk menggerakkan elemen tersebut relatif kepada posisi sepatutnya elemen tersebut berada (posisi static) di dalam dokumen.

#div-1 {
 position:relative;
 top:20px;
 left:-40px;
}

3. Posisi:absolute

Untuk posisi absolute, elemen tersebut akan di”buang” daripada susunan dokumen html dan posisinya akan ditentukan sepenuhnya oleh kita. Sebagai contoh, div-1a dialihkan ke atas kanan pelayar.

#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

Dan oleh kerana div-1a di”buang” dari kedudukan asal dokumen, div-1b mengambil alih kedudukan div-1a di dalam dokumen.

4. Posisi:relative + Position:absolute

Jika posisi div-1 ditentukan sebagai relatif, kesemua elemen di dalam div-1 akan diposisikan relatif kepada div-1. Sebagai contoh, kita menggerakkan div-1a ke atas kanan div-1.

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

5. Posisi:2 kolum absolute

Dengan menggunakan teknik di atas, kita boleh membuat layout 2 kolum dengan menempatkan div-1a ke kiri dan div-1b ke kanan. Tetapi, oleh kerana kita menggunakan posisi absolute, div-1a dan div-1b telah menutup div-1c dan div-selepas.

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

6. Posisi:2 kolum absolute + height

Salah satu cara untuk menangani masalah di atas adalah dengan menetapkan height untuk div-1. Untuk posisi ini, div-1c masih lagi tersorok di belakang div-1a dan div-1b.

#div-1 {
 position:relative;
 height : 400px;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

7. Posisi:float

Untuk ketinggian (height) yang berubah-ubah mengikut kandungan div, posisi absolute seperti di atas tidak dapat digunakan. Float digunakan untuk menolak elemen tertentu ke kiri atau ke kanan. Dalam contoh di bawah, div-1a ditolak ke kiri.

#div-1a {
 float:left;
 width:200px;
}

8. Posisi:kolum float

Dengan menggunakan float, kita boleh membuat susun atur 2 kolum dengan menolak div-1a dan div-1b ke kiri. Tetapi jika kita perhatikan, disebabkan oleh float left div-1b, div-1c turut ditolak ke kiri div-1b.

#div-1a {
 float:left;
 width:150px;
}
#div-1b {
 float:left;
 width:150px;
}

9. Posisi:kolum float + clear

Untuk menangani masalah di atas, kita hanya perlu menggunakan kata kunci clear:both di dalam div-1c seperti di bawah.

#div-1a {
 float:left;
 width:190px;
}
#div-1b {
 float:left;
 width:190px;
}
#div-1c {
 clear:both;
}

10. Latihan!

Langkah terakhir! Banyakkan latihan untuk memahirkan diri dalam CSS Positioning. =)

Selamat mencuba.

Menambah pangkalan data dan table

MySQL tidaklah serumit kebanyakan bahasa pengaturcaraan yang lain seperti PHP atau Javascript, maka cara terbaik untuk belajar adalah dengan meniru contoh-contoh yang sudah sedia ada dan mengubahnya mengikut keperluan anda. Oleh kerana tutorial MySQL ini menumpukan pada kombinasi MySQL dan PHP, maka seeloknya anda sudah mempunyai asas² PHP sebelum memulakan MySQL.

Kita akan memulakan tutorial dengan belajar bagaimana untuk membuat pangkalan data yang baru dan juga bagaimana memulakan sambungan (connection) ke pangkalan data (database).

Menambah pangkalan data yang baru

taip http://localhost/phpmyadmin pada browser anda. (Pastikan anda telah buka xampp, dan apache dan mysql sedang berfungsi). Untuk tutorial ini, kita akan membuat pangkalan data yang bernama tutorial. Cari Create new database, masukkan tutorial dan tekan butang Create.

Anda akan di bawa ke pangkalan data tutorial di mana anda boleh menambah table² yang boleh anda gunakan kemudian. Sebagai contoh, kita akan menyimpan data tentang nama pekerja, umur dan jawatan mereka. Jadi kita akan membuat satu table yang akan dinamakan Pekerja.

MySQL : Langkah pertama ke alam pangkalan data

Mengapa menggunakan MySQL?

MySQL digunakan untuk menyimpan maklumat yang boleh kita kelompokkan di bawah beberapa kategori yang ditentukan. Jika anda belum biasa dengan istilah pangkalan data atau database ini, anda boleh menganggap pangkalan data ini sebagai sebuah fail Excel. Di mana sheets boleh diumpamakan sebagai tables di dalam database dan dalam sebuah table pula, anda mempunyai kolum dan juga baris.

Kita boleh ambil pangkalan data (database) sebuah syarikat sebagai contoh. Database ini mungkin mempunyai 3 table iaitu Pekerja, Pelanggan dan juga Pegawai. Setiap table ini pula akan mempunyai medan (atau kolum) yang tertentu, sebagai contoh untuk table Pekerja, mungkin terdapat medan nama, umur dan juga jawatan.

Siri tutorial MySQL ini fokus kepada penggunaan MySQL dengan bahasa pengaturcaraan PHP. Jika anda menggunakan bahasa pengaturcaraan yang lain, konsepnya tidak jauh berbeza.

Menggunakan jQuery pada template WordPress

WordPress menggunakan jquery untuk ruang adminnya (dashboard), jadi anda tidak perlu men-download salinan baru jquery ke folder wordpress. Untuk menyertakan jquery, anda harus menggunakan wp_enqueue_script () fungsi yang memasukkan sebuah file javascript di header template anda.

Buka header.php dan paste kod berikut dalam tag head:

<?php wp_enqueue_script("jquery"); ?>

Selamat mencuba!

print_r dalam javascript

Fungsi Javascript yang fungsinya seakan fungsi print_r PHP

function print_r(theObj){
  if(theObj.constructor == Array ||
     theObj.constructor == Object){
    document.write("<ul>")
    for(var p in theObj){
      if(theObj[p].constructor == Array||
         theObj[p].constructor == Object){
document.write("<li>["+p+"] => "+typeof(theObj)+"</li>");
        document.write("<ul>")
        print_r(theObj[p]);
        document.write("</ul>")
      } else {
document.write("<li>["+p+"] => "+theObj[p]+"</li>");
      }
    }
    document.write("</ul>")
  }
}

Selamat mencuba.

PHP array

Array adalah satu struktur yang boleh menyimpan satu atau lebih nilai. Anda boleh andaikan ia sebagai satu variable yang boleh menyimpan pelbagai nilai serentak. Ia sesuai digunakan jika anda ingin menyimpan beberapa nilai mengikut kumpulan yang sama. Untuk contoh, kita andaikan kita mahu menyimpan nama-nama pelajar di dalam array $pelajar.

Query String

Query string merupakan satu cara untuk kita menyimpan sesuatu nilai variable di dalam URL. Contohnya www.tutorialmelayu.com/index.php?variable1=nilai1. Dalam contoh ini, kita menyimpan nilai1 di dalam variable bernama variable1. Untuk menggunakan variable ini, kita hanya perlu menggunakan variable super global $_GET

menulis function php sendiri

Jika anda masih baru dengan function php, mungkin anda perlu merujuk tutorial ini dahulu.