PEMROGRAMAN WEB

BAB I

PENDAHULUAN

1.1.Latar Belakang

Pemrograman web diambil dari dua suku kata yaitu pemrograman dan web. Pemrograman diartikan proses, cara, perbuatan program. Definisi Web : jaringan komputer yang terdiri dari kumpulan situs internet yang menawarkan teks dan grafik dan suara dan sumber daya animasi melalui protokol transfer hypertext. WWW (world wide web) adalah layanan internet yang paling populer saat ini internet mulai dikenal dan digunakan secara luas .WWW adalah halaman-halaman website yang dapat saling terkoneksi satu dengan lainnya atau hyperlink yang berisi berbagai informasi. WWW berjalan dengan protokol HyperText Transfer Protokol (HTTP). Halaman Web merupakan file teks murni yang berisi sintaks-sintaks HTML yang dapat diterjemahkan dengan Internet Browser . Sintaks HTML mampu memuat konten text, gambar, audio, video dan animasi. Kini internet identik dengan web, karena kepopuleran web sebagai standar interface pada lanyanan-layanan yang ada di internet, dari awalnya sebagai penyedia informasi, ini digunakan juga untuk komunikasi dari email sampai dengan chatting, sampai dengan melakukan transaksi bisnis.

HTTP (HyperTextTransfer Protocol) adalah protokol yang dipergunakan untuk mentransfer dokumen dalam www. Protokol ini adalah protokol ringan, tidak berstatus dan generik yang dapat dipergunakan berbagai macam tipe dokumen. Pengembangan HTTP dikoordinasi oleh Konsorsium World Wide Web(W3C) dan grup bekerja Internet Engineering Task Force(IETF), bekerja dalam publikasi satu seri RFC, yang paling terkenal RFC 2616, yang menjelaskan HTTP/1,1, versti HTTP yang digunakan umum sekarang ini. HTTP adalah sebuah protokol meminta/menjawab antara clientdan server. Sebuh client HTTP seperti web browser, biasanya memulai permintaan dengan membuat hubungan TCP/IPke porttertentu di tuan rumah yang jauh (biasanya port 80). Protokol HTTP pertama kali dipergunakan dalam WWW pada tahun 1990. Pada saat tersebut yang dipakai adalah protokol HTTP versi 0.9. Versi 0.9 ini adalah protokol transfer dokumen secara mentah, maksudnya adalah data dokumen dikirim sesuai dengan isi dari dokumen tersebut tanpa memandang tipe dari dokumen. Kemudian pada tahun 1996 protokol HTTP diperbaiki menjadi HTTP versi 1.0. Perubahan ini untuk mengakomodasi tipe-tipe dokumen yang hendak dikirim beserta enkoding yang dipergunakan dalam pengiriman data dokumen. Sesuai dengan perkembangan infrastruktur internet maka pada tahun 1999 dikeluarkan HTTP versi 1.1 untuk mengakomodasi proxy, cache dan koneksi yang persisten.

Web adalah suatu ruang informasi di mana sumber-sumber daya yang berguna diidentifikasi oleh pengenal global yang disebut Uniform Resource Identifier (URI). Secara umum, Web 1.0 dikembangkan untuk pengaksesan informasi dan memiliki sifat yang sedikit interaktif.Secara garis besar, sifat Web 1.0 adalah Read.

Istilah Web 2.0 pertama kalinya diperkenalkan oleh O’Reilly Media pada tahun 2004 sebagai teknologi Web generasi kedua yang mengedepankan kolaborasi dan sharing informasi secara online. Menurut Tim O’Reilly, Web 2.0 dapat didefinisikan sebagai berikut: “Web 2.0 adalah revolusi bisnis di industri komputer yang disebabkan oleh penggunaan internet sebagai platform, dan merupakan suatu percobaan untuk memahami berbagai aturan untuk mencapai keberhasilan pada platform baru tersebut. Salah satu aturan terutama adalah: Membangun aplikasi yang mengeksploitasi efek jaringan untuk mendapatkan lebih banyak lagi pengguna aplikasi tersebut” Berbagai layanan berbasis web seperti jejaring sosial, wiki dan folksonomies merupakan teknologi Web 2.0 yang menambah interaktifitas di antara para pengguna Web.

Web 3.0 / Semantic Web. Walaupun masih dalam perdebatan di kalangan analis dan peneliti, istilah Web 3.0 tetap berpotensi menjadi generasi teknologi di dunia Internet. Saat ini, definisi untuk Web 3.0 sangat beragam mulai dari pengaksesan broadband secara mobile sampai kepada layanan Web berisikan perangkat lunak bersifat on-demand. Namun, menurut John Markoff, Web 3.0 adalah sekumpulan teknologi yang menawarkan cara baru yang efisien dalam membantu komputer mengorganisasi dan menarik kesimpulan dari data online.

1.2.Rumusan Masalah

1. Bagaimana rumusan-rumusan yang berkaitan dengan Pemrograman Web?

2. Apa sajakah bahasa yang di gunakan dalam Pemrograman Web?

1.3.Tujuan dan Manfaat

Tujuan :

1. Untuk mengetahui lebih mendalam mengenai pemrograman web.

