Sejarah Pemrograman Web
Programming adalah adalah proses menulis, mencoba, memeriksa dan memperbaiki (debug), serta memelihara kode untuk membuat sebuah program komputer. Kode ini ditulis dalam berbagai bahasa pemrograman. Tujuan dari pemrograman adalah untuk memuat suatu program yang dapat melakukan suatu perhitungan atau proses sesuai dengan keinginan si pemrogram. Sedangkan Web sendiri yaitu jaringan komputer dari situs internet yang menawarkan teks dan grafik dan suara dan sumber daya animasi melalui protokol transfer hypertext. Jadi secara singkat web programming adalah proses pembuatan program yang outputnya disajikan oleh Web Browser.
Secara umum pemrograman web dapat dibagi 2, yaitu: client side scripting dan server side scripting. perbedaan dari kedua jenis script ini adalah pada bagaimana script tersebut di proses dan tentu saja dari sintaks program yang digunakan.
1. Client side scripting (CSS),
merupakan jenis script yang pengolahannya dilakukan di sisi client. pengolahan disini berarti “di terjemahkan / interpreted”. yang memiliki tugas untuk menterjemahkan script jenis ini disisi client adalah web browser. agar semua script yang masuk kategori ini dapat diterjemahkan oleh web browser maka didalam web browser terdapat sebuah komponen/ modul/ “engine” yang memiliki daftar pustaka (library) yang mampu mengenali semua perintah-perintah yang terdapat pada kategori client side scripting. berikut contoh web browser yang populer digunakan: internet explorer, mozilla firefox, opera., safari. berikut adalah contoh client side scripting: HTML (hypertext markup language), java script, XML (extensible markup language), CSS (cascading style sheet). client side scripting merupakan script yang digunakan untuk membuat halaman web statis.
2. Server side scripting (SSS),
merupakan script yang pengolahannya (baca: diterjemahkan) di sisi server. server yang dimaksud disini adalah sebuah komponen yang biasa disebut web server yang didalamnya terintegrasi dengan sebuah mesin (engine)/ modul yang didalamnya terdapat daftar pustaka (library) yang mampu menterjemahkan script-script tersebut yang kemudian setelah di terjemahkan di server kemudian dikirim (ditampilkan) ke client (web browser) dalam format HTML (hypertext markup language). mesin (engine) tersebut harus di install terlebih dahulu karena mesin-mesin tersebut memiliki karakteristik yang berbeda untuk tiap script (bahasa pemrograman) yang digunakan. berikut contoh server side scripting: PHP (Hypertext Pre Processor), ASP (active server pages), JSP (java server pages). server side scripting digunakan untuk membuat halaman web dinamis. hal ini disebabkan karena server side scripting memiliki kelebihan, diantaranya: mampu berinteraksi dengan banyak perangkat lunak basis data (database), mampu mengelola sumber daya yang terdapat di sistem operasi dan perangkat keras komputer, mampu dijalankan di semua sistem operasi (multi plattform), aman karena scriptnya di proses di server yang tidak dapat dilihat dari sisi client.
Jika anda suka sekali dalam pembuatan web, maka anda tidak akan terlepas dari apa yang namanya bahasa pemrograman. Bahasa pemrograman merupakan suatu teknik komando / instruksi standar untuk memerintah komputer. Berikut adalah penjelasan tentang bahasa pemrograman apa saja yang biasa digunakan untuk membuat suatu website :
1. Bahasa Pemrograman HTML
HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk
membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet Explorer.
2. Bahasa Pemrograman PHP
PHP adalah bahasa pemrograman script yang paling banyak dipakai saat ini. PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP masih bernama FI (Form Interpreted), yang wujudnya berupa sekumpulan script yang digunakan untuk mengolah data form dari web. PHP banyak dipakai untuk membuat situs web yang dinamis, walaupun tidak tertutup kemungkinan digunakan untuk pemakaian lain. PHP biasanya berjalan pada sistem operasi linux (PHP juga bisa dijalankan dengan hosting windows).
3. Bahasa Pemrograman ASP
ASP adalah singkatan dari Active Server Pages yang merupakan salah satu bahasa pemograman web untuk menciptakan halaman web yang dinamis. ASP merupakan salah satu produk teknologi yang disediakan oleh Microsoft. ASP bekerja pada web server dan merupakan server side scripting.
4. Bahasa Pemrograman XML
Extensible Markup Language (XML) adalah bahasa markup serbaguna yang direkomendasikan W3C untuk mendeskripsikan berbagai macam data. XML menggunakan markup tags seperti halnya HTML namun penggunaannya tidak terbatas pada tampilan halaman web saja. XML merupakan suatu metode dalam membuat penanda/markup pada sebuah dokumen.
5. Bahasa Pemrograman WML
WML adalah kepanjangan dari Wireless Markup Language, yaitu bahasa pemrograman yang digunakan dalam aplikasi berbasis XML (eXtensible Markup Langauge). WML ini adalah bahasa pemrograman yang digunakan dalam aplikasi wireless. WML merupakan analogi dari HTML yang berjalan pada protocol nirkabel.
6. Bahasa Pemrograman PERL
Perl adalah bahasa pemrograman untuk mesin dengan sistem operasi Unix (SunOS, Linux, BSD, HP-UX), juga tersedia untuk sistem operasi seperti DOS, Windows, PowerPC, BeOS, VMS, EBCDIC, dan PocketPC. PERL merupakan bahasa pemograman yang mirip bahasa pemograman C.
7. Bahasa Pemrograman CFM
Cfm dibuat menggunakan tag ColdFusion dengan software Adobe ColdFusion / BlueDragon / Coldfusion Studio. Syntax coldfusion berbasis html.
8. Bahasa Pemrograman Javascript
Javascript adalah bahasa scripting yang handal yang berjalan pada sisi client. JavaScript merupakan sebuah bahasa scripting yang dikembangkan oleh Netscape. Untuk menjalankan script yang ditulis dengan JavaScript kita membutuhkan JavaScript-enabled browser yaitu browser yang mampu menjalankan JavaScript.
9. Bahasa Pemrograman CSS
Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C).
World Wide Web (WWW)
World Wide Web (www) atau yeng lebih dikenal dengan sebutan web, merupakan salah satu layanan yang didapat oleh para pemakai komputer yang terhubung ke internet. Web adalah ruang informasi dengan menggunakan teknologi hyperlink untuk menghubungkan tiap dokumen. Dengan teknologi ini pemakai dituntun untuk menemukan informasi dengan mengikuti tautan (link) yang disediakan dalam halaman web yang ditampilkan lewat web browser.
Internet identik dengan web, karena kepopuleran web sebagai interface pada layanan-layanan yang ada di Internet. Dimana yang pada awalnya web hanya sebagai penyedia informasi kini digunakan juga untuk berkomunikasi surat elektronik (email), chatting sampai dengan video conference.
Bagaimana WWW bekerja ?
- Informasi web disimpan dalam dokumen yang disebut dengan halaman-halaman web (web pages)
- Web page adalah berkas-berkas yang disimpan dalam komputer yang disebut dengan server-server web (web server)
- Komputer-komputer yang mengakses web page disebut sebagai web client
- Web client menampilkan web page dengan menggunakan program yang disebut dengan web browser
HyperText Transfer Protocol (HTTP)
HyperText Transfer Protocol (HTTP) merupakan protokol yang dipergunakan untuk mentransfer dokumen dalam www. HTTP mendefinisikan bagaimana suatu pesan bisa diformat dan dikirimkan dari server ke client. HTTP juga mengatur aksi-aksi apa saja yang harus dilakukan oleh web server dan juga web browser sebagai respon atas permintaan-permintaan yang lewat dalam protokol http.
Sebagai contoh, ketika kita mengetikkan suatu alamat atau URL pada web browser, maka sebenarnya web browser akan mengirimkan permintaan http ke web server. Web server kemudian akan menerima permintaan ini dan melakukan proses sesuai dengan yang diminta oleh web browser (misalnya akses ke database, file, e-mail dan lain sebagainya). Hasil proses tadi akan dikirimkan kembali ke web browser untuk ditampilkan kepada pengguna.
HTTP bekerja diatas TCP (Transmission Control Protocol) yang menjamin sampainya data di tujuan dalam urutan yang benar. Bila suatu kesalahan terjadi selama proses pengiriman, pihak pengirim akan mendapat pemberitahuan bahwa telah terjadi ketidakberesan dan perlu mengirimkan permintaan ulang.
Uniform Resource Locator (URL)
Uniform Resource Locator (URL) merupakan alamat dari sebuah resource yang dapat diakses di internet. Resource yang dimaksud disini bisa berupa berkas halaman web, video, mp3, dll.
URL terdiri dari 3 bagian :
- Protokol (http:// atau https://)
- Alamat Server (lokasi data tersimpan)
- File Path (folder dan atau nama file)
Misalnya bila ada URL : http://www.galau.com/foto/wirasto.jpg, berarti :
http:// adalah protokol
www.galau.com adalah alamat server
/foto/wirasto.jpg adalah folder dan nama file
Domain Name System (DNS)
Domain Name System (DNS) merupakan versi teks dari ip address. Dalam dunia jaringan komputer, komputer berkomunikasi satu sama lain dengan mengenali ip address-nya. Namun bagi manusia tidak mungkin menghafalkan ip address tersebut, manusia lebih mudah menghapalkan kata-kata seperti www.yahoo.com, www.google.com, atau www.facebook.com. DNS berfungsi untuk mengkonversi nama yang mudah diingat menjadi ip address dari komputer yang ingin dihubungi.
Jenis-jenis Web
Jenis web berdasarkan sifat :
- Web Statis, dibentuk menggunakan client side scripting. Update dilakukan secara manual dengan melakukan perubahan terhadap script halaman tersebut.
- Web Dinamis, dibentuk menggunakan aplikasi tambahan (server side scripting dan database) sehingga data dapat diupdate tanpa harus mengubah script, namun cukup dengan mengubah data yang ada dalam database.
Jenis web berdasarkan bahasa pemrograman :
1. Client Side Scripting
- HTML
- Javascript
- CSS
2. Server Side Scripting
- PHP
- ASP
- Perl
Hyper Text Markup Language (HTML)
Hyper Text Markup Language (html), merupakan bahasa markup yang digunakan untuk membuat halaman web dan menampilkan berbagai informasi didalam sebuah browser. Dokumen html (atau halaman web) terdiri dari elemen-elemen yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan.
Ada dua cara untuk membuat halaman web dengan html yaitu menggunakan web designer atau dengan teks editor biasa, dan setiap berkas html disimpan dalam ekstensi.html. Dan perlu diingat bahwa nama berkas pada beberapa sistem operasi akan bersifat case-sensitive, sehingga berkas dengan nama dokumen.html berbeda dengan berkas DOKUMEN.html dan berbeda juga dengan berkas Dokumen.html.
Setiap website yang dibuat dengan menggunakan html memiliki dokumen utama yang diberi nama index.html. Sehingga bila ingin membuat website, wajib memiliki berkas ini.
Struktur Dasar Dokumen HTML
Seperti halnya bahasa-bahasa markup komputer yang lain, html juga memiliki struktur dasar. Adapun struktur dasar dari html adalah sebagai berikut :
<html>
<head>
….... Masukkan informasi dokumen disini …...
</head>
<body>
…... Masukkan informasi yang ingin ditampilkan disini …...
</body>
</html>
Contoh dokumen html :
index.html
<html>
<head>
<title>Contoh Dokumen HTML</title>
</head>
<body bgcolor="blue">
Ini adalah contoh dari dokumen HTML. Dokumen HTML ini biasa juga disebut sebagai halaman web ketika sudah ditampilkan di web browser.
</body>
</html>
Sudah disebutkan sebelumnya bahwa dokumen html terdiri dari elemen-elemen, maka berikut ini adalah struktur dari elemen :
- Elemen dalam dokumen html ditandai dengan penulisan tag yang berpasangan (contoh: <body></body>), walau ada pula yang tidak harus berpasangan (contoh: <img>)
- Tag diapit dengan dua karakter kurung bersudut < dan >
- Tag pertama dalam suatu elemen adalah tag pembuka dan yang kedua merupakan tag penutup
- Tag case-isensitive, sehingga <body> sama dengan <BODY>
- Tag dapat mempunyai atribut untuk mengubah default pemformatan dokumen dengan tag tersebut.
Memformat Dokumen HTML
Teks dalam halaman web dapat diformat secara khusus untuk menunjukkan perbedaan dan penekanan terhadap isi dan maksud dari teks tersebut.
Heading (Judul)
Heading terdiri dari 6 level atau tingkatan. Semakin besar tingkatannya maka semakin kecil tulisannya.
heading.html
<html>
<head>
<title>Belajar Heading</title>
</head>
<body>
<h1>Judul Level 1</h1>
<h2>Judul Level 2</h2>
<h3>Judul Level 3</h3>
<h4>Judul Level 4</h4>
<h5>Judul Level 5</h5>
<h6>Judul Level 6</h6>
</body>
</html>
Break (Pindah Baris)
Dalam dokumen html kita tidak bisa menulis teks pada baris yang baru dengan menekan enter saja. Namun harus menggunakan tag br
break.html
<html>
<head>
<title>Belajar Break</title>
</head>
<body>
Saya Baris 1
Saya Baris 2, saya ingin di baris baru namun tidak bisa
<br>Saya Baris 3, saya ada dibaris baru karena ada tag br
</body>
</html>
Paragraf
paragraf.html
<html>
<head>
<title>Belajar Paragraf</title>
</head>
<body>
<p>Setiap website yang dibuat dengan menggunakan html memiliki dokumen utama yang diberi nama index.html. Sehingga bila ingin membuat website, wajib memiliki berkas ini.</p>
<p align="right">Setiap website yang dibuat dengan menggunakan html memiliki dokumen utama yang diberi nama index.html. Sehingga bila ingin membuat website,
wajib memiliki berkas ini.</p>
<p align="center">Setiap website yang dibuat dengan menggunakan html memiliki
dokumen utama yang diberi nama index.html. Sehingga bila ingin membuat website, wajib memiliki berkas ini.</p>
<p align="justify">Setiap website yang dibuat dengan menggunakan html memiliki dokumen utama yang diberi nama index.html. Sehingga bila ingin membuat website, wajib memiliki berkas ini.</p><p align=”right”></p>
</body>
</html>
Tebal, Miring, Garis Bawah
tmgb.html
<html>
<head>
<title>Belajar T-M-GB</title>
</head>
<body>
<b>Ini ditulis tebal</b><br>
<i>Ini ditulis miring</i><br>
<u>Ini digaris bawahi</u>
</body>
</html>
Huruf
huruf.html
<html>
<head>
<title>Belajar Huruf</title>
</head>
<body>
<font size=10>Ukuran huruf 10</font>
<br>
<font color=”red”>Warna huruf merah</font>
<br>
<font size=4 color=”blue”>Ukuran huruf 4 dan warna huruf biru</font>
</body>
</html>
Gambar
Untuk menampilkan gambar dalam dokumen web, bisa menggunakan tag img. Tag img merupakan salah satu tag html yang tidak membutuhkan pasangan.
gambar.html
<html>
<head>
<title>Belajar Gambar</title>
</head>
<body>
<img src=”gambar.jpg”>
</body>
</html>
Tag img memiliki beberapa atribut, antara lain :
- src = untuk lokasi gambar yang akan ditampilkan
- width = untuk lebar gambar
- height = untuk tinggi gambar
- title = untuk tulisan yang akan muncul jika gambar disorot dengan mouse
List
List merupakan bentuk umum yang biasa digunakan untuk menguraikan daftar. List dalam html antara lain adalah list yang berurutan/bernomor dan tidak bernomor.
Ordered List
Ordered list merupakan daftar yang berurutan atau bernomor. Ordered list dibuat dengan menggunakan tag ol dan tiap itemnya dibuat dengan tag li
ol.html
<html>
<head>
<title>Belajar OL</title>
</head>
<body>
<ol>
<li>Slackware</li>
<li>Ubuntu</li>
<li>Fedora</li>
</ol>
<ol type="1">
<li>Slackware</li>
<li>Ubuntu</li>
<li>Fedora</li>
</ol>
<ol type="i">
<li>Slackware</li>
<li>Ubuntu</li>
<li>Fedora</li>
</ol>
<ol type="I">
<li>Slackware</li>
<li>Ubuntu</li>
<li>Fedora</li>
</ol>
<ol type="a">
<li>Slackware</li>
<li>Ubuntu</li>
<li>Fedora</li>
</ol>
<ol type="A">
<li>Slackware</li>
<li>Ubuntu</li>
<li>Fedora</li>
</ol>
</body>
</html>
Unordered List
Unordered list merupakan daftar yang tidak berurutan atau tidak bernomor. Unordered list dibuat dengan menggunakan tag ul dan tiap itemnya dibuat dengan tag li
ul.html
<html>
<head>
<title>Belajar UL</title>
</head>
<body>
<ul>
<li>Slackware</li>
<li>Ubuntu</li>
<li>Fedora</li>
</ul>
<ul type="disc">
<li>Slackware</li>
<li>Ubuntu</li>
<li>Fedora</li>
</ul>
<ul type="circle">
<li>Slackware</li>
<li>Ubuntu</li>
<li>Fedora</li>
</ul>
<ul type="square">
<li>Slackware</li>
<li>Ubuntu</li>
<li>Fedora</li>
</ul>
</body>
</html>
Nested List
Nested list atau daftar yang bersarang merupakan daftar berupa gabungan dari ordered list dan unodererd list, atau bisa juga hanya salah satu diantaranya namun ada list dalam list.
nl.html
<html>
<head>
<title>Belajar NL</title>
</head>
<body>
<ol>
<li>Slackware</li>
<ol type="i">
<li>Slackware</li>
<li>Ubuntu</li>
<li>Fedora</li>
</ol>
<li>Ubuntu</li>
<ol type="a">
<li>Slackware</li>
<li>Ubuntu</li>
<li>Fedora</li>
</ol>
<li>Fedora</li>
<ul type="circle">
<li>Slackware</li>
<li>Ubuntu</li>
<li>Fedora</li>
</ul>
</ol>
</body>
</html>
Anchor
Dokumen html menggunakan hyperlink (anchor) untuk menghubungkan satu dokumen kedokumen lain. Anchor dibuat dengan menggunakan tag a. Sebagai contoh kita memiliki 3 buah dokumen html, masing-masing adalah index.html sebagai dokumen utama, dan halaman_1.html serta halaman_2.html sebagai dokumen pendamping.
index.html
<html>
<head>
<title>Belajar Anchor</title>
</head>
<body>
<h1>Halaman Utama</h1>
<a href="halaman_1.html">Halaman 1</a>
<a href="halaman_2.html">Halaman 2</a>
</body>
</html>
halaman_1.html
<html>
<head>
<title>Belajar Anchor</title>
</head>
<body bgcolor=red>
<h1>Halaman 1</h1>
<a href="index.html">Halaman Utama</a>
<a href="halaman_2.html">Halaman 2</a>
</body>
</html>
halaman_2.html
<html>
<head>
<title>Belajar Anchor</title>
</head>
<body bgcolor=lime>
<h1>Halaman 2</h1>
<a href="index.html">Halaman Utama</a>
<a href="halaman_1.html">Halaman 1</a>
</body>
</html>
Tabel
Tabel digunakan untuk menyajikan data dalam bentuk baris dan kolom. Umumnya setiap kolom menunjukkan data yang sejenis, dan setiap baris yang terdiri atas kolom-kolom menunjukkan kelompok data dalam satu kesatuan. Tabel dibuat dengan menggunakan tag table, baris dibuat dengan tag tr, sedangkan kolom untuk judul tabel dibuat dengan menggunakan th dan kolom untuk data menggunakan tag td.
tabel1.html
<html>
<head>
<title>Pengenalan Tabel</title>
</head>
<body>
<table border=1>
<tr>
<th width=30>NO</th>
<th width=200>NAMA</th>
<th width=120>NIM</th>
<th width=50>JENKEL</th>
</tr>
<tr>
<td>1</td>
<td>Wirasto S. Karim</td>
<td>01010101</td>
<td>Pria</td>
</tr>
<tr>
<td>2</td>
<td>Abdul Gani</td>
<td>02020202</td>
<td>Pria</td>
</tr>
<tr>
<td>3</td>
<td>Ramona</td>
<td>03030303</td>
<td>Wanita</td>
</tr>
</table>
</body>
</html>
tabel2.html
<html>
<head>
<title>Pengenalan Tabel</title>
</head>
<body>
<table border=1>
<tr bgcolor=red>
<th rowspan=2 width=30>NO</th>
<th colspan=3>MAHASISWA</th>
<th colspan=2>NILAI</th>
</tr>
<tr bgcolor=red>
<th width=200>NAMA</th>
<th width=80>NIM</th>
<th width=40>JENKEL</th>
<th>TUGAS</th>
<th>QUIS</th>
</tr>
<tr>
<td>1</td>
<td>Wirasto S. Karim</td>
<td>01010101</td>
<td>Pria</td>
<td>B</td>
<td>B</td>
</tr>
<tr>
<td>2</td>
<td>Abdul Gani</td>
<td>02020202</td>
<td>Pria</td>
<td>C</td>
<td>A</td>
</tr>
<tr>
<td>3</td>
<td>Ramona</td>
<td>03030303</td>
<td>Wanita</td>
<td>A</td>
<td>A</td>
</tr>
</table>
</body>
</html>
tabel3.html
<html>
<head>
<title>Pengenalan Tabel</title>
</head>
<body>
<table border=1>
<tr bgcolor=yellow>
<th width=30>NO</th>
<th width=200>NAMA</th>
<th>DATA</th>
</tr>
<tr>
<td>1</td>
<td valign=top>Wirasto S. Karim</td>
<td align=center>
<table border=1 cellpadding=20>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr valign=top>
<td>2</td>
<td>Abdul Gani</td>
<td align=center>
<img src="gambar.jpg" width=110 height=150 border=1>
</td>
</tr>
<tr>
<td>3</td>
<td>Ramona</td>
<td>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</td>
</tr>
</table>
</body>
</html>
Selain untuk menyajikan data dalam bentuk baris dan kolom, tabel juga bisa digunakan untuk mengatur tata letak dari halaman web.
tabelweb.html
<html>
<head>
<title>MUKABUKU</title>
</head>
<body>
<table border=1 width=100%>
<tr>
<td colspan=2 bgcolor=blue><h1>MUKABUKU.COM</h1></td>
</tr>
<tr valign=top>
<td width=150>
<b>
<a href=''>Beranda</a><br>
<a href=''>Profil</a><br>
<a href=''>Teman</a><br>
<a href=''>Permainan</a>
</b>
</td>
<td>
<p>Ini adalah halaman yang menyediakan informasi</p>
</td>
</tr>
</table>
</body>
</html>
Cascading Style Sheet (CSS)
Cascading Style Sheet (css), merupakan style yang digunakan untuk mengatur tampilan dari halaman web. Dengan menggunakan css, maka untuk menghasilkan tampilan web yang indah dan menarik jauh lebih mudah dan ringkas dibandingkan menggunakan attribut ditiap tag html. Selain bisa membuat indah, css juga bisa membatu menciptakan web dengan tampilan yang dinamis dan fleksibel. Baik itu untuk tampilan web di browser ataupun ketika halaman web dicetak lewat printer.
Struktur CSS
Perintah css terdiri atas 2 komponen, yakni Selector dan Declaration. Selector berfungsi untuk memberi tahu web browser bahwa pada elemen mana aturan css akan diterapkan. Selector dapat berupa nama tag, selector class atau selector id. Declaration merupakan aturan css yang diterapkan yang mana terdiri atas property dan value
Penulisan CSS
Css juga memiliki aturan-aturan penulisan yaitu :
1. Internal Style, dengan menggunakan tag style dan diletakkan diantara tag head.
<html>
<head>
<title>CSS</title>
<style>
h1 { color : blue; }
</style>
</head>
<body>
Internal style tidak harus selalu diletakkan diantara tag head. Kita selalu bisa meletakkan diantara tag lain yang ada didalam tag body. Namun untuk menciptakan kode yang lebih bersih dan terstruktur dengan baik, css biasa diletakkan diantara tag head.
2. Inline Style, dengan menambahkan langsung kode css kedalam tag html sebagai attribut.
<h1 style=”color:blue;”>Judul Satu</h1>
3. External Style, dengan menggunakan tag link yang diletakkan diantara tag head dan merujuk keberkas css.
<html>
<head>
<title>CSS</title>
<link href=”style.css” rel=”stylesheet”>
</head>
<body>
Selector
Seperti sudah disebutkan sebelumnya, selector dapat berupa nama tag, selector class atau selector id. Berikut ini adalah contoh penggunaan selector dalam css.
selector.html
<html>
<head>
<title>Belajar Selector</title>
<style>
h1 {
color: blue;
}
.judul {
color: red;
}
#satu {
color: green;
}
</style>
</head>
<body>
<h1>Selector Tag</h1>
<h1 class=judul>Selector Class</h1>
<h1 id=satu>Selector Id</h1>
</body>
</html>
Memformat Dokumen dengan CSS
Memformat dokumen dengan css jauh lebih fleksibel dibandingkan dengan menggunakan tag html saja.
format.html
<html>
<head>
<title>Format CSS</title>
<style type=text/css>
body {
background-color:yellow;
}
h1 {
color:blue;
text-align:center;
}
b {
font-weight:normal;
}
i {
font-style:normal;
}
u {
text-decoration:none;
}
b, i {
color:green;
}
</style>
</head>
<body bgcolor=green>
<h1>DOKUMEN HTML</h1>
<b>Pemrograman Web</b>
<br>
<i>Pemrograman Web</i>
<br>
<u>Pemrograman Web</u>
</body>
</html>
ANCHOR CSS
Kita bisa menjadikan anchor menjadi lebih menarik dengan css.
link1.html
<html>
<head>
<title>Anchor CSS</title>
<style type=text/css>
a {
color:red;
text-decoration:none;
}
a:hover {
color:blue;
}
</style>
</head>
<body>
<h1>Halaman Utama</h1>
<a href="">Ke Halaman 1</a>
<a href="">Ke Halaman 2</a>
</body>
</html>
link2.html
<html>
<head>
<title>Anchor CSS</title>
<style type=text/css>
a {
color:red;
text-decoration:none;
border:1px solid red;
background:yellow;
padding:2px;
}
a:hover {
color:blue;
}
.facebook {
background:#3b5998;
color:white;
border:1px solid #d8dfea;
font-size: 11px;
font-family: "lucida grande", tahoma, verdana, arial, sansserif;
}
.facebook:hover {
color:white;
}
</style>
</head>
<body>
<h1>Halaman Utama</h1>
<a href="">Ke Halaman 1</a>
<a href="" class=facebook>Ke Halaman 2</a>
</body>
</html>
Tata Letak
Sudah pernah dipelajari di bab sebelumya bagaimana mengatur tata letak dengan menggunakan tabel. Sekarang dengan bantuan css, kita tidak hanya bisa menjadikan tata letak dengan tabel lebih menarik, namun juga bisa menggunakan divisi sebagai pengganti tabel. Divisi jauh lebih fleksibel dibandingkan tabel karena tidak terikat oleh susunan baris dan kolom.
Tabel
Contoh untuk tabel kita menggunakan external style bernama tabel.css
tabel.css
body {
margin:0px;
}
table {
border:0px;
width:100%;
height:100%;
}
.judul {
font-size:25px;
background-color:#4C8CE7;
font-weight:bold;
color:white;
padding:5px;
border-bottom:1px solid red;
height:30px;
}
.menu {
width:150px;
}
a {
text-decoration:none;
color:#4C8CE7;
}
.isi {
font-style:italic;
border:1px solid red;
}
#kanan {
text-align:right;
color:green;
}
tabel.html
<html>
<head>
<title>MUKABUKU</title>
<link href="tabel.css" rel="stylesheet">
</head>
<body>
<table>
<tr>
<td colspan=2 class=judul>MUKABUKU.COM</td>
</tr>
<tr valign=top>
<td class=menu>
<a href=''>Beranda</a><br>
<a href=''>Profil</a><br>
<a href=''>Teman</a><br>
<a href=''>Permainan</a>
</td>
<td class=isi>
<p>Ini adalah halaman yang menyediakan informasi.</p>
<p id=kanan>Ini adalah halaman yang menyediakan
informasi.</p>
</td>
</tr>
</table>
</body>
</html>
Divisi
Divisi dibuat dengan menggunakan tag div
div1.html
<html>
<head>
<title>Divisi</title>
<style type="text/css">
.div1, .div2, .div3 {
width:150px;
height:150px;
position:absolute;
border:1px solid black;
}
.div1 {
background-color:red;
top:50px;
left:50px;
}
.div2 {
background-color:blue;
top:100px;
left:100px;
}
.div3 {
background-color:green;
top:150px;
left:150px;
}
.div3:hover {
background-color:yellow;
}
</style>
</head>
<body>
<div class=div1></div>
<div class=div2></div>
<div class=div3></div>
</body>
</html>
div2.html
<html>
<head>
<title>Divisi</title>
<style type="text/css">
body {
margin:0;
}
.div1 {
width:100%;
height:50px;
background-color:red;
}
.div2 {
float:left;
width:120px;
}
.div3 {
float:left;
}
</style>
</head>
<body>
<div class=div1>
MUKABUKU.COM
</div>
<div class=div2>
<a href=''>Beranda</a><br>
<a href=''>Profil</a><br>
<a href=''>Teman</a><br>
<a href=''>Permainan</a>
</div>
<div class=div3>
Ini adalah halaman yang menyediakan informasi.
</div>
</body>
</html>
JAVASCRIPT
Apa itu Javascript ?
Javascript merupakan bahasa scripting yang didisain untuk membuat halaman web menjadi lebih interaktif. Javascript bekerja secara client-side (disisi client). Sehingga javascript bergantung pada browser yang digunakan untuk menampilkan halaman web yang mengandung javascript.
Perlu diperhatikan bahwa Javascript berbeda dengan Java. Keduanya sangat berbeda baik itu dari sisi bahasa maupun dari konsep dan disainnya.
index.html
<html>
<head>
<title>Belajar JavaScript</title>
<script language=javascript>
document.write("<h1>Belajar JavaScript</h1>");
</script>
</head>
<body>
</body>
</html>
Penulisan JAVASCRIPT
Aturan penulisan javascript yaitu :
1. Internal Script, dengan menggunakan tag script dan diletakkan diantara tag head.
<html>
<head>
<title>JavaScript</title>
<script languange=”javascript”>
document.write("<h1>Belajar JavaScript</h1>");
</script>
</head>
<body>
2. External Script, tetap dengan menggunakan tag script namun merujuk ke berkas javascript.
<html>
<head>
<title>JavaScript</title>
<script languange=”javascript” src=”script.js”></script>
</head>
<body>
Variabel
Dalam javascript, variabel dideklarasikan dengan statement var dan diakhiri dengan tanda ; (titik koma). Variabel juga bersifat case-sensitive yang artinya membedakan huruf kecil dan huruf besar. Sehingga variabel nama berbeda dengan variabel NAMA.
var.html
<html>
<head>
<title>Belajar JavaScript</title>
<script language=javascript>
var a = 4;
var b = 10;
var c = a + b;
var d = "<br>Bo gambangi da'a ei";
document.write(c);
document.write(d);
</script>
</head>
<body>
</body>
</html>
Kondisi
Kondisi digunakan untuk melakukan eksekusi suatu pernyataan secara bersyarat.
kondisi1.html
<html>
<head>
<title>Belajar JavaScript</title>
<script language=javascript>
var nama = "wirasto";
if (nama == "wirasto") {
document.write("Benar");
}
</script>
</head>
<body>
</body>
</html>
kondisi2.html
<html>
<head>
<title>Belajar JavaScript</title>
<script language=javascript>
var awal = 1;
var akhir = 5;
if (awal < akhir) {
document.write("Nilai awal lebih kecil dari nilai akhir");
} else {
document.write("Nilai awal TIDAK lebih kecil dari nilai
akhir");
}
</script>
</head>
<body>
</body>
</html>
kondisi3.html
<html>
<head>
<title>Belajar JavaScript</title>
<script language=javascript>
var awal = 1;
var akhir = 5;
if (awal < akhir) {
document.write("Nilai awal lebih kecil dari nilai akhir");
} else {
document.write("Nilai awal TIDAK lebih kecil dari nilai
akhir");
}
</script>
</head>
<body>
</body>
</html>
Perulangan
Perulangan digunakan untuk mengeksekusi satu atau beberapa baris pernyataan secara berulang-ulang selama syaratnya terpenuhi.
1. Do...While
dowhile.html
<html>
<head>
<title>Belajar JavaScript</title>
<script language=javascript>
var awal = 1;
var akhir = 5;
var i = awal;
do {
document.write("Cetakan ke " + i + "<br>");
i++;
} while (i <= akhir);
Pemrograman Web – Wirasto S. Karim 31
</script>
</head>
<body>
</body>
</html>
2. While
while.html
<html>
<head>
<title>Belajar JavaScript</title>
<script language=javascript>
var awal = 1;
var akhir = 5;
var i = awal;
while (i <= akhir) {
document.write("Cetakan ke " + i + "<br>");
i++;
}
</script>
</head>
<body>
</body>
</html>
3. For
for.html
<html>
<head>
<title>Belajar JavaScript</title>
<script language=javascript>
var awal = 1;
var akhir = 5;
for (i = awal; i <= akhir; i++) {
document.write("Cetakan ke " + i + "<br>");
}
</script>
</head>
<body>
</body>
</html>
Server Side Scripting
Untuk aplikasi web yang bekerja disisi server (server side), dibutuhkan adanya web server untuk mengirimkan hasil proses berupa halaman web ke client. Dimana halaman web ini dikirim menggunakan protokol http. Web server pulalah yang menerima permintaan dari client. Web server juga berfungsi untuk memetakan lokasi-lokasi berkas aplikasi web dalam komputer server agar bisa diakses oleh client. Termasuk mengatur apa web bisa diakses dari jaringan global atau hanya jaringan tertentu saja yang diijinkan untuk mengaksesnya.
Beberapa aplikasi web server yang populer :
• Apache
• Ngix
• IIS
• lighttpd
Web Programming Language
Bahasa pemrograman web berfungsi untuk menghasilkan halaman web yang dinamis. Dinamis tidak hanya dari sisi tampilan, namun juga informasi yang diambil dari database. Bahasa pemrograman untuk web sering juga disebut sebagai bahasa scripting. Karena berupa kumpulan script yang dijalankan oleh interpreter. Makanya aplikasiaplikasi web yang ada tidak melewati proses kompilasi terlebih dahulu sebelum digunakan. Beberapa bahasa pemrograman web yang populer :
• PHP
• ASP
• Perl
• Python
• Java
Bahasa pemrograman yang telah digunakan untuk membuat web yang akan dipublikasikan, harus diaktifkan dulu dukungannya di sisi web server. Kalau tidak, web server tidak akan bisa mengenali dan menampilkan web yang sudah dibuat.
DBMS (Database Manajemen System)
Database Manajemen System (DBMS) merupakan paket perangkat lunak yang dirancang khusus untuk membuat, memelihara, mengontrol, menyimpan serta memberikan akses secara terkontrol terhadap data.
DBMS biasanya juga menyediakan bahasa tersendiri yang bisa digunakan untuk berinteraksi dengannya. Namun hampir semua dbms populer menyediakan dukungan pula untuk bahasa SQL. Beberapa aplikasi dbms yang populer :
• MySQL
• PostgreSQL
• Microsoft SQL Server
PHP (Hypertext Preprocessor)
PHP merupakan salah satu bahasa pemrograman untuk web yang bekerja disisi server. Hampir semua website dinamis yang bisa diakses lewat internet dibangun dengan menggunakan bahasa ini. Sampai saat ini php merupakan satu-satunya bahasa yang menawarkan kemudahan dalam mengembangkan aplikasi internet, terutama dengan dukungan luar biasa ke berbagai database server.
Dalam hal sintaks, sintaks php sangat mirip dengan sintaks bahasa C. Karena memang bahasa ini beserta ekstensionnya juga dibuat dengan menggunakan bahasa C.
Sehingga bagi para pengguna bahasa tersebut, akan lebih mudah untuk pindah atau mempelajari php.
Keunggulan PHP
- Cepat, karena disisipkan diantara tag html maka waktu proses dan generate halaman web bisa dilakukan dengan singkat
- Gratis, untuk mendapatkan interpreter php cukup dengan mendownloadnya di internet
- Mudah digunakan, sintaks sederhana dan mirip dengan banyak bahasa pemrograman populer
- Serba guna, dapat dijalankan hampir di semua sistem operasi
- Dukungan teknis yang luas
- Aman, selama website didesain dengan benar, pengguna tidak dapat melihat kode php yang dibuat
- Bisa dimodifikasi, dengan lisensi Open Source, programmer dapat memodifikasi kode sumber php untuk disesuaikan dengan kebutuhan
Contoh code :
index.php
<?php
echo “Kita ini kode PHP”;
?>
Ciri-Ciri PHP :
- Ekstensi berkas berupa .php
- Case-sensitive
- Tiap akhir perintah diakhiri dengan tanda ;
- Diawali dengan tanda <?php dan diakhiri dengan tanda ?>
Menjalankan Kode PHP
Untuk bisa menjalankan kode php untuk aplikasi web, dibutuhkan adanya interpreter php yang sudah terinstall dan juga web server. Setiap berkas php yang dibuat harus disimpan dalam document root dari web server yang digunakan. Untuk web server apache dibeberapa distribusi linux, menempatkan document rootnya di /var/www.
Untuk mencoba apakah web server sudah bekerja dengan baik dikomputer yang digunakan adalah dengan menghubungi URL http://localhost atau http://127.0.0.1 lewat web browser.
Variabel
Dalam php, variabel diawali dengan tanda $ (dolar) dan tidak perlu ditentukan tipe datanya terlebih dahulu. Misalnya variabel nama ditulis menjadi $nama. Interpreter php akan mendeteksinya secara otomatis tipe data dari variabel yang dibuat dan akan melakukan konversi tipe data secara otomatis jika dibutuhkan.
var.php
<?php
$a = 4;
$b = 10;
$c = $a + $b;
$d = “Bo gampang ei”;
$e = true;
echo “$c <br>”;
echo “$d <br>”;
echo “$e <br>”;
?>
Operator
Operator Assigment
Misalkan $x=6 dan $y=9
Operator Contoh Sama Dengan Hasil
= $nama = “Wirasto S. Karim” Wirasto S. Karim
+= $x += 4 $x = $x + 4 10
-= $y -= $x $y = $y - $x 3
*= $x *= $y $x = $x * $y 54
.= $y .= $x $y = $y . $x 96
Operator Numerik
Misalkan $x=10
Operator Deskripsi Contoh Hasil
+ Penjumlahan $x = 1 + 2 3
- Pengurangan $x = $x - 1 9
* Perkalian $x = 4 * $x 40
/ Pembagian $x = $x / 2 5
% Modulus $x = $x % 2 0
++ Increment (Naik 1) $x++ 11
-- Decrement (Turun 1) $x-- 9
Operator String
Operator Deskripsi Contoh Hasil
Menggabungkan String $x = “Wirasto” . “Karim” WirastoKarim
Operator Pembanding
Misalkan $x=69
Operator Deskripsi Contoh Hasil
== Sama dengan $x == 69 True
!= Tidak sama dengan $x != 69 False
> Lebih besar $x > 69 False
< Lebih kecil $x < 100 True
>= Lebih besar atau sama dengan $x >= 69 True
<= Lebih kecil atau sama dengan $x <= 69 True
Operator Logika
Misalkan $x=6 dan $y=9
Operator Deskripsi Contoh Hasil
&& Dan (and) ($x < 10 && $y > 1) True
|| Atau (or) ($x == 1 || $y == 9) True
! Bukan (not) !($x == $y) True
Kondisi
Kondisi digunakan untuk melakukan eksekusi suatu pernyataan secara bersyarat. Jika syaratnya terpenuhi barulah pernyataan akan dieksekusi, jika syarat tidak terpenuhi, maka pernyataan tidak akan dieksekusi (dijalankan).
kondisi1.php
<?php
$nama = “wirasto”;
if ($nama == “wirasto”) {
echo “Benar”;
}
?>
kondisi2.php
<?php
$awal = 1;
$akhir = 5;
if ($awal < $akhir) {
echo “Nilai $awal lebih kecil dari nilai $akhir”;
} else {
echo “Nilai $awal TIDAK lebih kecil dari nilai $akhir”;
}
?>
kondisi3.php
<?php
$awal = 1;
$akhir = 5;
if ($awal == 2) {
echo “Nilai $awal adalah 2”;
} else if ($akhir == 5) {
echo “Nilai $akhir adalah 5”;
} else {
echo “Tidak ada yang benar”;
}
?>
Perulangan
Perulangan digunakan untuk mengeksekusi satu atau beberapa baris pernyataan secara berulang-ulang selama syaratnya terpenuhi.
1. Do...While
dowhile.php
<?php
$awal = 1;
$akhir = 5;
$i = $awal;
do {
echo "Cetakan ke $i\n";
$i++;
} while ($i <= $akhir);
?>
2. While
while.php
<?php
$awal = 1;
$akhir = 5;
$i = $awal;
while ($i <= $akhir) {
echo “Cetakan ke $i\n”;
$i++;
}
?>
3. For
for.php
<?php
$awal = 1;
$akhir = 5;
for ($i = $awal; $i <= $akhir; $i++) {
echo “Cetakan ke $i\n”;
}
?>
Array
Array digunakan untuk menampung kelompok data kedalam satu variabel yang sama. Variabel array akan terdiri dari key (kunci) dan value (nilai)
$nama_variabel[kunci] = nilai
array1.php
<?php
$mhs=array();
$mhs[1] = ”Wati”;
$mhs[2] = ”Budi”;
$mhs[5] = ”Iwan”;
echo “$mhs[1]<br>”;
echo “$mhs[2]<br>”;
echo “$mhs[5]<br>”;
?>
Jika kunci tidak disebutkan maka secara otomatis kunci akan dimulai dari 0 dan akan diurutkan.
array2.php
<?php
$mhs=array();
$mhs[] = ”Wati”;
$mhs[] = ”Budi”;
$mhs[] = ”Iwan”;
echo “$mhs[0]<br>”;
echo “$mhs[1]<br>”;
echo “$mhs[2]<br>”;
?>
array3.php
<?php
$mhs=array(“Wati”, “Budi”, “Iwan”);
echo “$mhs[0]<br>”;
echo “$mhs[1]<br>”;
echo “$mhs[2]<br>”;
?>
Function
PHP secara default sudah datang dengan begitu banyak built-in function (fungsi bawaan), seperti fungsi-fungsi untuk pemroses teks, tanggal, matematika, database, berkas, dan masih banyak lagi.
1. strlen, digunakan untuk mendapatkan panjang string
Contoh :
strlen(“Wirasto”); ---> Hasilnya: 7
strlen(“A B C”); ---> Hasilnya: 5
2. substr, digunakan untuk mengambil sebagian string berdasarkan index string. Index adalah nomor posisi huruf dalam string. Index dimulai dari 0 untuk posisi pertama dari string.
Contoh:
substr(“Wirasto”, 2); ---> Hasilnya: rasto
substr(“Wirasto”, 3, 2); ---> Hasilnya: as
Selain fungsi-fungsi yang sudah disediakan, kita juga bisa membuat fungsi sendiri. Ini biasa disebut sebagai UDF (user defined function). Tujuan pembuatan fungsi sendiri adalah untuk mengelompokkan sejumlah pernyataan php, sehingga bisa mempersingkat pengkodean ketika pernyataan digunakan beberapa kali dalam program.
fungsi.php
<?php
function tambah($a, $b)
{
$c = $a + $b;
echo “Hasil Penambahan $a + $b adalah $c<br>”;
}
tambah(2, 3);
tambah(6, 7);
?>
Fungsi buatan sendiri juga dapat dibuat untuk bisa mengembalikan nilai
fungsi2.php
<?php
function tambah($a, $b)
{
$c = $a + $b;
return $c;
}
$hasil=tambah(2, 3);
echo “Hasil Penambahan : $hasil<br>”;
?>
