Selasa, 30 November 2010

Membuat database MySQL dan tabel menggunakan phpMyAdmin

Oke, sekarang kita akan membuat sebuah database MySQL menggunakan phpMyAdmin.
Sebelumnya, pastikan anda sudah menginstal local server, seperti XAMPP atau Appserv.

Pertama, jalankan web browser anda. Ketikkan 'localhost/phpmyadmin' pada address bar web browser anda (tidak usah pakai kutipnya ya...). Jika berhasil akan muncul halaman awal phpMyAdmin seperti gambar di bawah ini.



Sekarang ketikkan nama database yang ingin anda buat, pada field di bawah teks 'create new database'. Misalkan nama databasenya adalah 'latihan_php'. Jadi ketikkan 'latihan_php' pada field tersebut. Setelah itu klik tombol 'Create'. Sebaiknya nama database tidak menggunakan spasi. Gantinya silakan gunakan underscore.

Lihat gambar dibawah.



Selanjutnya membuat tabel. Ada beberapa hal yang harus dipersiapkan sebelum membuat tabel.
Pertama, adalah nama tabel.
Kedua, berapa jumlah field atau kolom dalam tabel.
Ketiga, apa saja nama kolom dalam tabel tersebut.
Keempat, tipe dari tiap kolom dan jumlah panjang karakternya.

Bingung? Baiklah saya jelaskan.

Pertama. Anda ingin membuat tabel 'pengunjung'. Berarti nama tabelnya adalah 'pengunjung'. Gampang kan?

Kedua. Anda harus merancang ada berapa kolom dalam tabel 'pengunjung' tersebut. Misal anda ingin ada kolom 'nama', 'alamat', 'telepon'. Berarti ada empat kolom. Kok, empat kolom? Bukannya cuma tiga? Dalam merancang tabel anda tidak boleh melupakan primary key. Apa itu primary key? Supaya tabel tidak ada redundant alias pengulangan data dan supaya nanti anda dan program anda tidak bingung ketika mencari data.
Oleh sebab itu primary key harus ada dan isinya nanti sebaiknya angka. Primary key akan dijadikan 'id' dari suatu tabel dan bersifat unik alias tidak sama suatu id dengan id yang lain dalam satu tabel.

Ketiga. Anda sudah menentukan ada empat kolom. Berarti nama kolomnya adalah sebagai berikut.
Kolom pertama diberi nama 'id_pengunjung'.
Kolom kedua diberi nama 'nama_pengunjung'.
Kolom ketiga diberi nama 'alamat'.
Kolom keempat diberi nama 'telepon'.
Oya, untuk penulisan nama tabel sebaiknya jangan menggunakan spasi. Gantinya silakan gunakan underscore.

Keempat. Tipe dari tiap kolom tersebut harus anda tentukan. Apakah 'VARCHAR', 'INT', 'DATE' atau yang lainnya. Biasanya untuk kolom yang nanti diisi oleh berbagai karakter, entah angka huruf dsb gunakanlah 'VARCHAR'. Untuk kolom yang diisi angka saja, gunakan 'INT'.
Nah untuk kolom-kolom pada tabel 'pengunjung' kita ini, mari kita tentukan tipenya dan panjang karakternya.
Kolom 'id_pengunjung' kita gunakan tipe 'INT' dengan panjang '5'.
Kolom 'nama_pengunjung' kita gunakan tipe 'VARCHAR' dengan panjang '50'.
Kolom 'alamat' kita gunakan tipe 'VARCHAR' dengan panjang '100'.
Kolom 'telepon' kita gunakan tipe 'INT' dengan panjang '15'.

Yuukkk, mari kita isi. Lihat gambar di bawah.



Selanjutnya isikan nama kolom, tipenya dan panjang karakternya.



Jangan klik save dulu. Kita harus membuat kolom 'id_pengunjung' menjadi primary key. Dan tambahkan 'auto_increment' supaya 'id_pengunjung' nya otomatis bertambah dari 1 ke 2 dan seterusnya.



Baru setelah semua selesai, klik 'Save'.



Jika sukses akan seperti ini.



OK, sekian dulu untuk artikel Membuat database MySQL dan tabel menggunakan phpMyAdmin. Kalau bingung, jangan ragu-ragu. Silakan tanya lewat komentar di bawah dan saya akan coba menjawabnya.

Pada artikel selanjutnya saya akan membuat artikel bagaimana membuat skrip PHP, supaya bisa input data lewat form HTML dan masukin ke databasenya. OK OK?

Sampai ketemu lagi
Read More...

Senin, 22 November 2010

Klasemen Akhir MotoGP 2010

Kejuaraan balap motor paling bergengsi di dunia, MotoGP 2010 telah berakhir. Dari 18 seri yang sudah dilalui, keluarlah seorang pebalap asal Spanyol Jorge Lorenzo sebagai juara dunia MotoGP 2010. Lorenzo yang mengendarai motor Yamaha M1 berhasil mengalahkan 22 pebalap yang mengikuti kelas ini, dengan mengumpulkan poin terbanyak yaitu 383 poin. Tidak hanya itu, tim Fiat Yamaha -tim Lorenzo- juga berhasil menjadi juara konstruktor MotoGP 2010 dengan mengumpulkan 617 poin. Tim Fiat Yamaha berhasil menjadi juara konstruktor berkat kombinasi poin yang diperoleh Lorenzo dengan juara dunia MotoGP 7 kali asal Italia, Valentino Rossi dan pebalap asal Jepang Wataru Yoshikawa yang menggantikan Rossi saat cedera.

Di posisi kedua klasemen akhir MotoGP 2010 dihuni oleh Dani Pedrosa yang juga berasal dari Spanyol. pebalap tim Honda Repsol ini mengumpulkan 245 poin. Sedangkan posisi ketiga klasemen akhir MotoGP 2010 diisi oleh Valentino Rossi dari Tim Fiat Yamaha dengan 233 poin. Juara dunia tahun 2007 Casey Stoner hanya mampu menempati posisi keempat klasemen akhir MotoGP 2010 dengan 225 poin.

Di akhir musim ada beberapa hal penting yang terjadi menjelang musim MotoGP berikutnya. Juara dunia MotoGP 7 kali, 250cc dan 125cc masing-masing 1 kali, Valentino Rossi memutuskan untuk pindah dari Tim Fiat Yamaha ke Tim Ducati musim depan. Untuk menggantikannya, Tim Yamaha sudah mengontrak Ben Spies untuk musim 2011. Di sisi lain Casey Stoner memutuskan untuk hijrah ke Tim Honda Repsol. Sehingga tim Honda Repsol akan memiliki tiga pebalap di musim 2011.

Berikut adalah daftar lengkap Klasemen Akhir MotoGP 2010.

Posisi Nama Negara Motor Poin
01Jorge LorenzoSpanyolYamaha383
02Dani PedrosaSpanyolHonda245
03Valentino RossiItaliaYamaha233
04Casey StonerAustraliaDucati225
05Andrea DoviziosoItaliaHonda206
06Ben SpiesAmerika SerikatYamaha176
07Nicky HaydenAmerika SerikatDucati163
08Marco SimoncelliItaliaHonda125
09Randy de PunietPerancisHonda116
10Marco MelandriItaliaHonda103
11Colin EdwardsAmerika SerikatYamaha103
12Hector BarberaSpanyolDucati90
13Alvaro BautistaSpanyolSuzuki85
14Aleix EspargaroSpanyolDucati65
15Hiroshi AoyamaJepangHonda53
16Loris CapirossiItaliaSuzuki44
17Mika KallioFinlandiaDucati43
18Alex de AngelisSan MarinoHonda11
19Roger Lee HaydenAmerika SerikatHonda5
20Kousuke AkiyoshiJepangHonda4
21Carlos ChecaSpanyolDucati1
22Wataru YoshikawaJepangYamaha1


Nah, di posisi berapa pebalap jagoan anda?

sumber: MotoGP.com
Read More...

Klasemen Akhir moto2 2010

Kejuaraan balap motor kelas 2 dari ajang balap motor MotoGP, moto2 musim 2010 telah berakhir. Kelas moto2 yang baru tahun ini digelar, adalah kelas pengganti dari kelas 250 cc. Jika kelas 250 cc menggunakan mesin berkapasitas 250 cc 2-tak (2 stroke), moto2 menggunakan mesin 4-tak (4 stroke) berkapasitas 600 cc. Dan tidak seperti dulu kelas 250 cc atau MotoGP yang menggunakan mesin berbeda untuk tiap tim, semua tim moto2 menggunakan basis mesin yang sama yaitu Honda CBR 600.

Di musim pertamanya, moto2 telah memberikan kesempatan kompetisi yang besar. Ini terbukti dari total 40 pebalap yang mengikuti kelas ini. Dari 40 pebalap tersebut muncullah nama yang saya rasa sudah tidak asing lagi Toni Elias, sebagai juara dunia kelas moto2 2010. Elias pebalap asal Spanyol yang pernah membalap di kelas MotoGP ini mengumpulkan 271 poin dalam naungan tim Moriwaki. Di posisi kedua klasemen akhir moto2 2010 dihuni oleh Julian Simon dari tim Suter. Pebalap asal Spanyol ini mengoleksi 201 poin. Dan posisi ketiga klasemen akhir moto2 2010 ditempati oleh Andrea Iannone. Pebalap Italia yang bergabung di tim Speed Up ini mencatatkan 199 poin.

Dari ajang moto2 musim 2010 ini banyak kejadian yang menarik, menggembirakan dan ada satu kabar menyedihkan yang muncul dari ajang kelas kedua di ajang balap motor dunia MotoGP. Pebalap asal Jepang berumur 19 tahun (10 Desember 1990), Shoya Tomizawa meninggal dunia setelah mengalami kecelakaan hebat di sirkuit Misano tanggal 5 September 2010. Saat itu Tomizawa terjatuh saat berada di tikungan cepat. Pada saat yang bersamaan, Alex de Angelis dan Scott Redding tepat berada di belakangnya. Dan tanpa sengaja kedua pebalap tersebut melindas Tomizawa yang terseret di lintasan sirkuit. Tomizawa meninggal saat di rumah sakit Riccione pada hari yang sama.

Semua pihak dari kelas MotoGP, moto2 dan 125 cc berduka. Saat kelas MotoGP di Misano selesai, bendera setengah tiang dikibarkan saat tiga pebalap MotoGP berada di podium dan tidak ada selebrasi sampanye. Dan saat seri moto2 digelar di sirkuit Motegi Jepang, diadakan kegiatan beberapa menit, hening, untuk mengenang Shoya Tomizawa.

Berikut adalah daftar lengkap Klasemen Akhir moto2 2010.