2. Untuk mengetahui apasajakah bahasa yang di gunakan untuk membangun halaman web.

Manfaat :

Kami dapat menambah ilmu pengetahuan kami mengenai pemrograman web, bahasa yang di gunakan dalam pemrograman, dan perbedaan dari setiap bahasa pemrograman.

BAB II

PEMBAHASAN

2.1. HTML

2.1.1. Pengertian HTML

HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan kedalam format ASCII normal sehingga menjadi home page dengan perintah-perintah HTML. HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).

HTML berupa kode-kode tag yang menginstruksikan penjelajah web untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan penjelajah web seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka surel ataupun dari PDA dan perangkat lunak lain yang memiliki kemampuan browser. Dengan menggunakan perintah-perintah HTML memungkinkan pengguna untuk melakukan tugas-tugas berikut:

1. Menentukan ukuran dan alur tulisan.

Mengintegerasikan gambar dengan tulisan.
Membuat Pranala.
Mengintegerasikan berkas suara dan rekaman gambar hidup.
Membuat form interaktif.

HTML berupa kode-kode yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan web browser seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser.

a. Hypertext

Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.

b. Markup

Markup menunjukkan bahwa pada file HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada Word Wide Web.

c. Language

Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen. Pada awalnya HTML dikembangkan sebagai subset SGML (Standard Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana daripada SGML yang lebih pada format dokumen yang berorientasi pada aplikasi.

2.1.2 Fungsi HTML

Hypertext Markup Language merupakan standar bahasa yang di gunakan untuk menampilkan dokumen web, yang bisa dilakukan dengan HTML yaitu:
- Menentukan format suatu teks
- Membuat list tentang sekelompok hal
- Membuat link ke dokumen lain atau bagian lain dari dokumen yang sama.
- Menyisipkan citra atau gambar.
- Menampilkan informasi dalam bentuk tabel

- Mengontrol tampilan dari web page dan contentnya.

- Mempublikasikan dokumen secara online sehingga bisa di akses dari seluruh dunia.

- Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online.

- Menambahkan object-object seperti image, audi, video dan juga java applet dalam dokumen HTML.

2.1.3. Struktur HTML

1.Elemen
Elemen terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Contonya untuk menampilkan judul dokumen HTML pada web browser digunakan element title, dimana: <title> ini adalah tag pembuka judul dokumen HTML

2. Tag

Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh <body> adalah tag dengan nama body. Tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah karakter "<"), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML. Yang merupakan tag-tag dasar dalam HTML adalah:

a. <HTML> </HTML>

Tag <HTML> dan </HTML> digunakan untuk menandai awal dan akhir dari suatu file HTML.

b. <TITLE> </TITLE>

Tulisan yang berada diantara tag <TITLE> dan </TITLE> akan ditampilkan oleh browser pada bagian title yang mana merupakan title dari jendela browser.

c. <HEAD> </HEAD>

Berisi keterangan informasi, seperti title dan jenis dokumen, ditulis diantara HEAD tags.

d. <BODY> </BODY>

Bagian tag BODY menandai awal dan akhir dari badan dokumen HTML. Tag ini memiliki sejumlah attribut dapat ditentukan.

Contoh:

<HTML>

<HEAD>

<TITLE>Nama saya Taufik Ari Arnandan</TITLE>

</HEAD>

Hello World

</BODY>

</HTML>

2.1.4. Pengaturan Halaman HTML

Menformat Tulisan Pada halaman HTML

Untuk membuat halaman web yang rapi dan menarik, tentu saja perlu melakukan pemformatan tulisan-tulisan, baik tata cara pencetakannya, serta jenis tulisan yang dipergunakan.

Tag – tag untuk memformat tulisan:

Tag	Keterangan
<B> </B>	Membuat cetak tebal pada tulisan yang berada diantaranya.
<BLINK> </BLINK>	Menyebabkan tulisan berada diantaranya berkedip-kedip.
<FONT SIZE = #> </FONT>	Menentukan ukuran font (#) yang digunakan untuk menampilkan HTML dalam tags. Default is 3; ukurannya dari 1 sampai 7.
<H#> </H#>	Tag yang menentukan tingkat heading dengan nilai antara 1 dan 6, dengan sebagai ukuran paling besar dan 6 paling kecil
<I> </I>	Text diantaranya ditampilkan dengan cetak miring.
<PRE> </PRE>	Preformatted text adalah menampilkan tulisan tanpa format yang khusus. Tag ini bagus digunakan bila ana ingin menangani spasi antar baris; dan juga memudahkan anda untuk meletakan tab dalam dokumen.
<MARQUEE> </MARQUEE>	(hanya pada Microsoft Internet Explorer 2.0/3.0). Tag ini menyebabkan tulisan yang berada diantaranya Atribut untuk tulisan MARQUEE :
ALIGN	Menentukan bahwa tulisan dalam marquee harus dirapikan di TOP, MIDDLE atau BOTTOM darimarquee tersebut
SCROLL	Defaultnya, dari sisi yang satu ke yang lain pada layar secara berulang.
SLIDE	Gulung text melintasi layar, dan
BGCOLOR	Yang ini menentukan dari marquee
DIRECTION	Menentukan arah ke
HEIGHT	Menentukan tinggi marquee dalam pixel (HEIGHT = n) atau presentasi dari layar (HEIGHT= n%).
WIDTH	Sama dengan atribut HEIGHT, tetapi diaplikasikan untuk lebar marquee.
<STRONG> </STRONG>	Cara lain menggambarkan attention pada suatu bagian dari text; <STRONG> biasanya ditampilkan dengan cetak tebal oleh browser.
<U> </U>	Tulisan diantaranya ditampilkan dengan garis bawah.

