1.
Web Server dan Web Client
Web server merupakan suatu perangkat lunak yang dijalankan pada
komputer server dan berfungsi agar
dokumen web yang disimpan di server dapat diakses oleh pemakai (user) internet sepert misalnya Xampp.
Sebuah komputer
yang menjalankan situs web
menggunakan protokol HTTP, server web
memberikan halaman web dengan browser serta data file lainnya ke aplikasi berbasis web. Istilah web server
sering hanya mengacu pada perangkat lunak server
HTTP dalam mesin yang menyediakan fungsionalitas seitus web. HTTP adalah protokol web,
dan perangkat lunak server HTTP
seperti Microsoft IIS dan perangkat lunak
server open source Apache menerima permintaan dari browser pengguna (web client)
dan meresponnya dengan mengirimkan kembali dokumen HTML (halaman web) dan file. Hal ini juga mengeksekusi skrip yang berada di server (Script CGI, JSP ASP, PHP, dll).
Web client itu sendiri atau yang biasa disebut web browser merupakan suatu perangkat lunak yang dijalankan pada
komputer pemakai (user) yang
menampilkan dokumen atau informasi web yang
diambil dari web server. Contoh dari web browser adalah Internet Explorer, Mozila Firewox, Opera, dan lain-lain.
2.
HTML
HTML atau Hyper Text Markup Language adalah suatu format data yang digunakan
untuk membuat dokumen hypertext (teks
pada komputer yang memungkinkan user
saling mengirimkan informasi (request-respon)
Dokumen HTML harus
disimpan dengan ekstensi.htm atau .html. HTML memiliki tag-tag yang telah didefinisikan untuk membuat halaman web. Penulisan tag-tag html dapat menggunakan huruf besar atau huruf kecil, karena
HTML tidak case sensitive (membedakan
huruf besar dan huruf kecil memiliki maksud yang berbeda).
Tabel 2.1 Contoh sejumlah tag pada sebuah dokumen HTML
Tag
|
Keterangan
|
<html> ....</html>
|
Tag dasar yang
menandakan dokumen yang merupakan dokumen HTML.
|
<head>....</head>
|
Tag untuk mengisikan
informasi tentang dokumen HTML.
|
<title>....</title>
|
Tag yang berada di
dalam Tag head untuk menuliskan
judul web pada caption web.
|
<body>....</body>
|
Tag untuk mengisikan
isi dokumen web yang ingin
ditampilkan sebagai halaman web.
|
<p>....</p>
|
Menyatakan paragraf
|
<div>....</div>
|
Menyatakan divisi
|
<h1>....</h1>
<h2>....</h2>
<h3>....</h3>
|
Untuk mengatur judul, semakin besar angkanya maka ukuran font semakin kecil
|
<a>....</a>
|
Untuk membuat tautan (link)
|
<img>
|
Untuk menyajikan gambar
|
<ul>....</ul>
|
Untuk membuat bullet
|
<ol>....</ol>
|
Untuk membuat nomor urut
|
<li>....</li>
|
Daftar yang diatur oleh <ul> atau <ol>
|
<form>....</form>
|
Untuk menangani formulir yang berguna untuk memasukkan data oleh
pemakai
|
<input type=”tipe”>
|
Untuk menentukan kontrol di formulir yang digunakan untuk memasukkan
data
|
HTML5 adalah standar baru untuk HTML yang hadir setelah
kemunculan HTML 4. Beberapa hal baru yang didukung oleh HTML5 tetapi tidak
tersedia di pendahulunya antara lain :
·
Kanvas
·
Web SQL database
·
Audio (memungkinkan penyajian player untuk memutar suara)
·
Video (memungkinkan player untuk memainkan film)
·
Drag and drop
·
Dokumen HTML5 diawali dengan <!doctype html>.
Adapun beberapa tag HTML yang tidak lagi didukung di
HTML5 antara lain, <acronym>, <applet>, <basefont>,
<big>, <dir>, <font>, <center>, <frame>,
<frameset>, <isindex>, <noframes>, <s>, <strike>,
<tt>, <u>.
Dalam penulisan HTML5, ada
struktur dasar yang biasa dipakai untuk membuat halaman web. Dengan menggunakan elemen HTML yang dimulai dengan tag awal yang diikuti dengan isi elemen,
dan ditutup oleh tag akhir seperti
berikut :
<!doctype
html>
<html>
<head>
<title>..........
</title>
</head>
<body>
..........
</body>
</html>
3. CSS
CSS atau Cascading Style Sheet adalah suatu
fasilitas untuk mempermudah pemeliharaan sebuah halaman web, dengan menggunakan CSS sebuah halaman web dapat diubah tampilannya tanpa harus mengubah dokumen HTML-nya.[13]
CSS digunakan dalam dokumen HTML untuk
menciptakan suatu style (penyajian)
yang dapat membuat kemampuan HTML menjadi lebih luas. Yang menarik, style dapat didefiniskan pada file terpisah sehingga tidak menambah keruwetan
dokumen. Selain itu tentu saja style
dapat digunakan pada sejumlah dokumen. Penulisan CSS seperti berikut :
nama_style_atau_nama_tag_HTML
{
nama_properti
: nilai_properti;
.......................................
nama_properti
: nilai_properti;
}
Sebagai contoh, judul yang dibentuk
oleh pasangan tag
<h1>....</h1> bisa diatur agar diberi warna latar belakang dan
merubah warna tulisan dengan menggunakan kode CSS. Contoh kode CSS :
h1 {
background-color : black;
color : white;
}
Pada
kode diatas, h1 berkedudukan sebagai selektor tag. Selektor tag mempunyai
ciri-ciri berupa nama elemen HTML yang akan di format. Kode yang berada didalam
{} setelah nama selektor berisi kumpulan pasangan “nama_properti : nilai_properti;”. Pada contoh diatas terdapat dua
properti, yaitu background-color dan color.
·
Properti background-color digunakan
untuk mengatur warna latar belakang. Nilai black
berarti hitam.
· Properti color digunakan untuk menentukan warna teks. Nilai white berarti putih.
Selain selektor tag, terdapat selektor-selektor lain, diantaranya selektor ID dan
selektor kelas. Selektor ID biasa digunakan untuk mengatur sebuah elemen yang
mempunyai nilai ID tertentu. Selektor ID ditandai dengan tanda kress (#) dan diikuti dengan nama ID. Contoh selektor
ID :
#area
{
height
: 100px;
background-color
: lightgray;
}
Pada
contoh selektor ID diatas digunakan untuk mengatur elemen yang ber-ID “area”.
Dalam hal ini :
· Properti height yang bernilai 100px
menyatakan bahwa tinggi elemen yang diatur adalah 100 pixel.
·
Properti background-color yang
bernilai lightgray menyatakan bahwa
warna latar belakang berupa abu-abu muda.
Selektor kelas adalah selektor yang
memformat elemen-elemen yang mempunyai nama kelas tertentu. Selektor kelas
ditandai dengan titik (.) dan diikuti dengan nama kelas. Contoh selektor kelas :
.kotak
{
border
: solid 1px;
}
Yang
mengatur kelas “kotak” dan yang diatur adalah border (untuk mengatur tampilan bingkai) dengan nilai solid 1px yang berarti akan muncul garis
atau bingkai solid 1 pixel.
Kode
CSS ditulis didalam pasangan tag <style
type=”text/css”> dan </style>. Didalam hal ini, type=”text/css”
menyatakan bahwa kode berupa text dan merupakan kode CSS. Di HTML5
type=”text/css” boleh ditiadakan.
CSS dapat diletakkan dalam file tersendiri dengan ekstensi file .css dan dapat dipanggil atau digunakan pada sejumlah dokumen,
misalnya digunakan didalam dokumen HTML. Contoh pemanggilan CSS di HTML :
<html>
<head>
<title>Judul
Halaman</title>
<link rel="stylesheet"
type=”text/css” href="style.css”
/>
</head>
<body>
Isi Web
</body>
</html>
4. PHP
PHP atau Hypertext Preprocessor adalah bahasa server-side scripting yang menyatu
dengan HTML untuk membuat halaman web
yang dinamis. Karena PHP merupakan server-side
scripting maka sintaks dan perintah-perintah PHP akan dieksekusi di server kemudian hasilnya dikirimkan ke browser dalam format HTML. Dengan
demikian kode program yang ditulis dalam PHP tidak akan terlihat oleh user sehingga keamanan halaman web lebih terjamin. PHP dirancang untuk
membentuk suatu tampilan berdasarkan permintaan terkini, seperti menampilkan
isi basis data ke halaman web.
PHP berada dibawah
lisensi GPL sehingga kode sumber PHP dapat didistribusikan secara bebas. PHP
berjalan pada web browser sehingga
memungkinkan PHP dijalankan pada platform
yang berbeda. PHP juga mampu diintegrasikan dengan banyak perangkat lunak DBMS
seperti MySQL, PostgreSQL, Microsoft SQL Server, Solid, Adabas, FilePro,
Velocis, dBase, Unix dbm dan semua database berinterface ODBC. PHP dapat
diunduh pada website resminya.
PHP dibuat oleh
Rasmus Lerdorf pada tahun 1955 dan pada awalnya masih bernama Form Interpreted (FI) yang wujudnya
berupa sekumpulan skrip yang digunakan untuk mengolah data formulir. Rasmus
selanjutnya memberikan kode sumber kepada publik dan banyak pihak yang ikut
mengembangkan PHP sehingga pada tahun 1997 dirilis interpreter PHP yang ditulis
menggunakan bahasa C.
Pada tahun 1997,
sebuah perusahaan bernama Zend menulis ulang interpreter PHP menjadi lebih
bersih, lebih baik, dan lebih cepat. Kemudian pada Juni 1998, perusahaan
tersebut merilis interpreter baru untuk PHP dan meresmikan rilis tersebut
sebagai PHP 3.0 dan singkatan PHP diubah menjadi akronim berulang PHP: Hypertext Preprocessing.
Saat ini PHP sudah
versi 5.0 yang dirilis pada Juni 2004. Pada versi ini PHP sudah dikembangkan
menjadi bahasa pemrograman berorientasi objek. PHP memiliki kelebihan dari
bahasa pemrograman lainnya, diantaranya yaitu :
·
Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak melakukan sebuah
kompilasi dalam penggunaanya.
·
Web
Server yang mendukung PHP dapat ditemukan dimana - mana dari mulai IIS
sampai dengan apache, dengan configurasi yang relatif mudah.
·
Dalam sisi pengembangan lebih mudah, karena
banyaknya milis - milis dan developer yang siap membantu dalam pengembangan.
·
Dalam sisi pemahamanan, PHP adalah bahasa scripting yang paling mudah karena
referensi yang banyak.
·
PHP adalah bahasa open source yang dapat digunakan di berbagai mesin (linux, unix,
windows) dan dapat dijalankan secara runtime
melalui console serta juga dapat menjalankan perintah-perintah sistem.
·
PHP memiliki kemampuan untuk melakukan koneksi
dengan berbagai macam database. Saat
ini, database yang didukung oleh PHP
antara lain, Adabas D, InterBase, PostgreSQL, dBase, FrontBase, Solid, Empress,
mSQL, Sybase, FilePro (read-only), Direct MS-SQL, Velocis, IBM DB2, MySQL, Unix
dbm, Informix,Ingres, Oracle (OCI7 and OCI8), dan semua database yang mempunyai provider ODBC.[11]
Pada suatu halaman website, PHP digunakan untuk melakukan
transaksi yang terjadi di database
dan mengirimkan hasilnya kepada user
melalui HTML. PHP tidak berfokus kepada tampilan yang ditampilkan kepada
pengguna melainkan berfokus kepada proses yang terjadi antara database dengan pengguna.
Kode PHP disimpan
sebagai plain text dalam format
ASCII, sehingga kode PHP dapat ditulis hampir disemua editor teks seperti,
notepad, sublime text, vi, emacs, windows wordpad, dan lain-lain. Kode PHP
adalah kode yang disertakan di sebuah halaman HTML dan kode tersebut dijalankan
oleh server sebelum dikirim ke browser. Contoh file PHP :
<html>
<? php
Print(“Contoh text yang menggunakan kode PHP”);
?>
</html>
|
Pada file .html HTTP server hanya melewatkan content dari file menuju ke browser. Server tidak
mencoba untuk mengerti atau memproses file, karena itu adalah sebuah browser. Pada file berekstensi .php akan ditangani
secara berbeda. Yang memiliki kode PHP akan diperiksa. Web server akan memulai bekerja apabila berada diluar lingkungan
HTML. Oleh karena itu server akan
melewati semua content yang berisi
kode HTML, CSS, JavaScript, simple text
di browser tanpa diinterpretasikan di
server. Web server akan berada
di lingkungan kode PHP jika terdapat tag PHP
yang digunakan untuk keluar dari lingkungan kode HTML.
HTTP server mengerti bahwa saat bertemu
dengan salah satu mekanisme pergantian lingkungan kode yang disebutkan
sebelumnya, server mulai memproses
kode didalamnya sebagai sebuah script
PHP, kemudian mengeksekusi kode PHP dan mengirimkan script’s output (sebagai
contoh statement print) menuju ke browser sebagai bagian dari dokumen.
Ketika mencapai akhir dari tag PHP, web server menuju ke mode HTML, dan
berlanjut mengirimkan isi dokumen menuju browser
tanpa melakukan server-side processing.
Sebagai informasi bahwa dalam sebuah halaman HTML mungkin saja terdapat lebih
dari satu tag PHP yang akan
disertakan.
Tidak semua
statement dalam script PHP harus
diakhiri dengan tanda kurung. Sebagai contoh statement print atau echo dapat
menggunakan atau tidak menggunakan tanda kurung dalam penulisannya. Contoh, dua
statement berikut akan menghasilkan output
yang sama.
print(“Text dijalankan dengan kode PHP”);
print “Text dijalankan dengan kode PHP”;
atau
echo (“Text dijalankan dengan kode PHP);
echo “Text dijalankan dengan kode PHP”;
|
Semua
kode PHP tidak akan tampak di halaman browser,
karena kode PHP dieksekusi di server,
sebelum isi halaman dikirim ke browser.
Ketika mesin PHP membaca perintah print
(“Text dijalankan dengan kode PHP”); baris ini dijalankan dan teks dicetak,
pada akhirnya hanya teks ini sajalah yang dapat dikirimkan ke browser.
5. JavaScript
JavaScript adalah
bahasa skrip (bahasa yang kodenya ditulis menggunakan teks biasa) yang ditempelkan
pada dokumen HTML dan diproses pada sisi klien.
Cara kerja
JavaScript adalah mengakses elemen pada HTML dan membuat aksi jika
elemen-elemen HTML itu mengalami perubahan, misalnya berubahnya warna halaman web begitu sebuah tombol di klik. JavaScript
membuat sebuah halaman web menjadi
lebih dinamis dan interaktif. JavaScript yang digunakan pada sebuah halaman web merupakan client side scripting yang berarti bahwa web browser mengidentifikasi dan dan menjalakan skrip program yang
disispkan dalam dokumen web (yang
ditermia dari server), dan mungkin
memperbarui tampilan halaman di komputer pemakai (user) tanpa mengirimkan permintaan (request) baru kepada web
server. Karena JavaScript pada halaman web
adalah client side scripting maka
kode JavaScript yang ditulis satu file dengan
dokumen HTML akan ditampilkan ketika sebuah halaman web dilihat source code-nya.
JavaScript
merupakan bahasa yang yang case sensitive
seperti halnya bahasa pemrograman Java yaitu membedakan penulisan dengan huruf
kecil dan huruf besar memiliki arti yang berbeda.
JavaScript dapat ditulis secara inline atau satu file
dengan dokumen HTML atau dapat juga ditulis pada file terpisah dengan ekstensi
.js. JavaScript yang ditulis satu file
dengan dokumen HTML dapat dilihat pada contoh berikut :
<!doctype
html>
<html>
<head>
<title>..........
</title>
<script
type=”text/javascript” language=” JavaScript” >
/* kode dengan menggunakan JavaScript
disini */
</script>
</head>
<body>
..........
</body>
</html>
Atau dapat juga ditulis
ditengah tag body seperti berikut :
<html>
<head>
<title>..........
</title>
</head>
<body>
<script type=”text/javascript” language=” JavaScript” >
/* kode dengan
menggunakan JavaScript disini */
</script>
..........
</body>
</html>
Sedangkan jika JavaScript
ditulis pada file terpisah dengan
dokumen HTML maka kode dapat ditulis seperti berikut :
<!doctype html>
<html>
<head>
<title>..........
</title>
</head>
<script type=”text/javascript” language=” JavaScript”
src=”nama_file.js”>
</script>
<body>
..........
</body>
</html>
6. Web Browser
Web browser adalah perangkat lunakyang berfungsi untuk menerima dan menyajikan sumber informasi di Internet. Sebuah sumber informasi diidentifikasi dengan pengidentifikasi sumber seragam yang dapat berupa halaman web, gambar, video, atau jenis konten lainnya.
Meskipun penjelajah web terutama ditujukan untuk mengakses Internet, sebuah penjelajah juga dapat digunakan untuk mengakses informasi yang disediakan oleh server web dalam jaringan pribadi atau berkas pada sistem berkas. Beberapa penjelajah web yang populer adalah Google Chrome, Firefox, Internet Explorer, Opera, dan Safari.
No comments:
Post a Comment
Silahkan meninggalkan komentar disini :) . Gunakan kata-kata yang baik, berilah masukkan dan kritikan yang membangun. Secepatnya saya akan balas. Komentar yang tidak baik, SARA, dan SPAM saya akan hapus!