HTML DAN PHP

BAB I

HTML

1.        Sejarah, Pengertian HTML

Pada awal kemunculannya di penghujung 1990-an, XML (Extensible Markup Languange) kerap dianggap sebagai bahasa markup pengganti HTML (Hypertext Markup Languange). Mungkin karena sama-sama turunan dari SGML (Standard Generalized Markup Languange). Padahal, XML dibuat untuk menjembatani interoperabilitas antar software dari platform yang berbeda. Awalnya markup language digunakan oleh para penulis, editor, dan awak percetakan dalam dunia penerbitan, untuk menandai sebuah naskah dipresentasikan.

HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 1990 HTML mengalami perkembangan yang sangat pesat. Setiap pengembangan HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya. Namun perkembangan resmi dikeluarkan pada bulan November 1995 oleh IETF (Internet Engineering Task Force). HTML 2.0 ini merupakan penyempurnaan dari HTML +  (1993).

HTML 3.0 (1995) memberikan kemampuan lebih daripada versi sebelumnya. Sebuah usaha dari World Wide Web Consortium’s (W3C) HTML Working Group pada tahun 1996 menghasilkan HTML 3.2. HTML versi ini secara resmi diterbitkan pada bulan Januari 1997.

HTML versi terbaru adalah HTML 4.01 yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998. HTML merupakan perbaikan dari HTML 4.0 yang lebih dulu diterbitkan.

Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk menulis halaman web. HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu.

 Dengan kata lain, markup language adalah gabungan antara naskah dengan informasi tambahan tentang naskah itu sendiri. Contoh markup language yang paling lazim kita temukan saat ini di internet adalah HTML.

XML didesain oleh sebuah kelompok kerja yang terdiri dari sebelas orang. Mereka mendapat dukungan dari 150 orang di luar kelompok tersebut. Pemimpin bidang teknis tim sebelas, James Clark, menyumbangkan elemen empty “<empty/>”, dan nama XML itu sendiri. Nama-nama lain yang sempat diusulkan antara lain MAGMA (Minimal Architecture for Generalized Markup Applications), SLIM (Structured Language for Internet Markup), dan MGML ( Minimal Generalized Markup Language). Pada 10 Februari 1998, XML 1.0 direkomendasikan secara resmi oleh W3C. 

XML 1.0 merupakan pencapaian tim sebelas dalam mendesain markup language untuk tujuan penggunaan di Internet, yang serba guna, dan kompetibel dengan SGML. Selain itu, XML 1.0 juga mendukung pengembangan software yang memprosesnya, meminimalisasi fitur-fitur opsional, terbaca oleh manusia, singkat, padat, dan mudah untuk ditulis.

2.        Kegunaan HTML

Hypertext Markup Language adalah standard bahasa yang di gunakan untuk menampilkan document web, yang bisa anda lakukan dengan HTML yaitu:

a)    Membuat, mendesain, dan mengontrol tampilan dari web page (Halaman Web) dan isinya.

b)   Mempublikasikan document secara online sehingga bisa di akses, dilihat dan ditampilkan dari dan ke seluruh dunia.

c)    Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online.

d)   Menambahkan object-object seperti image, audio, video dan juga java applet (aplikasi java seperti java game dll) dalam document HTML.

Dengan menggunakan HTML anda dapat membuat antara lain :
        Memodifikasi format teks

Penggunaan HTML memungkinkan kita untuk memodifikasi tampilan atau format dokumen yang akan kita transmisikan melalui media Internet. Beberapa hal yang dapat dilakukan dalam menentukan format dokumen ini adalah :

-       Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.

-       Kita dapat menampilkan teks dalam bentuk cetakan tebal

-       Kita dapat menampilkan sekelompok kata dalam bentuk miring

-       Kita dapat menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik

-       Kita dapat mengubah-ubah ukuran font untuk suatu karakter tertentu.

Menampilkan daftar sesuatu dalam bentuk point-point (item)

Dengan HTML kita dapat menampilkan daftar atau deretan informasi dalam bentuk point-point sehingga lebih mudah dibaca dan dipahami

     Membuat link

Konsep hypertext pada HTML memungkinkan kita untuk membuat link pada suatu kelompok kata atau frase untuk menuju ke bagian manapun dalam World Wide Web. Ada tiga macam link yang dapat kita gunakan :

-          Link menuju bagian lain dari page

-          Link menuju page lain dalam satu web site

-          Link menuju resource atau web site yang berbeda

Menyisipkan citra

       Dengan menyisipkan citra maka tampilan page kita akan lebih menarik, interaktif dan informatif untuk mendukung data-data lainnya dalam bentuk teks.

Menampilkan informasi dalam bentuk tabel

Penampilan informasi dalam bentuk tabel ini akan mempermudah pembaca untuk memahami informasi yang kita tawarkan. Penggunaan tabel ini juga dapat dilakukan untuk menambah nilai estetika dari page yang akan kita rancang.

3.        Dasar – dasar HTML

Mendesain HTML berarti melakukan suatu tindakan pemrograman. Namun HTML bukanlah sebuah bahasa pemrograman. Namun HTML hanyalah berisi perintah-perintah yang telah terstruktur berupa tag-tag penyusun. Menuliskan tag-tag HTML tidaklah sebatas hanya memasukkan perintah-perintah tertentu agar HTML kita dapat di akses oleh browser.