2.1.5. Mengatur Pemerataan Tulisan

Pemerataan tulisan sangat mempengaruhi tampilan dari halaman web anda, ada kalanya tulisan tertentu perlu ditampilkan pada tengah halaman, atau pun justified. Tag-tag HTML yang mengatur pemerataan tulisan pada satu halaman:

a. <CENTER> </CENTER>

Tag ini akan menampilkan tulisan/gambar ditengah baris.

b. <P ALIGN=LEFT|CENTER|RIGHT> </P>

Tag paragraf digunakan untuk memulai suatu paragraf baru disertai dengan pemerataan teks ke kiri, tengah, atau kanan dari tampilan browser untuk paragraf bersangkutan. Suatu paragraf dapat terdiri dari teks, gambar, hyperlink, dan element HTML lainnya.

c. <H# ALIGN=LEFT|CENTER|RIGHT> </H#>

Ini akan merapikan tulisan ke kiri, tengah atau kanan dari tulisan yang diberi tingkat heading

2.1.5. Membuat Unordered List

Agar dokumen kita mudah dibaca dan jelas, ada bagian tertentu yang perlu ditampilkan dalam list. List yang paling sederhana di HTML adalah unordered, atau bulleted list. Hal ini sesuai untuk daftar item yang tidak memiliki hirarki atau urutan yang penting.

a. <UL> </UL>

Digunakan untuk mengawali dan mengakhiri suatu Unordered List.

b. <LH> </LH>

Digunakan untuk membuat suatu heading untuk list tersebut.

c. <LI> </LI>

Digunakan untuk membuat masing-masing item list tersebut.

2.1.6. Table dan Pengaturannya

Tabel adalah cara yang baik untuk menampilkan informasi secara logik yang biasanya ditampilkan dalam bentuk spreadsheet. Tabel juga digunakan untuk menampilkan record-record pada database.

1. <TABLE> </TABLE>

Berikut ini adalah atribut dari TABLE tag dan efeknya pada tabel.

a. BORDER

Atribut BORDER menentukan tebal dari border sewaktu ditampilkan oleh browser. Cobalah dengan browser anda untuk mendapatkan setting yang optimal.

b. CELLSPACING

Atribut CELLSPACING mementukan jumlah spasi yang browser tempatkan diantara tiap-tiap sel individual atau spasi antar sel dan border (jika sel berada di sisi dari tabel). Sekali lagi, hanya dengan percobaan yang akan menghasilkan nilai yang sesuai.

c. CELLPADDING

Atribut CELLPADDING menentukan jumlah spasi yang browser tempatkan antara data dalam cell dan border sel.. Dalam tag tabel, ada tiga tag yang mendefinisikan header, row, dan cels. Tag-tag tersebut adalah table header <TH>, table row <TR>, dan table data <TD>.

d. WIDTH

Atribut WIDTH dapat diset dengan angka (ukuran dalam pixel), atau sebagai suatu persentase lebar tampilan browser. Browser dapat menarik tabel, tetapi tidak dapat mengkompres jika ukuran jendela browser lebih kecil dari tabel.

e. ALIGN

Dengan ALIGN, anda dapat menentukan pemerataan tabel di left, center, atau right dari halaman.

f. BGCOLOR

Sebagaimana pada tag <BODY> , anda dapat menentukan warna latar belakang dari tabel dengan menggunakan attribut BGCOLOR, anda dapat menggunakan definisi warna #rrggbb atau nama warna pada Internet Explorer, (sebagai contoh, <TABLE BGCOLOR = RED).

g. <TR> </TR>

Elemen table row menandai awal dari tiap baris pada tabel. Atribut yang sah dari tabel row adalah ALIGN, VALIGN, BGCOLOR, BGCOLORDARK, dan BGCOLORLIGHT.

h. TH> </TH>

Elemen table header berfungsi sama seperti elemen table data <TD>, tetapi elemen table header ditampilkan dalam suatu font cetak tebal. Artibut yang sah untuk elemen table header adalah ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, BGCOLOR, BGCOLORDARK, dan BGCOLORLIGHT.

BGCOLORLIGHT

i. <TD> </TD>

Elemen table data menandai awal dan akhir dari tiap sel didalam tabel.

Atribut yang sah untuk elemen table data :

a. COLSPAN

Atribut ini menentukan jumlah kolom yang akan ditarik oleh sel; sebagai contoh, jika COLSPAN di set ke 2, yang mana sel dengan span dua kolom normal dalam tabel

b. ROWSPAN

Atribut ini menentukan jumlah baris yang akan ditarik oleh sel; sebagai contoh, jika ROWSPAN di set ke 2, yang mana sel dengan span dua baris normal dalam tabel.

