Pengenalan PHP(1)

  • Sejarah PHP

PHP diciptakan oleh Rasmus Lerdorf, seorang pemrograman C yang andal pada tahun 1994. Semula PHP hanya digunakan untuk mencatat jumlah pengunjung homepagenya. Rasmus adalah seorang pendukung open source.

Sedikit demi sedikit pengguna atau programer komputer mulai menyukai script ini. Selanjutnya di bentangkan sebagai package, yaitu Personal Home Pages tool. Dengan penggalan ini Rasmus Lerdorf telah menciptakan script dan tool yang lain untuk mengambil input dari HTML form:FI. Form interpreter juga dikenali dengan PHP/FI atau PHP2. PHP/FI atau PHP2 berlaku pada tahun 1995.

Pengguna mulai menggunakan tool ini untuk kegunaan yang lebih rumit lagi dan pembangunan script ini telah berpindah dari orang perseorangan kepada kumpulan pembangun untuk membangun proyek ini. Dari sinilah awal mula PHP3. Kumpulan pembagun ini antara lain : Rasmus Lerdrof, Andi Gutmans, Zeev Surusaki, Stig Bakken, Sahane Caraveo dan Jim Winstead.

Ketikan itu PHP4 applikasi pertamnaya terdiri dari Zend engine.Zend engine termasuk dalam package seperti MySQL untuk meningkatkan mutu simpan prosedur di dalam database.PHP4 adalah bahasa scripting yang menyatu dengan HTML dan berada di server (Server Side HTML Embedded Scripting). Di sini syntax-sintax dan perintah-perintah yang kita masukkan akan sepenuhnya dijalankan dan di kerjakan di server dan disertai halaman HTML biasa. PHP ini bertujuan membuat aplikasi-aplikasi yang dijalankan di atas teknologi WEB dan proses secara keseluruhan dijalankan dan di kerjakan di web server.

  • Dasar-dasar HTML

Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk menulis halaman web. Untuk menyampaikan ide pada web browser, HTML menggunakan apa yang dinamakan tag. Tag selalu ditulis diantara tanda lebih kecil dan tanda lebih besar (<tag>).

Heading

Suatu kata/kalimat yang menjadi judul atau subjudul di dalam suatu dokumen web.

<html>

<head>

<title>Heading</title>

</head>

<body>

<h1>Judul/subjudul dengan h1</h1>

<h2>Judul/subjudul dengan h2</h2>

<h3>Judul/subjudul dengan h3</h3>

<h4>Judul/subjudul dengan h4</h4>

<h5>Judul/subjudul dengan h5</h5>

<h6>Judul/subjudul dengan h6</h6>

</body>

</html>

Dari script diatas akan muncul seperti gambar 1:

Gambar 1. Tampilan Heading

Paragraf

Untuk membuat paragraf menggunakan dimulai tag <P> dan di tutup dengan tag </P>. Pada tag paragraf dapat diikuti dengan atribut ALIGN. ALIGN berfungsi untuk pengatur posisi yang diinginkan (left, right, center, justify)

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<p align=”left”>

PHP diciptakan oleh Rasmus Lerdorf, seorang pemrograman C yang andal pada tahun 1994. Semula PHP hanya digunakan untuk mencatat jumlah pengunjung homepagenya. Rasmus adalah seorang pendukung open source.

</p>

<p align=”right”>

PHP diciptakan oleh Rasmus Lerdorf, seorang pemrograman C yang andal pada tahun 1994. Semula PHP hanya digunakan untuk mencatat jumlah pengunjung homepagenya. Rasmus adalah seorang pendukung open source.

</p>

<p align=”center”>

PHP diciptakan oleh Rasmus Lerdorf, seorang pemrograman C yang andal pada tahun 1994. Semula PHP hanya digunakan untuk mencatat jumlah pengunjung homepagenya. Rasmus adalah seorang pendukung open source.

</p>

<p align=”justify”>

PHP diciptakan oleh Rasmus Lerdorf, seorang pemrograman C yang andal pada tahun 1994. Semula PHP hanya digunakan untuk mencatat jumlah pengunjung homepagenya. Rasmus adalah seorang pendukung open source.

</p>

</body>

</html>

Dari script diatas akan muncul halaman web seperti pada gambar 2.