Mendesain HTML adalah adalah sebuah seni tersendiri. Homepage yang merupakan implementasi dari HTML adalah refleksi dari orang yang membuatnya. Untuk itu kita perlu mendesainnya dengan baik agar para pengunjung homepage yang kita buat merasa senang dan bermanfaat.
Mendesain HTML dapat dilakukan dengan dua cara:

1.      Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe

Dreamweaver, dan lain-lain. Dapatkan editor HTML lainnya disini.

2.      Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam dokumen HTML.

Ada kelebihan dan kekurangan dari dua cara di atas. Cara pertama kelebihannya adalah HTML Editor merupakan sebuah program yang khusus didesain untuk membuat, melakukan editing bahkan mem-publish ke internet.

Dengan kemampuannya menggabungkan kemudahan dan kecanggihan teknologi internet ke dalam dokumen HTML maka cara ini sangat disukai oleh para pemula dan desainer yang tidak ingin belajar lebih mendalam mengenai HTML.

Sedangkan cara kedua adalah menuliskan secara manual satu persatu tag-tag HTML. Hal ini sangat disarakan sulit dikarenakan akan memakan tenaga dan waktu ekstra untuk melakukannya, ditambah lagi Anda harus melakukan cara-cara konvensional untuk melihat hasilnya pada web browser.

Namun pada cara kedua adalah dasar dari segala bentuk HTML yang akan Anda pelajari, karena dengan cara itulah Anda akan lebih paham mengenai cara kerja dan berbagai perintah yang biasa dipakai pada bahasa HTML.

4.        Atribut HTML

Tag HTML dapat memiliki atribut. Atribut memungkinkan informasi tambahan pada elemn HTML.

Atribut selalu memiliki pasangan nama/nilai seperti ini: nama=”nilai”.

Atribut selalu dicantumkan pada awal tag elemen HTML.

 Contoh Atribut 1:

<h1> mendefinisikan awal sebuah judul.

<h1 align=”center”> memiliki informasi tambahan tentang perataan baris.

 Contoh Atribut 2:

<body> mendefinisikan badan/isi halaman HTML kita.

<body bgcolor=”red”> akan membuat background layar menjadi merah.

Contoh Atribut 3:

<table> mendefinisikan sebuah tabel HTML (nanti kita pelajari lebih lanjut).

<table border=”1”> memiliki tambahan informasi mengenai ketebalan garis pada tabel.

Selalu Gunakan Tanda Kutip pada Nilai Atribut

Nilai atribut seharusnya selalu diapit oleh tanda kutip. Tanda kutip ganda paling sering digunakan, tapi sebenarnya tanda kutip tunggal juga bisa.

Pada beberapa situasi tertantu yang sangat jarang terjadi, seperti misalnya saat nilai atribut itu sendiri berisi tanda kutip, maka kamu bisa gunakan tanda kutip tunggal.

Contohnya seperti ini:

nama=’Uzumaki “Jurus Seribu Bayangan” Naruto’

Ok.

5.        Entitas HTML

Beberapa karakter memiliki arti khusus dalam HTML, seperti tanda lebih kecil (<) yang mendefinisikan awal dari sebuah tag HTML. Kalau kita ingin agar browser menampilkan tanda lebih kecil itu (<), kita harus menyisipkan entitas karakter dalam kode HTML kita.

Entitas karakter memiliki 3 komponen: sebuah tanda dan (&), nama entitas atau sebuah # yang diikuti nomor entitas dan diakhiri dengan tanda titik koma (;).

Untuk menampilkan tanda lebih kecil dalam halaman HTML kita, maka kita harus menuliskan : &lt; atau &#60;

Keuntungan menggunakan nama dibandingkan nomor adalah bahwa nama lebih mudah untuk diingat. Kekurangannya adalah bahwa tidak semua browser mendukung nama-nama entitas yang baru, namun demikian hampir semua browser mendukung nama entitas standar.
Catatan: entitas bersifat case sensitif.

Spasi berurutan

Entitas karakter yang mungkin akan paling sering kamu pakai adalah spasi.

HTML akan menghilangkan spasi dalam teks HTML kamu. Kalau kamu menuliskan 10 spasi pada kode HTML kamu, maka HTML akan menghapus 9 spasi. Nah, untuk menambahkan spasi pada dokumen HTML kamu, gunakan entitas karakter & nbsp;

Beberapa entitas karakter yang sering dipakai:

Hasil	Penjelasan	Nama Entitas	Nomor Entitas
	Spasi	 	 
<	Kurang dari	&lt;	&#60;
>	Lebih dari	&gt;	&#62;
“	Tanda kutip	&quot;	&#34;
‘	Kutip tunggal	&apos; (Ndak berlaku di IE)	&#39;
&	Dan	&amp;	&#38;

Contoh untuk memperjelas tentang apa yang dimaksud dengan entitas karakter.  Salah satu contoh adalah tag <b> </b> untuk menebalkan huruf.  Bayangkan kalau suatu ketika kamu diminta untuk menulis tutorial tentang HTML dan kebetulan akan menulis tentang tag HTML yang berfungsi untuk menebelkan huruf. Misalnya kamu ingin baris berikut tampil di tutorial kamu (perhatikan, kamu ingin agar tag <b> dan </b> muncul dalam baris tersebut).

Untuk menebalkan huruf seperti kata tebal ini, kamu memerlukan tag <b> dan </b>. Cara menuliskan baris sederhana ini tanpa entitas karakter.

Untuk menebalkan huruf seperti kata <b>tebal</b> ini,

memerlukan tag <b> dan </b>

Untuk membuat agar tag <b> dan </b> dapat muncul, kamu memerlukan entitas karakter, sehingga kamu harus menuliskan kode HTML menjadi seperti ini:

Untuk menebalkan huruf seperti kata <b>tebal</b> ini,

 memerlukan tag &lt; b&gt; danlt;/b&gt;

Tanda <  diganti dengan entitas karakter &lt;, sedangkan tanda > diganti dengan &gt;.

Cara menampilkan &gt; biar yang keluar bukan > yaitu gunakan &amp di depannya untuk meng-escape tanda & sehingga  bisa tulis seperti ini &amp; &gt; (tanpa spasi di antara &amp; dan &gt;. Dengan menuliskan menggunakan spasi, karena tidak mungkin tuliskan tanpa spasi.)

6.        Link HTML

Dalam istilah web, hyperlink adalah referensi (sebuah alamat) ke sumber-sumber informasi lain di Internet.Hyperlink biasanya merujuk ke sebuah halaman HTML, sebuah gambar, file suara, movie, dll.Sedangkan anchor (bahasa Indonesianya Jangkar) adalah istilah yang digunakan untuk mendefinisikan tujuan hyperlink dalam sebuah dokumen.

Kelebihan utama dari dokumen HTML adalah kemampuannya untuk memberikan link dari satu teks dan atau gambar menuju ke dokumen atau bagian lain dalam dokumen. Browser web akan menyorot (highlight) teks atau gambar yang diidentifikasi sebagai link dengan warna dan /atau garis bawah untuk menunjukkan bahwa itu adalah hyperteks link (sering diperpendek dengan hyperlink atau link saja).

Untuk membuat hyperlink dan anchor kita menggunakan elemen HTML anchor <a>.

Istilah link HTML saat elemen <a> merujuk ke sebuah halaman dan istilah anchor HTML saat element <a> tersebut merujuk ke sebuah alamat di dalam dokumen.

               Sintaks link : 

                               <a href="/caramembuatwebsite/url">Teks Link</a>

Tag pembuka berisi atribut link tersebut. Isi elemen (Teks link) mendefinisikan apa yang ingin anda tampilkan ke pengunjung.

Catatan: Isi elemen tidak harus berupa teks lho. Kamu juga bisa me-link dari sebuah gambar atau elemen HTML lainnya.

 

Atribut href

Atribut href adalah alamat yang akan dibuka saat seseorang mengklik link yang kita buat. Elemen <a> ini mendefinisikan sebuah link yang akan menuju ke sebuah web site yaitu kursus-online.com:

<a href="http://www.kursus-online.com/">Pengen belajar bikin web

sambil Praktek sekalian bisa dapet duit?. Klik di sini aja!</a>

Atribut target

Atribut target sangat berguna bagi kita untuk mengatur halaman yang kita tuju itu akan dibuka di mana. Kita bisa membukanya di halaman utama ini langsung atau membukanya di halaman baru saat seorang pengunjung mengklik link yang kita sediakan.

Berbeda dengan kode sebelumnya yang membuka web site kursus-online.com di jendela yang sama, kode ini akan membuka web site kursus-online.com pada sebuah jendela baru:

<a

href="http://www.kursus-online.com/"

target="_blank"> Pengen belajar bikin web sambil Praktek sekalian

bisa dapet duit?. Klik di sini aja!</a>

 

Attribute name

Saat kita menggunakan atribut name, maka itu berarti kita mendefinisikan sebuah nama anchor yang berada di dalam sebuah halaman HTML.

Nama anchor tidak akan nampak di mata pengunjung. Itu hanya merupakan pendefinisian di sebuah halaman web aja.

Cara membuat sebuah anchor:

<a name="label">Apapun</a>

link yang menuju ke halaman itu

<a href="#label">Apapun</a>

Perhatikan tanda # yang mendefinisikan nama anchor:

Contoh:

Sebuah anchor dalam dokumen HTML:

                               <a name="top">Ini bagian paling atas</a>

Sebuah link yang merujuk ke bagian paling atas dalam dokumen yang sama: 

<a href="#top">Kembali ke atas</a>

Sebuah link yang menuju ke sebuah anchor di halaman web lain:

               <a href="http://www.prothelon.com/mambo/contoh.htm#top">

Kembali ke halaman utama paling atas</a>

 

Catatan penting dan tips yang pastinya akan berguna

Ingat untuk selalu menambahkan garis miring di akhir sub folder link kita.

Jika link kita bentuknya seperti ini:

href="http://www.prothelon.com/mambo",

maka kamu akan membuat 2 buah permintaan http ke server, karena server akan menambahkan garis miring dan membuat alamat yang kita minta tadi menjadi seperti ini:

href="http://www.prothelon.com/mambo/"

Dengan menambahkan garis miring di akhir sub folder, kita sudah menghemat resource di server.

Bisa menggunakan Anchor untuk membuat daftar isi di awal sebuah dokumen yang panjang.

7.        Tag dan Elemen HTML

Dokumen HTML adalah file teks yang terdiri dari elemen HTML. Elemen HTML itu didefinisikan menggunakan apa yang disebut dengan tag HTML. Berikut poin-poin yang akan membantu kamu mengingat dan memahami pengertian Tag HTML:

·       Tag HTML digunakan untuk menandai (mark-up) elemen HTML

·       Tag HTML berada di antara dua karakter penanda berikut < dan >

·       Karakter penanda itu disebut dengan tanda kurung siku

·       Tag HTML umumnya selalu berpasangan seperti <b> dan </b>

·       Tag pertama adalah tag pembuka, dan tag kedua adalah tag penutup

·       Teks di antara kedua tag tersebut disebut isi elemen

·       Tag HTML tidak bersifat case sensitif, <b> memiliki arti yang sama dengan <B>

Contoh elemen HTML adalah :

<html>

<head>

<title>Judul Halaman</title>

</head>

<body>

Ini halaman pertama saya. <b>Teks ini ditebalkan</b>

</body>

</html>

                               <b>Teks ini ditebalkan</b>

Elemen HTML ini dimulai dengan tag pembuka: <b>

Isi dari elemen HTML adalah: Teks ini ditebalkan

Elemen HTML diakhiri dengan tag penutup: </b>

Fungsi tag <b> adalah untuk mendefinisikan sebuah elemen HTML yang harus ditampilkan dengan huruf tebal.

Inilah juga adalah elemen HTML : 

<body>

Ini adalah halaman pertama saya. <b>Teks ini ditebalkan</b>

</body>

Elemen HTML ini dimulai dengan tag pembuka <body>, dan berakhir dengan tag penutup </body>. Fungsi dari tag <body> adalah untuk mendefiniskkan elemen HTML yang berisi badan (isi) dari dokumen HTML. Mengapa kita menggunakan tag dalam huruf kecil? Kita sudah membahas sebelumnya bahwa tag HTML tidak case sensitif: <B> memiliki arti yang sama dengan <b>.  Kalau kamu lagi surfing web, kamu akan melihat bahwa banyak situs web menggunakan tag HTML dalam huruf besar dalam source codenya. Tapi dalam contoh di atas, kita menggunakan huruf kecil. Tahu kenapa? Kalau kamu mengikuti standar web terbaru, kamu harus selalu menggunakan tag dalam huruf besar. World Wide Web Consortium (W3C) merekomendasikan penggunaan huruf kecil dalam rekomendasi HTML 4 mereka, dan XHTML (generasi berikutnya dari HTML) memerlukan tag dalam huruf kecil.

Dasar HTML terutama beberapa TAG menarik untuk mengubah tampilan paragraf, judul, dll.

8.        Cara Membuat Paragraf & Mengubah Tampilan Teks

Menulis dokumen apapun pasti memerlukan paragraf. Mari kita lihat tag HTML yang digunakan untuk membuat sebuah paragraf yaitu tag. Kita menggunakan tag <p> untuk membuat sebuah paragraf baru.

Saat kita menggunakan tag ini, dia akan menambahkan sebuah baris kosong di atas dan di bawah teks paragraf yang kita tulis. Baris-baris kosong tersebut adalah baris yang menandakan sebuah paragraf dan memisahkan paragraf tersebut dari paragraf-paragraf yang lainnya. Dan...tentu saja kita harus menutup paragraf kita dangan pasangannya yaitu tag </p>. Contoh kode HTML:

<p>Ini adalah sebuah contoh paragraf yang panjang dan menarik,

               sehingga kalimat ini tidak ada isinya sama sekali. <p>

Bisa melakukan proses perataan pada paragraf yang kamu bikin. Hal ini sangat mudah dilakukan, yaitu dengan menambahkan atribut HTML align. Contoh tag di bawah ini akan membuat paragraf kamu rata kiri kanan.

<p align="justify">Ini adalah paragraf yang rata kanan dan rata

kiri

Ganti-ganti isi atribut align tersebut dengan kata center untuk membuat paragraf menjadi di tengah, left rata kiri, dan right untuk rata kanan.

Tampilan huruf seperti ini sangat penting untuk dilakukan, misalnya pada saat kita perlu memberikan penekanan pada kata-kata tertentu yang kita anggap penting, pada umumnya kita menggunakan huruf tebal, atau pada saat menggunakan istilah asing, maka kita perlu membuatnya menjadi miring (atau istilah lainnya italic). Jika iya, maka tutorial HTML kali ini pas banget buat kamu. HTML menggunakan tag untuk semua perintah yang dilakukannya. Untuk mengubah tampilan dan format teks, HTML juga menggunakan tag-tag seperti <b> (untuk menebalkan huruf) dan <i> (untuk menampilkan huruf miring) untuk menampilkan teks atau huruf sesuai dengan kebutuhan kita.

Berikut beberapa tag untuk mengubah tampilan huruf yang sering digunakan:

Tag	Deskripsi
<b>	Menebalkan huruf
<i>	Menampilkan huruf miring
<big>	Menampilkan huruf dalam ukuran besar
<small>&<strong>	Menampilkan huruf dalam ukuran kecil
<u>	Menuliskan huruf bergaris bawah
<sup>	Menuliskan kuadrat

BAB II

PHP

1.        Pengertian PHP

PHP adalah sebuah bahasa script yang sangat bagus dan merupakan pasangan yang pas untuk bahasa HTML. Dengan kemampuan PHP untuk membuat website yang dinamis serta keindahan desain menggunakan HTML, maka nyaris tidak ada yang tidak dapat dilakukan gabungan kedua bahasa ini di dunia web. PHP ini merupakan bahasa yang sangat mudah (bagi yang pernah mempelajari C atau bahasa pemrograman lain akan sangat merasakan perbedaaan ini. Contoh salah satu perbedaan yang paling terasa adalah bahwa  deklarasi variabel di awal, kalau butuh variabel tinggal pakai). Kelebihan lain PHP adalah lisensinya yang open source, artinya selain boleh make secara gratis anda memiliki keuntungan tambahan yaitu tersedia banyak sekali materi pendukung yang tersebar di Internet (salah satunya di situs ini). Setelah kita memahami dasar-dasarnya, akan sangat mudah bagi kita untuk mengembangkan kemampuan kita karena ada begitu banyak materi tentang PHP yang bisa kita pelajari lebih lanjut. Pembuatan website menggunakan PHP ini dengan cara mempelajari script-script PHP yang sudah ada.

Mengenal PHP saat harus membuat aplikasi berbasis web di kantor.  Untuk mengerti urut-urutan yang disarankan untuk mempelajari PHP. Sebelum mulai, anda perlu menginstal server di komputer anda untuk mencoba script yang anda buat secara lokal. (Jika anda memiliki space di server yang support PHP anda juga bisa ngetes script di sana, tapi lebih rumit dan makan biaya soalnya perlu FTP, akses internet). Kalo belum punya software untuk menambahkan fungsi web server, PHP di komputer anda, coba cari di google kata kunci phptriad download, terus instal saja di PC anda. Jika sudah selesai instal, hidupi Apachenya (kalau udah perlu database  juga MySQLnya, untuk cara koneksi PHP ke MySQL lihat di artikel “menghubungkan PHP dengan MySQL”) terus coba ketik di addres http://localhost kalo dah keluar halaman awal Apache, berarti PC anda sudah siap untuk ngetes PHP. (Sebelum lupa, direktori tempat kita harus meletakkan file-file nanti ada di c:\apache\htdocs). 

2.        Pengenalan PHP

Cara menggunakan PHP juga sangat mudah. Pada prinsipnya anda hanya perlu menyisipkan kode PHP ke dalam tag-tag HTML yang sudah ada di situs anda.

Cara bekerjanya secara singkat adalah seperti ini. Ketika ada yang mengakses web anda di halaman yang berisi kode PHP (tentunya dengan file berekstensi .php), server anda akan mengeksekusinya dan kemudian mengirimkan hasil eksekusinya ke web server untuk selanjutnya ditampilkan menggunakan kode HTML. Itulah sebabnya anda perlu menginstal server anda sendiri untuk mengetes kode PHP anda secara lokal.

Dalam hal ini, server merupakan otaknya dan fungsi browser hanyalah untuk menampilkan hasil output serverPHP ke PC klien, yaitu PC anda. Ingat, PC anda tidak memerlukan tambahan khusus atau apapun untuk melihat hasil eksekusi kode PHP anda. Karena, browser anda kan sudah mengerti dan bisa menampilkan bahasa HTML. Web server akan mengolah kode PHP anda dan menampilkan outputnya langsung dalam format HTML. HTML inilah yang dikirimkan ke browser anda. Jadi, hasil output PHP akan diterima melalui internet oleh browser anda dalam format standar HTML. Tentu saja browser anda tidak memerlukan tambahan apapun, karena dia tetap menjalankan tugasnya persis seperti saat menampilkan halaman web tanpa script PHP.