Posisi Nama Negara Motor Poin
01Toni EliasSpanyolMoriwaki271
02Julian SimonSpanyolSuter201
03Andrea IannoneItaliaSpeed Up199
04Thomas LuthiSwissMoriwaki156
05Simone CorsiItaliaMotobi138
06Gabor TalmacsiHongariaSpeed Up109
07Jules CluzelPerancisSuter106
08Scott ReddingInggrisSuter102
09Stefan BradlJermanSuter97
10Karel AbrahamCekoFTR96
11Alex de AngelisSan MarinoMotobi95
12Yuki TakahashiJepangTech 386
13Shoya TomizawaJepangSuter82
14Roberto RolfoItaliaSuter75
15Dominique AegerterSwissSuter74
16Alex DebonSpanyolFTR73
17Sergio GadeaSpanyolPons Kalex67
18Fonsi NietoSpanyolMoriwaki45
19Alex BaldoliniItaliaI.C.P38
20Mike di MeglioPerancisSuter34
21Yonny HernandezKolumbiaBQR-Moto232
22Ratthapark WilairotThailandBimota30
23Anthony WestAustraliaMZ-RE Honda26
24Kenny NoyesAmerika SerikatPromoharris22
25Claudio CortiItaliaSuter20
26Hector FaubelSpanyolSuter18
27Raffaele de RosaItaliaTech 315
28Mattia PasiniItaliaMotobi12
29Kenan SofuogluTurkiSuter11
30Xavier SimeonBelgiaMoriwaki10
31Damian CudlinAustraliaPons Kalex9
32Jason di SalvoAmerika SerikatFTR7
33Axel PonsSpanyolPons Kalex7
34Lukas PesekCekoMoriwaki5
35Michael RansederAustriaSuter4
36Michele PirroItaliaMoriwaki2
37Vladimir IvanovUkrainaMoriwaki2
38Arne TodeJermanSuter2
39Robertino PietriVenezuelaSuter1
40Yusuke TeshimaJepangMotobi1


sumber: MotoGP.com
Read More...

Klasemen Akhir 125 CC 2010

Kelas 125 CC adalah kelas ketiga yang diperlombakan pada ajang balap motor dunia MotoGP. Pada kelas terkecil ini diikuti oleh 28 pebalap pada musim 2010 ini.

Pebalap Marc Marquez asal Spanyol yang menggunakan motor Derbi, keluar sebagai juara dunia dengan 310 poin. Di posisi kedua dihuni Nicolas Terol asal Spanyol dengan 296 poin. Dan di posisi ketiga ditempati pebalap Spanyol lainnya yaitu Pol Espargaro dengan 281 poin.

Berikut adalah daftar lengkap klasemen akhir pebalap dari kejuaraan balap motor dunia kelas 125 CC musim 2010.

Posisi Nama Negara Motor Poin
01Marc MarquezSpanyolDerbi310
02Nicolas TerolSpanyolAprilia296
03Pol EspargaroSpanyolDerbi281
04Bradley SmithInggrisAprilia223
05Efren VazquezSpanyolDerbi152
06Esteve RabatSpanyolAprilia147
07Sandor CorteseJermanDerbi143
08Tomoyoshi KoyamaJepangAprilia127
09Randy KrummenacherSwissAprilia113
10Danny WebbInggrisAprilia93
11Johan ZarcoPerancisAprilia77
12Luis SalomSpanyolAprilia72
13Alberto MoncayaSpanyolAprilia70
14Jonas FolgerJermanAprilia69
15Adrian MartinSpanyolAprilia35
16Jasper IwemaBelandaAprilia34
17Jakub KornfeilCekoAprilia28
18Marcel SchrotterJermanHonda27
19Simone GrotzkyjItaliaAprilia26
20Alexis MasbouPerancisAprilia20
21Sturla FagerhaugNorwegiaAprilia12
22Daniel KartheiningerJermanKTM6
23Lorenzo SavadoriItaliaAprilia5
24Zulfahmi KhairuddinMalaysiaAprilia4
25Isaac VinalesSpanyolAprilia3
26Alessandro TonucciItaliaAprilia3
27Luigi MorcianoItaliaAprilia2
28Louis RossiPerancisAprilia2


sumber: MotoGP.com
Read More...

Sabtu, 25 September 2010

Mengolah data dari FORM menggunakan PHP

Sekarang kita akan membahas bagaimana data yang kita tulis di form HTML, kita olah menggunakan PHP. Untuk saat ini kita hanya akan membahas sampai mengambil datanya saja, tidak sampai menyimpan ke dalam database.

Untuk memahami artikel ini anda sudah harus bisa membuat FORM menggunakan HTML. Jika anda belum bisa, silakan lihat artikel saya yaitu Membuat form dengan HTML 1, Membuat form dengan HTML 2 dan Membuat form dengan HTML 3.

Oya, memproses form ada dua cara. Dengan GET atau POST.

GET: jika dengan GET, data akan dapat terlihat di address bar web browser. Mengambil data menggunakan $_GET[nama_data]. POST: dengan POST, data tidak terlihat di address bar web browser. Mengambil data menggunakan $_POST[nama_data].

Pertama kita akan menggunakan GET terlebih dahulu. Langsung saja, ini contoh form nya:

buatlah file dengan nama 'proses_form.php'

-----------------mulai kode html----------------------

<html>

<head>
<title>
memproses form</title>
</head>
<body>


<form method="get" action="proses_get.php">


Username: <input type="text" name="username" maxlength="20" size="20">
<br>
<br>
<input type="reset" value="Reset">
|
<input type="submit" value="OK">
</form>


</body>
</html>


-----------------akhir kode html----------------------



berikutnya buat file dengan nama 'proses_get.php'

-----------------mulai kode php----------------------

<html>
<head>
<title>
hasil memproses form</title>
</head>
<body>
<h2>
hasil proses data menggunakan GET</h2>


<? $namauser=$_GET[username]; //mengambil data dari field username, menjadi variabel bernama $namauser

echo "USERNAME nya adalah: $namauser<br>
"; //menampilkan variabel $namauser
echo "USERNAME nya adalah: $_GET[username]"; //menampilkan data dari field username tanpa variabel $namauser
?>
<br>
<a href="proses_form.php">
KEMBALI</a>
</body>
</html>


-----------------akhir kode php----------------------

keterangan:

++ jika anda lihat, mengambil data dari form tidak perlu dimasukkan ke dalam variabel untuk menampilkannya. Terbukti dari hasilnya. Data dari field username akan tetap ditampilkan meskipun tidak dimasukkan ke dalam variabel. Jadi semua terserah anda, mana yang lebih enak. ///////////////////////////////////////////////////////////

berikut contoh dengan lebih dari satu field di form:

buatlah file dengan nama 'proses_form2.php' -----------------mulai kode html----------------------

<html>
<head>
<title>
memproses form 2</title>
</head>
<body>


<form method="get" action="proses_get2.php">


Nama: <input type="text" name="nama" maxlength="20" size="20">
<br>
Tempat tinggal: <input type="text" name="alamat" maxlength="50" size="20">
<br>
Jenis Kelamin: <input type="radio" name="gender" value="Laki-Laki">
Laki-Laki | <input type="radio" name="gender" value="Perempuan">
Perempuan <br>
Musik Favorit: <select name="musik">
<option value="POP">
POP</option>
<option value="ROCK">
ROCK</option>
<option value="JAZZ">
JAZZ</option>
<option value="DANGDUT">
DANGDUT</option>
</select>
<br>
Keterangan: <textarea name="ket" cols="50" rows="3">
</textarea>
<br>


<br>
<input type="submit" value="OK">
</form>


</body>
</html>


-----------------akhir kode html----------------------



berikutnya buat file dengan nama 'proses_get2.php' -----------------mulai kode php----------------------

<html>
<head>
<title>
hasil memproses form 2</title>
</head>
<body>
<h2>
hasil proses data menggunakan GET 2</h2>


<? $nama=$_GET[nama]; //mengambil data dari field nama, menjadi variabel $nama $alamat=$_GET[alamat]; //mengambil data dari field alamat, menjadi variabel $alamat $gender=$_GET[gender]; //mengambil data dari field gender, menjadi variabel $gender $musik=$_GET[musik]; //mengambil data dari field musik, menjadi variabel $musik $ket=$_GET[ket]; //mengambil data dari field ket, menjadi variabel $ket

echo "Nama: $nama<br>
"; //menampilkan variabel $nama echo "Tempat Tinggal: $alamat<br>
"; //menampilkan variabel $alamat echo "Jenis Kelamin: $gender<br>
"; //menampilkan variabel $gender echo "Musik Favorit: $musik<br>
"; //menampilkan variabel $musik echo "Keterangan: $ket<br>
"; //menampilkan variabel $ket

?>
<br>
<a href="proses_form2.php">
KEMBALI</a>
</body>
</html>


-----------------akhir kode php----------------------

Nah, yang pake metode GET udah, yang POST bagaimana? Gampang, tinggal ganti semua kalimat $_GET menjadi $_POST di bagian file proses. Sedangkan di file form nya rubah method="GET" menjadi method="POST".

Bingung??? berikut contohnya.

buatlah file dengan nama 'proses_form3.php' -----------------mulai kode html----------------------

<html>
<head>
<title>
memproses form 3</title>
</head>
<body>


<form method="post" action="proses_post.php">


Nama: <input type="text" name="nama" maxlength="20" size="20">
<br>
Tempat tinggal: <input type="text" name="alamat" maxlength="50" size="20">
<br>
Jenis Kelamin: <input type="radio" name="gender" value="Laki-Laki">
Laki-Laki | <input type="radio" name="gender" value="Perempuan">
Perempuan <br>
Musik Favorit: <select name="musik">
<option value="POP">
POP</option>
<option value="ROCK">
ROCK</option>
<option value="JAZZ">
JAZZ</option>
<option value="DANGDUT">
DANGDUT</option>
</select>
<br>
Keterangan: <textarea name="ket" cols="50" rows="3">
</textarea>
<br>


<br>
<input type="submit" value="OK">
</form>


</body>
</html>


-----------------akhir kode html----------------------

berikutnya buat file dengan nama 'proses_post.php' -----------------mulai kode php----------------------

<html>
<head>
<title>
hasil memproses form dengan post</title>
</head>
<body>
<h2>
hasil proses data menggunakan POST</h2>


<? $nama=$_POST[nama]; //mengambil data dari field nama, menjadi variabel $nama $alamat=$_POST[alamat]; //mengambil data dari field alamat, menjadi variabel $alamat $gender=$_POST[gender]; //mengambil data dari field gender, menjadi variabel $gender $musik=$_POST[musik]; //mengambil data dari field musik, menjadi variabel $musik $ket=$_POST[ket]; //mengambil data dari field ket, menjadi variabel $ket

echo "Nama: $nama<br>
"; //menampilkan variabel $nama echo "Tempat Tinggal: $alamat<br>
"; //menampilkan variabel $alamat echo "Jenis Kelamin: $gender<br>
"; //menampilkan variabel $gender echo "Musik Favorit: $musik<br>
"; //menampilkan variabel $musik echo "Keterangan: $ket<br>
"; //menampilkan variabel $ket

?>
<br>
<a href="proses_form3.php">
KEMBALI</a>
</body>
</html>


-----------------akhir kode php----------------------

Nah, sudah lihat kan bedanya GET dan POST. Saran aja nih, dari yang saya tau sih metode POST lebih aman daripada GET. Jika anda bingung mengenai form nya, sekali lagi saya ingatkan silakan lihat artikel saya berjudul Membuat form dengan HTML 1, Membuat form dengan HTML 2 dan Membuat form dengan HTML 3. Mudah-mudahan bisa membantu.

Insya Allah di artikel selanjutnya saya akan membuat artikel bagaimana cara menyimpan data yang kita ambil dari form ke dalam database MySQL.