Gambar 2. Tampilan Paragraf

Line Break (BR)

Tag Line Break berfungsi untuk menulis teks pada baris berikutnya. Tag Line Break ditulis dengan <BR>

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

Jenis-jenis buah :

<br />Mangga

<br />Apel

<br />Durian

</body>

</html>

Dari script daiatas akan muncul seperti gambar 3.

Gambar 3. Tampilan Line Break

Font

Tag font berfungsi untuk mengatur huruf. Tag Font diawali dengan <FONT> dan diahiri dengan </FONT>. Pada tag Font terdapat beberapa atributyang berfungsi untuk mengatur ukuran, tipe, dan warna teks.

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<font size=”+1″>Font Ukuran 1</font>

<font size=”+2″>Font Ukuran 2</font>

<font size=”+3″>Font Ukuran 3</font>

<font size=”+4″>Font Ukuran 4</font>

<font size=”+5″>Font Ukuran 5</font>

<font size=”+6″>Font Ukuran 6</font>

<font size=”-1″>Font Ukuran -1</font>

<font size=”-2″>Font Ukuran -2</font>

<font size=”-3″>Font Ukuran -3</font>

<font size=”-4″>Font Ukuran -4</font>

<font size=”-5″>Font Ukuran -5</font>

<font size=”-6″>Font Ukuran -6</font>

<br>

<font face=”Arial, Helvetica, sans-serif”>Font Arial /</font>

<font face=”Times New Roman, Times, serif”>Font Times New Roman /</font>

<font face=”Geneva, Arial, Helvetica, sans-serif”>Font Ini Menggunakan Geneva</font<br>

<font color=”#FF0000″>font berwarna Merah</font>

<font color=”#FFFF00″>font berwarna Kuning</font>

<font color=”#00FF00″>font berwarna Hijau</font>

</body>

</html>

Dari script diatas akan muncul seperti pada gambar 4.

Gambar 4. Tampilan Font

Link

Link berfungsi untuk menghubungkan halaman suatu web. Penggunaan link menggunakan perintah anchor <a>

<head>

<title>Untitled Document</title>

</head>

<body>

<a href=”paragraph.php”>Link untuk memunculkan paragraph</a>

</body>

</html>

Ordered List

Ordered list digunakan untuk membuat daftar di mana tiap bagiannya memiliki nomor secara berurut, Ordered list dimulai dengan tag <OL> dan diakhiri dengan tag penutup </OL>. Untuk menyatakan tiap bagiannya digunakan tag <LI> dimana tag ini tidak menggunakan tag penutup. Dengan menggunakan ordered list anda tidak perlu memberi nomor untuk tiap-tiap bagian.

secara default ordered list akan melakukan penomoran 1,2,3… untuk mengubah nomor tersebut digunakan attribut TYPE pada tag <OL>. Berikut adalah daftar attribut TYPE.

TYPE = 1 Nomor urut 1,2,3,… (default)

TYPE = I Urutan I, II, III, …

TYPE = i Urutan i, ii, iii,…

TYPE = A Urutan A, B, C,…

TYPE = a Urutan a, b, c, …

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

Jenis-jenis buah :

<ol>

<li>Mangga</li>

<li>Apel</li>

<li>Durian</li>

</ol>

Jenis-jenis buah :

<ol>

<li>Mangga</li>

<li>Apel</li>

<li>Durian</li>

</ol>

Jenis-jenis buah :

<ol type=”A”>

<li>Mangga</li>

<li>Apel</li>

<li>Durian</li>

</ol>

Jenis-jenis buah :

<ol type=”i”>

<li>Mangga</li>

<li>Apel</li>

<li>Durian</li>

</ol>

Jenis-jenis buah :

<ol>

<li>Mangga</li>

<li>Apel</li>

<li>Durian</li>

</ol>

</body>

</html>

Dari script diatas akan tampil seperti gambar 5.

Gambar 5. Tampilan Ordered List

Unordered List

Dlam unordered list tidak di jumpai urutan dalam suatu daftar. Setiap bagian dari ordered list ditandai dengan tanda bullet. Tanda bullet menjadi default dalam unordered list. Untuk menggunakan unordered list digunakan tag <UL> dan tag penutup </UL> dan sama dengan ordered list setiap bagiannya digunakan tag <LI>.

