Menyalakan Web Server Apache

1. Klik Start > All Programs > Apachefriends > xampp > xampp control panel dari dekstop komputer Anda. Untuk lebih jelasnya, lihatlah contoh gambar di bawah ini.

2. Muncul jendela XAMPP Control Panel Application seperti gambar di bawah ini.

3. Kemudian jalankan Aphace dan MySql dengan klik Start pada Aphace dan MySql

4. Jalankan sebuah browser, misalnya Mozilla Firefox, Microsoft Internet Explorer, Opera

Cara Menginstal Web Server Apache,PHP,dan MySQL dengan Xampp

Menginstal web server Apache, PHP, dan MySQL sangatlah mudah.

Anda cukup mengisntal sebuah paket instalasi bernama XAMPP, maka seluruhnya akan terinstal dengan baik.

Untuk berlatih menginstal XAMPP, lakukanlah langkah-langkah berikut:

1. Silahkan download softwarenya langsung di SINI (xampp-win32-1.6.6-installer.exe.rar)

2. Jalankan file xampp-win32-1.6.6-installer.exe yang sudah Anda download.

   Jalankanlah dengan cara melakukan klik ganda pada nama file xampp-win32-1.6.6 installer.exe dalam Windows Explorer.

3. Ketika muncul jendela seperti di bawah ini, pilihlah bahasa dalam proses instalasi yang ingin Anda gunakan, Kemudian klik tombol OK.

4. Ketika muncul jendela seperti gambar di bawah ini, klik tombol Next.

5. Secara default program akan di install di c:\xampp, anda bisa mengubahnya jika perlu. Setelah yakin klik Next.

 

6. Kemudian pilih Install

6. Ketika muncul jendela proses instalasi seperti gambar di bawah ini, tunggulah beberapa saat hingga proses instalasi selesai seperti terlihat pada gambar berikutnya.

8. Kemudian klik tombol Finish, maka XAMPP telah berhasil Anda instal dalam folder C:\xampp, sesuai dengan yang Anda isikan pada langkah 5.

Mengenal Apache, PHP, MySQL dan Xampp

1. Mengenal Web Server Apache Halaman web yang dibuat menggunakan kode HTML bersifat client-side. Artinya, isi halaman web tersebut diolah di sisi client. Ketika seseorang membuka halaman web, maka server yang menyediakan halaman web tersebut akan langsung mengirimkan halaman web itu kepada si peminta tanpa diolah terlebih dahulu.

Hal tersebut berbeda dengan halaman web yang dibuat dengan bantuan PHP. Halaman web yang dibuat dengan bantuan PHP dapat mengakses dan memanfaatkan database sehingga lebih bersifat dinamis. Isi halaman web-nya dapat berubah tanpa perlu diprogram ulang. Selain itu, halaman web-nya akan diolah terlebih dahulu di sisi server sebelum di kirim ke si pemintanya (server-side). Oleh karena sifatnya yang server-side, maka dibutuhkan sebuah web server. Dalam hal ini, web server yang banyak digunakan untuk PHP adalah Apache.

Tugas utama apache adalah menghasilkan halaman web yang benar kepada client peminta, berdasarkan kode PHP yang dituliskan oleh pembuat web. Jika diperlukan, juga berdasarkan kode PHP yang dituliskan, maka dapat saja suatu database diakses terlebih dahulu (misalkan dalam MySQL) untuk mendukung isi halaman web yang dihasilkan.

2. Mengenal PHP

PHP adalah singkatan dari PHP: hypertext preprocessor. PHP merupakan bahasa pemrograman untuk membuat web yang bersifat server-side scripting. PHP memungkinkan anda untuk membuat halaman web yang bersifat dinamis.

PHP dapat dijalankan pada berbagai macam system operasi, misalkan: Windows, LINUX, dan Mac OS. Selain Apache, PHP juga mendukung beberapa web server lain, misalkan Microsoft IIS, Caudium, PWS dan lain-lain.

Sistem manajemen database yang sering digunakan bersama PHP adalah MySQl. Namun, PHP juga mendukung system manajemen database Oracle, Microsoft Access, Interbase, dBase, PostgreSQL, dan lain-lain.

HIngga kini, PHP sudah berkembang hingga versi 5. PHP 5 mendukung penuh Object-Oriented programming (OOP), integrasi XML, mendukung semua ekstensi terbaru MySQL, serta ratusan peningkatan lainnya, dibandingkan versi sebelumnya.

PHP juga bersifat open source sehingga setiap orang dapat menggunkannya secara gratis.

Irfan Bachdim

Sebelum

Sesudah

Timnas Indonesia

 Sebelum 

Sesudah

Tabel HTML

Table <table>

Table dapat Anda gunakan karena dapat menampilkan informasi dalam bentuk yang ringkas dan

mudah dibaca. Tag awal yang digunakan adalah <TABLE> dan tag penutupnya </TABLE>.