2.2. CSS

2.2.1. Sejarah CSS

CSS 1

Pada tanggal 17 Agustus 1996 World Wide Web Consortium (W3C) menetapkan CSS sebagai bahasa pemrograman standard dalam pembuatan web. Tujuannya adalah untuk mengurangi pembuatan tag-tag baru oleh Netscape dan Internet Explorer, karena kedua browser tersebut sedang bersaing mengembangkan tag sendiri untuk mengatur tampilan web.

CSS 1 mendukung pengaturan tampilan dalam hal :

1. Font (Jenis ketebalan).

2. Warna, teks, background dan elemen lainnya.

3. Text attributes, misalnya spasi antar baris, kata dan huruf.

4. Posisi teks, gambar, table dan elemen lainnya.

5. Margin, border dan padiing.

CSS 2

Pada tahun 1998, W3C menyempurnakan CSS tahap awal dengan menciptakan standard CSS 2 yang menjadi standard hingga saat ini. Pada level CSS 2 ini, dimasukkan semua atribut dari CSS 1 dan diperluas dengan penekanan pada International Accessibiality and Capacibilty kususnya media-specific CSS. CSS 2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer.

CSS 3

CSS 3adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam mendesain website. CSS 3 dapat melakukan animasi pada halaman website, diantaranya animasi warna dan animasi 3D. Dengan CSS 3 desaigner dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS 3 yaitu : Multiple background, border-radius, drop-shadow, border-image, CSS-Math dan CSS Object Model.

Fitur terbaru CSS 3 :

1. Animasi, sehingga pembuatan animasi tidak memerlukan program sejenis Adobe Flash dan Microsoft Silverlight.

2. Beberapa efek teks, seperti teks berbayang, kolom koran dan "Word-Wrap".

3. Beberapa efek pada kotak, seperti kotak yang ukurannya dapat diubah-ubah, transformasi 2 dimensi dan 2 dimensi, sudut-sudut yang tumpul dan bayangan.

2.2.2. Pengertian CSS

CSS adalah singkatan dari Cascading Style Sheet yang merupakan kumpulan perintah yang dibentuk dari berbagai sumber yang disusun menurut urutan tertentu sehingga mampu mengatasi konflik style. CSS yaitu salah satu bahasa pemrograman web yang mengatur komponen dalam suatu web supaya web lebih terstruktur dan lebih seragam. CSS seperti halnya styles pada aplikasi pengolahan kata Microsoft Word yang dapat mengatur beberapa style, misalnya subbab, heading, bodytext, footer, images dan style lainnya untuk dapat dipakai bersama-sama dalam beberapa file. CSS biasanya digunakan untuk memformat tampilan web yang dibuat dengan bahasa HTML dan XHTML. CSS mampu mengatur warna body teks, ukuran gambar, ukuran border, warna mouse over, warna tabel, warna hyperlink, margin, spasi paragraph, spasi teks dan parameter lainnya. Dengan adanya CSS memungkinkan menampilkan halaman yang sama dengan format yang berbeda.

2.2.3. Penulisan CSS

Ada 3 cara memasukkan style CSS yang kita buat pada sebuah dokumen HTML.

1. External Style Sheet.

2. Internal Style Sheet.

3. Inline Style.

1. External Style Sheet.

Sebuah External Style Sheet sangat cocok digunakan untuk banyak dokumen / Halaman HTMl yang kita buat. Dengan External Style Sheet anda dapat merubah seluruh halaman web dengan hanya hanya mengubah satu file saja. Setiap halaman yang diubah harus link dengan Style Sheet menggunakan tag <link>. Tag <link> diantara <head>...</head>.

Sebuah external style sheet dapat ditulis dalam teks editor apapun. File tidak boleh mengandung tag html. Style Sheet harus disimpan dengan ekstensi ".css". Contoh dari sebuah file style sheet adalah sebagai berikut.

hr{color:sienna;}
p{margin-left:20px;}
body {background-image:url("images/web11.gif");}

2. Internal Style Sheet.

Sebuah Internal Style Sheet digunakan hanya pada dokumen tunggal HTML. Anda mendefinisikan Internal Style Sheet diantara <head>...</head> dengan menggunakan tag <style>, seperti contoh dibawah ini.

<head>
<style>
hr{color:sienna;}
p{margin-left:20px;}
body{background-image:url("images/web11.gif");}
</style>
</head>

3. Inline Style

Inline Style memiliki banyak kekurangan dibandingakan Style Sheet yang lainnya. Untuk menggunakan Inline style anda harus menggunakan atribut style pada tag yang relevan. Style atribut dapat berisi properti CSS. Contoh dibawah ini menunjukkan bagaimana intuk mengubah wana dan margin kiri paragraph.

<p style="color:sienna; margin-left:20px;"> Ini adalah sebuah paragraph </p>

2.2.4. CSS Selector Id & Class

CSS selain berfungsi untuk menetapkan Style pada elemen HTML, CSS juga memungkinkan kita untuk menentukan penyeleksian sendiri. Penyeleksian tersebut berupa "Id" & "Class".

Id Selector

