3. Pengantar Pengertian HTML, CSS, dan PHP
Bab ini memperkenalkan tiga hal penting yang digunakan untuk membuat halaman web, yaitu:
- HTML
- CSS
- PHP
Pembahasan singkat di bab ini diharapkan dapat memberikan dasar penyusunan halaman web yang melibatkan sensor pada pembahasan di bab-bab selanjutnya.
3.1 HTML sebagai Bahasa Dasar untuk Berkomunikasi dengan Internet
Jika Anda sudah terbiasa dengan HTML, tulisan di subbab ini boleh Anda lompati atau Anda baca secara cepat. Namun, bagi yang belum terbiasa dengan HTML, inilah saatnya untuk mengenalinya.
HTML (HyperText Markup Language) adalah bahasa yang digunakan untuk membuat tampilan di halaman Web. Versi yang saat ini digunakan adalah HTML5. Contoh skrip HTML ditunjukkan di bawah ini:
Skrip ini dapat ditulis dengan menggunakan sebarang editor teks (misalnya Notepad++). Sebagai contoh, file tersebut disimpan di folder C : \ web dengan nama sensor.html. Anda bisa memanggil file tersebut di baris alamat di sembarang browser dengan mengetikkan:
C : \ web \ sensor . html
Browser pun akan menerjemahkan skrip tersebut menjadi tampilan yang ditunjukkan pada Gambar 3.1.
GAMBAR 3.1 Hasil sensor. html dilihat di browser
Skrip HTML mengandung sejumlah tag yang dinyatakan dalam tanda <>. Setiap tag mempunyai makna tersendiri. Tulisan yang terlihat di browser adalah tulisan yang berada di pasangan <body> dan </body>. Teks ° menyatakan simbol 0 dan % ; menyatakan tanda %.
3.2 Dasar HTML
Kunci penting dalam memahami kode HTML adalah memahami fungsi tag. Berdasarkan contoh di depan, <html>, <head>, dan <body> adalah contoh tag. Tag menyatakan elemen dalam HTML. Dalam hal ini html, head, dan body adalah contoh elemen dalam dokumen atau skrip HTML dengan html berkedudukan sebagai elemen tertinggi atau disebut akar.
Berikut adalah penjelasan singkat makna tag yang terdapat pada sensor . html.
- Sebuah dokumen HTML5 diawali dengan <!DOCTYPE HTML>.
- Pasangan tag <html> dan </html> mengawali kode HTML. Di dalamnya terdapat pasangan <head> dan </head> serta <body> dan </body>.
- Pasangan <head> dan </head> mengawali halaman web. Pasangan tag <title> dan </title> digunakan untuk memberikan judul halaman web, yaitu yang terletak di bagian teratas jendela browser.
- Pasangan <body> dan </body> merupakan bagian yang menyatakan isi halaman web. Bagian inilah yang mencantumkan informasi yang ditujukan ke pengunjung. Bagian ini dapat mengandung banyak tag. Namun, pada contoh hanya terdapat satu tag, yakni <br>.
- Tag <br> tidak punya pasangan. Kegunaannya adalah untuk memindahkan baris.
Tidak banyakjenis tag yang dilibatkan di sensor.html. Oleh karena itu, akan diperkenalkan sejumlah tag di sini. Tabel 3.1 memberikan ringkasan mengenai sejumlah tag penting yang perlu dipahami dalam skrip HTML. Tag-tag yang dibahas ini diletakkan di dalam pasangan <body> dan </body>.
TABEL 3.1 Daftar sejumlah tag dasaar yang perlu diketahui
Contoh berikut memberikan gambaran tentang penggunaan sejumlah tag yang tercantum pada Tabel 3.1.
Hasilnya ditunjukkan pada Gambar 3.2. Perhatikan bahwa dengan menggunakan div yang berbeda, data temperatur dan kelembaban terletak pada baris yang berbeda. Tampak bahwa tag <br> tidak diperlukan.
GAMBAR 3.2 Hasil pemanggilan tag. html
CATATAN |
Banyak tag di HTML, terutama HTML5 yang tidak dibahas di buku ini. Untuk mendalaminya, Anda bisa membaca buku penulis yang berjudul “From Zero to A Pro: HTML5”. |
3.3 CSS
CSS (Cascading Style Sheets) adalah kode yang digunakan untuk mengatur penampilan elemenelemen HTML. Tujuan penggunaannya, kode HTML dapat memusatkan perhatian pada konten atau isi halaman web, sedangkan urusan penampilan data atau informasi menjadi urusan CSS. Saat buku ini ditulis, versi terbaru CSS adalah CSS3.
Walaupun CSS sering kali diletakkan di dokumen HTML, kode CSS bukanlah bagian dari dokumen HTML. CSS merupakan bahasa tersendiri yang dirancang untuk memperkaya tampilan informasi di halaman web. Pada penggunaannya, CSS sering pula diletakkan secara terpisah dengan dokumen HTML. Gambar 3.3 memberikan gambaran mengenai pembedaan penggunaan HTML dan CSS. Selain itu, terdapat satu hal lagi yang digunakan untuk mengatur perilaku atau tindakan-tindakan yang dikenakan pada halaman. Dalam hal ini, JavaScript dan turunannya yang digunakan. JavaScript diperkenalkan dalam Bab 11.
GAMBAR 3.3 Skenario penggunaan CSS
Secara umum, CSS memiliki properti-properti yang dapat dipakai untuk mengatur tampilan elemenelemen HTML. Gambaran tentang fungsi properti-properti CSS dapat dilihat pada Tabel 3.2.
TABEL 3.2 Properti yang didukung Oleh CSS
Warna Hal ini memungkinkan warna latar belakang elemen dan warna teks pada elemen bisa diatur.
Bingkai Properti yang berkaitan dengan bingkai berguna untuk memberikan bingkai pada elemen seperti div atau canvas.
Tabel Tabel dan seluruh elemen pendukungnya bisa diformat dengan mudah, contohnya dimungkinkan untuk mengatur warna latar belakang yang berbeda untuk baris genap dan baris ganjil
Transformasi Elemen mudah sekali untuk ditransformasikan, misalnya diputar dan diskalakan.
Antarmuka |
Sebagai contoh, sangat mudah untuk mengganti bentuk kursor ketika penunjuk mouse menyorot ke suatu elemen tertentu. |
Posisi | Posisi elemen dapat diformat berbagai cara. |
List Jika Anda melibatkan list (tag <ul>), properti-properti CSS memungkinkan untuk mengatur sifat-sifat di [ist.
Penggunaan style untuk mengatur suatu elemen HTML memiliki format seperti berikut:
namaSelektor{
namaProperti:nilai; namaProperti:nilai;
…
}
Sebagai contoh, Anda bisa mendefinisikan style untuk elemen body seperti berikut:
body {
font—family : verdana;
color: white;
background—color:black;
}
Pada contoh tersebut,
- body adalah nama selektor,
- bagian yang berada dalam tanda { dan } adalah bagian deklarasi properti,
- font—family, color, dan background-color menyatakan nama properti,
- verdana adalah nilai untuk properti font-family dan
- white adalah nilai untuk properti color, dan
- black adalah nilai untuk properti background—color.
Gambar 3.4 memberikan penjelasan visual terhadap style di atas.
GAMBAR 3.4 Contoh Style dan penjelasannya
Sekarang, gabungkan style yang dibahas di depan ke dalam skrip HTML seperti berikut:
Perhatikan, cara untuk menuliskan style CSS pada skrip di atas, yakni:
<style>
body {
font—family: verdana;
color: white;
background—color:black;
}
</style>
Suatu style CSS dapat diletakan pada file tersendiri. Sebagai contoh, Anda bisa membuat file dengan ekstensi. Css seperti berikut:
GAMBAR 3.5 Hasil pengaturan style CSS
Selanjutnya, file CSS tersebut digunakan di skrip HTML dengan menuliskan kode seperti berikut:
<link rel=”stylesheet”href=”eksternal.css”>
Peletakan kode ini juga pada elemen head. Perwujudan di skrip HTML adalah seperti berikut:
Jika yang Anda tuliskan sudah benar, akan diperoleh hasil seperti terlihat di Gambar 3.6 ketika Anda memanggil tag3.html.
Nama kelas dalam elemen HTML ditulis dengan menggunakan atribut class, contohnya:
<div class=”sensor—gas”></div>
Contoh ini menunjukkan pemberian kelas pada elemen div dengan nama “sensor-gas”.
Untuk membuat style yang diterapkan untuk suatu kelas, nama kelas disebutkan sebagai nama selektor. Namun, diperlukan penulisan secara khusus di bagian nama selektor dengan aturan sebagai berikut:
GAMBAR 3.6
Hasil pemanggilan tag 3 . html yang
menggunakan CSS pada file terpisah
- Tuliskan tanda titik terlebih dahulu.
- Lalu, tuliskan nama kelas (isi atribut class).
Contoh dalam skrip diperlihatkan berikut ini:
Perhatikan bahwa sensor MQ-2, MQ-3, MQ-5, dan MQ-135 mempunyai kelas yang sama, yaitu “sensorgas”. Kalau Anda perhatikan pada selektor . sensor-gas, terdapat pengaturan warna teks berupa putih dan warna latar belakang biru. Ketika daftar . html dipanggil, semua div yang berkelas “sensor-gas” akan diformat seperti itu. Hal ini dapat dilihat pada Gambar 3.7.
GAMBAR 3.7 Hasil penggunaan selektor kelas
CATATAN | Banyak sekali fitur CSS yang bisa Anda pelajari. Untuk mendalaminya, Anda
bisa membaca buku penulis yang berjudul “Belajar Sendiri Pasti Bisa CSS3”. |
3.4 PHP
PHP merupakan salah satu bahasa pemrograman untuk membuat halaman web. Untuk mempraktikkan skrip PHP, Anda perlu menggunakan web server. Untuk keperluan ini, Anda perlu menginstal perangkat lunak seperti XAMPP, yang dapat diunduh di:
https : / / www . apachefriends . org/download.html
Setelah mengunduhnya, instal perangkat lunak ini Sampai Anda menjumpai tampilan seperti terlihat pada Gambar 3.8.
GAMBAR 3.8 Panel pengontrol XAMPP
Klik pada tombol yang terletak di kanan tulisan Apache sehingga judul tombol berubah menjadi ‘Stop’. Dengan cara seperti itu, web server Apache telah diaktifkan.
CATATAN | Pada kesempatan lain, jika anda ingin mengontrol control panel tersebut
(gambar 3.8), lakukan Langkah-langkah seperti berikut:
|
Alamat ini menyatakan alamat web server di komputer Anda. Jika tak ada kesalahan, Anda akan menjumpai hasil seperti terlihat pada Gambar 3.9.
Untuk percobaan selanjutnya, salinlah file sensor.html yang Anda buat di awal bab ini ke subfolder ini.Lalu,dengan menggunakan browser apa saja, ketikkan di baris URL:
127.0.0.1/sensor.html
GAMBAR 3.9 Halaman utama web server
GAMBAR 3.10 Hasil pemanggilan skrip sensor.html yang diletakkan di web server
Selanjutnya, akan mencoba skrip PHP. Buatlah skrip berikut dengan menggunakan editor teks apa saja dan simpanlah ke xampp/htdocs:
< ?php
echo “Hari ini: “:
echo date (“d-m-y”) ;
?>
Pastikan bahwa ekstensi file berupa .php.
Selanjutnya, skrip tersebut dapat diuji dengan menuliskan di baris URL milik browser:
GAMBAR 3.11 Hasil pemanggilan skripsi PHP
Tanggal yang ditampilkan pada browser akan bergantung pada tanggal Anda menguji skrip. ltulah salah satu kelebihan skrip PHP dibanding kalau hanya menggunakan HTML. Skrip PHP diawali dengan:
<?php
Dan diakhri dengan:
?>
Kode seperti:
echo “Hari ini;.
dinamakan pernyataan. Pernyataan diakhiri dengan titik-koma. Pernyataan tersebut digunakan untuk menampilkan tulisan:
Hari ini:
Adapun pernyataan:
echo date (d-m-y”);
dimaksudkan untuk menampilkan tanggal sekarang yang diperoleh melalui fungsi date ( ) . Argumen “d-m-Y” menyatakan susunan tanggal yang berupa tanggal diikuti dengan tanda minus, lalu diikuti bulan dan tanda minus, serta terakhir berupa tahun.
Kode PHP dapat diletakkan bersama-sama dengan kode HTML. Namun, ekstensi .php tetap harus digunakan. Sebagai contoh, Anda bisa mencoba skrip berikut:
< ! doctype html >
<html>
<head>
<title>penggabungan Kode PHP di HTML</title>
</style>
</head> <body>
Hari ini:
<?php
echo date (“d-m-y”) ;
?>
</body>
</html >
Hasilnya ditunjukkan pada Gambar 3.12.
GAMBAR 3.12 Hasil pemanggilan skrip yang menggabungkan HTML dan PHP
CATATAN | Jika Anda bermaksud mendalami PHP, Anda bisa membaca buku penulis
yang berjudul “Dasar Pemrograman Web Dinamis Menggunakan PHP” |
3.5 Formulir di HTML
Formulir biasa digunakan untuk mengirimkan data yang diketik pemakai di halaman web ke web server, contohnya nama yang dimasukkan oleh pemakai dikirim ke server. Untuk mencoba hal seperti ini, Anda perlu menyiapkan skrip PHP seperti berikut terlebih dahulu:
<?php
$nama = $_GET[‘nama’];
$usia = $_GET[,usia’];
echo “Nama Anda: $nama<br>”;
echo “Usia: $usia<br>”;
?>
Skrip ini digunakan untuk memperoleh variabel nama dan usia yang dilewatkan melalui metode GET. Nilainya diperoleh melalui $_GET [‘nama’] dan $_GET[‘usia’] . Selanjutnya, kedua data tersebut disimpan ke variabel PHP bernama $nama dan $usia. Perlu diketahui, variabel di PHP selalu diawali dengan tanda $. Selanjutnya, isi kedua variabel ini ditampilkan melalui:
Echo “Nama Anda: $nama<br>”;
dan
echo “Usia: $usia<br>”;
Pernyataan pertama mula-mula menampilkan string ”Nama Anda:” dan diikuti dengan nilai di variabel $nama serta tag <br>. Tag terakhir ini digunakan untuk memindahkan ke baris berikutnya.
Untuk menguji skrip PHP ini, Anda bisa mengetikkan di baris URL milik browser seperti berikut:
127.0.0.1/ bacanama.php?nama=Andika$usia=20
Maka, Anda akan mendapatkan hasil di halaman web seperti yang diperlihatkan pada Gambar 3.13.
GAMBAR 3.13 Hasil pengujian skrip bacadata.php
Itulah kelebihan metode GET. Anda bisa melewatkan nama variabel dan nilainya dengan format semacam:
nama=Andika usia=10
Dalam hal ini, tanda “?” diletakkan sesudah nama skrip PHP dan & memisahkan pasangan variabel=nama.
Sekarang, Anda bisa melengkapi formulir yang melewatkan nama dengan metode GET. Berikut skripnya:
<!doctype html>
<html>
<head>
<title>Pengisian Nama</title>
<style>
Label {
width: 80px;
float : left;
}
input {
display: block;
}
</style>
</head>
<body>
< form action=”bacadata .php” method=”get”>
< label>Nama:< / label >
< input type=”text” name=”nama”>
< / label >Usia:</label>
< input type=”text”name=”usia”>
< input type=”submit”value=”Kirim”>
</form>
</body>
</html>
Suatu formulir akan diawali dengan tag <form> dan diakhiri dengan </form>. Atribut yang biasa disertakan di tag <form> adalah action dan method. Pada contoh ini, action berisi “bacadata. php” yang menyatakan bahwa kalau tombol yang bertipe “submit” diklik pemakai, skrip yang tercantum di atribut ini akan dieksekusi. Adapun method menyatakan metode yang digunakan untuk mengirim data yang pada contoh ini berupa metode GET. Pasangan tag <label> dan </label> digunakan untuk menampilkan label. Tag <input> dengan atribut type berupa “text” digunakan untuk menampilkan field (kotak teks) yang memungkinkan pemakai dapat memasukkan suatu teks. Pada:
<input type=”text” name=”nama”>
“nama” yang terdapat di atribut name menyatakan nama data yang akan dikirimkan ke bacanama . php. Adapun:
< input type=”submit” value=”Kirim”>
digunakan untuk membuat tombol dengan judul “Kirim” yang akan membuat isi formulir dikirimkan ke bacadata . php jika tombol ini diklik.
Kalau Anda perhatikan, skrip formulir . html melibatkan dua style CSS. Style pertama digunakan untuk mengatur elemen label dan style kedua digunakan untuk mengatur elemen input. Deklarasi width: 80px; digunakan untuk mengatur lebar setiap label sebesar 80 piksel, sedangkan float: left; dimaksudkan untuk membuat label terletak di kiri. Adapun:
display: block;
ditujukan untuk membuat baris setelah setiap elemen input tidak ada elemen lain. Dengan perkataan lain, deklarasi properti ini mempunyai efek seperti <br>.
Gambar 3.14 menunjukkan keadaan formulir setelah nama Feriza dan usia 20 diketik. Jika tombol
(Gambar 3.15).
GAMBAR 3.14
Keadaan di formulir setelah Feriza diketikkan
GAMBAR 3.15 Nama yang ditangkap oleh skrip
PHP ditampilkan
Berbeda dengan bacadata.php,bacadata2.php tidak dapat diuji secara langsung mengingat skrip ini melibatkan variabel POST.
Adapun penanganan formulir ditulis seperti berikut:
<!doctype html>
<html>
<head>
< title>Pengisian Nama</title>
< style>
label {
width: 80px;
float: left;
}
input {
display: block;
</style>
</head>
<body>
<form action=”bacadata2 .php” method=”POST”>
< label>Nama:</label>
< input type=” text” name=”name”>
< label>Usia :< / label >
< input type=”text” name =”usia”>
< input type=”submit” value=”Kirim”>
< / form>
</body>
< / html >
Perbedaan dengan contoh sebelum ini terletak pada:
method=”post”
Hal itu menyatakan bahwa metode yang digunakan untuk mengirimkan data berupa POST. Selain itu, pada:
action=”bacadata2 . php”
Jadi, skrip yang akan dijalankan adalah bacadata2 . php.
Gambar 3.16 memperlihatkan contoh setelah nama Dian Fahri dan usia 25, diketik. Adapun Gambar 3.17 menunjukkan hasil setelah tombol
GAMBAR 3.16 Keadaan di formulir yang menggunakan metode POST
GAMBAR 3.17 Hasil nama yang dikirim melalui metode POST
CATATAN | Jika Anda ingin mendalami perbedaan GET dan POST, silakan baca artikel berikut:
www.w3sch001s.com/tags/ref httpmethods . asp |