Jangan lupa komennya ya!!!
Read More...

Menggunakan WHILE dan DO...WHILE dalam PHP

++WHILE Mirip seperti FOR. WHILE digunakan untuk pengulangan dengan memakai parameter sebuah ekspresi untuk batasannya. Perintah yang terdapat dalam blok WHILE akan dikerjakan jika kondisi WHILE nya benar.

Sebaiknya anda hati-hati dalam menggunakan WHILE, karena jika ada kesalahan di kondisi WHILE nya (misal kondisi tidak berubah), bisa jadi akan terjadi pengulangan tak terbatas.

Berikut bentuk dasar WHILE:

-----------------mulai kode PHP---------------------- <? while (kondisi)
{
perintah_1;
perintah_2;
...
perintah_n;
}

?>

-----------------akhir kode PHP----------------------

contoh menampilkan angka 0 sampai 10 dengan WHILE:

-----------------mulai kode PHP----------------------
<?
$angka=0; //inisiasi variabel angka dengan nilai 0
while ($angka<=10) //kondisi while diletakkan di awal
{
echo "$angka "; //menampilkan angka
$angka=$angka+1; // menambahkan variabel angka dengan nilai 1 tiap pengulangan
}
?>

-----------------akhir kode PHP----------------------

++ DO...WHILE

Mirip dengan WHILE, bedanya hanya di lokasi pengecekan kondisi. Jika WHILE di awal, DO...WHILE dilakukan di akhir.

Berikut bentuk dasar DO...WHILE:

-----------------mulai kode PHP----------------------

<?
do
{
perintah_1;
perintah_2;
...
perintah_n;
}
while (kondisi)
?>
-----------------akhir kode PHP----------------------

contoh menampilkan angka kelipatan 2 yang lebih kecil sama dengan 20 menggunakan DO...WHILE:

-----------------mulai kode PHP----------------------

<?
$angka=0; //inisiasi variabel angka dengan nilai 0
do
{
echo "$angka "; //menampilkan angka
$angka=$angka+2; // menambahkan variabel angka dengan nilai 2 tiap pengulangan
}
while ($angka<=20) //while diletakkan di akhir
?>

-----------------akhir kode PHP----------------------

Read More...

Menggunakan SWITCH dan BREAK di PHP

SWITCH merupakan struktur kontrol seperti IF..ELSE tapi lebih sederhana. Sedangkan BREAK digunakan untuk keluar dari suatu blok switch, supaya tidak semua perintah dilaksanakan.

bentuk dasar SWITCH dan BREAK :

-----------------mulai kode PHP----------------------

<?
switch($var)
{
case nilai1:
perintah_nilai1;
break;

case nilai2:
perintah_nilai2;
break;

case nilai3:
perintah_nilai3;
break;

}

?>

-----------------akhir kode PHP----------------------

berikut contoh BREAK dan SWITCH:

-----------------mulai kode PHP----------------------

<?
$hari=rand(1,7); //menginisiasi $hari dengan nilai random 1 sampai 7
echo "Nama hari ke $hari adalah hari "; //menampilkan nomor hari dan nama hari

switch($hari)
{
case 1:
echo "Senin";
break;

case 2:
echo "Selasa";
break;

case 3:
echo "Rabu";
break;

case 4:
echo "Kamis";
break;

case 5:
echo "Jumat";
break;

case 6:
echo "Sabtu";
break;

case 7:
echo "Minggu";
break;

}

?>

-----------------akhir kode PHP----------------------

berikut contoh BREAK tanpa SWITCH:

-----------------mulai kode PHP----------------------

<?
$hari=rand(1,7); //menginisiasi $hari dengan nilai random 1 sampai 7
echo "Nama hari ke $hari adalah hari "; //menampilkan nomor hari dan nama hari

switch($hari)
{
case 1:
echo "Senin";

case 2:
echo "Selasa";

case 3:
echo "Rabu";

case 4:
echo "Kamis";

case 5:
echo "Jumat";

case 6:
echo "Sabtu";

case 7:
echo "Minggu";

}

?>

-----------------akhir kode PHP----------------------

Hasilnya adalah:
++ yang menggunakan break nama harinya akan sesuai dengan nomor hari yang keluar.
++ sedangkan yang tidak menggunakan break, hasilnya tidak sesuai karena dia akan menjalankan perintah yang dibawahnya.
Bagaimana, untuk yang ini gampang kan? Kalau begitu sampai disini dulu. Sampai jumpa di artikel lain.
Read More...

Sintaks IF, ELSE dan ELSEIF dalam PHP

Sekarang saya akan membahas bagaimana menulis sintaks IF, ELSE dan ELSEIF dalam PHP.

A. IF digunakan untuk melakukan pengecekan dalam PHP. Sintaks IF juga ada di -setahu saya- semua bahasa pemograman.

Misal anda ingin menngecek apakah angka 2 lebih besar dari angka 1, maka anda dapat menggunakan IF.

Berikut adalah bentuk dasar IF.

-----------------mulai kode PHP----------------------

<?
if(ekspresi)
{
perintah1;
perintah2;
}
?>

-----------------akhir kode PHP----------------------

++keterangan:
-- ekspresi adalah tempat dimana anda menentukan kondisi. misal $a<$b

contoh:

1. membandingkan dua angka

-----------------mulai kode PHP----------------------

<?
$a=10; //mengisi variabel a dengan nilai 10
$b=1; //mengisi variabel b dengan nilai 1

if($a>$b)
{
echo "nilai \$a: $a, nilai \$b: $b<br> maka \$a lebih besar dari \$b";
}
?>

-----------------akhir kode PHP----------------------

2. membandingkan dua angka dengan bantuan rand()

-----------------mulai kode PHP----------------------

<?
$a=rand(1,10); //mengisi variabel a dengan nilai random dari 1 sampai 10
$b=rand(1,10); //mengisi variabel b dengan nilai random dari 1 sampai 10

if($a>$b)
{
echo "nilai \$a: $a, nilai \$b: $b<br> maka \$a lebih besar dari \$b";
}
if($a<$b)
{
echo "nilai \$a: $a, nilai \$b: $b<br> maka \$b lebih besar dari \$a";
}
if($a==$b) //untuk membandingkan apakah angka nya sama atau tidak gunakan dua tanda sama dengan (==)
{
echo "nilai \$a: $a, nilai \$b: $b<br> maka \$a sama dengan \$b";
}

?>

-----------------akhir kode PHP----------------------

B. ELSE digunakan untuk melengkapi IF, berguna untuk melakukan kondisi yang berlawanan dari IF.

contoh:

1. menentukan apakah angka tertentu genap atau ganjil

-----------------mulai kode PHP----------------------

<?
$a=rand(1,10); //mengisi variabel a dengan nilai random dari 1 sampai 10

if($a%2==0) //menghitung dengan modulus, jika sisa 0 maka genap.
{
echo "nilai \$a: $a, angka genap";
}
else //jika hasil modulus nya tidak sama dengan 0, tindakan dibawah yang dilakukan
{
echo "nilai \$a: $a, angka ganjil";
}
?>

-----------------akhir kode PHP----------------------

C. ELSEIF sama dengan ELSE hanya harus ada kondisi lagi yang ditulis seperti di IF.

contoh:

1. menentukan apakah pengurangan ini menghasilkan angka minus, positif atau sama dengan 0

-----------------mulai kode PHP----------------------

<?
$a=rand(1,10); //mengisi variabel a dengan nilai random dari 1 sampai 10
$b=rand(1,10); //mengisi variabel b dengan nilai random dari 1 sampai 10
$c=$a-$b; //mengurangi nilai $a dengan $b menjadi hasilnya yaitu $c

if($c==0) //jika hasil sama dengan 0
{
echo "hasil $a - $b = $c, hasilnya sama dengan 0";
}
elseif($c>0) //jika hasil lebih besar dari 0
{
echo "hasil $a - $b = $c, hasilnya positif";
}
elseif($c<0) //jika hasil lebih kecil dari 0
{
echo "hasil $a - $b = $c, hasilnya negatif";
}
?>

-----------------akhir kode PHP----------------------

Jadi dari ketiga sintaks diatas yang utama tentu saja adalah IF. Jadi jika anda tidak menulis sintaks IF tapi menulis langsung sintaks ELSE atau ELSEIF maka akan error. Jika IF sudah ditulis maka bisa digabung dengan ELSE dan atau ELSEIF.

Oke, sekian dulu. Jangan lupa komen ya.
Read More...

Sintaks FOR dalam PHP

Setelah kita membahas dasar dari PHP, sekarang saya akan membahas bagaimana menulis sintaks FOR dalam PHP.

FOR digunakan untuk melakukan pengulangan dalam PHP. Sintaks FOR juga ada di -setahu saya- semua bahasa pemograman. Misal anda ingin menuliskan angka dari 1 sampai 100 secara otomatis, anda bisa menggunakan FOR.

Berikut adalah bentuk dasar FOR.

-----------------mulai kode PHP----------------------

<?
for($variabel_awal=nilai_awal; $variabel_akhir=nilai_akhir; $operator)
{
perintah1;
perintah2;
}
?>

-----------------akhir kode PHP----------------------

++keterangan:
--didalam kurung sintaks for terdapat 3 hal yang harus ada, yaitu
1. $variabel_awal: adalah nilai awal untuk FOR. Nama variabel bisa apa saja asalkan ditulis sesuai dengan aturan menulis nama variabel.
2. $variable_akhir: adalah nilai akhir untuk FOR. Nama variabel bisa apa saja asalkan ditulis sesuai dengan aturan menulis nama variabel.
3. $operator: ini adalah operator untuk menjalankan nilai awal dan nilai akhir. Variabel yang bisa digunakan adalah $variabel++, $variabel--, ++$variabel, --$variabel.
4. Diantara tanda kurung kurawal {} diisi oleh perintah, misal echo atau yang lainnya.

Contoh:
1. Membuat angka dari 1 sampai 20

-----------------mulai kode PHP----------------------

<?
for($a=1; $a<=20; $a++)
{
echo "$a | ";
}
?>

-----------------akhir kode PHP----------------------

2. Membuat angka dari 20 mundur sampai 1

-----------------mulai kode PHP----------------------

<?
for($b=20; $b>=1; $b--)
{
echo "$b | ";
}
?>

-----------------akhir kode PHP----------------------

3. Membuat angka kelipatan 2 lebih kecil dari 20

-----------------mulai kode PHP----------------------

<?
for($c=2; $c<=20; $c+=2)
{
echo "$c | ";
}
?>

-----------------akhir kode PHP----------------------

Saya rasa cukup untuk sintaks FOR dalam PHP. Bagaimana cukup mudah kan?

Seperti biasa saran, kritik dan komen silakan ditulis ya...
Read More...

Operator Aritmetika Menggunakan PHP

Sekarang saya akan membahas bagaimana menggunakan operator aritmetika seperti penjumlahan, pengurangan, perkalian, pembagian dan modulus.

1. Penjumlahan

untuk melakukan penambahan cukup menggunakan tanda '+'

contoh:

-----------------mulai kode PHP----------------------

<?
$a=1; //inisiasi variabel $a
$b=2; //inisiasi variabel $b
$hasil=$a+$b; //menghitung dan menginisiasi hasil ke dalam variabel $hasil