Id selector digunakan untuk menentukan style sebuah elemen unik tunggal. Id menggunakan atribut Id pada elemen HTML, Id didefinisikan dengan tanda "#". Aturan style yang diterapkan pada contoh dibawah ini diterapkan ke sebuah elemen dengan Id="web11".

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
#web11
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="web11">Hallo Dunia!!</p>
<p>Paragraph ini tidak terpengaruh pada style yang dibuat</p>
</body>
</html>

Class Selector

Class selector digunakan untuk menentukan style beberapa elemen. Berbeda dengan id selector, Class selector lebih sering digunakan untuk menentukan style dari beberapa elemen. Hal ini memungkinkan kita untuk menetapkan style tertentu dari banyak elemen dengan class yang sama. Class selector menggunakan atribut class HTML, dan didefinisikan dengan ".". Pada contoh dibawah ini, semua elemen class="center" akan berada pada posisi tengah.
Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Posisi Tengah Sebuah Judul</h1>
<p class="center">Posisi Tengah Sebuah Paragraph</p>
</body>
</html>

Kita juga dapat menentukan sendiri elemen HTML khusus yang dipengaruhi oleh Class. Dalam contoh dibawah ini elemen HTML "p" diberi nilai class="center".
Contoh :

<!DOCTYPEhtml>
<html>
<head>
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Judul ini tidak berpengaruh pada class yang diberikan.</h1>
<p class="center">Paragraph ini berpengaruh pada class yang diberikan.</p>
</body>
</html>

Sintaks CSS

CSS terdiri dari 2 elemen utama yaitu selector dan deklarasi ( Deklarasi bisa lebih dari satu ).

h1 { color : blue; font-size: 12px;}

h1 => Selector

color : blue; => Deklarasi 1

font : size; => Deklarasi 2

Selector biasanya berupa elemen HTML.

Setiap deklarasi terdiri dari properti dan nilai.

Properti adalahh atribute style yang ingin kita ubah, setiap properti memiliki nilai.

2.3 JAVA SCRIPT

Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu dokumen HTML, sepanjang sejarah internet bahasa ini adalah bahasa skrip pertama untuk web. Bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di sisi browser bukan di sisi server web.

Javascript bergantung kepada browser(navigator) yang memanggil halaman web yang berisi skrip skrip dari Javascript dan tentu saja terselip di dalam dokumen HTML. Javascript juga tidak memerlukan kompilator atau penterjemah khusus untuk menjalankannya (pada kenyataannya kompilator Javascript sendiri sudah termasuk di dalam browser tersebut). Lain halnya dengan bahasa “Java” (dengan mana JavaScript selalu di banding bandingkan) yang memerlukan kompilator khusus untuk menterjemahkannya di sisi user/klien.

2.3.1. Keperluan Java Script

Untuk mempelajari pemrograman Java Script, ada dua piranti yang diperlukan, yaitu :

1. Teks Editor

Digunakan untuk menuliskan kode-kode Java Script, teks editor yang dapat digunakan antara lain notepad dan ultra edit.

2. Web Browser

Digunakan untuk menampilkan halaman web yang mengandung kode-kode Java Script. Web browser yang digunakan harus mendukung Java Srcipt. Browser yang dapat digunakan adalah internet explorer dan Netscape Navigator.

2.3.2. Penulisan Java Script

Kode Java Script dituliskan pada file HTML.Terdapat dua cara untuk menuliskan kode-kode Java Script agar dapat ditampilkan pada halaman HTML, yaitu :

a) Java script ditulis pada file yang sama

Untuk penulisan dengan cara ini, perintah yang digunakan adalah

<SCRIPT LANGUANGE =”JavaScript” >program java script disini</SCRIPT>. Perintah tersebut biasanya diletakkan diantara Tag <BODY>…</BODY>

Contoh Penulisan :

<HTML>

</HEAD>

<BODY>

kode javascript disini

</SCRIPT>

kode HTML disini

</BODY>

</HTML>

b) Javascript ditulis pada file terpisah

Kode Javascript bisa juga kita buat dalam file terpisah dengan tujuan agar dokumen HTML isinya tidak terlalu panjang. Atribut yang digunakan adalah

<SCRIPT SRC=”namafile.js”>…</SCRIPT>

Diantara tag <SCRIPT………> dan <SCRIPT> tidak diperlukan lagi kode Javascriptnya karena sudah dibuat dalam file erpisah. File yang mengandung kode Javascript berekstensi .js

2.3.3. Program Pertama Javascript

Pada bagian ini kita akan membuat program dengan menggunakan Javascript.

Program ini akan menampilkan teks “ Belajar Pemrograman Javascript

<HTML>

<BODY>

<!--

document.write("Belajar Pemrograman Javascript!");

//-->

</SCRIPT>

</BODY>

</HTML>

<HTML>

<HEAD><TITLE>BElajar Javascript Yuuuuuu</TITLE>

</HEAD>

<!--

document.writeln("<PRE>");

document.write("<B><FONT SIZE=5>");

document.writeln("SELAMAT DATANG DI JAVASCRIPT");

document.write("</B></FONT>");

document.write("<I>");

document.writeln("Program ini merupakan contoh sederhana menampilkan Teks!");