Tag <TABLE> mewakili beberapa bagian penting :

• <CAPTION> …</CAPTION> digunakan untuk membentuk judul table. Judul table

akan terletak di luar table di bagian atas atau di bagian bawah.

• <TH>…</TH> digunakan untuk meletakkan judul table di bagian paling atas atau

bagian paling kiri dari table.

• <TD> …</TD> digunakan sebagai tempat menulis data atau informasi dalam table.

Contoh :

<html>

<head>

<title>tabel 1</title>

</head>

<body>

<center><h1>TABEL</h1></center>

<p>

<table border="1">

<tr>

<td>Tabel dengan single cell</td>

<td>Tabel dengan dua cell</td>

<td>Tabel dengan tiga cell</td>

<td>Tabel dengan empat cell</td>

</tr>

<tr>

<td align="center">A</td>

<td>B</td>

<td>C</td>

<td>D</td>

</tr>

</table>

</body>

</html>

 Lihat Hasilnya Di bawah ini..

 

1. Border Tabel

Contoh :

<html>

<head>

<title>tabel 1</title>

</head>

<body>

<h4>Dengan border normal :</h4>

<table border="1">

<tr>

<td>Kesatu</td>

<td>Barisnya</td>

</tr>

<tr>

<td>Kedua</td>

<td>Barisnya</td>

</tr>

</table>

<h4>Dengan border tebal:</h4>

<table border="8">

<tr>

<td>Kesatu</td>

<td>Barisnya</td>

</tr>

<tr>

<td>Kedua</td>

<td>Barisnya</td>

</tr>

</table>

<h4>Dengan border sangat tebal :</h4>

<table border="15">

<tr>

<td>Kesatu</td>

<td>Barisnya</td>

</tr>

<tr>

<td>Kedua</td>

<td>Barisnya</td>

</tr>

</table>

</body>

</html>

 Lihat Hasilnya Di bawah ini..

 

2. Tabel Tanpa Border

Contoh :

<html>

<head>

<title>tabel 2</title>

</head>

<body>

<h4>Tabel border :</h4>

<table border="1">

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>

<h4>Tabel tanpa border :</h4>

<table border="0">

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>

</body>

</html>

 Lihat Hasilnya Di bawah ini..

 

3. Tabel dengan Caption

Contoh :

<html>

<head>

<title>tabel 3</title>

</head>

<body>

<h4>Tabel dengan Caption :</h4>

<table border="3">

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>

</body>

</html>

 Lihat Hasilnya Di bawah ini..

 

Format Teks HTML

Break

Tag <br> di gunakan untuk memulai baris baru pada document HTML. Kode <br> sendiri kepanjangan dari break row, tag ini fungsinya mirip dengan carriage return. Penulisannya bisa dengan <br>, tapi di blogger biasanya ada masalah dan meminta penulisan kode <br />, jadi

ditutup dengan tanda slash. Bahkan di blogger setiap ganti baris selalu menggunakan kode ini

secara otomatis, khususnya apabila di pengaturannya diatur seperti itu.

Contoh:

<html>

<head>

<title>Contoh Paragraf</title>

Memotong<br>

baris<br>

dalam suatu<br>

paragraf,<br>

gunakan tag br.

</head>

<body>

</body>

</html>

Lihat Hasilnya Di bawah ini..

 

Font

Kode ini untuk pemformatan text, dengan tag <font> kita bisa menentukan format tampilan

font dalam document HTML seperti color, size, style dan lainya.

Contoh:

<html>

<head>

<title>Contoh Formating Font</title>

</head>

<body>

<font color="#9966FF" size="3">

Formating Font 1</font>

<p>

<font face="Courier New, Courier, mono">

Belajar memformat font.

</font>

</p>

</body>

</html>

Lihat Hasilnya Di bawah ini..

Color

Atribut COLOR Anda bisa gunakan untuk mengatur warna font. Ada 2 cara untuk memberi

warna pada atribut color. Cara yang pertama dengan menuliskan nama warna yang ingin

digunakan seperti: red, blue, yellow, dll. Cara yang kedua dengan menggunakan nilai RGB.

Contoh: 

<HTML>

<HEAD>

<TITTLE>Warna font</TITTLE>

</HEAD>

<BODY>

<FONT SIZE="4">

<P><FONT COLOR="RED"> Arsenal, Juara piala FA</FONT></P>

<P><FONT COLOR="BLUE"> Arsenal, The Best</FONT></P>

<P><FONT COLOR="GREEN"> Arsenal, Top Bgt</FONT></P>

</FONT>

</BODY>

</HTML>

 Lihat Hasilnya Di bawah ini..

 

Elemen Dasar HTML

Paragraf <p>…</p>

Untuk dapat membuat paragraph dalam HTML Anda bisa menggunakan tag <P> dan diakhiri

