Informatic Department: Desember 2015

Hypertext Preprocessor (PHP)

Pengertian PHP

PHP adalah bahasa pemrograman script server-side yang didesain untuk pengembangan web. Selain itu, PHP juga bisa digunakan sebagai bahasa pemrograman umum (wikipedia). PHP di kembangkan pada tahun 1995 oleh Rasmus Lerdorf, dan sekarang dikelola oleh The PHP Group. Situs resmi PHP beralamat di http://www.php.net.

PHP disebut bahasa pemrograman server side karena PHP diproses pada komputer server. Hal ini berbeda dibandingkan dengan bahasa pemrograman client-side seperti JavaScript yang diproses pada web browser (client).

Pada awalnya PHP merupakan singkatan dari Personal Home Page. Sesuai dengan namanya, PHP digunakan untuk membuat website pribadi. Dalam beberapa tahun perkembangannya, PHP menjelma menjadi bahasa pemrograman web yang powerful dan tidak hanya digunakan untuk membuat halaman web sederhana, tetapi juga website populer yang digunakan oleh jutaan orang seperti wikipedia, wordpress, joomla, dll.

Saat ini PHP adalah singkatan dari PHP: Hypertext Preprocessor, sebuah kepanjangan rekursif, yakni permainan kata dimana kepanjangannya terdiri dari singkatan itu sendiri: PHP: Hypertext Preprocessor.

PHP dapat digunakan dengan gratis (free) dan bersifat Open Source. PHP dirilis dalam lisensi PHP License, sedikit berbeda dengan lisensi GNU General Public License (GPL) yang biasa digunakan untuk proyek Open Source.

Kemudahan dan kepopuleran PHP sudah menjadi standar bagi programmer web di seluruh dunia. Menurut wikipedia pada februari 2014, sekitar 82% dari web server di dunia menggunakan PHP. PHP juga menjadi dasar dari aplikasi CMS (Content Management System) populer sepertiJoomla, Drupal, dan WordPress.

Fungsi PHP Dalam Pemrograman Web

Untuk membuat halaman web, sebenarnya PHP bukanlah bahasa pemrograman yang wajib digunakan. Kita bisa saja membuat website hanya menggunakan HTML saja. Web yang dihasilkan dengan HTML (dan CSS) ini dikenal dengan website statis, dimana konten dan halaman web bersifat tetap.

Sebagai perbandingan, website dinamis yang bisa dibuat menggunakan PHP adalah situs web yang bisa menyesuaikan tampilan konten tergantung situasi. Website dinamis juga bisa menyimpan data ke dalam database, membuat halaman yang berubah-ubah sesuai input dariuser, memproses form, dll.

Untuk pembuatan web, kode PHP biasanya di sisipkan kedalam dokumen HTML. Karena fitur inilah PHP disebut juga sebagai Scripting Language atau bahasa pemrograman script.

Sebagai contoh penggunaan PHP, misalkan kita ingin membuat list dari nomor 1 sampai nomor 10. Dengan menggunakan HTML murni, kita bisa membuatnya secara manual seperti kode berikut ini:

<!DOCTYPE html>

<html>

<head>

<title>Contoh list dengan HTML</title>

</head>

<body>

<h2>Daftar Absensi Mahasiswa</h2>

<ol>

<li>Nama Mahasiswa ke-1</li>

<li>Nama Mahasiswa ke-2</li>

<li>Nama Mahasiswa ke-3</li>

<li>Nama Mahasiswa ke-4</li>

<li>Nama Mahasiswa ke-5</li>

<li>Nama Mahasiswa ke-6</li>

<li>Nama Mahasiswa ke-7</li>

<li>Nama Mahasiswa ke-8</li>

<li>Nama Mahasiswa ke-9</li>

<li>Nama Mahasiswa ke-10</li>

</ol>

</body>

</html>

Halaman HTML tersebut dapat dibuat dengan mudah dengan cara men-copy-paste tag <li>sebanyak 10 kali dan mengubah sedikit angka-angka no urut di belakangnya. Namun jika yang kita inginkan adalah menambahkan list tersebut menjadi 100 atau 1000 list, cara copy-pastetersebut menjadi tidak efektif.

Jika menggunakan PHP, kita tinggal membuat perulangan for sebanyak 1000 kali dengan perintah yang lebih singkat seperti berikut ini:

<!DOCTYPE html>

<html>

<head>

<title>Contoh list dengan PHP</title>

</head>

<body>

<h2>Daftar Absensi Mahasiswa</h2>

<ol>

<?php

for ($i= 1; $i <= 1000; $i++)

{

echo "<li>Nama Mahasiswa ke-$i</li>";

}

</ol

</body>

</html>

Dengan menggunakan kode baris yang bahkan lebih sedikit, kita dapat membuat list tersebut menjadi 1000 kali, bahkan 100.000 kali dengan hanya mengubah sebuah variabel $i.

PHP tidak hanya dapat melakukan pengulangan tersebut, masih banyak hal lain yang bisa kita lakukan dengan PHP, seperti menginput data ke database, menghasilkan gambar, menkonversi halaman text menjadi PDF, management cookie dan session, dan hal lainnya.

Sekian dar saya, semoga bermanfaat J.

Cascading Style Sheet (CSS)

Cascading Style Sheet

a. Pengertian CSS

CSS adalah bahasa stylesheet yang menggambarkan presentasi dari HTML (atau XML) dokumen. CSS menjelaskan bagaimana elemen harus diberikan pada layar, di atas kertas, atau di media lain.

b. Manfaat CSS

1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur,

2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,

3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,

4. Dapat berkolaborasi dengan JavaScript dan merupakan pasangan setia XHTML,

5. Digunakan dalam hampir semua web browser.

c. Sintaks dan Penempatan

Sintaks CSS terdiri dari tiga bagian:

o Selector

o Property

o Value

Selector adalah elemen atau tag HTML yang akan didefinisikan.

Property adalah atribut yang akan diganti dengan “nilai” tertentu. Properti dan nilai dipisahkan dengan tanda titik dua (:) dan keduanya diapit oleh tanda kurung kurawal ({).

Value adalah isi dari perintah tersebut.

Berdasarkan ketiga bagian tersebut, sintaks dasar CSS dapat dituliskan:

selector { property: value}

contoh 1:

p { color:black }

Jika suatu nilai mengandung spasi, nilai tersebut harus diapit dengan tanda petik (“).

Untuk membuat definisi gaya lebih mudah dibaca, definisi tiap property dapat dilakukan per baris. Sehingga sintaksnya menjadi:

selector { property1: value; property2: “value_value”; … }

contoh 2:

p { text-align:center; font-family:“sans serif” }

Aturan-aturan yang berlaku dalam sintaks CSS:

o Jangan ada spasi antara property value dengan unitnya (contoh 1 & 2),

o Nama properti bersifat case sensitive dan menggunakan huruf kecil,

o Jika nilai / value lebih dari satu kata, maka gunakan tanda titik koma (;) untuk membatasi properti yang satu dengan yang lain (contoh 2),

o Jika selector lebih dari satu dan mempunyai properti dan nilai yang sama, gunakan tanda koma (,).

o contoh: h1,h2,h3 {color:green}

Class selector

Dengan menggunakan class selector, maka dapat mendefinisikan perbedaan style untuk tag elemen html yang sama.

contoh 3:

Misalkan ingin membuat dua tipe paragraf dalam dokumen, yang satu rata kanan, dan yang lain rata kiri. Maka:

p.right {text-align: right}

dan

p.left {text-align: left}

Aturan Class selector:

o Jangan memberi nama class dengan angka,

o Jika memberikan nama class lebih dari satu kata/kalimat, penulisannya menggunakan tanda petik (“).

d. Penempatan Kode CSS pada HTML

Ada tiga cara penempatan kode CSS dalam HTML:

q Internal CSS

Metode penulisan kode CSS langsung dalam file HTML. Contoh:

<html>

<head>

p {color: white; }

body {background-color: black; }

</style>

</head>

<body>

<p>Pengertian CSS</p>

</body>

</html>

q Eksternal CSS

Memanggil file CSS dari tempat/folder/lokasi lain, dengan kata lain file CSS terpisah dengan file HTML.

Browser akan membaca definisi style dari file test.css dan akan mengikuti format tersebut. Eksternal style ditulis di text editor lain dengan ekstensi .css. contoh:

<html>

<head>

</head>

<body>

<h3>Pengertian CSS</h3>

</body>

</html>

q Inline CSS

Penulisan kode CSS dalam tag HTML. contoh:

<html>

<head>

</head>

<p style=”background: red; color: black;”>Pengertian CSS</p>

</body>

</html>

Contoh penerapan:

Hasilnya adalah:

Sekian dari saya, semoga bermanfaat J.

HTML Tabel

HTML Tabel

Sekilas tentang tabel.

Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolom-kolom. Dulu sebelum adanya CSS, table digunakan untuk membuat layout website namun saat ini sudah jarang dipakai sebagai layout karena faktor file yang cenderung lebih besar sehingga mempengaruhi waktu akses yang lebih lama, dalam pengelolaan dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.

Cara membuat tabel.

Untuk membuat table yang sederhana ada 3 elemen utama yaitu table, tr dan td. Tag <table> adalah untuk membuat tabel kemudian di ikuti dengan tag <tr> (table rows) adalah untuk membuat baris pada tabel kemudian tag <td> (table data) adalah untuk membuat kolom pada tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan.

Berikut adalah contoh tabel yang terdiri dari 3 baris dan 2 kolom.

<table border="1"> <tr> <td>Cell 1 - Baris 1 Kolom 1</td> <td>Cell 2 - Baris 1 Kolom 2</td> </tr> <tr> <td>Cell 3 - Baris 2 Kolom 1</td> <td>Cell 4 - Baris 2 Kolom 2</td> </tr> <tr> <td>Cell 5 - Baris 3 Kolom 1</td> <td>Cell 6 - Baris 3 Kolom 2</td> </tr> </table>

Hasil:

Cell 1 – Baris 1 Kolom 1	Cell 2 – Baris 1 Kolom 2
Cell 3 – Baris 2 Kolom 1	Cell 4 – Baris 2 Kolom 2
Cell 5 – Baris 3 Kolom 1	Cell 6 – Baris 3 Kolom 2

Dalam contoh sengaja ditambah dengan atribut border agar kita dapat melihat posisi dari tabel tersebut, karena secara default nilai dari border ini adalah 0 jika tidak disertakan dengan tag <table>.

Mengatur lebar dan tinggi tabel.

Untuk mengatur lebar table digunakan atribut width atau bisa juga dengan style CSS dengan properti width. Untuk lebar dan tinggi dari td kita gunakan atribut style dengan properti width dan height.

Berikut adalah contoh tabel dengan lebar 75% dari lebar dokumen dan lebar kolom masing 50% dengan tinggi pada baris pertama adalah 40px.

<table border="1" width="75%"> <tr> <td style="width:50%;height:40px;">Baris 1 Kolom 1</td> <td>Baris 1 Kolom 1</td> </tr> <tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> <tr> <td>Baris 3 Kolom 1</td> <td>Baris 3 Kolom 2</td> </tr> </table>

Hasil:

Baris 1 Kolom 1	Baris 1 Kolom 1
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Untuk satuan ukuran widht dan height dari atribut maupun style tersebut kita dapat menggunakan px atau %. Untuk pengaturan lebar dan tinggi pada td kita cukup memasukkan pada kolom pertama secara otomatis kolom-kolom berikutnya akan mengikuti pengaturan tersebut.

Menggabungkan kolom pada tabel

Table Cell atau baris dan kolom dari tabel tersebut dapat kita gabungkan sesuai kebutuhan bentuk tabel yang diinginkan.

Untuk menggabungkan kolom dalam tabel digunakan atribut colspan.

<table border="1" width="75%"> <tr> <td colspan="2">Gabungan Kolom 1&2 pada Baris 1</td> </tr> <tr> <td style="width:50%">Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> <tr> <td>Baris 3 Kolom 1</td> <td>Baris 3 Kolom 2</td> </tr> </table>

Hasil:

Gabungan Kolom 1&2 pada Baris 1
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Sedangkan untuk menggabungkan baris dalam tabel digunakan atribut rowspan.

<table border="1" width="75%"> <tr> <td style="width:50%" rowspan="2">Gabungan Baris 1&2 pada Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr> <tr> <td>Baris 2 Kolom 2</td> </tr> <tr> <td>Baris 3 Kolom 1</td> <td>Baris 3 Kolom 2</td> </tr> </table>

Hasil:

Gabungan Baris 1&2 pada Kolom 1	Baris 1 Kolom 2
Gabungan Baris 1&2 pada Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Mengatur jarak kolom pada tabel

Untuk mengatur posisi cell dalam tabel digunakan atribut cellpadding dan cellspacing.

Cellpadding adalah untuk pengaturan sisi dari bagian dalam cell.

<table border="1" width="75%" cellpadding="8"> <tr> <td style="width:50%;">Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr> <tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> </table>

Hasil:

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Sedangkan Cellspacing adalah pengaturan sisi dari bagian luar cell.

<table border="1" width="75%" cellspacing="8"> <tr> <td style="width:50%">Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr> <tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> </table>

Hasil:

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Membuat titel pada tabel.

Untuk tabel yang lengkap dengan titel, kita bisa menambahkan tag <caption> tepat setelah tag <table> dan kita juga bisa mengganti td dengan th (table heading) sebagai titel dari baris maupun kolom.

Caption dan th akan secara otomatis berada pada posisi tengah dan th akan menghasilkan tulisan tebal.

<table border="1" width="75%"> <caption>Disini adalah titel tabel ini</caption> <tr> <th style="width:50%;">Header Kolom 1</th> <th>Header Kolom 2</th> </tr> <tr> <td>Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr> <tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> </table>

Hasil:

Disini adalah titel tabel ini
Header Kolom 1	Header Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Membuat background pada tabel

Untuk membuat background pada tabel kita gunakan atribut style dengan properti background.

Berikut adalah contoh table dengan background warna kuning muda dengan heading warna merah.

<table style="background:#ffc" width="75%" border="1"> <tr> <th style="background:red;width:50%;">Header Kolom 1</th> <th style="background:red;">Header Kolom 2</th> </tr> <tr> <td>Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr> <tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> </table>

Hasil:

Header Kolom 1	Header Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Seperti kita lihat bahwa border dari cell tersebut terlihat terlalu tebal padahal kita membuat nilai dari atribut border adalah 1px.

Ini terjadi karena secara default atribut cellpadding dan cellspacing pada elemen table memiliki nilai masing-masing 1px.

Jadi untuk menghilangkannya kita harus memasukkan kedua atribut tersebut dengan nilai 0.

Atau kita juga bisa menggunakan style CSS yaitu dengan properti border-collapse:collapse.

<table style="border-collapse:collapse;background:#ffc" width="75%" border="1"> <tr> <th style="background:red;width:50%;">Header Kolom 1</th> <th style="background:red;">Header Kolom 2</th> </tr> <tr> <td>Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr> <tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> </table>

Hasil:

Header Kolom 1	Header Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Pada link berikut ini kita akan membuat contoh tabel dengan CSS baik itu dengan atribut style (inline) maupun internal dan eksternal CSS.

Sekian dari saya, semoga bermanfaat :).

Informatic Department

Rabu, 09 Desember 2015

Hypertext Preprocessor (PHP)

Pengertian PHP

Cascading Style Sheet (CSS)

HTML Tabel

Arsip Blog