Sama seperti Ordered List, unorderlist mempunyai attribut TYPE. Berikut adalah daftar attribut TYPE

TYPE = circle Tanda lingkaran (default)

TYPE = disk Tanda Cakram

TYPE = square Tanda Kotak

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

Jenis-jenis buah :

<ul>

<li>Mangga</li>

<li>Apel</li>

<li>Durian</li>

</ul>

Jenis-jenis buah :

<ul>

<li>Mangga</li>

<li>Apel</li>

<li>Durian</li>

</ul>

Jenis-jenis buah :

<ul>

<li>Mangga</li>

<li>Apel</li>

<li>Durian</li>

</ul>

</body>

</html>

Dari script diatas akan muncul tampilan seperti pada gambar 6

Gambar 6. Tampilan Unorderd List

Image

Untuk memperindah situs biasanya orang menambahkan gambar dalam file HTML. Untuk menambah image pada HTML digunakan tag <IMG>. Dalam tag <IMG> juga terdapat attribut SRC dimana untuk menentukan dimana letak sumber gambar.

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

Menampilkan Gambar <img src=”Sunset.jpg” />

</body>

</html>

Beberapa attribut pada tag <IMG> yang biasa digunakan :

Border = Memberikan suatu border pada gambar (default = 0)

Height, width = Menentukan tinggi dan lebar gambar

Hspace, vspace = Menentukan jarak spasi horizontal dan vertikal antaragambar dengan objek disekitarnya

Align = Mengatur perataan gambar terhadap objek disekelilingnya.

Tabel

Tabel banyak digunakan karena dapat menampilkan informasi dengan bentuk yang ringkas dan mudah dibaca. Untuk membuat tabel digunakan tag awal <TABLE> dan tag penutup </TABLE>. Tag <TABLE> memiliki beberapa bagian penting yaitu :

a. <CAPTION> … </CAPTION> digunakan untuk membentuk judul tabel. Judul ini terletak di luar tabel.

b. <TH> … </TH> berfungsi untuk meletakkan judul tabel di bagian paling atas.

c. <TR>…</TR> dipakai untuk membentuk baris pada suatu tabel.

d. <TD>…</TD> digunakan untuk menulis data dan batas dari cell.

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<table border=”1″>

<caption>Daftar nama buah</caption>

<tr>

<td>Nama</td>

<td>Warna</td>

<td>Rasa</td>

</tr>

<tr>

<td>Mangga</td>

<td>Hijau</td>

<td>Asam</td>

</tr>

<tr>

<td>Apel</td>

<td>Merah</td>

<td>Manis</td>

</tr>

<tr>

<td>Jeruk</td>

<td>Kuning</td>

<td>Asem dan manis</td>

</tr>

</table>

</body>

</html>

Untuk melakukan penggabungan beberapa coloum atau row menggunakan artibut COLSPAN untuk menggabungkan coloum dan ROWSPAN untuk menggabungkan row.

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<table width=”200″ border=”1″>

<tr>

<td colspan=”3″>Menyatukan Kolom</td>

</tr>

<tr>

<td rowspan=”2″>Menyatukan Row</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

</table>

</body>

</html>

Form dan Input

Tag <FORM> dan <INPUT> digunakan bersama-sama untuk meminta masukkan dari user untuk kemudian dikirim ke server. Tag <FORM> menyediakan kerangkanya tag <INPUT> menyediakan elemenya.

  • Form

Standar penulisan Form adalah sebagai berikut

<FORM METHOD=”POST/GET” ACTION=”URL”>

</FORM>

attribut METHOD memiliki dua nilai yaitu POST dan GET. Metode GET mengirimkan data pada server dengan cara meletakkan data pada bagian akhir URL (Uniform Resource Locator) yang ditunjuk. Metode Post mengirimkan datanya secara terpisah. Jika data masukan banyak, disarankan menggunakan metode POST. Attribut ACTION berisi URL dari program yang dipanggil oleh form tersebut.

  • Text Box

Input untuk memasukkan data

<HTML>

<HEAD>

<TITLE> Untitled Document</TITLE>

</HEAD>

<BODY>

<P>Form Input User </P>

<TABLE BORDER=”0″ CELLPADDING=”0″ CELLSPACING=”2″>