echo "\$a=$a<br>"; //menampilkan variabel $a
echo "\$b=$b<br>"; //menampilkan variabel $b
echo "$a+$b=$hasil"; //menampilkan variabel $hasil

?>

-----------------akhir kode PHP----------------------

2. Pengurangan

untuk melakukan pengurangan cukup menggunakan tanda '-'

contoh:

-----------------mulai kode PHP----------------------

<?
$a=10; //inisiasi variabel $a
$b=2; //inisiasi variabel $b
$hasil=$a-$b; //menghitung dan menginisiasi hasil ke dalam variabel $hasil

echo "\$a=$a<br>"; //menampilkan variabel $a
echo "\$b=$b<br>"; //menampilkan variabel $b
echo "$a-$b=$hasil"; //menampilkan variabel $hasil

?>

-----------------akhir kode PHP----------------------

3. Perkalian

untuk melakukan perkalian cukup menggunakan tanda '*'

contoh:

-----------------mulai kode PHP----------------------

<?
$a=10; //inisiasi variabel $a
$b=2; //inisiasi variabel $b
$hasil=$a*$b; //menghitung dan menginisiasi hasil ke dalam variabel $hasil

echo "\$a=$a<br>"; //menampilkan variabel $a
echo "\$b=$b<br>"; //menampilkan variabel $b
echo "$a*$b=$hasil"; //menampilkan variabel $hasil
?>

-----------------akhir kode PHP----------------------

4. Pembagian

untuk melakukan pembagian cukup menggunakan tanda '/'

contoh:

-----------------mulai kode PHP----------------------

<?
$a=10; //inisiasi variabel $a
$b=2; //inisiasi variabel $b
$hasil=$a/$b; //menghitung dan menginisiasi hasil ke dalam variabel $hasil

echo "\$a=$a<br>"; //menampilkan variabel $a
echo "\$b=$b<br>"; //menampilkan variabel $b
echo "$a/$b=$hasil"; //menampilkan variabel $hasil

?>

-----------------akhir kode PHP----------------------

5. Modulus

untuk melakukan modulus cukup menggunakan tanda '%'

contoh:

-----------------mulai kode PHP----------------------

<?
$a=10; //inisiasi variabel $a
$b=2; //inisiasi variabel $b
$hasil=$a%$b; //menghitung dan menginisiasi hasil ke dalam variabel $hasil

echo "\$a=$a<br>"; //menampilkan variabel $a
echo "\$b=$b<br>"; //menampilkan variabel $b
echo "sisa dari $a modulus $b adalah $hasil"; //menampilkan variabel $hasil

?>

-----------------akhir kode PHP----------------------

++keterangan
jika anda bingung ada tanda \ disebelah $, itu maksudnya 'escape character' supaya kita bisa menampilkan tanda dolar nya. Soalnya kalau kita hanya menulis $ langsung maka itu dianggap variabel.

Oke, sekian artikel untuk Operator Aritmetika Menggunakan PHP. Silakan komentar dan pertanyaan, akan saya jawab kalau saya bisa ya... he3.
Read More...

Operator Perbandingan menggunakan PHP

Kali ini kita akan membahas operator perbandingan menggunakan PHP seperti sama dengan, tidak sama dengan, lebih besar, lebih kecil, lebih besar atau sama dan lebih kecil atau sama.

1. Sama dengan
untuk membandingkan variabel yang satu sama dengan variabel yang lain, kita menggunakan tanda '=='

2. Tidak sama dengan
untuk membandingkan variabel yang satu tidak sama dengan variabel yang lain, kita menggunakan tanda '!='

3. Lebih besar
untuk membandingkan variabel yang satu lebih besar dari variabel yang lain, kita menggunakan tanda '>'

4. Lebih kecil
untuk membandingkan variabel yang satu lebih kecil dari variabel yang lain, kita menggunakan tanda '<'

5. Lebih besar atau sama dengan
untuk membandingkan variabel yang satu lebih besar atau sama dengan variabel yang lain, kita menggunakan tanda '>='

6. Lebih kecil atau sama dengan
untuk membandingkan variabel yang satu lebih kecil atau sama dengan variabel yang lain, kita menggunakan tanda '<='

contoh 1:

-----------------mulai kode PHP----------------------

<?
$a=rand(1,10); //mengisi variabel a dengan nilai random dari 1 sampai 10
$b=rand(1,10); //mengisi variabel b dengan nilai random dari 1 sampai 10

if($a>$b)
{
echo "nilai \$a: $a, nilai \$b: $b<br> maka \$a lebih besar dari \$b";
}
if($a<$b)
{
echo "nilai \$a: $a, nilai \$b: $b<br> maka \$b lebih besar dari \$a";
}
if($a==$b)
{
echo "nilai \$a: $a, nilai \$b: $b<br> maka \$a sama dengan \$b";
}

?>

-----------------akhir kode PHP----------------------

contoh 2:

-----------------mulai kode PHP----------------------

<?
$a=rand(1,10); //mengisi variabel a dengan nilai random dari 1 sampai 10

if($a>=7)
{
echo "nilai \$a: $a, anda lulus";
}
if($a<=6)
{
echo "nilai \$a: $a, anda tidak lulus";
}

?>

-----------------akhir kode PHP----------------------

contoh 3:

-----------------mulai kode PHP----------------------

<?
$a=rand(1,10); //mengisi variabel a dengan nilai random dari 1 sampai 10
$b=rand(1,10); //mengisi variabel b dengan nilai random dari 1 sampai 10

if($a!=$b)
{
echo "nilai \$a: $a, nilai \$b: $b<br> maka \$a tidak sama dengan \$b";
}
if($a==$b)
{
echo "nilai \$a: $a, nilai \$b: $b<br> maka \$a sama dengan \$b";
}
?>

-----------------akhir kode PHP----------------------

Sekian untuk artikel Operator Perbandingan menggunakan PHP.
Read More...

Operator Logika Menggunakan PHP

Apa itu operator Logika? Apakah anda pernah mendengar "hasil benar jika A dan B benar" atau "hasil benar jika salah satu dari A atau B benar"? Kalau belum, ya langsung aja lihat contoh dibawah.

1. AND
operator ini digunakan untuk mengecek jika dua kondisi nya benar. Dapat menggunakan tanda '&&' atau 'AND'

contoh :
-----------------mulai kode PHP----------------------

<?
$a=rand(1,2); //mengisi variabel a dengan nilai random dari 1 sampai 2
$b=rand(1,2); //mengisi variabel b dengan nilai random dari 1 sampai 2


if($a==1 && $b==1)
{
echo "nilai \$a: $a, nilai \$b: $b<br> maka nilai a dan b sama sama 1";
}
elseif($a==2 AND $b==2)
{
echo "nilai \$a: $a, nilai \$b: $b<br> maka nilai a dan b sama sama 2";
}
else
{
echo "nilai \$a: $a, nilai \$b: $b<br> maka nilai a dan b tidak sama";
}
?>

-----------------akhir kode PHP----------------------

2. OR
operator ini digunakan untuk mengecek jika salah satu kondisi benar maka hasil benar. Tanda yang digunakan adalah '||' atau 'OR'.

contoh :
-----------------mulai kode PHP----------------------

<?
$a=rand(1,5); //mengisi variabel a dengan nilai random dari 1 sampai 5
$b=rand(1,5); //mengisi variabel b dengan nilai random dari 1 sampai 5

if($a==1 OR $b==1)
{
echo "nilai \$a: $a, nilai \$b: $b<br> maka salah satu dari a atau b sama dengan 1";
}
elseif($a==2 || $b==2)
{
echo "nilai \$a: $a, nilai \$b: $b<br> maka salah satu dari a atau b sama dengan 2";
}
else
{
echo "nilai \$a: $a, nilai \$b: $b<br> maka tidak satupun dari a atau b bernilai 1 atau 2";
}
?>

-----------------akhir kode PHP----------------------

3. XOR
digunakan untuk mengecek jika hanya salah satu dari dua kondisi yang benar, tidak keduanya. Tanda yang digunakan 'XOR'. Jadi begini:
++ jika kondisi pertama benar-kondisi kedua salah, hasil benar.
++ jika kondisi pertama salah-kondisi kedua benar, hasil benar.
++ jika kondisi pertama benar-kondisi kedua benar, hasil salah.
++ jika kondisi pertama salah-kondisi kedua salah, hasil salah.

contoh :
-----------------mulai kode PHP----------------------

<?
$a=rand(1,2); //mengisi variabel a dengan nilai random dari 1 sampai 2
$b=rand(1,2); //mengisi variabel b dengan nilai random dari 1 sampai 2

if($a==1 XOR $b==1)
{
echo "nilai \$a: $a, nilai \$b: $b<br> maka salah satu dari a atau b sama dengan 1";
}
elseif($a==2 XOR $b==2)
{
echo "nilai \$a: $a, nilai \$b: $b<br> maka salah satu dari a atau b sama dengan 2";
}
else
{
echo "nilai \$a: $a, nilai \$b: $b<br> maka nilai a sama dengan b";
}
?>


-----------------akhir kode PHP----------------------

4. NOT TRUE
untuk mengidentifikasi negasi dari suatu kondisi. Tanda yang digunakan '!$kondisi'.

contoh :
-----------------mulai kode PHP----------------------

<?
$a=rand(0,5); //mengisi variabel a dengan nilai random dari 0 sampai 5
$b=$a>0; //menentukan bahwa variabel 'b' adalah variabel 'a' lebih besar dari 0

if(!$b) //jika kondisi tidak sesuai dengan $b, berarti nilai $a sama dengan 0
{
echo "\$a=$a, maka nilai \$a sama dengan 0";
}
else //jika kondisi sesuai dengan $b
{
echo "\$a=$a, maka nilai \$a lebih besar dari 0";
}
?>

-----------------akhir kode PHP----------------------

Read More...

Selasa, 10 Agustus 2010

PHP Dasar 2

Setelah anda tahu dasar apa yang dibutuhkan untuk menjalankan kode PHP, sekarang saatnya belajar kode dasar PHP.

++ Yang paling dasar adalah tipe file saat anda menyimpan file PHP. Ekstensi file PHP adalah .php Jadi kalau anda tulis kode PHP tapi ngesave nya dengan ekstensi .html misalnya, kode PHP nya tidak akan jalan. Jadi ingat ekstensi nya adalah .php
++ Untuk memulai sebuah kode PHP dibutuhkan juga tag pembuka dan penutup. Saya hanya akan berikan yang mudahnya saja:

------------------ mulai kode PHP ------------------

<?
kode PHP ditulis disini
?>

<?php
kode PHP ditulis disini
?>

------------------ akhir kode PHP ------------------

++Untuk mencetak sebuah karakter kita gunakan 'echo'

------------------ mulai kode PHP ------------------

<?
echo "Kalimat dengan php.";
echo "Hello world";

?>

------------------ akhir kode PHP ------------------

Jika anda lihat, kalimat yang ingin kita tampilkan ditulis diantara tanda kutip -""-, dan pada akhir kode tidak harus ada tanda -;-

