Sambungan ke pangkalan data

Sebelum boleh menggunakan pangkalan data atau database MySQL, kita perlu membuat sambungan ke pelayan pangkalan data mysql seperti berikut:

<?php
mysql_connect("localhost", "mdpai", "mdpai123") or die(mysql_error());
echo "Sambungan ke MySQL berjaya!<br />";
?>

Jika anda paparkan hasil kod di atas, dan jika kata nama dan kata laluan yang diberikan tepat, anda sepatutnya mendapat paparan “Sambungan ke MySQL berjaya”. Walaubagaimanapun jika anda memberikan kata nama atau kata laluan yang salah, mysql_error() akan memberikan paparan error yang berkenaan.

Setelah berjaya membuat sambungan ke pelayan pangkalan data (database server), langkah seterusnya adalah memilih pangkalan data yang mahu kita guna. Katakan anda mahu menggunakan pangkalan data bernama “tutorial” seperti di dalam tutorial menambah pangkalan data.

<?php
mysql_connect("localhost", "mdpai", "mdpai123") or die(mysql_error());
echo "Sambungan ke MySQL berjaya!  <br />";
mysql_select_db("tutorial") or die(mysql_error());
echo "Sambungan ke pangkalan data berjaya!";
?>

Git undo commit terakhir

$ git reset --soft HEAD^              (1)
$ edit something here                 (2)
$ add files to using git add
$ git commit -c ORIG_HEAD       (3)

1 – This is most often done when you remembered what you just committed is incomplete, or you misspelled your commit message, or both. Leaves working tree as it was before “reset”.
2 – Make corrections to working tree files.
3 – “reset” copies the old head to .git/ORIG_HEAD; redo the commit by starting with its log message. If you do not need to edit the message further, you can give -C option instead.

SCP : Pindah fail secara remote

Untuk memindahkan fail dari komputer anda ke komputer remote atau sebaliknya, anda boleh menggunakan “secure copy” SSH ataupun SCP. Untuk memindahkan satu fail dari komputer anda ke ke komputer remote:

scp fail remoteuser@remotebox:/directory

Contoh jika anda mahu memindahkan fail main.c ke mdpai di alamat IP 100.224.200.1:

scp main.c mdpai@100.224.200.1:/home/mdpai/

Sebaliknya, jika anda mahu memindahkan fail dari mdpai ke komputer anda, anda hanya perlu terbalikkan destinasi command SCP:

scp mdpai@100.224.200.1:/home/mdpai/fail.doc /home/user/

Untuk memindahkan direktori, command yang sama boleh digunakan.

Menggunakan SSH dalam Ubuntu

SSH digunakan untuk melancarkan command shell atau transfer fail secara remote (dari komputer lain).

Saya beranggapan :
- anda tahu apa itu command shell
- anda tahu syntax command-line Linux
- komputer remote membenarkan sambungan SSH

Log in menggunakan SSH

ssh remoteuser@remotebox

di mana remoteuser merupakan username komputer yang anda mahu hubungi dan remotebox merupakan IP atau hostname komputer tersebut.

contoh:

ssh mdpai@100.224.200.1

Kemudian anda akan ditanya kata laluan untuk user tersebut.

remoteuser@remotebox's password:

Setelah berjaya login, anda akan mempunyai akses kepada command prompt komputer remote.

mdpai@100.224.200.1:~$

Voila, anda sekarang boleh menggunakan command linux biasa seperti mana anda menggunakan command tersebut di komputer anda.

Ubuntu Kernel Headers

Soalan : Saya memerlukan kernel headers untuk compile module linux. Macam mana saya boleh dapatkan linux headers?

Jawapan :

Pastikan repo anda dikemaskini

$ sudo apt-get update

Install pakej linux-header

$ sudo apt-get install linux-headers-$(uname -r)

Menggunakan PHP CLI di dalam Windows

Jika anda mahu menggunakan PHP CLI untuk:

• Bake dengan CakePHP
• atau menggunakan Yiic dengan Yii
• atau apa-apa sahaja command yang melibatkan php.exe

---------------------------------------------------------------
App : app
Path: /path-to/project/app
---------------------------------------------------------------
Interactive Bake Shell
---------------------------------------------------------------
[D]atabase Configuration
[M]odel
[V]iew
[C]ontroller
[P]roject
[Q]uit
What would you like to Bake? (D/M/V/C/P/Q) 
>

YiiRoot/framework/yiic webapp demo
Create a Web application under '/Webroot/demo'? [Yes|No]
Yes
mkdir /WebRoot/demo
mkdir /WebRoot/demo/assets
mkdir /WebRoot/demo/css

Perkara pertama yang perlu dilakukan adalah mencari path kepada php.exe. Untuk instalasi Xampp saya, php.exe terletak di C:/xampp/php/. Jika anda tidak menggunakan xampp, php.exe anda berkemungkinan besar terletak pada path yang berlainan.

Untuk Windows 7, pergi ke Control Panel / System / Advanced System Setting / Environment Variables.

Untuk Windows XP, pergi ke Control Panel / System / Advanced / Environment Variables.

Atau anda boleh terus right click pada My Computer dan tekan Properties (untuk Win7 dan WinXP).

Cari Path di bahagian System Variables. Kemudian tambah C:/xampp/php/ pada hujung kandungan yang sedia ada. Pastikan anda memisahkan setiap path dengan ; . Ini contoh Path saya (……… mewakili path-path lain yang sedia ada).

%SystemRoot%\system32;%SystemRoot%;.........;C:\xampp\php\

Tekan Apply atau OK. Restart PC anda.

Buka command prompt anda dan taip php -v. Anda sepatutnya mendapat output seperti di bawah:

C:\Users\mdpai>php -v
PHP 5.3.1 (cli) (built: Nov 20 2009 17:26:32)
Copyright (c) 1997-2009 The PHP Group
Zend Engine v2.3.0, Copyright (c) 1998-2009 Zend Technologies

Font menarik dengan Google Font API

Untuk menggunakan font² yang terdapat di http://code.google.com/webfonts?subset=latin di laman web anda, anda hanya perlu hot link css Google ke dalam page html anda seperti contoh di bawah.

<head>
   <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head

Untuk contoh di atas, saya memilih font Lobster. Untuk menggunakan font ini, anda hanya perlu menyatakan nama font tersebut di dalam selector font-family seperti di bawah.

h1 { font-family: 'Lobster', arial, serif; }

Hasil nya:

TutorialMelayu.com

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.