3. Pengantar Pengertian HTML, CSS dan PHP

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 &deg; menyatakan simbol 0 dan &#37 ; 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.

  1. Sebuah dokumen HTML5 diawali dengan <!DOCTYPE HTML>.
  2. Pasangan tag <html> dan </html> mengawali kode HTML. Di dalamnya terdapat pasangan <head> dan </head> serta <body> dan </body>.
  3. 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.
  4. 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>.
  5. 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.

 

Font Ukuran maupun jenis font serta dekorasi pada font dapat diatur melalui berbagai properti yang berhubungan dengan font.

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,

  1. body adalah nama selektor,
  2. bagian yang berada dalam tanda { dan } adalah bagian deklarasi properti,
  3. font—family, color, dan background-color menyatakan nama properti,
  4. verdana adalah nilai untuk properti font-family dan
  5. white adalah nilai untuk properti color, dan
  6. 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>

Pasangan tag <style> dan </style> diletakan di eleman head. Hasil penambahan style ini dapat dilihat pada gambar 3.5.

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.

 

Selektor yang digunakan di dalam suatu style tidak selalu berupa nama elemen HTML. Terkadang, selektor yang digunakan berupa nama kelas yang digunakan pada satu atau sejumlah elemen HTML. Hal ini sangat bermanfaat untuk memformat sejumlah elemen yang berkelas sama.

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

  1. Tuliskan tanda titik terlebih dahulu.
  2. 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:

  1. Klik pada posisi berikut pada task bar:

  1. Klik pada posisi berikut:

Setelah Anda menginstal XAMPP, pada drive C :akan terdapat folder bernama xampp. Di dalam folder ini terdapat subfolder bernama htdocs.Subfolder inilah yang digunakan untuk meletakkan dokumen/skrip HTML, CSS,maupun PHP yang boleh diakses melalui browser. 127.0.0.1

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 diklik, nama dan usia tersebut ditampilkan oleh bacadata . php

(Gambar 3.15).

GAMBAR 3.14

Keadaan di formulir setelah Feriza diketikkan

Sekarang, akan diberikan contoh penanganan untuk mengirimkan data di formulir dengan menggunakan metode POST. Pertama-tama, ubah kata GET menjadi POST di skrip PHP, seperti berikut:

 

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 diklik. Perhatikan pada Gambar 3.17. Data yang dilewatkan tidak terlihat di baris URL.

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

 

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.