document.write("</I>");

document.writeln("Dengan Javascript!!!!!!!!");

//-->

</SCRIPT>

</BODY>

</HTML>

Objek document mempunyai dua metode untuk menuliskan teks, yaitu write dan writeln. Metode write digunakan untuk menuliskan teks tanpa ganti baris, sedangkan metode writeln digunakan untuk menuliskan teks dengan ganti baris.

Berikut diberikan contoh Program Javascript yang diletakkan di file lain dan dipanggil melalui suatu file HTML

File isi.js

document.writeln("<CENTER>");

document.writeln("<HR WIDTH=600 COLOR=Black>");

document.writeln("<H1>UNIVERSITAS KOMPUTER INDONESIA</H1>");

document.writeln("<H2>FAKULTAS TEKNIK dan ILMU KOMPUTER<H2>");

document.writeln("<H3>JURUSAN TEKNIK INFORMATIKA<H3>");

document.writeln("<HR WIDTH=600 COLOR=Black>");

document.writeln("</CENTER>");

File HTML

<HTML>

<BODY>

<B>Contoh ini menggunakan Javascript yang diambil dari File lain..</B>

<P>

</BODY>

</HTML>

2.3.4. Objek Untuk memasukkan Data

Terdapat beberapa objek yang dapat digunakan untuk memeasukkan data. Objek-objek tersebut biasanya terdapat dalam suatu form. Adapun objek-objek tersebut meliputi Objek Text, Objek Radio, Objek Checkbox, Objek Textarea, dan Objek Select.

Objek Text

Untuk menginputkan data kita dapat menggunakan komponen/objek text. Contoh penggunaannya dapat kita lihat pada contoh berikut :

Contoh Program JavaScript

<html>

<head><title>Latihan Dengan Objek Text</title></head>

<body>

<!--

function tekan()

{

var namastr = (document.fform.nama.value);

var alamatstr = (document.fform.alamat.value);

document.fform.onama.value = namastr;

document.fform.oalamat.value = alamatstr;

}

//-->

</script>

<H1> Memasukkan Data Dengan Objek Teks</H1><hr>

<PRE>

Nama Anda : <input type="text" size="11" name="nama">

Alamat : <input type="text" size="25" name="alamat">

</PRE>

<BR>

<H3>Output</H3>

<PRE>

Jadi Nama Anda adalah :<input type="text" size="11" name="onama">

Alamat Anda di :<input type="text" size="25" name="oalamat">

</form>

</body>

</html>

Objek Radio

Objek radio adalah komponen yang digunakan untuk melakukan suatu pemilihan data. Karena selalu berupa Array , untuk mengakses satu tombol radio digunakan radio[indeks]. Disamping itu objek radio juga mempunyai nili True jika dipilih dan False jika tidak. Untuk memilih suatu objek radio menggunakan properti Checked.

Contoh Program JavaScript
<html> <head><title>Latihan Dengan Objek Radio</title></head> <body> <script languange ="JavaScript"> <!-- function radio_box(form) { var ket = ""; if (form.wanita.checked == true) { ket = "Wanita"; } else { ket = "Pria"; } alert('Anda adalah seorang ' +ket); } //--> </script> <form> <H1> Memasukkan Data Dengan Objek Radio</H1><hr> <p><input type="radio" value="wanita" name="wanita">Wanita</p> <hr> <p><input type="button" value="CONFIRM" onclick="radio_box(this.form)"> <input type="reset" value="RESET"></p> </form> </body> </html

Objek Checkbox

Objek checkbox menyimpan informasi tentang elemen form yang berupa kotak cek. Penggunaannya hampir sama seperti objek radio.

Contoh Program JavaScript

<html>

<head><title>Latihan Dengan Objek Checkbox</title></head>

<body>

<!--

function radio_box(form)

{

var ket = "";

var ket1 ="";

if (form.bola.checked == true)

{

ket = "Nonton Bola";

}

if (form.tv.checked == true)

{

ket1 = " Nonton Tv";

}

alert('Hobby anda ' +ket+''+ket1);

}

//-->

</script>

<form>

<H1> Memasukkan Data Dengan Objek Checkbox</H1><hr>

<p>Hobby anda :

<input type="checkbox" value="ON" name="bola">Nonton Sepak Bola

<input type="checkbox" value="ON" name="tv">Nonton televisi</p>

<hr>

</form>

</body>

</html>

Objek TextArea

Objek textarea menyimpan informasi tentang elemen form yang berupa kotak teks dengan banyak baris.

Contoh Program JavaScript
<html> <head><title>Latihan Dengan Objek TextArea</title></head> <body> <script languange ="JavaScript"> <!-- function tekan() { var ketstr = (document.fform.Ket.value); document.fform.Oket.value = ketstr; } //--> </script> <form name ="fform"> <H1> Memasukkan Data Dengan Objek TextArea</H1><hr> <h3>Keterangan :<h3><br> <textarea name="Ket" rows="3" cols="30"></textarea> <BR><BR> <input type="button" value="kirim" onclick="tekan()"> <input type="reset" value="ulang"> <H3>Output Keterangan :</H3> <textarea name="Oket" rows="3" cols="30"></textarea> </form> </body> </html>