++ PHP bisa digabung dengan HTML dalam satu file. Tapi ingat ekstensi file tetap harus '.php'. PHP bisa ditulis secara 'Embedded' dan 'Non Embedded'.
Embedded maksudnya, skrip PHP dimasukkan diantara kode HTML.
Sementara Non Embedded kode yang ditulis adalah murni PHP, malah kode HTML nya ditulis menggunakan PHP.

Contoh kode PHP yang 'Embedded'

------------------ mulai kode PHP ------------------

<html>
<head>
<title>HTML dan PHP</title>
</head>
<body>
Ini teks dengan HTML<br>
<?
echo "Kalimat dengan php.";
?>
</body>
</html>
------------------ akhir kode PHP ------------------

Contoh kode PHP yang 'Non Embedded'

------------------ mulai kode PHP ------------------

<?

echo "<html>";
echo "<head><title>HTML dan PHP</title></head>";
echo "<body>";
echo "Kalimat ditulis disini";
echo "</body></html>";

?>

------------------ akhir kode PHP ------------------

++ Menuliskan komentar di PHP. Maksudnya kalau kita ingin membuat catatan kecil di PHP, dimana catatan itu tidak ditampilkan di browser. Komentar tidak perlu diakhiri dengan tanda (;)

Contoh:

------------------ mulai kode PHP ------------------

<?

//ini model komentar satu baris. jadi tiap karakter yang ditulis disini tidak akan ditampilkan di browser
echo "<html>"; //ini juga komentar
echo "<head><title>HTML dan PHP</title></head>";
/* model komentar dengan pembuka dan penutup. teks akan dianggap komentar jika berada di antara tanda ini */
echo "<body>";
echo "Kalimat ditulis disini";
/*komentar lagi*/
echo "</body></html>";

?>

------------------ akhir kode PHP ------------------

++ Kode PHP case sensitive. Hati-hati saat penulisan kode PHP maupun variabel nya, karena besar kecil karakter berpengaruh.

Contoh:

------------------ mulai kode PHP ------------------

<html>
<head>
<title>PHP itu Case Sensitive</title>
</head>
<body>

<?

$angka=5;
echo "Angka nya adalah $angka"; //browser akan menampilkan angka 5
echo "<br>"; //break menggunakan tag html
echo "Angka nya adalah $ANGKA"; //browser tidak akan menampilkan angka 5

?>
</body>
</html>

------------------ akhir kode PHP ------------------

Oke, saya rasa dasar kode PHP sampai disini dulu. Sekali lagi kalau belum mengerti sila bertanya dan beri komentarnya ya..

Pada artikel berikutnya saya akan mulai membahas kode PHP yang lebih lanjut, seperti FOR, WHILE, IF, penggunaan variabel dsb. Insya Allah.
Read More...

PHP Dasar 1

Sekarang saya akan memberikan dasar dasar PHP.

PHP adalah bahasa pemograman yang bersifat server side, alias kode-kode PHP yang kita buat akan dieksekusi oleh server tempat kita meletakkan file PHP kita. Jadi PHP tidak seperti HTML, yang bisa langsung kita buat dan langsung buka filenya di browser. Karena itu, untuk membuat kode PHP kita membutuhkan sebuah server. Tapi kita tidak usah harus membeli web hosting untuk membuat kode PHP. Kita cukup menginstal local server di komputer kita.

Ada beberapa local server yang bagus dan siap instal. Salah satunya adalah XAMPP. XAMPP ini gratis, jadi anda bisa mencarinya di web dan langsung mendownloadnya. Dan untuk menginstal nya sangat mudah. Pokoknya tinggal klik next saja, anda sudah dapat menginstal nya. Tapi jangan lupa menentukan lokasi folder 'xampp' nya ya..

Jika anda sudah menginstal XAMPP nya, anda tinggal menguji apakah XAMPP nya sudah jalan atau belum. Caranya buka web browser anda. Lalu ketikkan 'localhost' pada address bar. Jika sudah jalan anda akan melihat halaman awal XAMPP di browser anda. Jika belum, mungkin XAMPP nya belum diaktifkan. Cara mengaktifkannya adalah, buka 'XAMPP control panel' yang bisa ada di pojok kanan bawah desktop anda, atau buka 'windows' cari 'program' cari folder 'XAMPP' -di windows 98 saya ada di folder Apache Friends- lalu klik XAMPP Control Panel.

Sesudah XAMPP Control Panel nya terbuka klik tombol start pada baris 'Apache'. Untuk baris lain sementara dibiarkan 'Stop' saja terlebih dulu. Setelah itu coba lagi buka 'localhost' pada browser anda. Jika halaman awal XAMPP sudah terbuka, berarti anda sudah bisa menjalankan kode PHP di komputer anda.

Nah, sekarang misal anda sudah mempunyai sebuah file PHP dan ingin menjalankannya. Pertama file tersebut harus berada pada folder 'htdocs' yang ada di folder 'xampp'. Jadi pindahkan file tersebut ke folder 'htdocs', lalu buka browser dan ketikkan 'localhost/nama_file.php' pada address bar. Misal nama file nya adalah 'phpdasar.php' maka ketikkan 'localhost/phpdasar.php' pada address bar. Jika anda membuat proyek besar dan membuat folder baru di folder 'htdocs' juga bisa. Maka tinggal rubah menjadi 'localhost/nama_folder' atau 'localhost/nama_folder/namafile'.

Sebagai contoh:

------------------ mulai kode PHP ------------------

<?

echo "Contoh Kode PHP";

?>

------------------ akhir kode PHP ------------------

Ketikkan kode diatas di notepad, lalu simpan dengan nama 'lat-php1.php' -jangan lupa rubah 'save as type' menjadi 'all files'- dan lokasi penyimpanan di folder 'htdocs'.

Jika sudah, buka browser ketik 'localhost/lat-php1.php' di address bar. Dan kode PHP sudah tereksekusi.

Misal anda membuat folder baru di folder 'htdocs' dengan nama 'latihan' dan memutuskan menyimpan file 'lat-php1.php' di folder tersebut maka ketikkan 'localhost/latihan/lat-php1.php' di address bar browser anda.

Oke, apakah anda sudah mengerti? Atau belum ngerti... hehehe. Silakan tanyaa atau beri komentar ya.....

Baiklah, Insya Allah pada artikel selanjutnya saya akan membahas kode-kode dasar PHP.
Read More...

Menggunakan CSS (Cascading Style Sheet) 1

Sekarang saya akan membahas penggunaan CSS (Cascading Style Sheet).

Apa itu CSS? CSS adalah sebuah kode untuk mengatur tampilan, gaya dari sebuah halaman web. CSS dapat mengatur banyak elemen style dari sebuah web seperti jenis font, warna font, ukuran font, warna background color, warna link, heading dan banyak lagi.

CSS dibagi dua macam. CSS internal dan eksternal. Sesuai namanya CSS internal ditulis pada halaman web itu langsung. Sedangkan CSS eksternal ditulis pada halaman terpisah, yang nanti disambung ke halaman web dengan tag yang ditulis pada halaman webnya. Kelebihan CSS eksternal dari internal adalah jika kita ingin melakukan perubahan style, kita cukup membuka file CSS nya, rubah style nya dan semua halaman web yang nyambung ke file CSS tersebut akan langsung berubah.

Bingung dengan penjelasan saya? Baiklah kita akan langsung pelajari dasar-dasar CSS terlebih dahulu. Penulisan kode CSS internal dan eksternal tidak ada bedanya, yang membedakan hanya lokasi kode CSS nya dan cara menggunakannya.

Untuk kode CSS internal harus ditulis diantara tag <style></style> dimana tag tersebut ditulis di antara tag <head>. Contohnya seperti ini:

-----------------mulai kode html----------------------

<html>
<head>
<title>CSS</title>

<style type="text/css">
kode css nya disini
</style>
</head>
<body>asd</body>
</html>

-----------------akhir kode html----------------------

keterangan:
++ kode CSS nya dituliskan diantara tag <style></style>.

Untuk kode CSS eksternal dimana kode CSS ditulis di file terpisah, kita harus menulis tag untuk menyambungkannya. Contohnya seperti ini:

-----------------mulai kode html----------------------

<html>
<head>
<title>CSS</title>

<link rel="stylesheet" type="text/css" href="lokasi_file_css/nama_file_css_nya.css">

</head>

<body>asd</body>
</html>

-----------------akhir kode html----------------------

keterangan:

++ pada tag <link> atribut 'rel' dan 'type' beserta nilainya harus ada dan tidak boleh diubah.
++ atribut tag diisi sesuai lokasi file css nya.
++ kode CSS ditulis di file terpisah, bukan di file HTML nya

Oke segitu dulu dasar dari CSS. Insya Allah selanjutnya akan saya buat artikel lanjutan bagaimana cara menulis kode-kode CSS.

Jangan lupa komentarnya ya...
Read More...

Memasukkan Gambar Ke Dalam Web Menggunakan HTML

Mungkin bagi anda yang masih baru dengan HTML masih bingung bagaimana cara memasukkan gambar ke dalam web yang sudah anda buat. Padahal caranya sangatlah mudah. Hanya dengan menggunakan tag <img> saja. Langsung saja kalau begitu.

-----------------mulai kode html----------------------

<img src="gambar.jpg" width="100" height="50" alt="gambar pemandangan" hspace="2" vspace="3">

-----------------akhir kode html----------------------

Keterangan:

++ tag <img> dapat diisi beberapa atribut. Yang wajib ada adalah atribut 'src' sedangkan atribut lain adalah atribut pelengkap saja. Masih banyak atribut lain yang bisa digunakan pada tag 'img', tapi saya hanya akan menjelaskan yang ada di contoh saja.

1. Atribut 'src' diatas diisi dengan url lengkap lokasi gambar yang ingin anda masukkan. Misal folder web anda bernama 'web_saya', di dalamnya terdapat file 'index.html' dimana file 'index.html' tersebut ingin anda masukkan gambar. Gambar yang ingin anda gunakan juga berada pada folder yang sama. Misal nama gambar anda adalah 'gambar1.jpg'. Jadi nilai atribut 'src' itu menjadi gambar1.jpg

Kode nya seperti ini:

-----------------mulai kode html----------------------

<img src="gambar1.jpg">

-----------------akhir kode html----------------------

Jika lokasi gambar tidak sama dengan file HTML yang ingin disisipkan gambar bagaimana? Misal didalam folder 'web_saya' anda membuat folder lagi dengan nama 'picture' dan gambarnya (gambar2.gif) anda letakkan di folder tersebut. Maka ubah nilai atribut src menjadi picture/gambar2.gif

Kode nya seperti ini:

-----------------mulai kode html----------------------

<img src="picture/gambar2.gif">

-----------------akhir kode html----------------------

Jika gambar nya ada di situs lain kode nya seperti ini:

-----------------mulai kode html----------------------

<img src="http://www.situslain.com/gambar2.gif">

-----------------akhir kode html----------------------

2. Atribut 'width' untuk menentukan lebar gambar. Diisi dengan angka positif. Atribut ini tidak harus ada.
3. Atribut 'height' untuk menentukan tinggi gambar. Diisi dengan angka positif. Atribut ini tidak harus ada.
4. Atribut 'alt' untuk menuliskan teks jika gambar tidak bisa ditampilkan. Atribut ini tidak harus ada.
5. Atribut 'hspace' untuk mengatur jarak kiri dan kanan gambar dengan objek lain. Diisi dengan angka positif. Atribut ini tidak harus ada.
6. Atribut 'vspace' untuk mengatur jarak atas dan bawah gambar dengan objek lain. Diisi dengan angka positif. Atribut ini tidak harus ada.

Oke sekian untuk artikel ini kali ini, tolong komen ya kalau udah baca artikel ini.
Read More...

Sabtu, 17 Juli 2010

Membuat list dengan HTML 2

Pada artikel ini saya akan membahas bagaimana membuat list di dalam list. Caranya sebenarnya mudah. Cukup membuat list seperti biasa, lalu masukkan lagi bentuk list kedalam list utamanya.

Oke, langsung saja.

-----------------mulai kode html----------------------

<ul>
<li>Konsol Video Game</li>
<ul>
<li>Playstation 2</li>
<li>Playstation 3</li>
<li>XBOX 360</li>
<li>Wii</li>
</ul>
</ul>

-----------------akhir kode html----------------------

Penjelasan:

++ kita lihat kode diatas. diawal kita membuat tag <ul> diikuti tag<li></li>. Lalu dibawah tag <li></li> kita tulis lagi tag <ul>, <li></li> dan ditutup tag </ul>. Setelah itu ditutup lagi dengan tag </ul> dimana tag terakhir ini untuk menutup tag <ul> yang paling awal. ++ Jadi yang terpenting disini adalah harus teliti untuk memasukkan tag list yang baru kedalam tag list utamanya.

Contoh lain:

-----------------mulai kode html----------------------

<ul>
<li>Mobil</li>
<ul>
<li>Jepang</li>
<ul>
<li>Toyota</li>
<li>Honda</li>
</ul>
<li>Korea</li>
<ul>
<li>KIA</li>
<li>Hyundai</li>
</ul>
</ul>

<li>Motor</li>
<ul>
<li>Jepang</li>
<ul>
<li>Yamaha</li>
<li>Honda</li>
<li>Suzuki</li>
</ul>
<li>Itali</li>
<ul>
<li>Ducatti</li>
<li>Aprilia</li>
</ul>
</ul>
</ul>

-----------------akhir kode html----------------------

Contoh-contoh di atas adalah untuk unordered list. Untuk membuat yang ordered list dan definition list caranya sama saja.
Read More...

Membuat list dengan HTML 1

Ada tiga bentuk dasar list di HTML. Pertama adalah unordered list, kedua ordered list dan ketiga definiton list. Langsung saja.

1. Unordered list.

Dibuka dengan tag <ul> ditutup dengan </ul>. Di antara tag <ul></ul> itu diisi tag <li></li> dan diantara tag <li></li> diisi kalimat yang diinginkan.

Contoh:

-----------------mulai kode html----------------------

<ul>
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ul>

-----------------akhir kode html----------------------

Atribut yang dapat kita tambahkan untuk tag <ul> adalah 'type'. Dan nilai yang dapat diisi ke atribut 'type' adalah 'disc', 'circle' dan 'square'. Sementara untuk tag <li> atributnya juga sama.

Contoh:

-----------------mulai kode html----------------------

<ul type="square">
<li>List Pertama</li>
<li>List Kedua</li>
<li type="circle">List Ketiga</li>
</ul>

-----------------akhir kode html----------------------

2. Ordered list.

Dibuka dengan tag <ol> ditutup dengan </ol>. Di antara tag <ol></ol> itu diisi tag <li></li> dan diantara tag <li></li> diisi kalimat yang diinginkan.

Contoh:

-----------------mulai kode html----------------------

<ol>
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>

-----------------akhir kode html----------------------

Atribut yang dapat ditambahkan untuk tag <ol> adalah:

++ atribut 'type' yang dapat diisi dengan nilai 'a' untuk huruf kecil, 'A' untuk huruf besar, 'i' untuk romawi kecil, 'I' untuk romawi besar dan '1' untuk angka.

++ atribut 'start' yang diisi dengan karakter yang sesuai dengan nilai di atribut 'type' untuk menentukan karakter awal list. Jika ingin awal nomor list adalah angka 3 maka masukkan nilai '3'. Atau jika ingin awal angka list adalah huruf D, maka masukkan nilai '4'.

Contoh:

-----------------mulai kode html----------------------

<ol type="A">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>

<ol type="a">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>

<ol type="i">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>

<ol type="I">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>

<ol type="1">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>

<ol type="1" start="4">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>

<ol type="A" start="F">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>

-----------------akhir kode html----------------------

3. Definiton list.

Dibuka dengan tag <dl> ditutup dengan </dl>, diantaranya diisi tag <dt></dt> atau <dd></dd>. Diantara tag <dt></dt> atau <dd></dd> diisi kalimat yang diinginkan. tag <dt></dt> dan <dd></dd> adalah bagian dari tag <dl></dl>. Tag <dd></dd> sebenarnya adalah definisi dari tag <dt></dt>. Karena itu tag <dd></dd> secara default lebih mengindent masuk dibandingkan <dt></dt>. Tidak ada atribut yang dapat ditambahkan ke tag list ini.

Oya, tag <dt></dt> atau <dd></dd> bisa dua-duanya ada diantara tag <dl></dl> atau salah satunya saja.

Contoh:

-----------------mulai kode html----------------------

<dl>
<dt>Bapak</dt>
<dd>Panggilan untuk orang tua laki-laki</dd>
<dt>Ibu</dt>
<dd>Panggilan untuk orang tua perempuan</dd>
</dl>

<dl>
<dt>tag dt saja</dt>
</dl>

<dl>
<dd>tag dd saja</dd>
</dl>

-----------------akhir kode html----------------------

Gimana? Masih bingung? Berikut adalah contoh lengkap nya, mudah-mudahan tidak bingung lagi.

-----------------mulai kode html----------------------

<html>
<head>
<title>membuat list</title>
</head>
<body>

contoh unorderd list:
<ul>
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ul>

<ul type="square">
<li>List Pertama dengan bullet square</li>
<li>List Kedua dengan bullet square</li>
<li type="circle">List Ketiga dengan bullet circle</li>
</ul>

<hr>
contoh ordered list huruf besar:
<ol type="A">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>

<hr>
contoh ordered list huruf besar dengan huruf awal F:
<ol type="A" start="6">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>

<hr>
contoh ordered list huruf kecil:
<ol type="a">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>

<hr>
contoh ordered list romawi kecil:
<ol type="i">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>

<hr>
contoh ordered list romawi besar:
<ol type="I">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>

<hr>
contoh ordered list angka:
<ol type="1">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>

<hr>
contoh ordered list angka dimulai dengan angka 4:
<ol type="1" start="4">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ol>

<hr>
contoh definiton list:
<dl>
<dt>Kiryu Kazuma</dt>
<dd>Karakter utama dalam serial video game Yakuza</dd>
<dt>Rikimaru</dt>
<dd>Karakter utama dalam serial video game Tenchu</dd>
</dl>

<hr>
contoh definiton list tanpa tag <dd></dd>:
<dl>
<dt>Kiryu Kazuma</dt>
</dl>

<hr>
contoh definiton list tanpa tag <dt></dt>:
<dl>
<dd>Karakter utama dalam serial video game Yakuza</dd>
</dl>

</body>
</html>

-----------------akhir kode html----------------------

save dengan nama -misal- 'latihan-list.html'. Coba buka dengan browser dan lihat hasilnya.

Sampai jumpa di artikel berikutnya yaitu Membuat list dengan HTML 2, dimana saya akan memberikan contoh bagaimana membuat list didalam list.

Insya Allah.....
Read More...

Membuat form dengan HTML 3

Berikut adalah contoh lengkap kode HTML tentang form.

-----------------mulai kode html----------------------

<html><head><title>a</title></head>
<body>

<form method="post" action="proses.php">

Username: <input type="text" name="username" maxlength="20" size="20"> <br>
Password: <input type="password" name="password" maxlength="20" size="20"> <br>
Nama: <input type="text" name="nama" maxlength="20" size="20"> <br>
Kota: <select name="kota" size="1">
<option value="Jakarta">Jakarta</option>
<option value="Bandung">Bandung</option>
</select>
Alamat: <textarea name="keterangan" cols="50" rows="5"></textarea> <br>
Gender: Laki-laki <input type="radio" name="gender" value="L"> | Perempuan <input type="radio" name="gender" value="P">

<br> Musik favorit: Pop <input type="checkbox" name="musik" value="Pop" checked> | Rock <input type="checkbox" name="musik" value="Rock"> | Jazz <input type="checkbox" name="musik" value="Jazz"> <br>
Film Favorit: Aksi <input type="checkbox" name="film" value="Aksi" checked> | Drama <input type="checkbox" name="film" value="Drama"> | Komedi <input type="checkbox" name="film" value="komedi"> <br>
<input type="reset" value="Reset"> | <input type="submit" value="OK"> </form>

</body></html>

-----------------akhir kode html----------------------

Coba anda kopi kode di atas dan anda lihat hasilnya. Oya, jangan di klik dulu tombol OK nya ya. Kalau mau di klik sih.. ya terserah.... Kenapa? Karena kita belum membuat halaman untuk memproses form nya. Bagaimana membuatnya? Sabar ya... Nanti akan saya buatkan artikel tentang memproses form menggunakan php.

Oke sekian dulu tentang form. Sampai jumpa...
Read More...

Membuat form dengan HTML 2

oke sekarang kita akan melanjutkan artikel "membuat form dengan html 1".

5. radio button

merupakan bagian form yang berbentuk bulat dan hanya satu pilihan yang dapat dipilih.

-----------------mulai kode html----------------------

<input type="radio" name="pilihan" value="a" checked>
<input type="radio" name="pilihan" value="b">
<input type="radio" name="pilihan" value="c">

<input type="radio" name="pilihan2" value="a" checked>
<input type="radio" name="pilihan2" value="b">
<input type="radio" name="pilihan2" value="c">

-----------------akhir kode html----------------------

keterangan:

++ atribut 'type' harus diisi 'radio'.
++ untuk atribut 'name' dapat diisi apa saja. atribut 'name' digunakan untuk mengelompokkan satu atau lebih radio button. Dalam contoh di atas, terdapat dua kelompok radio button, yaitu 'pilihan' dan 'pilihan2'.
++ atribut 'value' diisi nilai yang akan diproses nanti.
++ atribut 'checked' untuk menentukan pilihan default (opsi yang langsung terpilih).

Lalu, bagaimana cara menulis teks yang akan ditampilkan di browser. Misal di pilihan pertama 'Audi' lalu di pilhan kedua 'BMW". Berikut kodenya.

-----------------mulai kode html----------------------

Pilihan Mobil<br>
Audi <input type="radio" name="pilihan" value="Audi" checked><br>
BMW <input type="radio" name="pilihan" value="BMW">

<br><br>

Pilihan Motor<br>
Honda <input type="radio" name="pilihan2" value="Honda" checked>
Yamaha <input type="radio" name="pilihan2" value="Yamaha">

-----------------akhir kode html----------------------

Jadi teks yang Audi, BMW, Honda, Yamaha itulah yang akan ditampilkan di browser. Sedangkan teks yang berada di dalam 'value' itulah nilai yang akan diproses.

6. checkbox

merupakan pilihan berbentuk kotak ditandai dengan karakter centang (V).

-----------------mulai kode html----------------------

<input type="checkbox" name="pilihan" value="a" checked>
<input type="checkbox" name="pilihan" value="b">

<input type="checkbox" name="pilihan2" value="a" checked>
<input type="checkbox" name="pilihan2" value="b">

-----------------akhir kode html----------------------

keterangan:

++ sama seperti radio button, hanya berbeda di atribut 'type' yang kita isi 'checkbox'.

7. tombol reset

tombol untuk mereset (mengembalikan ke nilai default) semua bagian form yang dibuat.

-----------------mulai kode html----------------------

<input type="reset" value="Batal">

-----------------akhir kode html----------------------

keterangan:

++ atribut 'type' harus diisi 'reset'.
++ atribut 'value' dapat diisi teks yang ingin ditampilkan di browser.

8. tombol submit

tombol untuk mengeksekusi form ke halaman yang ditentukan di bagian tag <form> pada nilai yang ditulis pada atribut 'action' (lihat artikel Membuat form dengan HTML 1).

-----------------mulai kode html----------------------

<input type="submit" value="Kirim">

-----------------akhir kode html----------------------

keterangan:

++ atribut 'type' harus diisi 'submit'
++ atribut 'value' dapat diisi teks yang ingin ditampilkan di browser.

Jika anda masih bingung silahkan lihat artikel Membuat form dengan HTML 3 untuk contoh lengkap form.
Read More...

Membuat form dengan HTML 1

Jika anda ingin membuat semacam daftar isian (form) di situs web anda, artikel ini akan membahas bagaimana cara membuatnya. Tapi artikel ini hanya akan membuat form nya saja. Untuk memproses data yang diinput dari form, tidak akan dibahas disini.

Oke langsung saja, tag yang digunakan untuk membuat form adalah <form></form>.

-----------------mulai kode html----------------------

<form method="???" action="???">
<tag tertentu>
</form>

-----------------akhir kode html----------------------

pada tag form terdapat atribut 'method' yang nilainya dapat diisi dengan 'post' atau 'get'. Jika anda mengisi dengan 'post' maka data yang diinput dari form tidak akan terlihat di address bar web browser. Tapi jika anda mengisi 'get' maka data akan terlihat di address bar web browser.

atribut 'action' diisi dengan lokasi file untuk memproses form. misal: action="proses_form.php"

Diantara tag form tersebut (pada bagian yang saya tulis <tag tertentu>) dapat diisi tag-tag lain untuk membuat textarea, textfield, checkbox, radio button, dropdown list dan tombol untuk submit dan reset data.

1. Textfield.

Berikut adalah kode HTML untuk membuat textfield.

-----------------mulai kode html----------------------

<input type="text" name="judul" maxlength="20" size="20">

-----------------akhir kode html----------------------

penjelasan:
++ pada tag <input> ditambahkan atribut 'type' dengan nilai nya 'text' untuk membuat bagian form berbentuk textfield. atribut ini harus ada untuk membuat textfield.
++ atribut selanjutnya 'name' dengan nilai 'judul' untuk memberikan identitas bahwa textfield tersebut memiliki nama 'judul'. Nilai dari 'name' dapat diganti sesuai keinginan. Atribut ini dapat dihilangkan dari tag <input>, tapi sebaiknya ada untuk menghindari error saat memproses data.
++ atribut 'maxlength' dengan nilai '20' untuk memberikan batasan jumlah karakter yang boleh diinput pada textfield. Dalam contoh textfield hanya dapat diisi 20 karakter. Hanya dapat diisi dengan angka. Boleh dihilangkan dari tag <input>.
++ atribut 'size' dengan nilai '20' untuk menentukan panjang textfield sebesar angka yang ditentukan, dalam contoh 20. Hanya dapat diisi dengan angka. Boleh dihilangkan dari tag <input>.

2. Textarea.

Berikut adalah kode HTML untuk membuat Textarea.

-----------------mulai kode html----------------------

<textarea name="keterangan" cols="50" rows="5"></textarea>

-----------------akhir kode html----------------------

penjelasan:
++ atribut 'name' dengan nilai 'keterangan' untuk memberikan identitas bahwa textarea tersebut memiliki nama 'keterangan'. Nilai dari 'name' dapat diganti sesuai keinginan. Atribut ini dapat dihilangkan dari tag <textarea>, tapi sebaiknya ada untuk menghindari error saat memproses data.
++ atribut 'cols' dengan nilai '50'. Untuk menentukan jumlah kolom atau lebar dari textarea. Atribut ini dapat dihilangkan.
++ atribut 'rows' dengan nilai '5'. Untuk menentukan panjang textarea sebesar angka yang ditentukan. Hanya dapat diisi dengan angka. Atribut ini dapat dihilangkan.

3. Password

-----------------mulai kode html----------------------

<input type="password" name="katasandi" maxlength="20" size="20">

-----------------akhir kode html----------------------

penjelasan:
++ sama seperti textfield hanya saja atribut 'type' diisi dengan nilai 'password'. Karakter yang diinput akan tidak terlihat diganti dengan simbol lingkaran atau asterisk (*).

4. dropdown box.

-----------------mulai kode html----------------------

<select name="pilihan" size="1" multiple><option value="a">apakah benar</option><option value="b" selected>benarkah itu?</option><option value="c">cepatlah kemari!</option><option value="d">dialah orangnya!</option></select>

-----------------akhir kode html----------------------

penjelasan:
++ tag 'select' dapat diisi atribut 'name' dan 'size' dan 'multiple'.++ atribut 'name' untuk memberikan identitas tag 'select'.++ 'multiple' dituliskan supaya user dapat memilih lebih dari satu pilihan. Jika tidak ditulis maka hanya boleh memilih satu pilihan.++ 'size' diisi dengan angka positif. Jika diisi dengan '1' atau atribut 'size' tidak ditulis, maka pilihan akan ditampilkan satu buah. Jika diisi lebih dari '1' maka sebanyak angka tersebut pilihan akan ditampilkan.
++ tag 'option' ditulis diantara tag 'select'. Tag ini merupakan pilihan yang akan ditampilkan di browser.++ atribut 'value' merupakan nilai yang akan diproses, tidak terlihat di browser.++ Kalimat diantara tag <option> </option> adalah kalimat yang akan ditampilkan ke browser.++ atribut 'selected' dapat ditambahkan jika ingin membuat satu pilihan langsung sebagai default yang terpilih. Hanya dapat dipakai pada satu option saja.

Oke, sampai sini dulu. Pada artikel selanjutnya akan membahas radio button, checkbox dan tombol submit dan reset. Ciaoo!!!
Read More...

Kamis, 06 Mei 2010

Warna dalam HTML

Pada HTML, beberapa tag dapat kita rubah warna nya. Seperti pada tabel, font dsb. Bagaimana sih format warna pada HTML. Jujur nih... yang penulis tahu sih ada dua format, yaitu hexadecimal dan RGB.

1. Hexadecimal.

Hexadecimal terdiri dari 6 digit diawali dengan simbol #. Contoh: #000000, #FF9999, #CC33FF. Mungkin kalau anda lihat, anda akan bingung. Apa sih angka dan huruf-huruf tersebut.

Oke saya jelaskan....

Sebenarnya dari 6 digit itu, dibagi 3 jadi 2 digit per warna. Maksudnya 2 digit pertama menentukan warna merah, 2 digit kedua menentukan warna hijau dan 2 digit terakhir menentukan warna biru. Digit tersebut dapat diisi dari 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. Dimana 0 merepresentasikan warna gelap dan F warna terang.

Contoh:

untuk warna merah terang tuliskan #FF0000. Seperti anda lihat, dua digit pertama diisi FF karena kita ingin membuat warna merah terang. Sedangkan sisanya kita buat 0000 karena warna lainnya tidak perlu.

untuk warna biru agak gelap tuliskan #000099. Dua digit terakhir kita isi 99 karena kita ingin biru agak gelap. Sedangkan empat digit di awal diisi 0000 karena warna lain tidak perlu.

untuk membuat warna hitam: #000000. sedangkan warna putih: #FFFFFF. warna ungu kita dapat buat dengan kombinasi biru dan merah. Jadi tuliskan: #FF00FF. Untuk ungu yang lebih gelap turunkan angka nya, misal #990099.

Berikut warna yang sering dipakai.

#000000 = hitam
#FFFFFF = putih
#FF0000 = merah terang
#00FF00 = hijau terang
#0000FF = biru terang
#FFFF00 = kuning terang
#FF00FF = ungu terang
#00FFFF = cyan
#999999 = abu-abu

masih banyak warna lain yang dapat dibuat dengan kombinasi warna Hexadecimal.

2. RGB.

prinsip nya sama saja dengan hexadecimal, hanya format nya bukan 0-9 dan A-F. Tetapi, dari angka 0 sampai 255.

contoh:

rgb(0,0,0) = hitam
rgb(255,255,255) = putih
rgb(255,0,0) = merah terang
rgb(0,255,0) = hijau terang
rgb(0,0,255) = biru terang
rgb(255,255,0) = kuning terang
rgb(255,0,255) = ungu terang
rgb(0,255,255) = cyan
rgb(150,150,150) = abu-abu

Oke, segitu aja artikel tentang format warna dalam html. C U in another article....
Read More...

Membuat Tabel Dengan HTML 4

Tabel yang kita buat dapat kita atur supaya tampilannya lebih bagus. Apa saja yang dapat diatur? Berikut akan saya berikan beberapa hal yang dapat kita lakukan.

1. Menentukan Lebar Tabel.

untuk menentukan lebar tabel kita hanya perlu menambahkan atribut 'width' pada tag <table>. Dan nilai yang dapat kita isi dapat dalam format 'px', '%' dan format lainnya. Tapi yang penulis tahu dan sering digunakan adalah yang kedua format tadi.

-----------------mulai kode html----------------------

<table width="100%">
<tr><td>Tabel dengan lebar tabel 100%. Lebar tabel akan memenuhi 100% layar atau tempat tabel diletakkan</td></tr>
</table>

<table width="200px">
<tr><td>Tabel dengan lebar tabel 200 pixel. Lebar tabel akan terbentuk sebesar 200 pixel</td></tr>
</table>

-----------------akhir kode html----------------------

2. Menentukan Lebar Kolom.

hampir sama seperti lebar tabel, hanya saja letakkan atribut nya di tag <td>.

-----------------mulai kode html----------------------

<table width="100%">
<tr>
<td width="40%">kolom ini mempunyai lebar 40%</td>
<td width="60%">kolom ini mempunyai lebar 60%</td>
</tr>
</table>

<table width="500px">
<tr>
<td width="300px">kolom ini mempunyai lebar 300 pixel</td>
<td width="200px">kolom ini mempunyai lebar 200 pixel</td>
</tr>
</table>

-----------------akhir kode html----------------------

3. Membuat Jarak Antar Kolom.

kadang data yang ditulis di tabel terlihat terlalu rapat ke pinggir kolom. Atau jarak antar kolomnya yang terlalu rapat. Ini dapat kita edit dengan menggunakan atribut 'cellpadding' dan 'cellspacing' pada tag <table>. Nilai nya cukup memasukkan angka positif saja. 'cellpadding' digunakan untuk membuat jarak data dengan kolom tempat data itu ditulis. 'cellspacing' digunakan untuk membuat jarak antara kolom dengan kolom yang lainnya.

-----------------mulai kode html----------------------

<table width="100%" cellpadding="2" cellspacing="1">
<tr>
<td width="40%">kolom ini mempunyai lebar 40%</td>
<td width="60%">kolom ini mempunyai lebar 60%</td>
</tr>
</table>

-----------------akhir kode html----------------------

4. Membuat Border.

untuk membuat border cukup menambahkan atribut 'border' pada tag <table>. Nilainya cukup masukkan angka positif.

-----------------mulai kode html----------------------

<table border="1">
<tr>
<td>table dengan border 1</td>
</tr>
</table>

<table border="5">
<tr>
<td>table dengan border 5</td>
</tr>
</table>

----------------akhir kode html----------------------

5. Perataan Teks.

untuk melakukan perataan teks, cukup menambah atribut 'align' pada tag <td>. Untuk melakukan perataan vertikal (atas, tengah, bawah) gunakan 'valign'.

-----------------mulai kode html----------------------

<table border="1" width="50%">
<tr>
<td align="left">rata kiri</td>
<td align="center">rata tengah</td>
<td align="right">rata kanan</td>
</tr>

<tr>
<td valign="top">teks diatas teks diatas teks diatas teks diatas teks diatas teks diatas</td>
<td valign="bottom">teks dibawah teks dibawah teks dibawah teks dibawah teks dibawah</td>
<td>teks normal<br>teks normal</td>
</tr>

<tr>
<td valign="top" align="center">teks diatas, rata tengah</td>
<td valign="bottom" align="right">teks dibawah, rata kanan</td>
<td>teks normal<br>teks normal</td>
</tr>

</table>

----------------akhir kode html----------------------

6. Warna pada Tabel.

warna dapat ditambahkan pada tabel, atau pada setiap kolom nya. Tambahkan atribut 'bgcolor' pada tag <table> atau pada tag <td>.

-----------------mulai kode html----------------------

<table border="1" width="50%" bgcolor="#FF0000">
<tr>
<td align="left" bgcolor="#0000FF">rata kiri</td>
<td align="center" bgcolor="0,255,0">rata tengah</td>
<td align="right">rata kanan</td>
</tr>

<tr>
<td valign="top">teks diatas teks diatas teks diatas teks diatas teks diatas teks diatas</td>
<td valign="bottom">teks dibawah teks dibawah teks dibawah teks dibawah teks dibawah</td>
<td>teks normal<br>teks normal</td>
</tr>

<tr>
<td valign="top" align="center">teks diatas, rata tengah</td>
<td valign="bottom" align="right">teks dibawah, rata kanan</td>
<td>teks normal<br>teks normal</td>
</tr>

</table>

----------------akhir kode html----------------------

untuk warnanya, format nya bisa memakai RGB (0,255,0) atau hexadecimal (#000000).

++ Untuk melihat format warna lengkap, silakan lihat artikel saya "Warna dalam HTML".

Saya rasa sudah cukup untuk artikel membuat tabel. Silakan dipelajari kembali ya.... Baiklah.... sampai jumpa di artikel berikutnya.
Read More...

Membuat Tabel Dengan HTML 3

Seperti yang saya tulis pada artikel sebelumnya -Membuat Tabel Dengan HTML 2- disini saya akan memberikan cara membuat kolom yang mengambil lebih dari satu baris, atau memakai atribut 'rowspan' pada tag <td></td>.

Rowspan digunakan untuk menggabungkan dua atau lebih baris pada satu kolom.

Langsung saja. Disini kita akan membuat sebuah tabel (tiga kolom, tiga baris) dimana pada kolom pertama akan menggabungkan dua baris, sedangkan kolom yang lain tetap.

-----------------mulai kode html----------------------

<html>
<head><title>Membuat Tabel Dengan Rowspan</title></head>

<body>

<table border="1">

<tr>
<td rowspan="2">baris pertama dan kedua, kolom satu</td>
<td>baris pertama kolom dua</td>
<td>baris pertama kolom tiga</td>
</tr>

<tr>

<td>baris kedua kolom dua</td>
<td>baris kedua kolom tiga</td>
</tr>

<tr>
<td>baris ketiga kolom satu</td>
<td>baris ketiga kolom dua</td>
<td>baris ketiga kolom tiga</td>
</tr>

</table>

</body>
</html>

-----------------akhir kode html----------------------

Jadi, patokannya adalah jumlah baris. Karena kita mau menggabungkan baris bukan kolom seperti pada colspan. Jumlah baris terbanyak adalah tiga. Jadi pada kolom pertama kita tambahkan atribut 'rowspan' dengan nilai dua, karena kita ingin membuat hanya ada dua baris pada kolom pertama. Lalu pada baris kedua, kita lihat bahwa hanya ada dua pasang tag <td></td> karena kolom pertamanya sudah digabung oleh kolom pertama baris pertama.

Saya beri contoh lagi. Kita akan membuat tabel dengan 4 baris dan 3 kolom. Di kolom pertama hanya ada akan 1 baris. Di kolom kedua 4 baris, kolom ketiga ada 3 baris dimana baris kedua dan ketiga digabung.

-----------------mulai kode html----------------------

<html>
<head><title>Membuat Tabel Dengan Rowspan</title></head>

<body>

<table border="1">

<tr>
<td rowspan="4">baris pertama, kedua, ketiga, keempat pada kolom satu</td>
<td>baris pertama kolom dua</td>
<td>baris pertama kolom tiga</td>
</tr>

<tr>

<td>baris kedua kolom dua</td>
<td rowspan="2">baris kedua kolom tiga</td>
</tr>

<tr>

<td>baris ketiga kolom dua</td>

</tr>

<tr>

<td>baris keempat kolom dua</td>
<td>baris keempat kolom tiga</td>
</tr>

</table>

</body>
</html>

-----------------akhir kode html----------------------

Nah, sudah mengerti. Kalau belum ngerti.... gimana ya... yaaaa belajar lagi aja dan perhatikan kode nya dengan baik.

Hasil akhir kedua tabel dapat dilihat dibawah ini:



Oke... pada artikel berikutnya saya akan mencoba memberikan cara bagaimana melakukan pengaturan pada tabel, seperti menentukan lebar, warna background, perataan teks (alignment) dan semacamnya. Insya Allah....
Read More...

Membuat Tabel Dengan HTML 2

Seperti yang saya tulis pada artikel sebelumnya -Membuat Tabel Dengan HTML 1- disini saya akan memberikan cara membuat kolom yang mengambil lebih dari satu baris, atau kolom dengan jumlah berbeda pada tiap baris.

Kita hanya perlu menambahkan suatu atribut pada tag <td>, bukan pada tag </td> nya.

Untuk pertama saya akan menjelaskan atribut pertama, yaitu 'colspan'. Colspan digunakan untuk membuat sebuah kolom bergabung dengan kolom yang disebelahnya, yang berada pada satu baris. Efek yang akan terlihat adalah jika tabel mempunyai lebih dari satu baris, tiap baris akan memiliki jumlah kolom yang berbeda. Misal, kita akan membuat tabel dimana di baris pertama ada dua kolom, di baris kedua ada tiga kolom dan di baris ketiga ada satu kolom saja. Yuuu... langsung aja kita lihat kode nya.

-----------------mulai kode html----------------------

<html>
<head><title>Membuat Tabel Dengan Colspan</title></head>

<body>

<table border="1">

<tr>
<td colspan="2">baris pertama kolom satu</td>
<td>baris pertama kolom dua</td>
</tr>

<tr>
<td>baris kedua kolom satu</td>
<td>baris kedua kolom dua</td>
<td>baris kedua kolom tiga</td>
</tr>

<tr>
<td colspan="3">baris ketiga kolom satu</td>
</tr>

</table>

</body>
</html>

-----------------akhir kode html----------------------

supaya lebih mudah melihat hasilnya, kita tambahkan atribut 'border' dengan nilai '1' untuk melihat kolom dan baris dengan jelas.

Seperti yang anda lihat, tabel ini sebenarnya memiliki tiga baris dan tiga kolom pada masing-masing baris. Tapi kita hanya ingin membuat baris dua saja yang memiliki tiga kolom. Sedangkan baris pertama hanya ada dua kolom dan baris tiga satu kolom.

Pada baris pertama dan kolom pertama kita lihat ada atribut 'colspan' dengan nilai '2'. Ini maksudnya menggabungkan '2' kolom menjadi '1' kolom saja. Sedangkan pada baris pertama kolom kedua dibiarkan normal, karena kita ingin baris pertama ada dua kolom.

Pada baris kedua semua dibiarkan normal, karena kita ingin baris kedua memiliki tiga kolom.

Pada baris ketiga hanya ada satu tag <td></td>, tapi nilai 'colspan' nya '3'. Ini maksudnya menggabungkan tiga kolom jadi satu.

Saya beri contoh lagi, supaya lebih ngerti. Pada contoh di bawah kita akan membuat sebuah tabel dengan tiga baris, di mana baris pertama terdiri dari satu kolom, baris kedua terdiri dari tiga kolom dan baris ketiga terdiri dari empat kolom. Berarti patokan kolomnya adalah empat kolom.

-----------------mulai kode html----------------------

<html>
<head><title>Membuat Tabel Dengan Colspan 2</title></head>

<body>

<table border="1">

<tr>
<td colspan="4">baris pertama kolom satu</td>
</tr>

<tr>
<td>baris kedua kolom satu</td>
<td>baris kedua kolom dua</td>
<td colspan="2">baris kedua kolom tiga</td>
</tr>

<tr>
<td>baris ketiga kolom satu</td>
<td>baris ketiga kolom dua</td>
<td>baris ketiga kolom tiga</td>
<td>baris ketiga kolom empat</td>
</tr>

</table>

</body>
</html>

-----------------akhir kode html----------------------

Jadi, kalau ingin membuat tabel dengan colspan yang perlu diperhatikan adalah jumlah kolom terbesar nya berapa. Contoh diatas jumlah kolom terbesar adalah empat. Jadi saat ingin membuat baris pertama yang hanya terdiri dari satu kolom, maka kita hanya membuat satu kolom dengan satu tag <td></td> dan atribut 'colspan' diisi dengan nilai '4' karena ingin menggabungkan '4' kolom menjadi satu kolom.

Sedangkan pada baris kedua kita ingin memiliki tiga kolom saja. Jadi buatlah tiga kolom dengan tiga pasang tag <td></td>. Lalu letakkan atribut 'colspan' pada kolom yang disuka -pada contoh diletakkan pada kolom terakhir- dan isi nilai atribut 'colspan' dengan nilai '2'. Karena kita menggabungkan dua kolom jadi satu.

Hasil nya dapat anda lihat pada gambar ini.

Bagaimana, sudah ngerti? Untuk artikel selanjutnya saya akan menjelaskan bagaimana cara membuat kolom yang mengambil lebih dari satu baris. Sebagai bocoran atribut yang digunakan pada tag <td> adalah 'rowspan'.

Sampai jumpa pada artikel berikutnya...
Read More...