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...

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
01	Jorge Lorenzo	Spanyol	Yamaha	383
02	Dani Pedrosa	Spanyol	Honda	245
03	Valentino Rossi	Italia	Yamaha	233
04	Casey Stoner	Australia	Ducati	225
05	Andrea Dovizioso	Italia	Honda	206
06	Ben Spies	Amerika Serikat	Yamaha	176
07	Nicky Hayden	Amerika Serikat	Ducati	163
08	Marco Simoncelli	Italia	Honda	125
09	Randy de Puniet	Perancis	Honda	116
10	Marco Melandri	Italia	Honda	103
11	Colin Edwards	Amerika Serikat	Yamaha	103
12	Hector Barbera	Spanyol	Ducati	90
13	Alvaro Bautista	Spanyol	Suzuki	85
14	Aleix Espargaro	Spanyol	Ducati	65
15	Hiroshi Aoyama	Jepang	Honda	53
16	Loris Capirossi	Italia	Suzuki	44
17	Mika Kallio	Finlandia	Ducati	43
18	Alex de Angelis	San Marino	Honda	11
19	Roger Lee Hayden	Amerika Serikat	Honda	5
20	Kousuke Akiyoshi	Jepang	Honda	4
21	Carlos Checa	Spanyol	Ducati	1
22	Wataru Yoshikawa	Jepang	Yamaha	1

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
01	Toni Elias	Spanyol	Moriwaki	271
02	Julian Simon	Spanyol	Suter	201
03	Andrea Iannone	Italia	Speed Up	199
04	Thomas Luthi	Swiss	Moriwaki	156
05	Simone Corsi	Italia	Motobi	138
06	Gabor Talmacsi	Hongaria	Speed Up	109
07	Jules Cluzel	Perancis	Suter	106
08	Scott Redding	Inggris	Suter	102
09	Stefan Bradl	Jerman	Suter	97
10	Karel Abraham	Ceko	FTR	96
11	Alex de Angelis	San Marino	Motobi	95
12	Yuki Takahashi	Jepang	Tech 3	86
13	Shoya Tomizawa	Jepang	Suter	82
14	Roberto Rolfo	Italia	Suter	75
15	Dominique Aegerter	Swiss	Suter	74
16	Alex Debon	Spanyol	FTR	73
17	Sergio Gadea	Spanyol	Pons Kalex	67
18	Fonsi Nieto	Spanyol	Moriwaki	45
19	Alex Baldolini	Italia	I.C.P	38
20	Mike di Meglio	Perancis	Suter	34
21	Yonny Hernandez	Kolumbia	BQR-Moto2	32
22	Ratthapark Wilairot	Thailand	Bimota	30
23	Anthony West	Australia	MZ-RE Honda	26
24	Kenny Noyes	Amerika Serikat	Promoharris	22
25	Claudio Corti	Italia	Suter	20
26	Hector Faubel	Spanyol	Suter	18
27	Raffaele de Rosa	Italia	Tech 3	15
28	Mattia Pasini	Italia	Motobi	12
29	Kenan Sofuoglu	Turki	Suter	11
30	Xavier Simeon	Belgia	Moriwaki	10
31	Damian Cudlin	Australia	Pons Kalex	9
32	Jason di Salvo	Amerika Serikat	FTR	7
33	Axel Pons	Spanyol	Pons Kalex	7
34	Lukas Pesek	Ceko	Moriwaki	5
35	Michael Ranseder	Austria	Suter	4
36	Michele Pirro	Italia	Moriwaki	2
37	Vladimir Ivanov	Ukraina	Moriwaki	2
38	Arne Tode	Jerman	Suter	2
39	Robertino Pietri	Venezuela	Suter	1
40	Yusuke Teshima	Jepang	Motobi	1

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
01	Marc Marquez	Spanyol	Derbi	310
02	Nicolas Terol	Spanyol	Aprilia	296
03	Pol Espargaro	Spanyol	Derbi	281
04	Bradley Smith	Inggris	Aprilia	223
05	Efren Vazquez	Spanyol	Derbi	152
06	Esteve Rabat	Spanyol	Aprilia	147
07	Sandor Cortese	Jerman	Derbi	143
08	Tomoyoshi Koyama	Jepang	Aprilia	127
09	Randy Krummenacher	Swiss	Aprilia	113
10	Danny Webb	Inggris	Aprilia	93
11	Johan Zarco	Perancis	Aprilia	77
12	Luis Salom	Spanyol	Aprilia	72
13	Alberto Moncaya	Spanyol	Aprilia	70
14	Jonas Folger	Jerman	Aprilia	69
15	Adrian Martin	Spanyol	Aprilia	35
16	Jasper Iwema	Belanda	Aprilia	34
17	Jakub Kornfeil	Ceko	Aprilia	28
18	Marcel Schrotter	Jerman	Honda	27
19	Simone Grotzkyj	Italia	Aprilia	26
20	Alexis Masbou	Perancis	Aprilia	20
21	Sturla Fagerhaug	Norwegia	Aprilia	12
22	Daniel Kartheininger	Jerman	KTM	6
23	Lorenzo Savadori	Italia	Aprilia	5
24	Zulfahmi Khairuddin	Malaysia	Aprilia	4
25	Isaac Vinales	Spanyol	Aprilia	3
26	Alessandro Tonucci	Italia	Aprilia	3
27	Luigi Morciano	Italia	Aprilia	2
28	Louis Rossi	Perancis	Aprilia	2

sumber: MotoGP.com Read More...

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...

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...

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...

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...