Objek Select

Objek Select menyimpan informasi tentang elemen form yang berupa kotak daftar. Objek select berguna apabila di dalam form terdapat banyak pilihan yang telas mempunyai nilai tertentu.

Contoh Program JavaScript

<html>

<head><title>Latihan Dengan Objek Select</title></head>

<body>

<!--

function tekan()

{

var jurusanstr = (document.fform.Jurusan.value);

document.fform.Ojurusan.value = jurusanstr;

}

//-->

</script>

<H1> Penggunaan Objek Select</H1><hr>

<h3>Masukan :<h3>

Jurusan Di UNIKOM :<select name="Jurusan" Size="1">

<option value ="Teknik Informatika"> Teknik Informatika </option>

<option value ="Manajemen Informatika"> Manajemen Informatika </option>

<option value ="Teknik Komputer"> Teknik Komputer </option>

<option value ="Teknik Industri"> Teknik Industri </option>

<option value ="Teknik Elektro"> Teknik Elektro </option>

<option value ="Teknik Sipil"> Teknik Sipil </option>

<option value ="Teknik Arsitektur"> Teknik Arsitektur </option>

<option value ="Teknik Perencanaan Wil. Kota "> Perencanaan Wil. Kota </option>

</select>

<H3>Output jurusan :</H3>

</form>

</body>

</html>

2.4. JQUERY

2.4.1. Pengertian jQuery

JQuery adalah javascript library, jQuery mempunyai semboyan “write less, domore”. jQuery dirancang untuk memperingkas kode-kode javascript. JQuery adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interakasi ajax. JQuery dirancang untuk mengubah cara anda menulis javascript. Sebelum anda memulai mempelajari jQuery, anda harusmempunyai pengetahuan dasar mengenai HTML, CSS dan Javascript.

Library jQuery mempunyai kemampuan :

1. Kemudahan mengakses elemen-elemen HTML

2. Memanipulasi elemen HTML

3. Memanipulasi CSS

4. Penanganan event HTML

5. Efek-efek javascript dan animasi

6. Modifikasi HTML DOM

7. AJAX

8. Menyederhanakan kode javascript lainnya

Kemudian untuk memulai mempelajari jQuery, anda harus mendownload jquery.js dari situs http://www.jquery.com. Setiap anda menulis kode javascript dengan menggunakan jquery, jangan lupa untuk memasukan file jquery.jskedalam kode javascript anda.

Contoh sederhana pemograman dengan menggunakan jquery.

Kode 12. hello world jquery

$(document).ready(function(){

$(".tombol1").click(function(){

$("p").hide(1000); });

$(".tombol2").click(function(){

$("p").show(1000);});});

</script> </head><body>

<p>Hello World!</p>

<button class="tombol1">Sembunyikan</button>

<button class="tombol2">Tampilkan</button>

</body> </html>

2.4.2. Sintaks jQuery

Sintaks jquery biasanya dibuat untuk memilih elemen-elemen HTML dan melakukan aksi terhadap elemen yang dipilih.

Sintaks :

$(selector).action()

1. Tanda dollar, untuk mendefinisikan jQuery

2. (selector), untuk menunjukkan elemen yang dipilih atau dituju

3. action(), adalah jQuery action yang akan dilakukan terhadap elemen yang dipilih.

Contoh :

$(this).hide()– menyembunyikan elemen saat ini

$("p").hide()– menyembunyikan semua paragraf atau konten dari tag <p>

$(".test").hide()– menyembunyikan elemen yang mempunya class="test"

$("#test").show()– menampilkan elemen yang mempunyai id="test"

Karena hampir segala sesuatu yang kita lakukan bilamenggunakan jQuery membaca atau memanipulasi document object model (DOM), kita perlu memastikan bahwa kita mulai menambahkan event segera setelah DOM siap. Untuk melakukan hal ini, kita menambahkan kode ready event untuk dokumen.

