pemrograman web

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>

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>

</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>

<li>Slackware</li>

<li>Ubuntu</li>

<li>Fedora</li>

</ol>

<li>Slackware</li>

<li>Ubuntu</li>

<li>Fedora</li>

</ol>

<li>Slackware</li>

<li>Ubuntu</li>

<li>Fedora</li>

</ol>

<li>Slackware</li>

<li>Ubuntu</li>

<li>Fedora</li>

</ol>

<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>

<li>Slackware</li>

<li>Ubuntu</li>

<li>Fedora</li>

</ul>

<li>Slackware</li>

<li>Ubuntu</li>

<li>Fedora</li>

</ul>

<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>

<li>Slackware</li>

<li>Ubuntu</li>

<li>Fedora</li>

</ol>

<li>Ubuntu</li>

<li>Slackware</li>

<li>Ubuntu</li>

<li>Fedora</li>

</ol>

<li>Fedora</li>

<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>

<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>

<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>

<tr>

<th width=50>JENKEL</th>

</tr>

<tr>

<td>Wirasto S. Karim</td>

</tr>

<tr>

<td>Abdul Gani</td>

</tr>

<tr>

<td>Ramona</td>

<td>Wanita</td>

</tr>

</table>

</body>

</html>

tabel2.html

<html>

<head>

<title>Pengenalan Tabel</title>

</head>

<body>

<th colspan=3>MAHASISWA</th>

<th colspan=2>NILAI</th>

</tr>

<th width=40>JENKEL</th>

<th>TUGAS</th>

</tr>

<tr>

<td>Wirasto S. Karim</td>

</tr>

<tr>

<td>Abdul Gani</td>

</tr>

<tr>

<td>Ramona</td>

<td>Wanita</td>

</tr>

</table>

</body>

</html>

tabel3.html

<html>

<head>

<title>Pengenalan Tabel</title>

</head>

<body>

</tr>

<tr>

<td valign=top>Wirasto S. Karim</td>

<tr>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<td>Abdul Gani</td>

</td>

</tr>

<tr>

<td>Ramona</td>

<td>

<ol>

<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>

<tr>

<td colspan=2 bgcolor=blue><h1>MUKABUKU.COM</h1></td>

</tr>

<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>

<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>

</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>

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>

<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>

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>

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>

</head>

<body>

<table>

<tr>

<td colspan=2 class=judul>MUKABUKU.COM</td>

</tr>

<a href=''>Beranda</a><br>

<a href=''>Profil</a><br>

<a href=''>Teman</a><br>

<a href=''>Permainan</a>

</td>

<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>

.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>

</body>

</html>

div2.html

<html>

<head>

<title>Divisi</title>

body {

margin:0;

}

.div1 {

width:100%;

height:50px;

background-color:red;

}

.div2 {

float:left;

width:120px;

}

.div3 {

float:left;

}

</style>

</head>

<body>

MUKABUKU.COM

</div>

<a href=''>Beranda</a><br>

<a href=''>Profil</a><br>

<a href=''>Teman</a><br>

<a href=''>Permainan</a>

</div>

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>

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>

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>

</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>

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>

var nama = "wirasto";

if (nama == "wirasto") {

document.write("Benar");

}

</script>

</head>

<body>

</body>

</html>

kondisi2.html

<html>

<head>

<title>Belajar JavaScript</title>

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>

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>

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>

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>

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>”;

Risma's Little Journal

Laman

pemrograman web

Saturday 14 September 2013

Sejarah Pemrograman Web

World Wide Web (WWW)

HyperText Transfer Protocol (HTTP)

Uniform Resource Locator (URL)

Domain Name System (DNS)

Jenis-jenis Web

Hyper Text Markup Language (HTML)

Cascading Style Sheet (CSS)

JAVASCRIPT

Server Side Scripting

Web Programming Language

DBMS (Database Manajemen System)

**PHP (Hypertext Preprocessor)**

0 comments:

Post a Comment

read these, have you ?

a little thing about me

read more about..

histories

followers