dengan </P>. Anda bisa mengatur paragraph yang Anda buat dengan menggunakan atribut

ALIGN dengan dikuti posisi yang Anda inginkan, LEFT untuk rata kiri, CENTER untuk rata

tengah, dan RIGHT untuk rata kanan:

<HTML>

<HEAD>

<TITLE>Contoh Paragraf</TITLE>

</HEAD>

<BODY>

<P ALIGN="right">Dalam perancangan suatu antarmuka terdapat

5

akses-akses penting yang harus diperhatikan.

Aspek-aspek tersebut akan sangat menunjang

dalam hasil dari perancangan perangkat lunak tersebut.

Aspek yang harus diperhatikan tidak hanya dipandang dari

satu sisi programnya saja, tetapi juga dari aspek

manusianya yang merupakan pengguna dari

</P>

<P ALIGN="center"> Dalam perancangan suatu antarmuka terdapat

akses-akses penting yang harus diperhatikan.

Aspek-aspek tersebut akan sangat menunjang

dalam hasil dari perancangan perangkat lunak tersebut.

Aspek yang harus diperhatikan tidak hanya dipandang dari

satu sisi programnya saja, tetapi juga dari aspek

manusianya yang merupakan pengguna dari

</P>

<P ALIGN="left">Dalam perancangan suatu antarmuka terdapat

akses-akses penting yang harus diperhatikan.

Aspek-aspek tersebut akan sangat menunjang

dalam hasil dari perancangan perangkat lunak tersebut.

Aspek yang harus diperhatikan tidak hanya dipandang dari

satu sisi programnya saja, tetapi juga dari aspek

manusianya yang merupakan pengguna dari

</P>

</BODY>

</HTML>

Lihat Hasilnya Di bawah ini..

Heading <h1>…</h1>

Merupakan sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen HTML.

Heading akan berbeda dengan tag <TITTLE> yang tidak akan muncul dalam halaman web.

HTML menyediakan enam tingkat heading.

<HTML>

<HEAD>

<TITLE>Heading</TITLE>

</HEAD>

<BODY>

<H1>Heading level1</H1>

<H2>Heading level2</H2>

<H3>Heading level3</H3>

<H4>Heading level4</H4>

<H5>Heading level5</H5>

<H6>Heading level6</H6>

</BODY>

</HTML>

Lihat Hasilnya Di bawah ini..

 

Struktur dasar HTML

HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/").

Sebuah halaman web minimal mempunyai empat buat tag, yaitu :

1. <HTML>
Setiap document HTML harus di awali dan di tutup dengan tag HTML
<HTML>
</HTML>

tag HTML memberi tahu browser bahwa yang di dalam kedua tag tersebut adalah
document HTML.

2. <HEAD>
 Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di dalam bagian
ini dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser.
Contoh :
<HTML>
<HEAD><TITLE> </TITLE>
</HEAD>
</HTML> 

3.<TITLE>
Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar).

Contoh :
<HTML>
<HEAD>

<TITLE>Belajar HTML</TITLE>
</HEAD>
</HTML>

4. <BODY>
Document body di gunakan untuk menampilkan text, image link dan semua yang akan
di tampilkan pada web page.
Contoh :
<BODY> Di dalam tag ini bisa diletakkan berbagai page attribute seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain.</BODY>

Atribut : 

 BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK, LEFTMARGIN & TOPMARGIN.

Contoh :

<BODY bgcolor="#000000" background="images/pcb.gif" text="#FFFFFF" link="#FF0000" vlink="FFFF00" alink="#0000FF"> Saya Suka Belajar HTML!!!!</BODY>

Untuk menamai atau memberikan judul pada halaman web yang akan Anda buat maka
digunakan tag <TITTLE> dan </TITTLE>. Judul ini akan terlihat pada sudut kiri atas pada
halaman web. Tag <TITTLE > akan berada di dalam tag <HEAD>. Kini saatnya Anda membuat
halaman web Anda yang pertama. Bukalah Notepad dari Start Menu dan ketik kode
html di bawah ini, kemudian simpanlah di C:\My Documents\hello.html. Ingat! Nama filenya
adalah hello.htm atau hello.htm, bukanlah hello.htm.txt atau hello.txt. 

<HTML>
<HEAD>
<TITTLE>Selamat datang pada HomePage Saya</TITTLE>
</HEAD>
<BODY>
Halo semua, Bagaimana kabar Anda sekalian?
3
</BODY>
</HTML> 

Kemudian, bukalah Mozilla Firefox dan pilih menu: File Open, dan bukalah C:\My
Documents\hello.html. Maka akan terlihat sebagai berikut :

 

Contoh 1 :

<HTML>

<HEAD>

<TITLE>Halaman pembuka</TITLE>

</HEAD>

<BODY>
              Belajar bahasa pemrograman web ternyata mudah juga :)

</BODY> 

</HTML>

Lihat Hasilnya Di bawah ini..