$(document).ready(function(){ //kode anda di sini});

Kode di atas berarti kita ingin kode dijalankan apabila halaman HTML telah di-load semuanya. Atau dengan kode javascript biasanya seperti ini :

window.onload = function(){ //kode anda di sini }

contoh Kode 12.

$(".tombol1").click(function(){

$("p").hide(1000); });

Kode $(".tombol1") adalah jQuery selektor. Di mana kita memilih elemenyang mempunyai class=”tombol1” untuk kita lakukan sesuatu. $sendiri adalah alias untuk jQuery class. Oleh karena $()untuk membuat objek jQuery. Tambahkan fungsi click(). Ini berguna untuk memberikan event onclick untuk elemen yang kita pilih tadi (dalam hal ini adalah elemen yang mempunya class=’tombol1’). Dan kemudian melaksanakan fungsi yang diberikan apabila event onclick terjadi. Jadi artinya apabila elemen dengan class=”tombol1” diklik maka lakukan fungsi $("p").hide(1000);

Fungsi hide()dan show()adalah fungsi built in dari jQuery, nanti akan kita lihat lebih lanjut fungsi-fungsi built in dari jQuery.

2.4.3. jQuery Selectors

Selectors memungkinkan Anda untuk memanipulasi elemen HTML sebagai kelompok atau sebagai elemen tunggal. Pada penjelasan sebelumnya kita telah melihat contoh cara memilih elemen HTML menggunakan jQuery. jQuery element selectors dan attribute selectors memungkinkan Anda untuk memilih elemen HTML (atau kelompok elemen) dengan nama tag, nama atribut atau konten. Selectors memungkinkan Anda untuk memanipulasi elemen HTML sebagai kelompok atau sebagai elemen tunggal.

1. jQuery Element Selectors

jQuery mirip CSS dalam hal memilih elemen HTML. $("p")memilih semua elemen <p> $("p.intro")memilih semua elemen <p> yang mempunyai class="intro". $("p#demo")memilih elemen <p> yang mempunyai id="demo".

2. jQuery Attribute Selectors

jQuery mirip XPath dalam hal memilih elemen berdasarkan atribut yang ada. $("[href]")memilih semua elemen dengan atribut href. $("[href='#']")memilih semua elemen dengan atribut href bernilai="#". $("[href!='#']")memilih semua elemen dengan atribut href dengan nilai bukan sama dengan "#". $("[href$='.jpg']")memilih semua elemen dengan atribut href yang mengandung ".jpg".

3. jQuery Events

Salah satu kemampuan utama jquery adalah menangani event. Dalam pemograman jquery, biasanya kode-kode pemograman diletakkan di dalam penanganan event yang terjadi pada suatu atau kelompok elemen yang dipilih. Hampir-hampir mirip dengan Visual Basic, biasanya suatu kode dijalankan apabila ada sesuatu yang terjadi (event) pada suatu elemen. Misalnya, kalau ada tombol di klik, maka action atau kode apa yang dijalankan, apabila ada combox dipilih, kode apa yang dijalankan.

2.4.4. Efek-Efek dengan jQuery

Salah satu kemampuan jquery adalah, adanya fungsi-fungsi efek yang siap pakai. Biasanya untuk membuat efek memudar di javascript, kita harus membuat kode yang lumayan panjang. Tapi dengan menggunakan jquery cukup menggunakan fungsi $(selector).fadeIn()

1. jQuery show() Effect

Berguna untuk menampilkan elemen yang tersembunyi. Untuk mengatur elemen yang tersembunyi melalui CSS adalah display:none(bukan visibility:hidden).

Sintaks : $(selector).show(speed,callback)

2. jQuery hide() Effect

jQuery hide() Effect berfungsi untuk menyembunyikan elemen yang dipilih.

Sintaks : $(selector).hide(speed,callback)

Untuk parameter speed dan callback adalah sama dengan show() effect.

3. jQuery toggle() Effect

jQuery toggle() Effect dalah gabungan fungsi hide dan show. Jadi toggle()berfungsi menampilkan yang tersembunyi, menyembunyikan yang tampak.

Sintaks : $(selector).toggle(speed,callback,switch)

4. jQuery slideDown() Effect

jQuery slideDown() Effect menampilkan elemen yang tersembunyi, secara efek sliding.

Sintaks : $(selector).slideDown(speed,callback)

5. jQuery slideToggle() Effect

jQuery slideToggle() Effect gabungan antara slideDown() dan slideUp(). Menyembunyikan elemen jika dalam keadaan visible, menampilkan elemen jika dalam kedaan hidden.

Sintaks : $(selector).slideToggle(spe ed,callback)

Untuk parameter speed dan callback adalah sama dengan fungsi show().

6. jQuery fadeIn() Effect

jQuery fadeIn() Effect menampilkan elemen yang dipilih jika tersembunyi, secara efek memudar.

Sintaks :

$(selector).fadeIn(speed,callback)

Untuk parameter speed dan callback adalah sama dengan fungsi show().

7. jQuery fadeTo() Effect

jQuery fadeTo() Effect mengatur tingkat kepudaran elemen terpilih menuju tingkat opacity yang ditentukan.

Sintaks : $(selector).fadeTo(speed,opacity,callback)

Untuk parameter speed dan callback adalah sama dengan fungsi show().

Untuk parameter opacity bisa bernilai 0 sampai 1.

8. jQuery animate() Effect

jQuery animate() Effect mengubah suatu elemen dari satu keadaan ke keadaan yang lainnya. Keadaan yang diubah ini berdasarkan CSS. Nilai properti CSS yang berubah secara berangsur-angsur, hal ini untuk menciptakan efek animasi.Nilai properti CSS yang bisa diubah adalah nilai bertipe angka, baik satuannya pixel atau persen %. Untuk tipe string tidak bisa dianimasikan.

9. jQuery stop() Effect

jQuery stop() Effect menghentikan animasi yang sedang berjalan.

Sintaks : $(selector).stop(stopAll,goToEnd)

stopAll Opsional. Bernilai boolean, menentukan apakah menghentikan semua

animasi, termasuk yang ngantri untuk dijalankan pada elemen yang dipilih atau tidak.

goToEnd Opsional. Bernilai Boolean, menentukan apakah animasi yang sedang jalan dikompletkan atau tidak. Parameter ini hanya bisa digunakan jika parameter stopAll di-set.