Anda juga perlu tahu bahwa sama seperti HTML, PHP merupakan sebuah bahasa script atau kalau zaman dulu sering disebut interpreter. Hal ini berarti kode tidak perlu di-compile sebelum digunakan. Kode yang kita buat hanya akan diproses saat diperlukan. Ini berbeda dengan bahasa pemrograman seperti C, VB maupun Delphi yang perlu di-compile (di-compile artinya di ubah dari bentuk text ke bentuk bahasa mesin yang bisa langsung dieksekusi oleh komputer, biasanya ekstensi filenya adalah EXE). Konsekuensinya enak, anda menulis kode PHP dalam bentuk teks dan menyimpannya dalam bentuk teks juga. Tapi...... script PHP anda jadi memerlukan interpreter yaitu server PHP untuk mengeksekusi kode PHP yang masih dalam bentuk teks, sedangkan pada program hasil compile dalam bentuk executable file tidak memerlukan program lain untuk bisa dieksekusi. Server PHP ini adalah penerjemah kode PHP menjadi bahasa mesin yang dikenal oleh hardware komputer. Kalau anda memerlukan pendalaman lebih detil tentang sintak-sintaks PHP, maka anda bisa mengunjungi situs  php.net. Situs ini berfungsi sebagai pusat pengembangan dan dokumentasi resmi dari PHP (ingat kan, PHP itu sifatnya open source, jadi harus ada tempat berkumpul dan berkoordinasi buat para pengembangnya.

 Php.net memiliki banyak materi referensi mengenai PHP dan berbagai macam tips yang dikirim para programmer dari seluruh penjuru dunia. PHP.net memiliki informasi yang sangat hebat dan mendalam mengenai PHP, tapi akan sangat mengerikan bagi pemula untuk langsung terjun ke sana. Itulah sebabnya situs ini dibuat, selain materi di sana sudah advance, yang repot buat kita ya bahasa inggrisnya itu .  PHP bisa :

·       Mengambil informasi dari form berbasis web dan menggunakannya untuk berbagai macam keperluan (menyimpan dalam database, membuat halaman berkondisi berdasarkan isi form, ngirimin e-mail, ngirim e-mail ke pacar secara otomatis saat ultah do’i, pokoknya macem-macemlah);

·       Autentikasi dan menelusuri pengunjung, artinya kita bisa tau pengunjung situs kita itu lebih senang ngeliat halaman yang mana;

·       Melayani halaman yang berbeda-beda tergantung pada penggunaan browser atau peralatan (misalnya kita bisa tahu pengunjung situs kita itu pake IE atau Firefox atau PDA dan memperlakukannya secara berbeda. Kebayangkan kalau layar sekecil PDA dicekokin halaman web standar yang gede?);

• Menampilkan seluruh halaman situs kita dengan hanya menggunakan satu layout. Kalau halamannya statis, kita harus membuat satu layout untuk satu halaman bisa bete tuh;

Cara membuat blok program PHP dengan skrip sederhana berikut.

·         Tulis kode di bawah ini (yang berwarna merah itu) pakai notepad.

·         Terus simpan dengan nama prothelon.php.

·         Jangan lupa saat menyimpan di kotak file name, nama file harus diapit dengan tanda kutip (“prothelon.php”) soalnya kalau tidak begitu, nanti ekstensinya akan jadi txt dan nama filenya jadi prothelon.php.txt. Skrip sederhana ini akan menampilkan tulisan:

“Anda berada di situs Prothelon!” pada browser anda.

               <?

               print ("Anda berada di situs Prothelon!");

               ?>

Kata-kata dalam tanda kurung adalah teks yang akan di tampilkan oleh browser, sedangkan sisanya merupakan kode PHP.

Tag merupakan awal dan akhir skrip, sedangkan karya-karya anda harus diletakkan di tengahnya.

3.        Aturan Penulisan Kode PHP

Kalau kode-kode PHP anda akan disisipkan di antara kode-kode HTML. Sebagai akibatnya, PHP dan HTML akan sama-sama kita tulis dalam bentuk teks biasa. Kode PHP anda (misalnya dalam contoh di bawah ini  adalah sebuah halaman yang menampilkan kata-kata “Anda berada di situs Prothelon!”) akan berada di sela-sela kode-kode dalam sebuah file HTML yang berekstensi .php, bukan .htm atau .html seperti biasanya. Contoh penjelasan tersebut adalah :

<html>

<head>

<title> Contoh Halaman PHP </title>

</head>

<body>

<font color="blue">PHP kode saya akan membuat halaman ini menampilkan:</font>

<p>

  <?php

  print ("Anda berada di situs Prothelon!");

  ?>

</body>

</html> 

Cara kerja PHP dan HTML. HTML tetap diperlakukan sebagaimana HTML persis seperti HTML tanpa kode PHP, tetapi semua kode yang berada di antara tag akan dianggap kode PHP dan diproses oleh server PHP.  Hasil output dari proses PHP itu yang akan ditampilkan oleh HTML ke browser.

Perhatikan bahwa jika anda menyimpan file dengan ekstensi .htm/html, maka browser juga akan muncul akan menampilkan juga tag php namun tidak memprosesnya, sehingga muncul seperti ini:

<?php  

print ("Anda berada di situs Prothelon!");

?>

Cara Penulisan Kode PHP

Setelah anda memahami bagaimana sebuah kode PHP dan HTML dikawinkan dan diproses, sekarang saatnya bagi anda untuk mempelajari aturan-aturan dasar penulisan sintaks PHP. Aturan-aturan dasarnya secara singkat adalah sebagai berikut:

Penamaan File

File PHP anda harus disimpan dengan ekstensi .php (jika anda menemukan file dengan  ekstensi .php3 atau phtml maka kemungkinan besar file-file tersebut ditulis menggunakan PHP versi 3 ke bawah). Seperti sudah saya jelaskan sebelumnya, file-file tersebut akan disimpan sebagai file teks biasa. (Artinya kita ndak butuh editor khusus kalau kepepet, cukup notepad. Namun perlu diingat bahwa notepad tidak memunculkan nomor baris yang akan kita perlukan saat melakukan debugging jika ada masalah dengan kode kita).

Komentar
            Komentar adalah bagian penting dalam kode PHP yang anda buat. Anda akan memerlukan komentar ini untuk membantu mengingat lagi kegunaan sebuah blok kode nantinya. Anda harus membiasakandiri untuk menuliskan catatan tentang kode-kode anda dengan tag komentar, sehingga sifat manusiawi kita yang pelupa bisa terbantu jika suatu saat anda perlu mereview kembali kode-kode yang pernah anda buat.

Cara untuk membuat komentar yang tidak ingin anda tampilkan atau eksekusi adalah  dengan menambahkan “//” di awal baris atau mengapit komentar dengan “/*” dan “*/” jika perlu membuat komentar yang panjang:

<?php
// Baris ini akan diabaikan. Catatan untuk kita sendiri:
// Saya membuat script ini sambil

//Membaca, berenang dan menyelam.

print ("Anda berada di situs Prothelon!");/* 

Tiga baris berikut ini juga akan diabaikan. Dan jangan lupa untuk kembali ke situs ini setiap minggu untuk melihat artikel/tutorial baru!
*/
?>

Permulaan Kode

Blok kode PHP diawali dengan “<?php” (atau cukup disingkat “<?” saja bila server anda mengijinkan...dan biasanya bisa).

Akhir Kode

Blok kode PHP ditutup dengan menambahkan “?>” di akhir blok kodenya.

Akhir Baris Program

Setiap baris instruksi program diakhiri dengan tanda titik koma “;”. Artinya walaupun anda menuliskannya lebih dari 1 baris tetap akan dianggap satu baris instruksi program jika belum ada tanda titik koma (lihat contoh di penjelasan tanda kurung di bawah).

Tanda Kurung

Tanda kurung akan banyak anda gunakan dalam kode PHP. Salah satu penggunaan yang sering dilakukan adalah dalam memanggil fungsi. Secara sederhana, setiap fungsi PHP akan berbentuk seperti ini ….

print ( );

"print" adalah nama fungsi dan informasi lain yang perlu ditambahkan pada fungsi tersebut akan anda tuliskandi dalam tanda kurung. Ingat..... jangan lupa untuk mengakhiri dengan tanda titik koma (kesalahan tidak mengakhiri dengan titik koma ini paling sering terjadi pada pemula). Oh iya, sebelum lupa, echo() juga memiliki kegunaan yang sama dengan print(). Spasi, pergantian baris, dll tidak akan mempengaruhi output lho. Sehingga, bagian kode berikut ini ...

<?php
print ("Anda berada di situs Prothelon!");

?>

... akan menghasilkan hal yang sama dengan kode berikut ini:

<?php print ("Anda berada di situs Prothelon!"); ?>

4.        Contoh Script PHP Sederhana

<html>

<body>

<p><p>

<?php

// contoh pertama yang kita gunakan, phpversion ini adalah 

// sebuah fungsi yang akan menampilkan versi PHP yang anda gunakan

phpversion();

// berikutnya, kita coba menampilkan kode HTML 

// ke browser untuk membentuk  

// layout halaman yang kita tampilkan. 

// Dalam kasus contoh kali ini, kita akan menggunakan tag <p>,

// tag <p> dapat diletakkan 

// dalam baris print yang sama seperti saat kita menuliskan 

// teks "Anda berada di situs prothelon.com"

// di antara teks phpversion dan 

// hal-hal lain di baris sesudahnya.

print ("<p>"); /* tag <p> digunakan untuk membuat paragraf baru*/

print ("Anda berada di situs prothelon.com");

print ("<p>");

/* fungsi "phpinfo" berikut ini akan menampilkan sebuah halaman 

yang panjang yang memberikan kita informasi mengenai konfigurasi 

versi PHP yang kita gunakan. Ini akan sangat berguna saat kita 

melakukan troubleshooting nantinya */

phpinfo();

?>

</body>

</html>

5.        Variabel yang fleksibel

1) <?php

2) $isi_variabel = "Ini isi awal variabel!";

3) print ("Menampilkan isi variabel awal : $isi_variabel");

4) print ("<p>");

5) $isi_variabel = "Ini isi Variabel setelah diupdate!";

6) print ("Isi variabel setelah diupdate : $isi_variabel");

7) ?>

Penjelasan variabel yaitu :

Baris 1 memberitahu browser bahwa : “Kode PHP mulai di sini”.

Baris 2 buat variabel $isi_variabel sekaligus mengisinya dengan nilai awal berupa kalimat “Ini isi awal variabel!”.

Baris 3 tampilkan kalimat pengantar untuk variabel $isi_variabel dan sekaligus menampilkan nilai dari $isi_variabel

Baris 4 membuat tag <p> dalam HTML untuk membuat paragraf baru.

Baris 5 Mengupdate isi variabel $isi_variabel dan mengisinya dengan kalimat “Ini isi Variabel setelah diupdate!”.

Baris 6 tampilkan kalimat pengantara kedua dan nilai untuk isi variabel $isi_variabel yang baru.

Baris 7 ngasih tahu si Browser bahwa kode PHP sudah berakhir.

6.        OPERATOR PHP

·       Operator Perbandingan

Operator ini membuat anda bisa melakukan pembandingan apakah beberapa elemen sama, identik, kurang dari atau lebih besar dari yang lain. 

·         Operator Logika

·         Operator Aritmatika

·         Operator IF

Cara untuk membuat halaman anda menjadi “pandai” adalah dengan menggunakan perintah If, Else dan Elseif yang disertai operator-operator logika dan perbandingan. Yang paling penting adalah perintah if, yang memungkinkan anda bisa membuat kode seperti ini:

-          Jika sebuah kondisi benar, maka kerjakan sesuatu;

-          Jika kondisi tersebut salah, maka abaikan saja;

Sintaks untuk pernyataan di atas adalah sebagai berikut:

if (kondisi) {

// Tulis kode yang ingin anda eksekusi jika kondisi benar di sini

}

Berikut adalah contoh yang lebih riil. Pertama kita akan mengeset variabel $WarnaKesukaan dengan biru (baris 3). Kemudian kita akan mengatakan ”Jika WarnaKesukaan adalah biru, maka tampilkan ’Saya juga suka warna biru lho!’”

<?php

$WarnaKesukaan = "biru";

if ($WarnaKesukaan == "biru") {

print ("Saya juga suka warna biru lho!");

}

?>

·         Operator Else

Else merupakan bagian dari perintah if, untuk mengatakan hal sebagai berikut:

• Jika sebuah kondisi benar, maka kerjakan sesuatu;
• atau, jika kondisi pertama tidak benar, maka kerjakan hal yang lain ini.

Contoh:

if (kondisi) {

// Tulis kode yang ingin anda eksekusi jika kondisi benar di sini

} else {

// Tulis kode yang ingin anda eksekusi jika kondisi salah di sini

}

Berikut contoh riil

<?php

$WarnaKesukaan = "kuning";

 if ($WarnaKesukaan == "biru") { 

print ("Saya juga suka warna biru lho!");

} else {

print ("Anda tidak suka biru?! Dasar!");

}

?>

7.        Hulo Loops

Loop sangat bermanfaat dan praktis. Dengan loop, program anda dapat melakukan sebuah pekerjaan secara berulang secara otomatis (dan tentu saja menentukan berapa kali sebuah pekerjaan harus dilakukan sebelum berhenti). Loop memiliki instruksi untuk “tetap melakukan beberapa baris kode secara berulang sampai suatu kondisi tertentu terpenuhi”. Anda dapat menggunakan lebih dari satu jenis loop. Nah, dalam tutorial kali ini kita hanya akan membahas mengenai loop yang sangat dasar yaitu menggunakan “while”.

Loop while dapat digambarkan sebagai berikut:

while (sesuatu benar) (baca: saat suatu kondisi adalah benar…)

{

// lakukan sesuatu yang anda tentukan

}

Loop yang menggunakan While ini sering digunakan bersamaan dengan increment dan decrement sebuah variabel integer. Artinya, Anda dapat memiliki skrip penambahan (atau pengurangan) sebuah nomor (1,2,3, dst) dari dari bagian sebuah skrip yang dilewati, sampai angka-angka tersebut mencapai suatu nilai maksimum atau minimum yang anda tentukan. Jadi, jika anda ingin sebuah skrip menampilkan angka 1 sampai dengan 10, anda dapat dapat mengatakan seperti ini:

a. Variabel $AngkaSaya = 1;

b. Tampilkan $AngkaSaya;

c. Tambahkan 1 ke $AngkaSaya;

d. Kembali ke langkah a. dan kerjakan skrip ini lagi dengan nilai

     $AngkaSaya yang baru;

e. Berhenti saat $AngkaSaya mencapai nilai 11;

Sintaks untuk melakukan increment dan decrement terhadap sebuah variabel adalah sebagai berikut::

Setelah mengetahui hal itu, mari kita coba membuat kode yang akan ssecara otomatis menampilkan angka 1 s.d 10:

baris 1: mulai kode PHP;

baris 3: Isi nilai variabel $AngkaSaya dengan 1;

baris 5: Awali loop "while": Ketika variabel $AngkaSaya kurang dari atau sama dengan 10, kerjakan hal di bawah ini, atau jika tidak keluar dari loop;
baris 9: tampilkan nilai $AngkaSaya saat ini;
baris 11: tambahkan 1 kepada nilai $AngkaSaya;
baris 15: Akhir kode PHP.

Untuk membuat loop anda dapat menggunakan operator-operator perbandingan sebagai batasan atau ketentuan kondisi yang harus dipenuhi untuk menghentikan sebuah loop. Gunakanlah secara kreatif untuk memperoleh hasil optimal.

Loop-loop Lain

PHP memiliki jenis-jenis loop yang lain, namun di luar cakupan tutorial ini. Jika anda ingin mempelajari mereka dan bagaimana cara menggunakannya, klik link di bawah ini dan pelajari di PHP.net (tentu saja dalam bahasa Inggris):

• do..while loop
• for loop
• foreach loop

8.         

BAB III

KESIMPULAN

1.        HTML ( Hyper Text Markup Language) adalah suatu bahasa yang digunakan untuk menulis halaman web. HTML dirancang untuk digunakan tanpa tergantung pada suatu Platform tertentu ( platform independent). Dokumen HTMl adalah suatu teks biasa, dan disebut sebagai Markup language karena mengandung tanda-tanda (tag) tertentu yang digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen sedangkan PHP merupakan script yang menyatu dengan HTML dan berada pada server (server side HTML embedded scripting).

2.        HTML adalah suatu bahasa yang digunakan untuk berkomunikasi antara web server dengan klien (browser) yang diberi markup (tanda) khusus untuk melaksanakan atau menampilkan perintah khusus pula. HTML adalah web statis. Artinya, jika kita ingin membuat web yang mempunyai banyak halaman, maka kita dituntut untuk membuat halaman web yang banyak juga sedangkan PHP adalah suatu bahasa atau script untuk membuat halaman web dinamis. Secara nyata, browser (seperti IE, Firefox, Opera dan kawan-kawannya yang lain) hanya mengerti satu bahasa, yaitu HTML (Hypertext Markup Language). PHP adalah suatu script (tepatnya server-side script) yang memproses perintah-perintah dan mengembalikannya ke server sudah dalam bentuk HTML.

3.        HTML tidak dapat dihubungkan dengan database sedangkan PHP dapat dihubungkan dengan database.

4.        HTML digunakan untuk menampilkan dokumen web, tetapi tidak sulit untuk perhitungan logika sedangkan PHP mendukung untuk itu.

5.        HTML:
<title>
<munir>
<manggatiga>
<b>
<a>
<i>
<html>
<body>
<table width="100%" border="0" cellpadding="5" cellspacing="0">
dan harus ditutup dengan garis miring (/)

</title>
</munir>
</manggatiga>
</b>
</a>
</i>
</html>
</body>
</table>

Penjelasan:
* Tag HTML ditandai dengan menggunakan < dan >
* bila anda mendapatkan potongan code yang disediakan penggenerate code dan melihat ada tanda seperti diatas < dan > maka itu adalah HTML dan akhir elemennya harus ditutup dengan /

menjadi </...>.

Contoh:
<b> buat huruf tebal </b> hasilnya akan seperti ini buat huruf tebal
<i> buat huruf miring </i> hasilnya buat huruf miring
dan lain-lain termasuk manggatiga bisa dikatakan tag HTML bila ditulis <manggatiga> dan </manggatiga>

Untuk pembatas property dan nilai menggunakan sama dengan (=)

Sedangkan PHP :

<?php
echo "Hello World";

$txt = "Hello World!";

$number = 16;

echo $txt1 . " " . $txt2;

?>
Penjelasan:
* PHP ditandai variabel $ karena statusnya untuk script server.
* Bila menampilkan pesan menggunakan tanda kutip " dan "