<TR>

<TD >Nama</TD>

<TD >:</TD>

<TD ><INPUT></TD>

</TR>

<TR>

<TD >Alamat</TD>

<TD >:</TD>

<TD ><INPUT></TD>

</TR>

<TR>

<TD>Sekolah</TD>

<TD>:</TD>

<TD><INPUT TYPE=”text”></TD>

</TR>

</TABLE>

</BODY>

</HTML>

  • Cek Box

Adalah input yang menampilkan pilihan-pilihan

<HTML>

<HEAD>

<TITLE> Untitled Document </TITLE>

</HEAD>

<BODY>

<P>Makanan Yang Anda Sukai </P>

<P>Daftar Makanan</P>

<P>

<INPUT TYPE=”checkbox” CHECKED>Bakso<BR>

<INPUT TYPE=”checkbox”>Mie Ayam<BR>

<INPUT TYPE=”checkbox”>Nasi Goreng<BR>

<INPUT TYPE=”checkbox”>Ayam Bakar

</P>

</BODY>

</HTML>

  • Radio

Adalah input pilihan. Berbeda dengan cekbox radio hanya diwajibkan memilih satu pilihan setiap group optionnya.

<HTML>

<HEAD>

<TITLE> Untitled Document </TITLE>

</HEAD>

<BODY>

<P>Pilih salah satu buah kesukaan anda </P>

<P>Daftar Buah</P>

<P>

<INPUT TYPE=”radio” VALUE=”Apel” CHECKED NAME=”buah”>Apel <BR>

<INPUT TYPE=”radio” VALUE=”Jeruk”>Jeruk<BR>

<INPUT TYPE=”radio” VALUE=”Mangga”>Mangga<BR>

<INPUT TYPE=”radio” VALUE=”Durian”>Durian<BR>

</P>

</BODY>

</HTML>

  • Submit dan reset

Dalam form sangat penting dan harus ada tombol Submit dan Reset. Tombol ini berfungsi untuk mengirimkan data yang sudah diinput dari elemen-elemen form. Syntaxnya adalah :

<INPUT TYPE=”submit” NAME=”SUBMIT”>

<INPUT TYPE=”reset” NAME=”RESET”>

Source Submit dan Reset

<HTML>

<HEAD>

<TITLE> Untitled Document</TITLE>

</HEAD>

<BODY>

<P>Form Input User </P>

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

<TABLE BORDER=”0″ CELLPADDING=”0″ CELLSPACING=”2″>

<TR>

<TD >Nama</TD>

<TD >:</TD>

<TD ><INPUT NAME=”nama”></TD>

</TR>

<TR>

<TD >Alamat</TD>

<TD >:</TD>

<TD ><INPUT TYPE=”text”></TD>

</TR>

<TR>

<TD>Sekolah</TD>

<TD>:</TD>

<TD><INPUT TYPE=”text”></TD>

</TR>

<TR>

<TD>&nbsp;</TD>

<TD>&nbsp;</TD>

<TD><INPUT TYPE=”submit” value=”simpan”>

<INPUT TYPE=”reset” value=”reset”>

</TD>

</TR>

</TABLE>

</form>

</BODY>

</HTML>

  • Dasar-dasar PHP

Tanda kode PHP diawali dengan tanda <?php…..?>, <?….?> atau <SCRIPT LANGUAGE=”php”>…..</SCRIPT>. Namun yang sering di digunakan <?php atau <?.Ada dua cara dalam menampilkan data yaitu dengan sintaks print(“string”); atau dengan echo(“string”). Prinsipnya tidak ada yang beda tergantung dari kebiasaan kita menggunakannya

DAFTAR PUSTAKA

Bunafit Nugroho. PHP dan MySQL dengan Editor Dreamweaver MX, Yogyakarta:Andi, 2004

Stieven Kalengkian, Desain WEB dengan PHP

Untuk mendapatkan tutorial dalam bentuk pdf,download disini

4 Tanggapan

  1. LanjutGAN versi updatenya….

  2. Salam kenal…
    Bimbingan yang sangat berguna sekali untuk saya, dan sangat mudah dipelajari….
    trim’s mas, mudah2 mas Wahyu mendapatkan ilmu yang lebih karena mau berbagi…….:)
    Salam sukses selalu…

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: