Tik Tugas Upload

103
Tugas Kelompok TIK ANGGOTA : Bayu budiman Imam badru zaman Isty yuliana Silmi sakinah Sipa hayatul fauziah Wiwin winarti XI-MIA 3 SMA NEGERI 16 GARUT

description

tugas tik membuat artikel

Transcript of Tik Tugas Upload

Page 1: Tik Tugas Upload

Tugas Kelompok TIK

ANGGOTA :

Bayu budiman

Imam badru zaman

Isty yuliana

Silmi sakinah

Sipa hayatul fauziah

Wiwin winarti

XI-MIA 3

SMA NEGERI 16 GARUT

Page 2: Tik Tugas Upload

Penjelasan mengenai HTML -

Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatanhiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujudyang terintegerasi. Dengan kata lain,berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), 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 dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa). Kegunaan HTML Mengintegrasi gambar dan tulisan Membuat Pranala Mengintegerasikan berkas suara dan rekaman gambar hidup. Membuat form interaktif HTML dokumen tersebut mirip dengan dokumen tulisan biasa, hanya dalam dokumen ini sebuah tulisan bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat tulisan ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya

dilakukan dengan cara:

< b> TAMPIL

TEBAL</b>. Tanda < b> digunakan untuk mengaktifkan instruksi cetak tebal, diikuti oleh tulisan yang ingin

ditebalkan, dan diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut. HTML lebih menekankan pada penggambaran komponen-komponen struktur dan format di dalam halaman web daripada menentukan penampilannya. Sedangkan penjelajah web digunakan untuk menginterpretasikan susunan halaman ke gaya built-in penjelajah web dengan menggunakan jenis tulisan, tab, warna, garis, dan perataan text yang dikehendaki ke komputer yang menampilkan halaman web. Salah satu hal Penting tentang eksistensi HTML adalah tersedianya Lingua franca (bahasa Komunikasi) antar komputer dengan kemampuan berbeda. Pengguna Macintosh tidak dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat dalam pc berbasis Windows. Pengguna Microsoft Windows pun tidak akan dapat melihat tampilan yang sama sebagaimana

bayubudiman466, 01/03/-1,
Page 3: Tik Tugas Upload

tampilan yang terlihat pada pengguna yang menggunakan Produk-produk Sun Microsystems. namun demikian pengguna-pengguna tersebut dapat melihat semua halaman web yang telah diformat dan berisi Grafika dan Pranala Menyunting Format Tulisan HTML memungkinkan seseorang untuk menyunting tampilan atau format berkas yang akan dikirimkan melaluimedia daring. Beberapa hal yang dapat dilakukan dalam menentukan format berkas adalah: Menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya. Menampilkan tulisan dalam bentuk cetakan tebal Menampilkan sekelompok kata dalam bentuk miring

Menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan

mesin ketik Mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.

Markah / Tanda Struktural. Tanda yang menentukan level atau tingkatan dari sebuah tulisan (contoh, < h1> Golf</h1> akan memerintahkan peramban untuk menampilkan "Golf" sebagai tulisan tebal besar yang menunjukkan sebagai Heading 1 Presentasional. Tanda yang menentukan tampilan dari sebuah tulisan tidak peduli dengan level dari tulisan tersebut (contoh, < b> boldface</b> akan menampilkan bold. Tanda presentasional saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan tulisan, Hiperteks. Tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen lain (contoh, < a href="http://

www.wikipedia.org/"> Wikipedia</a> akan menampilkan Wikipedia sebagai sebuah hyperlink ke URL tertentu), Elemen widget yang membuat objek- objek lain seperti tombol (< button>), list (< li>), dan garis horizontal (< hr>). Konsep hypertext pada HTML memungkinkan pembuatan link pada suatu kelompok kata atau frasa untuk menuju ke bagian manapun dalam World Wide Web, Ada 3 Macam Link ( Pranala ) yang dapat digunakan :

Pranala menuju bagian lain dari page. Pranala menuju page lain dalam satu web site.

Pranala menuju resource atau web site yang berbeda Ok mungkin cukup sekian artikel saya kali ini yang membahasPenjelasan Lengkap Tentang Html - Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga

Page 4: Tik Tugas Upload

menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), 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 dibuat oleh kolaborasiu Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).

Kegunaan HTML Mengintegrasi gambar dan tulisan Membuat Pranala Mengintegerasikan berkas suara dan

rekaman gambar hidup. Membuat form interaktif HTML dokumen tersebut mirip dengan dokumen tulisan biasa, hanya dalam dokumen ini sebuah tulisan bisa memuat instruksi yang ditandai= dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat tulisan ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya dilakukan dengan cara:

< b> TAMPIL TEBAL</b>. Tanda < b> digunakan untuk mengaktifkan instruksi cetak tebal, diikuti oleh tulisan yang ingin ditebalkan, dan diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut. HTML lebih menekankan pada penggambaran komponen-komponen struktur dan format di dalam halaman web daripada menentukan penampilannya. Sedangkan penjelajah web digunakan untuk menginterpretasikan susunan halaman ke gaya built-in penjelajah web dengan menggunakan jenis tulisan, tab, warna, garis, dan perataan text yang dikehendaki ke komputer yang menampilkan halaman web. Salah satu hal Penting tentang eksistensi HTML adalah tersedianya Lingua franca (bahasa Komunikasi) antar komputer dengan kemampuan

berbeda.

Pengguna Macintosh tidak dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat

dalam pc berbasis Windows. Pengguna Microsoft Windows pun tidak akan dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat pada pengguna yang menggunakan Produk-produk Sun Microsystems. namun demikian pengguna-pengguna tersebut dapat melihat semua halaman web yang telah diformat dan berisi Grafika dan Pranala Menyunting Format Tulisan HTML memungkinkan seseorang untuk menyunting

Page 5: Tik Tugas Upload

tampilan atau format berkas yang akan dikirimkan melalui media daring. Beberapa hal yang dapat dilakukan dalam menentukan format berkas adalah: Menampilkan suatu kelompok kata

dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya. Menampilkan tulisan dalam bentuk cetakan tebal Menampilkan sekelompok kata dalam bentuk miring Menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik Mengubah-ubah ukuran tulisan untuk

suatu karakter tertentu. Markah / Tanda Struktural. Tanda yang menentukan level atau tingkatan dari sebuah tulisan (contoh, < h1> Golf</h1> akan memerintahkan peramban untuk menampilkan "Golf" sebagai tulisan tebal besar yang menunjukkan sebagai Heading 1 Presentasional. Tanda yang menentukan tampilan dari sebuah tulisan tidak peduli dengan level dari tulisan tersebut

(contoh, < b> boldface</b> akan menampilkan bold. Tanda presentasional saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan tulisan,

Hiperteks. Tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen

lain (contoh, < a href="http://

www.wikipedia.org/"> Wikipedia</a>

akan menampilkan Wikipedia sebagai sebuah hyperlink ke URL tertentu), Elemen widget yang membuat objek- objek lain seperti tombol (< button>), list (< li>), dan garis horizontal (< hr>). Konsep hypertext pada HTML memungkinkan pembuatan link pada suatu kelompok kata atau frasa untuk menuju ke bagian manapun dalam World Wide Web,

Ada 3 Macam Link ( Pranala ) yang

dapat digunakan :

Pranala menuju bagian lain dari page. Pranala menuju page lain dalam satu web site.

Pranala menuju resource atau web site yang berbeda HTML 5 HTML5 adalah suatu spesifikasi atau standard yang dikeluarkan oleh W3C (World Wide Web Consortium) sebagai revisi dari standard HTML. Tujuan utamanya telah meningkatkan bahasa dengan

Page 6: Tik Tugas Upload

dukungan untuk multimedia terkini dengan tetap mudah dibaca oleh manusia dan secara konsisten dimengerti oleh komputer dan perangkat (web browser, parser, dll).

HTML5 dimaksudkan untuk menggolongkan tidak hanya HTML 4, tapi XHTML 1 dan DOM Level 2 HTML juga. HTML5 ini merupakan hasil proyek dari lembaga persatuan website dunia, World Wide Web Consortium (W3C) dan Web Hypertext Application Technology Working Group (WHATWG). Proyek tersebut dimulai di tahun 2009

untuk menyempurnakan bahasa

penanda sebelumnya yang dianggap sudah lawas. Tujuan utama dengan adanya HTML5 adalah mengurangi

penggunaan plugin-plugin 3rd party pada HTML sehingga dapat mempercepat kinerja web itu sendiri. Plugin-plugin tersebut seperti Adobe Flash, Microsft Silverlight, Java dan lain-lainnya. Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya: section serupa seperti h1-h6. article bisa berupa entri blog atau tulisan konten. aside menyajikan konten pelengkap. header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi. footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya. Dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan percakapan. yang fenomenal adalah penggunaan elemen figure, video, audio, source, embed, canvas dan elemen terkait berkas multimedia lainnya. Dikenalkan pula beberapa atribut baru, seperti: atribut media, ping pada elemen pranala, autofocus, placeholder, required, autocomplete dan sebagainya, terkait elemen input dan

form reversed pada elemen ol untuk urutan besar ke kecil. Beberapa kelebihan yang dijanjikan pada HTML5: Dapat ditulis dalam sintaks HTML (dengan tipe media text/ HTML) danXML. Integrasi yang lebih

baik dengan aplikasi situs dan pemrosesannya. Integrasi (‘inline’) dengan doctype yang lebih sederhana.

Penulisan kode yang lebih efisien. Konten yang ada di situs lebih mudah terindeks oleh search

engine. Browser yang Mendukung HTML Opera Web Browser (mulai dari Opera 9.2 sampai yang terbaru

Page 7: Tik Tugas Upload

saat ini yaitu opera 10) Safari (mulai dari versi 3.1) FireFox (Mulai dari FireFox 3 ) Google Chrome (Mulai

dari versi 3) Internet Explorer (Mulai dari versi 8) HTML5 Semantic HTML5 Semantic adalah beberapa tag baru yang diperkenalkan dalam HTML5 untuk mendukung struktur halaman yang lebih rapi. Beberapa elemen baru digunakan untuk mengurangi pemakaian tag <div>. Elemen-elemen baru yang ditambahkan pada HTML5 adalah:

Tag Keterangan <article> Menspesifikasikan konten yang bersifat independen, seperti artikel, blog post, forum post, dan sejenisnya. <aside> Digunakan untuk sebuah subkonten. Biasanya digunakan di dalam tag <article>. <bdi> Untuk teks yang tidak boleh terikat pada arah teks-elemen

induknya <command> Sebuah button, atau radiobutton, atau checkbox. <details> Untuk menjelaskan detail tentang sebuah dokumen atau sebagian dari dokumen. <summary> Digunakan pada sebuah ringkasan dan sejenisnya di dalam tag <details> <figure> Untuk mengelompokkan sekumpulan section, biasanya berupa video. <figcaption> Berisi caption/keterangan yang ditempatkan di dalam tag <figure>

<footer> Digunakan sebagai footer dari sebuah halaman <header> Digunakan sebagai header dari sebuah halaman <hgroup> Digunakan untuk sekumpulan heading <mark> Digunakan pada teks yang akan di

Highlight <meter> Digunakan untuk pengukuran, dimana nilai maksimal dan minimal telah ditentukan <nav> Digunakan untuk sekumpulan navigasi <progress> Membuat Progress bar <ruby> Digunakan untuk anotasi ruby <rt> Untuk menjelaskan anotasi ruby <rp> Menunjukkan elemen jika browser tidak mendukung ruby <section> Untuk sebuah section di dalam halaman.

Seperti Bab, Footer, dan sebagainya <time> Untuk mendefinisikan waktu dan tanggal <wbr> Word Break.

Untuk memisah suatu kata bila diperlukan. HTML5 Audio Salah satu fitur baru HTML5 yang paling mencengangkan adalah disediakannya tag baru yang memungkinkan kita untuk memutar audio sesuai yang kita inginkan tanpa menggunakan plugin tambahan seperti flash player. Dengan menggunakan tag <audio> kita sudah bisa memasukkan file mp3 dan ogg ke dalam halaman web kita. Untuk menambahkan audio ke dalam web kita, cukup

Page 8: Tik Tugas Upload

ketikkan kode berikut <!DOCTYPE html> <html> <body> <audio controls="controls"> <source src="music/ FromHere.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio> </body> </html>HTML 5 HTML5 adalah suatu spesifikasi atau standard yang dikeluarkan oleh W3C (World Wide Web Consortium) sebagai revisi dari standard HTML. Tujuan utamanya telah meningkatkan bahasa dengan dukungan untuk multimedia terkini dengan tetap mudah dibaca oleh manusia dan secara konsisten dimengerti oleh komputer dan perangkat (web browser, parser, dll). HTML5 dimaksudkan untuk menggolongkan tidak hanya HTML 4, tapi XHTML 1 dan DOM Level 2 HTML juga. HTML5 ini merupakan hasil proyek dari lembaga persatuan website dunia, World Wide Web Consortium (W3C) dan Web Hypertext Application Technology Working Group (WHATWG). Proyek tersebut dimulai di tahun 2009 untuk menyempurnakan bahasa penanda sebelumnya yang dianggap sudah lawas. Tujuan utama dengan adanya HTML5 adalah mengurangi penggunaan plugin-plugin 3rd party pada HTML sehingga dapat mempercepat kinerja web itu sendiri. Plugin-plugin tersebut seperti Adobe Flash, Microsft Silverlight, Java dan lain-lainnya. Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya: section serupa seperti h1-h6.

article bisa berupa entri blog atau tulisan konten. aside menyajikan konten pelengkap. header bisa

menyajikan judul, deskripsi, bahkan nav untuk navigasi. footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya.

Dialog y ang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan yang fenomenal adalah penggunaan elemen figure, video, audio, source, embed, canvas dan elemen terkait berkas multimedia lainnya. Dikenalkan pula beberapa atribut baru, seperti:

atribut media, ping pada elemen pranala, autofocus, placeholder, required, autocomplete dan

sebagainya, terkait elemen input dan form reversed pada elemen ol untuk urutan besar ke kecil.

Beberapa kelebihan yang dijanjikan pada HTML5: Dapat ditulis dalam sintaks HTML (dengan tipe media text/ html) danXML. Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya.

Page 9: Tik Tugas Upload

Integrasi (‘inline’) dengan doctype yang lebih sederhana. Penulisan kode yang lebih efisien.

Konten yang ada di situs lebih mudah terindeks oleh search engine. Browser yang Mendukung HTML Opera Web Browser (mulai dari Opera 9.2 sampai yang terbaru saat ini yaitu opera 10)

Safari (mulai dari versi 3.1)

FireFox (Mulai dari

FireFox 3 )

Google Chrome (Mulai

dari versi 3)

Internet Explorer

(Mulai dari versi 8)

HTML5 Semantic

HTML5 Semantic adalah beberapa tag baru yang diperkenalkan dalam HTML5 untuk mendukung struktur halaman yang lebih rapi. Beberapa elemen baru digunakan untuk mengurangi pemakaian tag <div>. Elemen-elemen baru yang ditambahkan pada HTML5 adalah: Tag Keterangan <article> Menspesifikasikan konten yang bersifat independen, seperti artikel, blog post, forum post, dan

sejenisnya. <aside> Digunakan untuk sebuah subkonten. Biasanya digunakan di dalam tag <article>.

<bdi> Untuk teks yang tidak boleh terikat pada arah teks-elemen induknya <command> Sebuah button, atau radiobutton, atau checkbox. <details> Untuk menjelaskan detail tentang sebuah dokumen atau sebagian dari dokumen. <summary> Digunakan pada sebuah ringkasan dan sejenisnya di dalam tag

<details> <figure> Untuk mengelompokkan sekumpulan

section, biasanya berupa video. <figcaption> Berisi caption/ keterangan yang ditempatkan di dalam tag

Page 10: Tik Tugas Upload

<figure> <footer> Digunakan sebagai footer dari sebuah halaman <header> Digunakan sebagai

header dari sebuah halaman <hgroup> Digunakan untuk sekumpulan heading <mark> Digunakan pada teks yang akan di highlight <meter> Digunakan untuk pengukuran, dimana nilai maksimal dan minimal telah ditentukan <nav> Digunakan untuk sekumpulan navigasi <progress> Membuat Progress bar <ruby> Digunakan untuk anotasi ruby <rt> Untuk menjelaskan anotasi ruby <rp> Menunjukkan elemen jika browser tidak mendukung ruby <section> Untuk sebuah section di dalam halaman. Seperti Bab, Footer, dan sebagainya <time> Untuk mendefinisikan waktu dan tanggal <wbr> Word Break. Untuk memisah suatu kata bila diperlukan. HTML5 Audio Salah satu fitur baru HTML5 yang paling mencengangkan adalah

disediakannya tag baru yang memungkinkan kita untuk memutar audio sesuai yang kita inginkan

tanpa menggunakan plugin tambahan seperti flash player. Dengann menggunakan tag <audio> kita sudah bisa memasukkan file mp3 dan ogg ke dalam halaman web kita. Untuk menambahkan audio ke dalam

web kita, cukup ketikkan kode berikut

<!DOCTYPE html>

<html>

<body>

<audio controls="controls">

<source src="music/

FromHere.ogg" type="audio/ogg">

Your browser does not support the

audio element.

</audio>

</body>

</html>

Page 11: Tik Tugas Upload

Penjelasan mengenai CSS

Defenisi CSS Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk

mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa

berkas (file).Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

Fungsi CSS

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border,

warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. Kelebihan dan Kelemahan CSS

Kelebihan CSS:

1. Dengan CSS, anda akan dapat mempersingkat waktu kerja anda untuk membuat halaman Web.

2. Ukuran File HTML akan menjadi lebih kecil, karena file CSS berada diluar HTML (kalau menggunakan External Stylesheet). Kelemahan CSS Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua software browser.

Cara kerja css itu sangatlah mudah, kita hanya perlu menulis stylenya(selector id dan class tersesuaikan) maka secara otomatis akan bekerja pada document html. Aturan penulisan

Page 12: Tik Tugas Upload

css itu sangatlah simple contohnya seperti ini Selector_id{ property:value; } Selector_class {property:value;} Tag_html { property:value; property_lagi:valuenya; /*sobatbisa menambah beberapa property lagi, yah kira-kira sesuai kebutuhan*/}

Keterangan

· Ketiga aturan diatas hanya kita gunakan sesuai kebutuhan saja

· Sebenarnya masih ada yang lain, berhubung ini hanya pemahaman dasar jadi yang dibahas yang penting-penting

saja

· Contohnya, diakhir tulisan ini Keterangan syntax

· Diawali dengan selector atau tag_html

· Kemudian tambahkan { (buka kurung karawal)

· Abis itu barulah kita tulis propertynya

· Setelah menulis propertynya lanjutkan dengan : (titik dua) anggap seperti sama dengan pada atribut html

· Setelah : (titik dua), masukan valuenya

· Sehabis menulis value tambahkan ; (titik koma), fungsinya untuk mengakhiri property dan value

· Next, jika kita tidak menambahkan property:value lagi

· Akhiri dengan } (tutup kurung karawal) fungsinya munutup selector Ini adalah bagian terpenting dalam css, tanpa selector dan value sama saja dengan mandi tanpa air(kalau tanpa sabun masih mending ). Misal kita ingin merubah warna text, property yang kita gunakan adalah color: sedangkan valuenya bisa rgb, hex color atau color.Misal lagi kita ingin merubaukuran font, property yang kitgunakan adalah font-size:, sedangkan valuenya bisa length (px). misalnya lagi kita ingin merubah warna latar belakang, maka property yang kita gunakan adalah background-color:sedangkan color.Contoh H1{ color ; red; background-color : green; font-size : 60px ; Keterangan · Yang berwarnah merah adalah property · Sedangkan yang berwarna biru adalah valuenya· Setiap peroperty sudah memiliki value masing-masing, property margin lalu valuenya #fff(white) itu sama dengan salah besar · Contohnya, diakhir tulisan ini · Property css itu sangat banyak, dari sekian banyak property

Page 13: Tik Tugas Upload

itu kita ngga mesti kira-kira sesuai kebutuhan) Untuk belajar css, sahabat harus bisa html dulu(minimal tau penulisan serta cara karjanya).Contoh dibawah adalah penulisan css dalam binternal style <html> <style type="text/css"> disini tempat menulis code css, ada beberapa cara untuk menulis css, yang ini adalah internal style </style> <body> <!-- tag tag html disini --> </body> </html> Keterangan · Rekomendasi dari w3.org ialah penulisan style css terletak antara <head> dan </ head> · Namun, dimanapun sobat menulis kode cssnya, browser tetap akan menjalankan css tadi jika syntaxnya benar, misal letaknya di <body> disini </body> · Sekarang itu browser sudah pada canggih-canggih beda ketika netscape masih berdiri Komentar css sama seperti html, kita juga bisa menulis komentar pada css, tahukan fungsi komentar itu Penulisan komentar css itu seperti ini /* disini komentar css */ Keterangan · Diawali dengan /(garis miring) · Kemudian *(bintang) atau shift + 8 · Abis itu komentar anda · Setelah memasukkan komentar · Sebagai penutupnya tambahkan *(bintang) atau shift + 8 · Disusul dengan /(garis miring) · Lihat contoh <style type="text/css"> body{ color:blue;/*komentar css*/ background:lime;/*komentar css*/ /*

bisa juga disini komentar css, color adalah property css, sedangkan blue adalah value. Fungsi dari komentar adalah untuk menudahkan kita dalam mengingat code yang kita tulis, dimana browser tidak akan mmenampilkan/ menjalankan komentar yang kita tulis */ } </style> <body> <!-- tag tag html disini --> </body> </html> Contoh ini <style type="text/css"> body{ color: blue; background:lime; }</style> Dan contoh yang ini <style type="text/css">body {color:blue;background:lime;}</ style> Sama saja Keterangan · Contoh yang diatas itu bernilai sama · Atau css itu ngga ngaruh terhadap enter(line break) ataupun spasi · Yang perlu diperhatikan hanyalah karakter ini { : ; } · Kita hanya akan menggunakan spasi jika property dan valuenya ditulis dengan shorthand Contoh dan cara kerja css Di bawah ada beberapa dua contoh penggunaan css <html> <style type="text/css"> body{/*value default dari tag <body> adalah warna latar putih, dengan css kita bisa merubahnya*/ background:lime;/* warna latar belakang */ padding-left:60px;/* jarak kiri*/ } h1{/*dengan ini kita merubah nilai default tag <h1> sesuai dengan property yang kita tambahkan */ color:red;/* warna */ font-family:Times, serif;/* font family*/ font-style: italic;/* font style*/ font-weight: bold;/* font weigt */ font-size: 30px;/* ukuran font*/ } p{ color:blue;/* warna*/ font-family:arial;/* font family*/ font-style: normal;/* font style*/ font-weight: bold;/* font wight*/ font-size: 50px;/* ukuran font*/} </style> <body> <h1>ini adalah judul </h1> <p>ini adalah paragraf</p> </body> </html> Untuk menjalankan codenya · Copy kode diatas · Buka program notepad · Paste · Lalu save as(pilih all files) dengan nama belajarcss1.html (pastikan ekstensi filenya adalah [dot]html) · Setelah itu jalankan menggunakan browser pavorit anda(ff, ie, opera). · Setelah hasilnya

Page 14: Tik Tugas Upload

dilihat, coba edit masing-masing property valuenya yang terletak antara : dan ; · Simpan · Kemudian lihat hasil editan sobat Perhatikan markup style berikut <html> <head> <title>contoh2 css</title> <meta content="indam url:http:// www.indaam.com" name="author"/> <style type="text/css"> /*misal tag body*/body{/*style ini untuk body*/ background-color:pink;/* warna latar belakang body pink*/ margin:0 auto 10px auto;/* jarak- luar atas 0, kiri dan kana auto, sedangkan bawah 10px */ padding:5px;/* jarak/batas dalam masing-masing 5px*/ width:800px;/* lebar 800px*/ } /* ini adalah komentar css */ #pembentuk-headernya{/*style ini untuk pembentuk header*/ height:200px;/* tingginya 200px*/ clear:both;/*fungsi ini agar agar ruas kanan-dankiri tidak bisa diisi dengan bidang lain */ margin:0 auto;/*jarak luar atas bawah 0, kiri-kanan auto */ background-color:white;/*warna latar belakang putih */ -moz-border-radius- topright:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/ -moz-border-radius-topleft:10px;/ * style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/ /*ukuran text*/font-size:40px; color:blue;/*warna text*/ } /*bagian header selesai*/ /* ini adalah komentar css */ #sidebar-kiri{/*style ini untuk sidebar kiri */ min-height:1000px;/* tinggi minimal*/ float:left;/*menekan kekiri */ width:200px;/*lebar 200px */ margin:10px 0;/*jarak luar atas- bawah 10px, kiri-kanan 0 */ background-color:white;/* warna latar belakang putih*/ -moz-border-radius-topleft:10px;/ * style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/ /*ukuran text*/font-size:60px; color:red;/*warna text*/ } /*bagian sidebar-kiri selesai*/ /* ini adalah komentar css */ /*mulai badan utama*/ #badan-utamanya{/*style ini untuk badan utama, atau yang terletak di tengah*/ min-height:1000px;/* tinggi minimal*/ float:left;/* menekan kekiri*/ width:400px;/* lebar 400px*/ margin:10px;/*jarak luar masing- masing 10px */ background-color:white;/*warna latar belakang putih */ } #badan-utamanya .isinya{/*style ini untuk isi badan*/ /*style ini untuk isi badan*/ margin:10px;/* jarak luar masing- masing 10px*/ /*ukuran text*/font-size:55px; color:green;/*warna text*/ } /* ini adalah komentar css */ /*mulai sidebar kanan*/ #sidebar-kanan{/*style ini untuk sidebar kanan*/ min-height:1000px;/* tinggi minimal*/ float:right;/* menekan ke kanan*/ width:180px;/* lebar 180px*/ margin:10 0 0 0;/*jarak luar atas 10, kiri-kanan-bawah 0 */ background-color:white;/*warna latar belakang putih */ -moz-border-radius- topright:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/ /*ukuran text*/font-size:40px; color:silver;/*warna text*/ } /* ini adalah komentar css */ #pembentuk-footer{/*style ini untuk pembentuk footer atas, saya membuat tiga footer widget*/ clear:both;/*fungsi style ini agar

ruang kiri-kanan tidak bisa diisi*/

Page 15: Tik Tugas Upload

background-color:white;/*warna

latar belakang*/

/*ukuran text*/font-size:20px;

color:orange;/*warna text*/

}

#pembentuk-footer

.misalwidgetnya{/*style ini untuk

widget dalama footer*/

float:left;/*menekan ke kiri-

atas*/

width:32%;/*lebarnya 32%, jika

lebar tag sebelumnya 1000px, maka

lebar ini menjadi 320px*/

min-height:300px;/*tinggi

minimal*/

background-color:pink;/*warna

latar belakang*/

margin:5px;/*jarak luar masing-

masing 5px */

}

/* ini adalah komentar css */

#by-indam{/*style ini untuk yang

paaaaaaaaaaaaaaaaaaaaaaaaling

bawah, ituloh yang titititittititik*/

Page 16: Tik Tugas Upload

clear:both;/*fungsi style ini agar

ruang kiri-kanan tidak bisa diisi*/

min-height:40px;/*minimal tinggi

40px */

margin:10px auto;/* jatak luar

atas dan bawah 40px, kiri-kanan

auto*/

background-color:white;/* warna

latar belakang putih*/

-moz-border-radius-

bottomright:10px;/*style ini hanya

untuk firefox */

-moz-border-radius-

bottomleft:10px;/*style ini hanya

untuk firefox */

}

#by-indam p{/*style ini untuk tag

p dalam tititititiititittitiitik*/

text-align:right;/*text rata kanan

*/

margin:0;/*jarak luar masing-

masing 0 */

padding:5px 10px;/* jarak dalam

atas-bawah 5px, kiri-kanan 10px*/

Page 17: Tik Tugas Upload

}

/* ini adalah komentar css */

</style>

</head>

<body>

<div id="pembentuk-headernya">

header

</div>

<!--------->

<!-- dari sini sidebar kiri

------------->

<div id="sidebar-kiri">

sidebar kiri

</div>

<!-- //sampai disini sidebar kiri

------------->

<!--------->

<!-- dari sini badan utama -->

<div id="badan-utamanya">

<div class="isinya">

badan post

</div>

<!-- //sampai disini isi badan

------------->

Page 18: Tik Tugas Upload

</div>

<!--------->

<!-- ////sampai pembentuk badan

utama -------------->

<!--------->

<!-- dari sini sidebar kanan -->

<div id="sidebar-kanan">

sidebar kanan

</div>

<!--// //sampai disini sidebar

kanan ------------->

<div style="clear:both;/* */"></

div>

<!--------->

<!-- dari sini footer pertama/

atas------------->

<div id="pembentuk-footer">

<!-- dari sini widget dalam footer

atas ---->

<!--------->

<div class="misalwidgetnya">

footer kiri

</div>

<!--------->

Page 19: Tik Tugas Upload

<div class="misalwidgetnya">

footer kanan

</div>

<!--------->

<div class="misalwidgetnya">

footer tengah

</div>

<!--------->

<div style="clear:both;/* */"></

div>

</div>

<!--------->

<div id="by-indam">

<p>yah, seperti inilah tampilanya,

simple kan? silakan edit untuk

belajar. salam <a href="http://

www.indaam.com" title="indam site"

target="_blank">indaam site</a></

p>

<!---------></div>

</body>

</html>

Untuk menjalankan codenya

Page 20: Tik Tugas Upload

· Copy kode diatas

· Buka program notepad

· Paste

· Lalu save as(pilih all files)

dengan nama belajarcss2.html

(pastikan ekstensi filenya

adalah [dot]html)

· Setelah itu jalankan

menggunakan browser pavorit

anda(ff, ie, opera).

· Setelah hasilnya dilihat,

coba edit masing-masing

property dan valuenya yang

terletak antara : dan ;

· Dari /* sampai */ adalah

komentar css

· Simpan

· Kemudian lihat hasil editan

sobat

Bandingkan jika ngga menggunakan

css, coba hapus semua code antara

<style type="text/css"> sampai </

style>

· Simpan

Page 21: Tik Tugas Upload

· Lalu lihat hasilnya

· Nah, gimana sudah tahukan

fungsi css itu?

· Saya harap kita semua tahu

(minimal apa itu css)

Cara Kerja

Cara kerja CSS sangatlah mudah,

karena CSS hanya membutuhkan

style sebagai penentu dari font ,

warna, dan format-format lain

untuk memformat atribut sebuah

halaman web yang kita buat. Tiap

style memiliki dua buah elemen

dasar yaitu “selector” dan

“declaration”.

Sebuah selector biasanya adalah tag

HTML, sementara declaration adalah

satu atau beberapa perintah / nilai

dari CSS yang menunjukkan type

bentuk yang diaplikasikan pada

selector. Declaration ini biasanya di

tandai dengan tanda kurung kurawal

“{ }” , dan perintah atau nilai CSS

Page 22: Tik Tugas Upload

yang berbeda dipisahkan satu

dengan yang lain dengan

menggunakan titik-koma “;” seperti

terlihat pada contoh berikut :

< style type="text/

css">

.teks {font-

family:verdana;

color:blue;}

< /style>

Disini terlihat bahwa .teks adalah

selector, dan {font-family:verdana;

color: blue;} adalah declaration.

Selector-selector dan style dalam

CSS akan dimasukkan dalam sebuah

tempat yang sama dalam isi dokumen

HTML atau dibuat diluar dokumen

HTML yang nantinya akan dipanggil

untuk menentukan isi tampilan

dokumen HTML. Anda hanya

menunjuk pada selector-selector

dimana akan mengaktifkan sebuah

style yang anda inginkan.

Hal yang paling umum dalam

Page 23: Tik Tugas Upload

memasukkan kode Style CSS dengan

menggunakan tag < style

type=”text/css”>. Tag < style

type=”text/css”> ini selalu tampil

dalam bagian < head> dan sebelum

< /head> dari dokumen anda seperti

terlihat pada contoh berikut :

< html>

< head>

< style type="text/

css">

... aturan-aturan

css ...

< /style>

< /head>

< body>

... Dokumen html

yang akan diberikan

aturan CSS ...

< /body>

< /html>

Untuk menentukan font dan warna-

warna tiap kali anda memulai sebuah

cell table, anda dapat menentukan

Page 24: Tik Tugas Upload

sebuah style dan kemudian anda

tinggal menunjuk ke style dalam

cell table anda. Bandingkan contoh

dari sebuah table berikut yang

dibuat menggunakan HTML

sederhana :

< html>

< head>belajar css

< /head>

< body>

< table>

< tr>< td

bgcolor="red"

align="center">

< font

face="verdana"

color="blue">belajar

css1

< /font>< /td>< /tr>

< /table>

< /body>

< /html>

Bandingkan jika dokumen tersebut

dibuat dengan menggunakan CSS

Page 25: Tik Tugas Upload

(dengan menganggap bahwa sebuah

selector yang dipanggil “teks” telah

ditetapkan yang akan mengatur

format teks dokumen html

tersebut).

< html>

< head><

title>belajar css< /

title>

< style type="text/

css">

.teks { background-

color:red;

color:blue; font-

family:verdana;}

< /style>

< /head>

< body>

< table>

< tr>< td

class="teks">belajar

css1< /td>< /tr>

< /table>

< /body>

Page 26: Tik Tugas Upload

< /html>

Penempatan CSS

Menempatkan style CSS dalam

dokumen web yang kita buat dalam

bahasa html dapat dilakukan dengan

beberapa cara dan tingkatan yang

berbeda sesuai dengan keinginan

kita. Cara penempatan dalam HTML

adalah dengan menggunakan

beberapa cara, diantaranya adalah

menggunakan Inline Style, Internal

Style, External style, dan juga

teknik Importing dengan Internal

Style.

Inline Style

Adalah CSS yang dibuat dalam

sebuah tag HTML yang hanya

berlaku untuk dokumen yang

diapitnya saja. Biasanya teknik ini

digunakan pada pemformatan khusus

pada sebuah elemen HTML dan tidak

digunakan untuk memformat seluruh

elemen dalam dokumen web.

Contohnya adalah sebagai berikut :

Page 27: Tik Tugas Upload

< html>

< head>

< title>belajar

css< /title>

< /head>

< body>

< font style="arial;

font-family:Arial;

font-size: 20px;

background-

color:yellow">Penerapan

Inline Style < /

font>

< /body>

< /html>

Dalam script di atas dapat diketahui

bahwa style tersebut memiliki nama

style arial yang memiliki nilai atau

value untuk style tersebut. Adapun

nilai style adalah jenis font arial

dengan ukuran 20 pixel dan memiliki

warna latar kuning.

Internal Style

Pada teknik ini, style CSS

Page 28: Tik Tugas Upload

diletakkan pada tengah tag antara

tagdan. Aturan-aturan dalam style

ini diatur sedemikian rupa untuk

digunakan pada suatu tempat

maupun untuk keseluruhan situs.

Contoh dari teknik ini terlihat pada

contoh berikut :

< html>

< head>

< title>Belajar

CSS< /title>

< style type="text/

css">

< !-- .teks {font-

family: Verdana,

Arial, Helvetica,

sans-serif; font-

size: 24px; color:

white; background-

color: blue;} -->

< /style>

< /head>

< body>

< div

Page 29: Tik Tugas Upload

class=teks>Penerapan

Internal Style

< /body>

< /html>

Maksud dari < !– aturan css –>

diatas adalah berguna agar browser

yang tidak mendukung CSS tidak

menampilkan perintah-perintah

CSS, jadi perintah CSS didalam < !–

–> akan dianggap sebagai komentar

HTML biasa dan tidak akan

ditampilkan dalam browser walaupun

browser tersebut mendukung CSS.

Import Style

Dengan teknik ini sebuah Style

tidak disimpan pada halaman

tersebut, namun untuk

menghubungkannya dengan halaman

web yang kita buat digunakan

perintah import yang terdapat pada

style CSS. Seperti terlihat pada

contoh berikut :

< html>

< head>

Page 30: Tik Tugas Upload

< title>Belajar

CSS< /title>

< style type="text/

css">

< !-- @import url

(http://

www.nama_situs.com/

style.css); -->

< /style>

< /head>

< body>

< div

class=teks>Penerapan

Import Style< /div>

< /body>

< /html>

Pada teknik diatas, dokumen HTML

akan mengambil atau import style

CSS untuk dipergunakan dalam

dokumen tersebut. Dimana pada

contoh diatas dokumen akan

mengimport file style dengan nama

style yang berekstensi CSS pada

alamat url http://

Page 31: Tik Tugas Upload

www.nama_situs.com dengan

menggunakan perintah :

@import url (http://

www.nama_situs.com/style.css);

External Style

Dengan menggunakan teknik ini kita

dapat memanggil style CSS pada file

CSS yang kita inginkan dengan

menggunakan perintah “Link rel”

yang berfungsi untuk

menghubungkan kedalam sebuah

style CSS eksternal dengan nama

yang telah kita tentukan seperti

terlihat pada contoh :

< link

rel="stylesheet"

type="text/css"

href="style.css

Dalam contoh diatas kita

menghubungkan sebuah dokumen

html dengan sebuah style eksternal

dengan nama style.css yang telah

kita buat sedemikian rupa sehingga

style tersebut dihubungkan untuk

Page 32: Tik Tugas Upload

memformat tampilan dalam dokumen

html tersebut.

Dalam mengimport file CSS, kita

dapat langsung mengimport

beberapa file CSS sekaligus dalam

sebuah dokumen agar memperkaya

tampilan dokumen kita seperti

terlihat pada contoh berikut :

< link

rel="stylesheet"

type="text/css"

href="style1.css">

< link

rel="stylesheet"

type="text/css"

href="style2.css">

< link

rel="stylesheet"

type="text/css"

href="style3.css">

Atau kita dapat menggunakan

perintah :

< style>

< !-- @import url

Page 33: Tik Tugas Upload

(style1.css);

@import url

(style2.css);

@import url

(style3.css); -->

< /style>

Perbedaan dalam teknik terakhir

adalah perintah import tersebut

akan mengambil style CSS dengan

cara import style dari alamat url

yang kita tentukan. Cara ini lebih

efisien dikarenakan dokumen yang

kita beri perintah import tersebut

hanya akan mengimport file css

yang pada akhirnya, style CSS

tersebut hanya perlu di download

sekali saja dalam dokumen style

sheet eksternal yang terpisah

dengan dokumen HTML asli. Ketika

surfing ke dalam situs anda maka

CSS akan disembunyikan dalam

komputer user sehingga akan

memperkecil ukuran file sebuah

situs yang kita buat. Jadi jika anda

Page 34: Tik Tugas Upload

menggunakan cara terakhir ini,

maka sebelumnya anda harus

membuat sebuah dokumen style CSS

eksternal tersebut dengan ekstensi

.css dimana dokumen style tersebut

berisi aturan yang akan mengatur

tampilan dokumen web yang dibuat

STRUKTUR CSS

Dalam pembuatan dokumen web

menggunakan style CSS di kenal

adanya aturan atau struktur

penulisan baku agar style CSS yang

kita buat tersebut dapat

ditampilkan dengan baik dalam

dokumen web yang dibuat. Contoh :

< html>

< head>

< title>HTML Selector< /title>

< style type=”text/CSS”>

< !– p {font-family: verdana;} –>

< /style>

< /head>

< body>

< p> penggunaan HTML Selector

Page 35: Tik Tugas Upload

dalam CSS < /p>

< /body>

< /html>

Pada contoh diatas dipergunakan

tag HTML < p> sebagai selector dan

setiap huruf yang berada diantara

tag < p>

dan < /p> akan memiliki jenis font

verdana sesuai dengan value atau

nilai yang diberikan dalam property

style tersebut.

Cascading Style Sheet (CSS)

merupakan bahasa pemrograman

untuk mengatur tampilan suatu

website atau blog. Cascading Style

Sheet merupakan bahasa

pemrograman yang berguna untuk

pembuatan dynamic HTML. Dengan

menggunakan Cascading Style Sheet ,

Anda dapat mengatur atau

mempercantik tampilan website atau

blog, antara lain mengatur jenis ,

ukuran, warna front; jarak antara

baris dan panjangnya, marjin dan

Page 36: Tik Tugas Upload

Indentasi, background dan warna,

serta masih banyak lagi. Penggunaan

Cascading Style sheet (CSS) bukanlah

hal yang wajib, tanpa CSS Anda dapat

membuat sebuah web tetapi

penggunaan CSS (Cascading Style

Sheet) dalam pembuatan web

merupakan kelebihan tersendiri.

Menggunakan CSS tidak merupakan

perangkat lunak tertentu, karena

merupakan script yang telah

embedded dengan HTML. Anda cukup

menggunakan aplikasi notepad untuk

menciptakan script CSS sendiri.

Manfaat dari CSS:

1. Kode HTML, menjadi lebih

sederhana dan lebih mudah

diatur.

2. Ukuran file menjadi lebih kecil,

sehingga load file lebih cepat.

3. Mudah untuk merubah tampilan,

hanya dengan merubah dile CSS

saja.

4. Dapat berkolaborasi dengan

Page 37: Tik Tugas Upload

JavaScript dan merupakan

pasangan setia HTML.

5. Digunakan dalam hampir semua

web browser.

Page 38: Tik Tugas Upload

Penjelasan mengenai JQUVERY

jQuery adalah library JavaScript multiplatform yang dirancang untuk memudahkan penyusunan client-side script pada file HTML. Digunakan oleh 60 persen dari 10000 situs web paling banyak dikunjungi di dunia, jQuery adalah library JavaScript yang paling populer saat ini. jQuery merupakan sebuah perangkat lunak bebas sumber terbuka yang berada di bawah lisensi MIT. Sintaks jQuery dirancang sedemikian rupa untuk memudahkan pengembang website dalam menavigasi dokumen, menyeleksi elemen-elemen DOM, menerapkan animasi, mengaplikasikan events, serta membangun aplikasi AJAX. jQuery juga memampukan developer menciptakan berbagai plugin berbasis library JavaScript. Dengan plugin-plugin tersebut, pengembang situs web mampu menyusun sejumlah abstraksi untuk interaksi dan animasi sederhana, juga beberapa efek yang cukup kompleks dan berbagai widget yang dapat dikonfigurasikan. Karakter library JavaScript yang modular mendukung pengembangan laman web dinamis dengan berbagai fitur dan aplikasi berbasis web ( web app ). Fitur-fitur inti jQuery – meliputi penyeleksian, traversal, dan manipulasi elemen-elemen DOM – dimampukan oleh sebuah selector engine (dinamai Sizzle mulai versi 1.3), telah mewujudkan suatu gaya pemrograman baru yang memadukan antara algoritma dan struktur data DOM. Gaya ini telah mempengaruhi arsitektur dari framework JavaScript lainnya seperti YUI v3 dan Dojo , dan di kemudian menstimulasi pengembangan Selectors API standar.

Microsoft dan Nokia membundel jQuery pada platform mereka. Microsoft memasukkannya dalam Visual Studio untuk digunakan dalam framework ASP.NET AJAX dan ASP.NET MVC, sedangkan Nokia mengintegrasikannya dalam platform pengembangan widget Web Run-Time . jQuery juga mulai dipakai pada MediaWiki sejak versi 1.16. Situs resmi jQuery beralamat dijquery.com .

Pengembangannya dikelola oleh jQuery Foundation yang berada di jquery.org . Library ini bisa diunduh di laman jquery.com/download , atau diterapkan melalui sejumlah CDN termasuk Google jQuery CDN.

Membedah jQueryjQuery, pada intinya, adalah sebuah library yang berfungsi untuk memanipulasi DOM. DOM merupakan representasi struktural dari seluruh elemen pada

Page 39: Tik Tugas Upload

sebuah laman web. Keberadaan jQuery menjadikan kerja pencarian, penyeleksian, dan manipulasi elemen-elemen DOM menjadi simpel dan mudah.

Sebagai contoh, jQuery bisa dipergunakan untuk menemukan sebuah elemen dalam dokumen yang memiliki properti tertentu (misalnya: elemen dengan tag ` h1 `), kemudian mengubah satu atau beberapa atributnya (misalnya: warna, visibilitas), atau menjadikan elemen tersebut responsif terhadap suatu event (misalnya: klik mouse). Selain penyeleksian dan manipulasi DOM dasar, jQuery menyajikan sebuah paradigm baru pada penanganan event oleh JavaScript. Penugasan event dan pendefinisian fungsi event callback dapat dilakukan dengan satu langkah dalam satu lokasi di dalam kode. jQuery juga dikembangkan untuk mendayagunakan berbagai fungsionalitas JavaScript yang paling sering dipakai (misalnya: fade in atau fade out ketika menentukan visibilitas elemen, juga bermacam animasi yang dimunculkan dengan memanipulasi properti-properti CSS).

Keuntungan dari pemanfaatan

jQuery antara lain:

Memisahkan JavaScript dan HTML → Tanpa menggunakan atribut- atribut HTML untuk memanggil fungsi Javascript dalam penanganan event, jQuery bisa dipergunakan untuk menangani event dengan script JS saja.

Singkat dan Jelas → jQuery mengutamakan penulisan kode yang singkat dan jelas melalui berbagi fitur seperti fungsi-fungsi yang dapat dirangkaikan (chain-able ) dan nama- nama fungsi yang pendek.

Mengatasi masalah kompatibilitas antar- browser → JavaScript engine pada berbagai browser memiliki perbedaan satu sama lain, sehingga script yang berjalan pada suatu browser bisa gagal pada browser lainnya. jQuery mengatasi segala inkonsistensi antar- browser tersebut dan menyajikan antarmukayang konsisten bekerja pada semua browser.

Ekstensibel → jQuery menjadikan pengembangan framework sangat simpel. Berbagai event, elemen, dan metode baru dapat dengan mudah ditambahkan dan digunakan ulang sebagai plugin. Fitur-fitur jQuery jQuery memiliki fitur-fitur sebagai berikut: Penyeleksian elemen- elemen DOM menggunakan selector engine Sizzle. Sizzle merupakan perangkat lunak multiplatform sumber terbuka yang berawal sebagai proyek sampingan jQuery. Manipulasi DOM berdasarkan selector CSS yang memanfaatkan nama-nama dan atribut elemen, misalnya id dan

Page 40: Tik Tugas Upload

class, sebagai kriteria seleksi simpul-simpul DOM. Events Efek dan animasi AJAX Obyek-obyek deferred and promose untuk mengontrol pemrosesan asinkron Penguraian JSON Ekstensibilitas melalui plugin Sejumlah utilitas, misalnya: informasi agen pengguna ( user agent), deteksi fitur perangkat Metode-metode kompatibilitas yang tersedia secara bawaan pada browser-browser modern, namun membutuhkan pencadangan pada browser yang lebih tua, misalnya `inArray() ` dan `each ` Dukungan multi-browser Browser yang Didukung jQuery Baik versi 1.x maupun 2.x dari jQuery, keduanya mendukung “current-1 versions” (artinya versi stable terkini dari sebuah browser dan satu versi yang mendahuluinya) untuk Firefox, Google Chrome, Safari , dan Opera.

Versi 1.x juga mendukung IE 6 atau diatasnya. Sedangkan versi 2.x tidak lagi mendukung Internet Explorer 6 sampai 8 (yang mewakili kurang dari 28% dari seluruh browser yang digunakan) dan hanya mendukung

IE 9 dan selanjutnya.

Penggunaan jQuery Menautkan library Library jQuery adalah sebuah file JavaScript yang memuat seluruh fungsi-fungsi umum DOM, event, efek, dan Ajax. File ini bisa ditautkan dalam sebuah laman web ke salinan pada server lokal atau pada salinan yang disajikan melalui server public (CDN) antara lain: MaxCDN Google Microsoft ASP.NET cdnJs jsDelivr Untuk menautkan file jQuery pada server lokal, gunakan kode berikut:

<script

src="jquery.js"><

/script>

Untuk menggunakan CDN,

sisipkan kode berikut:

<script src="//

code.jquery.com/

jquery-2.1.1.min.

js"></script>

Gaya Penggunaan jQuery memiliki dua gaya

Page 41: Tik Tugas Upload

penggunaan:

Via fungsi $ → adalah factory method untuk obyek jQuery. Fungsi- fungsi semacam ini, kerap disebut sebagai commands (perintah), dapat dirangkaikan (chainable) sebab masing-masing menyajikan obyek.

Via fungsi $.-prefiks → fungsi-fungsi utilitas yang tidak dijalankan secara langsung pada obyek. Pada penggunaan tipikal, akses dan manipulasi atas simpul- simpul DOM diawali dengan pemanggilan fungsi $ menggunakan string selector CSS. Metode ini menghasilkan sebuah obyek jQuery yang merujuk pada elemen-elemen HTML yang sesuai.

Sebagai contoh,

$(“div.namaclass”) akan menghasilkan obyek dengan tipe “div” dan class “namaclass”. Simpul ini dapat dimanipulasi dengan menyambungkan satu atau beberapa fungsi jQuery di belakangnya.

Mode No-Conflict jQuery juga memuat mode .noConflict() yang melepaskan kontrol dari $ . Fitur ini sangat berguna jika jQuery digunakan bersama dengan library lainnya yang juga memakai penanda $ . Pada mode no-conflict , kita bisa menggunakan jQuery sebagai pengganti dari $ tanpa kehilangan fungsionalitasnyajQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML . Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah MIT dan

GPL.

Microsoft dan Nokia telah mengumumkan akan mengemas jQuery di platform mereka

[1] . Microsoft awalnya mengadopsinya dalam Visual Studio

[2] untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework , sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time mereka. Bacaan lanjutan Chaffer, Jonathon; Karl Swedberg (2007). Learning JQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques . Packt Publishing.

Page 42: Tik Tugas Upload

ISBN 978-18471925

Bibeault, Bear; Yehuda Katz

(2008). JQuery in Action. Manning

Publications Co.

ISBN 978-1933988351 .

Heilmann, Christian (2006).

Beginning JavaScript with DOM

scripting and Ajax . Apress.

ISBN 978-1590596807 . Diakses

tanggal 2009-05-04.

Darie, Cristian; Filip Chereches-

Tosa, Mihai Bucicia (2005). Ajax

And Php: Building Responsive Web

Applications. Packt Publishing.

ISBN 978-1904811824 .

Heilmann, Christian; Mark

Norman Francis (2007). Web

development solutions . Apress.

ISBN 978-1590598061 . Diakses

tanggal 2009-05-04..

jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John

Page 43: Tik Tugas Upload

Resig dan berlisensi ganda di bawah MIT dan GPL. jQuery merupakan sebuah library Javascript yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML, menangani event, animasi, efek dan memproses interaksi ajax. jQuery dirancang sedemikian rupa supaya membuat program menggunakan Javascript menjadi relatif sangat mudah. Sesuai slogan nya, write less, do more. Menulis kode lebih sedikit, tetapi melakukan pekerjaan lebih banyak.

jQuery ukurannya cukup kecil, sehingga tidak memperlambat proses loading blog yang kita buat. jQuery juga kompatibel dengan CSS3 dan yang tak kalah penting adalah jQuery bisa berjalan di semua browser – cross browser. Tanpa library seperti jQuery, menerapkan Javascript mungkin akan lebih sulit, terutama untuk pemula yang baru belajar Javascript. Plugin tambahan seperti JQuery UI (User Interface) semakin memudahkan kita mengembangkan blog yang cantik dan interaktif. Selain itu tersedia plugin-plugin lain yang semakin memperkaya kemampuan jQuery.

Penjelasan mengenai PHP

Page 44: Tik Tugas Upload

PHP: Hypertext Preprocessor[1] adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML . [2][3] PHP banyak dipakai untuk memrogram situs web dinamis. PHP dapat digunakan untuk membangun sebuah CMS.

Sejarah PHP

Pada awalnya PHP merupakan kependekan dari Personal Home Page (Situs personal). PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995 . Pada waktu itu PHP masih bernama Form Interpreted (FI), yang wujudnya berupa sekumpulan skrip yang digunakan untuk mengolah data formulir dari web. Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan menamakannya PHP/FI . Dengan perilisan kode sumber ini menjadi sumber terbuka, maka banyak pemrogram yang tertarik untuk ikut mengembangkan PHP.

Pada November 1997, dirilis PHP/FI 2.0. Pada rilis ini, interpreter PHP sudah diimplementasikan dalam program C. Dalam rilis ini disertakan juga modul-modul ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan.

Pada tahun 1997, sebuah perusahaan bernama Zend menulis ulang interpreter PHP menjadi lebih bersih, lebih baik, dan lebih cepat. Kemudian pada Juni 1998, perusahaan tersebut merilis interpreter baru untuk PHP dan meresmikan rilis tersebut sebagai PHP 3.0 dan singkatan PHP diubah

menjadi akronim berulang PHP:

Hypertext Preprocessing. Pada pertengahan tahun 1999, Zend merilis interpreter PHP baru dan rilis tersebut dikenal dengan PHP 4.0 . PHP 4.0 adalah versi PHP yang paling banyak dipakai pada awal abad ke-21. Versi ini banyak dipakai disebabkan kemampuannya untuk membangun aplikasi web kompleks tetapi tetap memiliki kecepatan dan stabilitas yang tinggi.

Pada Juni 2004 , Zend merilis PHP 5.0 . Dalam versi ini, inti dari interpreter PHP mengalami perubahan besar. Versi ini juga memasukkan model pemrograman berorientasi objek ke dalam PHP untuk menjawab perkembangan bahasa pemrograman ke arah paradigma berorientasi objek. Versi terbaru dari bahasa pemograman PHP adalah versi 5.6.4 yang resmi dirilis pada tanggal 18 Desember 2014.

Page 45: Tik Tugas Upload

Sintaksis Dasar Pembatas PHP hanya mengeksekusi kode yang ditulis dalam pembatas sebagaimana ditentukan oleh dasar sintaks PHP. Apapun di luar pembatas tidak diproses oleh PHP (meskipun teks PHP ini masih mengendalikan struktur yang dijelaskan dalam kode PHP. Pembatas yang paling umum adalah "<?php" untuk membuka dan "?>" Untuk menutup kode PHP.Tujuan dari pembatas ini adalah untuk memisahkan kode PHP dari kode diluar PHP, seperti HTML ,Javascript .

Variabel

Variabel diawali dengan symbol dolar $ . Pada versi php PHP 5 diperkenalkan jenis isyarat yang memungkinkan fungsi untuk memaksa mereka menjadi parameter objek dari class tertentu, array, atau fungsi. Namun, jenis petunjuk tidak dapat digunakan dengan jenis scalar seperti angka atau string. Contoh variabel dapat ditulis sebagai $nama_varabel. Penulisan fungsi, penamaan kelas, nama variabel adalah peka akan huruf besar (Kapital) dan huruf kecil . Kedua kutip ganda "" dari string memberikan kemampuan untuk interpolasi nilai variabel ke dalam string PHP. PHP menerjemahkan baris sebagai spasi, dan pernyataan harus diakhiri dengan titik koma ; .

Komentar

PHP memiliki 3 jenis sintaks

sebagai komentar pada kode yaitu

tanda blok / * * / , komentar

2 baris // Serta tanda pagar

# digunakan untuk komentar satu

baris. Komentar bertujuan untuk

meninggalkan catatan pada kode

PHP dan tidak akan diterjemahkan

ke program.

Fungsi

Ratusan fungsi yang disediakan oleh PHP serta ribuan lainnya yang tersedia melalui berbagai ekstensi tambahan. fungsi-fungsi ini didokumentasikan dalam dokumentasi PHP.

Page 46: Tik Tugas Upload

Namun, dalam berbagai tingkat pengembangan, kini memiliki berbagai konvensi penamaan. Sintaks fungsi adalah

seperti dibawah ini:

function tampilkan

( $data ="" )

// Mendefenisikan

fungsi, "tampilkan"

adalah nama sebuah

fungsi

{ //Diapit oleh

tanda kurung kurawal

if ($data ) return

$data ; else return

'Tidak ada

data' ; //

Melakukan proses pengolahan data, contohnya melalui

kondisi}

echo tampilkan( "isi halaman" ) //

Menjalankan fungsi

Contoh program Membuat Sebuah Halaman Web PHP

Sebuah Halaman web yang ditulis menggunakan Bahasa Pemograman PHP adalah sebagai berikut:

<?php

echo "Halo dunia" ;

Page 47: Tik Tugas Upload

?>

Program bilangan Fibonacci Berikut ini adalah contoh program yang relatif lebih kompleks yang ditulis dengan menggunakan PHP. Contoh program ini adalah program untuk menampilkan 20 bilangan pertama dari deret bilangan Fibonacci .terdapat beberapa variable atau sintax. Seperti function. itu merupakan bagian dari javascript.

<?php

function fibonacci_seq

( $panjang ) {

for( $l = array

( 0 ,1 ), $i = 2, $x =

0 ; $i < $panjang ; $i

++ )

$l [] = $l [ $x

++ ] + $l [ $x ];

return $l ;

}

fibonacci_seq( 20 );

// Angka "20" dapat

diganti sesuai

keinginan

?>

Kelebihan PHP Dari Bahasa Pemrograman Lain Beberapa kelebihan PHP dari bahasa pemrograman web, antara lain:

1. 'Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak melakukan sebuah kompilasi dalam penggunaannya.'

Page 48: Tik Tugas Upload

2. 'Web Server yang mendukung PHP dapat ditemukan dimana - mana dari mulai apache, IIS, Lighttpd, hingga Xitami dengan konfigurasi yang relatif mudah.'

3. 'Dalam sisi pengembangan lebih mudah, karena banyaknya milis - milis dan developer yang siap membantu dalam pengembangan.'

4. 'Dalam sisi pemahamanan, PHP adalah bahasa scripting yang paling mudah karena memiliki referensi yang banyak.'

5. 'PHP adalah bahasa open source yang dapat digunakan di berbagai mesin (Linux, Unix, Macintosh, Windows) dan dapat dijalankan secara runtime melalui console serta juga dapat menjalankan perintah-perintah system.'

Tipe data

PHP memiliki 8 tipe data, yaitu:

1. Boolean

2. Integer

3. Float / Double

4. String

5. Array

6. Object

7. Resource

8. NULL

Jika Anda baru saja mulai PHP, pastikan memulai dengan rilis stabil terbaru yaitu PHP 5.5 . Selama beberapa tahun terakhir ini, PHP telah membuat langkah besar dengan menambahkan fitur baru. Jangan tertipu oleh perbedaan versi minor antara 5.2 dan 5.5, karena sebenarnya itu adalah perubahan yang sangat besar. Jika Anda mencari fungsi atau penggunaannya, silakan kunjungi php.net . Web server bawaan Anda dapat mulai belajar PHP dengan menggunakan web server bawaan (minimal PHP 5.4). Untuk memulai server, jalankan perintah berikut dari terminal Anda dalam sebuah

Page 49: Tik Tugas Upload

directory:

> php -S

localhost:8000

Pelajari command line

pada web server

bawaan

Setup di Mac

OSX sudah dikemas dengan PHP, tetapi biasanya sedikit tertinggal dari versi terbaru. Lion datang dengan PHP 5.3.6, Mountain Lion membawa PHP 5.3.10, dan Mavericks membawa PHP 5.4.17. Untuk memperbarui PHP di OSX, Anda bisa menginstalnya melalui mac-package- managers, dan dianjurkan dengan [php-OSX oleh Liip] [php-osx-download]. Pilihan lainnya adalah dengan mengkompilasi sendiri , dalam kasus ini pastikan Xcode telah diinstal. Atau pengganti

[“Tools Command Line untuk Xcode”] Apple apple-developer dapat didownload dari Apple Mac Developer Center. Untuk paket “all-in-one” termasuk PHP, web server Apache, dan database MySQL, dengan kontrol yang baik dilengkapi GUI, cobalah [MAMP] [mamp-download] atau XAMPP .

Setup di Windows Ada beberapa cara untuk setup PHP di Windows. Anda dapat [men-download binari] [php-download]. Untuk proses belajar dan development di lokal, Anda dapat menggunakan built in webserver dengan PHP 5.4+ sehingga Anda tidak perlu mengkhawatirkan konfigurasi yang rumit.

Jika Anda ingin paket “all-in- one” yang mencakup webserver dan MySQL, paket seperti Web Platform Installer , Zend Server CE, XAMPP dan WAMP akan membantu memberikan environment di Windows.

Namun, harap berhati-hati karena paket ini akan sedikit berbeda dari environment produksi jadi berhati-hatilah dengan perbedaan lingkungan jika Anda bekerja pada Windows dan menggunakan untuk Linux.

Vagrant Seringkali developer menemukan masalah ketika menjalankan aplikasi pada saat development dan production . Masalah itu ditimbulkan karena perbedaan environment.

Page 50: Tik Tugas Upload

Misalkan developer membuat aplikasi di Windows, sedangkan server produksi menggunakan Linux. Masalah tersebut semakin terasa ketika anda bekerja dalam sebuah tim di mana setiap anggota menggunakan OS yang berbeda-beda. Salah seorang menggunakan Windows, satu orang menyukai MacOS, dan lainnya memilih Linux. Jika itulah yang Anda alami, mungkin ada baiknya Anda mempertimbangkan menggunakan mesin virtual dalam development . Kedengarannya rumit, tapi dengan menggunakan Vagrant , Anda dapat dengan mudah mengatur mesin virtual hanya

dalam beberapa langkah. Mesin virtual ini kemudian dapat diatur secara manual, atau Anda dapat menggunakan “provisioning” software seperti Puppet atau Chef untuk melakukannya. Provisioning mesin virtual adalah cara yang bagus untuk memastikan bahwa beberapa mesin ditetapkan dalam cara yang identik. Dan menghilangkan kebutuhan bagi Anda untuk men-setup nya secara manual. Anda bahkan dapat dengan mudah menghapus mesin virtual tersebut dan membuatnya lagi dari awal. Vagrant menciptakan shared folder yang digunakan untuk berbagi kode antara host dan mesin virtual Anda, yang berarti Anda dapat membuat dan mengedit file Anda pada mesin host Anda dan kemudian menjalankan kode di dalam mesin virtual Anda. Bantuan Singkat Jika Anda perlu sedikit bantuan untuk mulai menggunakan Vagrant ada tiga layanan yang mungkin berguna:

Rove: layanan yangt memungkinkan Anda untuk membangun mesin virtual Vagrant dengan bantuan Chef.

Puphpet: GUI sederhana untuk mengatur mesin virtual untuk pengembangan PHP. Selain VMs lokal, dapat digunakan untuk menyebarkan layanan cloud juga. Provisi ini dibuat dengan Puppet.

Protobox: adalah layer di atas vagrant dan GUI web untuk setup mesin virtual untuk pengembangan web. Sebuah dokumen YAML tunggal mengendalikan semuanya yang diinstal pada mesin virtual.

Ada beberapa cara untuk

setup PHP di Windows. Anda

dapat [men-download binari]

[php-download].

Page 51: Tik Tugas Upload

Untuk proses belajar dan

development di lokal, Anda

dapat menggunakan built in

webserver dengan PHP 5.4+

sehingga Anda tidak perlu

mengkhawatirkan konfigurasi

yang rumit.

Jika Anda ingin paket “all-in-

one” yang mencakup

webserver dan MySQL, paket

seperti Web Platform Installer ,

Zend Server CE, XAMPP dan

WAMP akan membantu

memberikan environment di

Windows.

Namun, harap berhati-hati

karena paket ini akan sedikit

berbeda dari environment

produksi jadi berhati-hatilah

dengan perbedaan lingkungan

jika Anda bekerja pada

Windows dan menggunakan

untuk Linux.

Vagrant

Page 52: Tik Tugas Upload

Seringkali developer

menemukan masalah ketika

menjalankan aplikasi pada

saat development dan

production . Masalah itu

ditimbulkan karena perbedaan

environment. Misalkan

developer membuat aplikasi di

Windows, sedangkan server

produksi menggunakan Linux.

Masalah tersebut semakin

terasa ketika anda bekerja

dalam sebuah tim di mana

setiap anggota menggunakan

OS yang berbeda-beda. Salah

seorang menggunakan

Windows, satu orang menyukai

MacOS, dan lainnya memilih

Linux.

Jika itulah yang Anda alami,

mungkin ada baiknya Anda

mempertimbangkan

menggunakan mesin virtual

dalam development .

Page 53: Tik Tugas Upload

Kedengarannya rumit, tapi

dengan menggunakan Vagrant ,

Anda dapat dengan mudah

mengatur mesin virtual hanya

dalam beberapa langkah.

Mesin virtual ini kemudian

dapat diatur secara manual,

atau Anda dapat menggunakan

“provisioning” software

seperti Puppet atau Chef

untuk melakukannya.

Provisioning mesin virtual

adalah cara yang bagus untuk

memastikan bahwa beberapa

mesin ditetapkan dalam cara

yang identik. Dan

menghilangkan kebutuhan

bagi Anda untuk men-setup

nya secara manual. Anda

bahkan dapat dengan mudah

menghapus mesin virtual

tersebut dan membuatnya lagi

dari awal.

Vagrant menciptakan shared

Page 54: Tik Tugas Upload

folder yang digunakan untuk

berbagi kode antara host dan

mesin virtual Anda, yang

berarti Anda dapat membuat

dan mengedit file Anda pada

mesin host Anda dan

kemudian menjalankan kode

di dalam mesin virtual Anda.

Bantuan Singkat

Jika Anda perlu sedikit

bantuan untuk mulai

menggunakan Vagrant ada tiga

layanan yang mungkin

berguna:

Rove: layanan yang

memungkinkan Anda

untuk membangun

mesin virtual Vagrant

dengan bantuan Chef.

Puphpet: GUI

sederhana untuk

mengatur mesin virtual

untuk pengembangan

PHP. Selain VMs lokal,

Page 55: Tik Tugas Upload

dapat digunakan untuk

menyebarkan layanan

cloud juga. Provisi ini

dibuat dengan Puppet.

Protobox: adalah layer

di atas vagrant dan GUI

web untuk setup mesin

virtual untuk

pengembangan web.

Sebuah dokumen YAML

tunggal mengendalikan

semuanya yang diinstal

pada mesin virtual.

Kembali ke atas

Panduan Code

Style

Komunitas PHP sangatlah

besar dan beragam. Ada

banyak library , framework, dan

component yang sudah

tersedia. Dalam memilih

library- library dan framework

ini dan menggunakannya

dalam sebuah proyek,

Page 56: Tik Tugas Upload

developer perlu mematuhi

aturan code style yang

digunakan pada framework

tersebut.

The PHP Framework Interop

Group telah mengusulkan dan

menyetujui serangkaian

rekomendasi gaya

pengkodean. Meskipun tidak

semuanya terkait dengan code

style, tapi mereka yang

merumuskan PSR-0 , PSR-1 ,

PSR-2 dan PSR-4 .

Rekomendasi ini hanyalah

seperangkat aturan dan sudah

diadopsi oleh beberapa proyek

seperti Drupal, Zend, Symfony,

CakePHP, phpBB, AWS SDK,

FuelPHP, Lithium, dll. Anda

dapat memilih antara

mengikuti PSR untuk proyek-

proyek Anda sendiri, atau

terus menggunakan gaya

pribadi Anda sendiri.

Page 57: Tik Tugas Upload

Idealnya Anda harus menulis

kode PHP yang mematuhi

standar yang dikenal. Ini bisa

berupa kombinasi dari PSR,

atau satu standar coding yang

dibuat oleh PEAR atau Zend.

Ini berarti developer lain dapat

dengan mudah membaca dan

bekerja dengan kode Anda,

dan aplikasi yang menerapkan

komponen dapat memiliki

konsistensi bahkan ketika

bekerja dengan banyak kode

pihak ketiga.

Baca tentang PSR-0

Baca tentang PSR-1

Baca tentang PSR-2

Baca tentang PSR-4

Baca tentang PEAR

Coding Standards

Baca tentang Zend

Coding Standards

Baca tentang Symfony

Coding Standards

Page 58: Tik Tugas Upload

Anda dapat menggunakan

PHP_CodeSniffer untuk

memeriksa kode terhadap

salah satu dari rekomendasi

tersebut, dan plugin untuk

editor teks seperti Text

Sublime 2 dapat memberikan

feedback secara real time.

Gunakan tools dari Fabien

Potencier ini PHP Coding

Standards Fixer untuk secara

otomatis mengubah sintaks

kode Anda sehingga sesuai

dengan standar-standar ini,

menghemat waktu untuk

memperbaiki setiap masalah

secara manual.

Bahasa Inggris lebih disukai

untuk semua nama simbol dan

infrastruktur kode. Komentar

dapat ditulis dalam bahasa

yang mudah dibaca oleh

semua pihak saat ini dan masa

depan yang akan mengerjakan

Page 59: Tik Tugas Upload

source code tersebut.

Kembali ke atas

Gambaran

Bahasa PHP

Paradigma

Pemrograman

PHP adalah bahasa

pemrograman fleksibel,

dinamis, dan mendukung

berbagai teknik pemrograman.

Perkembangan yang sangat

pesat telah terjadi di PHP

selama bertahun-tahun,

terutama dukungan terhadap

pemrograman berorientasi

objek (OOP) di PHP 5.0 (2004),

anonymous function dan

namespace di PHP 5.3 (2009),

dan trait di PHP 5.4 (2012).

Pemrograman Berorientasi

Object

PHP sangat mendukung

pemrograman berorientasi

obyek termasuk dukungan

Page 60: Tik Tugas Upload

untuk class , abstract class,

interface, inheritance,

constructor, cloning, exception,

dan banyak lagi.

Baca tentang

Pemrograman

Berorientasi Object

pada PHP

Baca tentang Traits

Pemrograman Fungsional

PHP mendukung first class

function, yang berarti bahwa

fungsi dapat dimasukkan ke

dalam sebuah variabel. Kedua

user-defined dan built-in

fungsi dapat direferensikan

oleh variabel dan dipanggil

secara dinamis. Fungsi dapat

disahkan sebagai argumen

untuk lainnya fungsi (fitur

yang disebut fungsi-order yang

lebih tinggi) dan fungsi dapat

kembali fungsi lainnya.

Rekursi, sebuah fitur yang

Page 61: Tik Tugas Upload

memungkinkan fungsi untuk

menyebut dirinya didukung

oleh bahasa, tetapi sebagian

besar fokus kode PHP pada

iterasi.

Fungsi anonim baru (dengan

dukungan untuk penutupan)

yang hadir sejak PHP 5.3

(2009).

PHP 5.4 menambahkan

kemampuan untuk mengikat

penutupan untuk lingkup

obyek dan juga meningkatkan

dukungan untuk callables

sehingga mereka dapat

digunakan secara bergantian

dengan fungsi anonim di

hampir semua kasus.

Lanjutkan membaca

Pemrograman

Fungsional pada PHP

Baca tentang

Anonymous Functions

Baca tentang the

Page 62: Tik Tugas Upload

Closure class

Baca lebih lanjut di the

Closures RFC

Baca tentang Callables

Baca tentang

dynamically invoking

functions dengan

call_user_func_

array

Pemrograman Meta

PHP mendukung berbagai

bentuk meta-pemrograman

melalui mekanisme seperti API

Refleksi dan Metode Sihir. ada

Metode Sihir banyak tersedia

seperti __get () , __set

() , __clone () ,

__toString () , __invoke

() , dll yang memungkinkan

pengembang untuk

menghubungkan ke perilaku

kelas. Pengembang Ruby

sering mengatakan bahwa PHP

kurang method_missing ,

Page 63: Tik Tugas Upload

tetapi tersedia sebagai

__call () dan

__callStatic () .

Baca tentang Magic

Methods

Baca tentang Reflection

Namespaces

Sebagaimana disebutkan di

atas, komunitas PHP memiliki

banyak pengembang

menciptakan banyak kode. Ini

berarti bahwa kode PHP

sebuah library dapat

menggunakan nama kelas

yang sama dengan

perpustakaan lain. Ketika

kedua perpustakaan

digunakan dalam namespace

yang sama, mereka

bertabrakan dan menyebabkan

masalah.

Namespaces memecahkan

masalah ini. Seperti dijelaskan

dalam manual referensi PHP,

Page 64: Tik Tugas Upload

ruang nama dapat

dibandingkan ke direktori

sistem operasi yang namespace

file; dua file dengan nama

yang sama dapat hidup

berdampingan dalam direktori

terpisah. Demikian juga, dua

kelas PHP dengan nama yang

sama dapat hidup

berdampingan dalam PHP

terpisah namespaces. Ini

sesederhana itu.

Hal ini penting bagi Anda

untuk memberikan namespace

pada kode Anda sehingga

dapat digunakan oleh

pengembang lain tanpa rasa

takut bertabrakan dengan

library lain.

Salah satu cara yang

direkomendasikan untuk

menggunakan namespaces

diuraikan dalam PSR-0 , yang

bertujuan untuk memberikan

Page 65: Tik Tugas Upload

file standar, kelas dan

namespace konvensi untuk

memungkinkan kode plug-and-

play.

Pada bulan Desember 2013

PHP-FIG menciptakan standar

baru autoloading: PSR-4 , yang

suatu saat akan mungkin

menggantikan PSR-0. Saat ini

keduanya masih digunakan,

PSR-4 membutuhkan PHP 5.3

dan banyak proyek yang masih

menggunakan PHP 5.2 yang

saat ini menerapkan PSR-0.

Jika Anda akan menggunakan

standar autoloader untuk

aplikasi atau library baru

maka Anda hampir pasti ingin

lebih tau tentang PSR-4.

Baca tentang

Namespaces

Baca tentang PSR-0

Baca tentang PSR-4

Standard PHP

Page 66: Tik Tugas Upload

Library

Standard PHP Library (SPL)

dikemas bersamaan dengan

PHP dan menyediakan

sekumpulan class dan

interface. SPL terdiri dari class

dan interface struktur data

yang umumnya diperlukan

seperti stack , queue, heap , dan

sebagainya. Juga iterator yang

dapat traverse struktur data

tersebut yang dapat Anda

implementasikan sendiri

menggunakan interface SPL.

Baca tentang SPL

Command Line

Interface

Pada dasarnya, PHP diciptakan

untuk menulis aplikasi web.

Akan tetapi PHP juga berguna

untuk scripting program

command line interface (CLI).

CLI dengan PHP dapat

membantu Anda

Page 67: Tik Tugas Upload

mengotomatisasi tugas-tugas

umum seperti pengujian,

distribusi, dan aplikasi

administratif.

Program CLI PHP sangat

bermanfaat karena Anda

dapat menggunakan kode

aplikasi Anda secara langsung

tanpa harus membuat dan

mengamankan web GUI untuk

itu. Hanya pastikan untuk

tidak menempatkan script CLI

PHP di root web publik Anda!

Coba jalankan PHP dari baris

perintah Anda:

> php -i

Opsi -i akan menampilkan

konfigurasi PHP Anda seperti

fungsi phpinfo .

Mari kita menulis “Hello, $

name” Program CLI

sederhana. Untuk mencobanya,

membuat file bernama

hello.php , seperti di bawah

Page 68: Tik Tugas Upload

ini.

<?php

if ( $argc != 2)

{

echo "Usage

: php hello.php

[name].\n" ;

exit (1 );

}

$name = $argv [1

];

echo "Hello, $

name\n" ;

PHP set up dua variabel

khusus berdasarkan argumen

apa script Anda dijalankan. $

argc adalah variabel integer

yang berisi argumen * count *

dan $ argv adalah variabel

array yang berisi nilai * setiap

argumen *. Argumen pertama

selalu nama file script PHP

Anda, dalam hal ini

hello.php .

Page 69: Tik Tugas Upload

Expresi exit () digunakan

dengan nomor selain nol untuk

memberitahu shell bahwa

perintah gagal. Kode keluar

yang umum digunakan dapat

ditemukan [di sini] [exit-

kode].

Untuk menjalankan script kita

di atas, jalankan baris

perintah:

> php hello.php

Usage: php

hello.php [ name

]

> php hello.php

world

Hello, world

Pelajari tentang

menjalankan PHP dari

command line

Pelajari tentang setting

Windows untuk

menjalankan PHP dari

command line

Page 70: Tik Tugas Upload

XDebug

Salah satu alat yang paling

berguna dalam pengembangan

perangkat lunak adalah

debugger yang tepat. Hal ini

memungkinkan Anda untuk

melacak pelaksanaan kode

Anda dan memantau isi stack.

XDebug, debugger PHP, dapat

dimanfaatkan oleh berbagai

IDE untuk memberikan

Breakpoints dan tumpukan

inspeksi. Hal ini juga dapat

memungkinkan alat seperti

PHPUnit dan KCacheGrind

untuk melakukan analisis code

scope dan code profile .

Jika Anda telah menggunakan

var_dump / print_r, dan Anda

masih tidak dapat menemukan

solusi - mungkin Anda perlu

menggunakan debugger.

Instalasi XDebug bisa jadi

cukup rumit, tetapi salah satu

Page 71: Tik Tugas Upload

fitur yang paling penting

adalah “Remote Debugging” -

jika Anda mengembangkan

kode lokal dan kemudian

mengujinya di dalam VM atau

server lain, Remote Debugging

adalah fitur yang Anda akan

ingin mengaktifkannya segera.

Secara tradisional, Anda akan

memodifikasi file htaccess

Apache VHost atau dengan

nilai-nilai ini.:

php_value

xdebug.remote_

host=192.168.?.

?

php_value

xdebug.remote_

port=9000

“remote host” dan “remote

port” akan sesuai dengan

komputer lokal Anda dan port

yang Anda mengkonfigurasi

IDE untuk mendengarkan

Page 72: Tik Tugas Upload

pada. Maka itu hanya masalah

menempatkan IDE Anda ke

dalam “mendengarkan

koneksi” mode, dan memuat

URL:

http://your-

website.example

.com/index.php?

XDEBUG_SESSION_

START=1

IDE Anda sekarang akan

mencegat keadaan saat ini

sebagai script yang dieksekusi,

yang memungkinkan Anda

untuk mengatur breakpoints

dan probe nilai-nilai dalam

memori.

Debugger grafis membuatnya

sangat mudah untuk langkah

melalui kode, memeriksa

variabel, dan kode eval

terhadap runtime hidup.

Banyak IDE ini telah built-in

atau dukungan berbasis-plugin

Page 73: Tik Tugas Upload

untuk debugging grafis dengan

Xdebug. MacGDBp adalah tool

gratis, open-source, berdiri

sendiri Xdebug GUI untuk

Mac.

Pelajari lebih lanjut

tentang XDebug

Pelajari lebih lanjutent ang MacGDBp

Penjelasan mengenai js/java scrivpt

JavaScript adalah bahasa pemrograman berbasis java yang merupakan interface pembantu dalam pemrograman web. JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT. [3]

Sejarah

JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape dibawah nama Mocha , yang nantinya namanya diganti menjadi LiveScript, dan akhirnya menjadi JavaScript. [4] [5] Navigator sebelumnya telah mendukung Java untuk lebih bisa dimanfaatkan para programmer yang non-Java. [6] Maka dikembangkanlah bahasa pemrograman bernama LiveScript untuk mengakomodasi hal tersebut. [6] Bahasa pemrograman inilah yang akhirnya berkembang dan diberi nama JavaScript, walaupun tidak ada hubungan bahasa antara Java dengan JavaScript. [6]

JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk membuat efek rollover baik di gambar maupun teks, dan yang penting juga adalah untuk membuat AJAX. [6] JavaScript adalah bahasa yang digunakan untuk AJAX. [6] Penulisan JavaScript Kode JavaScript biasanya dituliskan dalam bentuk fungsi yang ditaruh

Page 74: Tik Tugas Upload

di tag <head> yang dibuka dengan

tag <script type="text/

javascript"> . [7]

<script type= "text/

javascript" >

alert( "Halo

Dunia!" );

</script> Kode JavaScript juga bisa diletakkan di file tersendiri yang berekstensi .js (singkatan dari JavaScript). [7] Untuk memanggil kode JavaScript yang terdapat di file sendiri, di bagian awal <head> harus ditentukan dahulu nama file .js yang dimaksud menggunakan contoh kode seperti berikut: [7]

<script type= "text/

javascript"

src= "alamat.js" >

</script>

Skrip di head Skrip ini akan dieksekusi ketika dipanggil (biasanya berbentuk function) atau dipanggil berdasarkan trigger pada event tertentu. [7] Peletakkan skrip di head akan menjamin skrip dimuat terlebih dahulu sebelum dipanggil.

[7]

<html>

<head>

<script type= "text/

javascript" >

...

</script>

Page 75: Tik Tugas Upload

</head>

</html>

Skrip di body Skrip ini dieksekusi ketika halaman dimuat sampai di bagian <body> . [7] Ketika menempatkan skrip pada bagian <body> berarti antara isi dan JavaScript dijadikan satu bagian. [7]

<html>

<head>

</head>

<body>

<script type= "text/

javascript" >

...

</script>

</body>

</html>

Jumlah JavaScript di <head> dan

<body> yang ditempatkan pada

dokumen tidak terbatas. [7]

Skrip eksternal Terkadang ada yang menginginkan menjalankan JavaScript yang sama dalam beberapa kali pada halaman yang berbeda, tetapi tidak mau disibukkan jika harus menulis ulang script yang diinginkan di setiap halaman. [7] Maka JavaScript dapat ditulis di file secara eksternal. [7] Jadi, antara dokumen HTML dan JavaScript dipisahkan, kemudian berkas tersebut dipanggil dari dokument HTML. [7] Berkas JavaScript tersebut disimpan dengan ekstensi .js. [7]

JavaScript : js/xxx.js

document.write("pesan ini

Page 76: Tik Tugas Upload

tampil ketika halaman

diload");

Untuk menggunakan eksternal

JavaScript (.js) dipakai atribut

"src" pada tag <script> pada

halaman HTML-nya. [7]

<html>

<head>

</head>

<body>

<script src= "xxx.js" >

</script>

<p> Script di atas

berada di berkas

"xx.js" (eksternal) </

p>

</body>

</html>

Adaptasi JavaScript di Wikipedia Biasanya JavaScript digunakan sebagai peralatan (tool/gadget) pada halaman pengguna. Fungsinya bermacam-macam, misalnya peralatan guna menambah kategori dengan lebih mudah, contohnya dapat dilihat pada : HotCat .

Apabila anda ingin menyertakan tautan halaman ini, untuk menjelaskan setiap pengguna untuk mengaktifkan javascript dalam lima peramban web yang paling banyak digunakan. Anda bebas menggunakan kode dibawah ini dan memodifikasinya sesuai kebutuhan anda.

Page 77: Tik Tugas Upload

<noscript>

Agar fungsi di situs ini lebih baik, anda perlu mengaktifkan JavaScript.

Berikut ini adalah

<a href="http://

www.enable-

javascript.com/id/"

target="_blank">

petunjuk cara mengaktifkan

JavaScript</a> di

peramban web Anda.

</noscript>

Pada enable-javascript.com kita mengoptimalkan pengguna yang belum mengaktifkan script sebanyak mungkin:

The instructions for your browser are put at the top of the page All the images are inlined, full- size, for easy perusing This developer-centric message is out of the way.

Kami ingin pengunjungmu untuk mengaktifkan JavaScript seperti kamu!

Opera

1. a) Klik "Menu", arahkan penunjuk pada "Settings" kemudian dekatkan kursor penunjuk pada "Quick preferences" dan centang kotak "Enable Javascript".

1. b) Jika "Menu bar" muncul, klik "Tools", dekatkan kursor penunjuk pada "Quick preferences" dan centang kotak "Enable Javascript".

1. a)

1. b)

Internet

Page 78: Tik Tugas Upload

Explorer

1. Pada menu peramban web klik ikon "Tools" dan pilih "Internet Options".

2. Pada jendela "Internet Options" pilih bagian "Security".

3. Pada bagian "Security" klik tombol "Custom level...".

4. Ketika jendela dialog "Security Settings - Internet Zone" terbuka, temukan bagian "Scripting" section.

5. Pada bagian "Active Scripting" pilih "Enable".

6. Ketika jendela "Peringatan!" tambil dan menanyakan "Are you sure you want to change the settings for this zone?" pilih

"Yes".

7. Pada jendela "Internet Options" klik tombol "OK" dan tutup jendela peramban web.

8. Klik tombol "Refresh" pada web browser untuk membuka ulang halaman.

Internet Explorer < 9

1. Pada menu peramban web klik "Tools" dan pilih "Internet Options".

2. Pada jendela "Internet Options" pilih bagian "Security".

3. Pada bagian "Security" klik tombol "Custom level...".

4. Ketika jendela dialog "Security Settings - Internet Zone" terbuka, temukan bagian "Scripting" section.

5. Pada bagian "Active Scripting" pilih "Enable".

6. Ketika jendela "Peringatan!" tambil dan menanyakan "Are you sure you want to change the

settings for this zone?" pilih "Yes".

7. Pada jendela "Internet Options" klik tombol "OK" dan tutup jendela peramban web.

8. Klik tombol "Refresh" pada web browser untuk membuka ulang

halaman.

Page 79: Tik Tugas Upload

Mozilla

Firefox

1. Pada baris alamat, ketik about:config dan tekan Enter.

2. Klik "I'll be careful, I promise" jika muncul pesan peringatan.

3. Pada kotak pencarian, temukan javascript.enabled.

4. Mengaktifkan pengaturan "javascript.enabled" (klik kanan dan pilih "Toggle" atau klik dua kali preference) untuk mengubah nilai dari "false" menjadi "true".

5. Klik tombol "Reload current page" dari peramban web untuk

membuka ulang halaman.

Google Chrome

1. Pada menu di peramban web klik "Customize and control Google Chrome" dan pilih "Settings".

2. Pada bagian "Settings" kli "Show advanced settings..."

3. Di bawah "privacy" klik pada "Content settings...".

4. Ketika jendela dialog terbuka, temukan bagian "JavaScript"dan pilih "Allow all sites to run JavaScript (disarankan)".

5. Klik tombol "OK" dan tutup jendela bowser

6. Tutup tab "Settings".

7. Klik pada tombol "Reload this page" dari browser web untuk

membuka ulang halaman.

Apple Safari

1. Pada menu peramban web, klik "Edit" dan pilih "Preferences".

Page 80: Tik Tugas Upload

2. Pada jendela "Preferences" pilih bagian "Security".

3. Di bagian "Security" cari "Web content" , centang kotak "Enable JavaScript".

4. Klik tombol the "Reload the current page" pada web browser

untuk me-refresh halaman.

Berikut ini adalah 7 hal sederhana dari Javascript, yang jika Anda telah menggunakan Javascript, berharap bahwa Anda mengetahuinya lebih awal.

1. Shortcut untuk notasi Ada beberapa cara cepat untuk proses notasi dalam Javascript. Salah satunya,

biasanya dalam mendeklarasikan suatu object, kita menulis: Namun hal yang sama ternyata bisa dibuat

seperti ini:

Dengan demikian, penulisan menjadi lebih singkat karena tidak perlu menuliskan nama object berulang kali. Jika hanya object dengan variable sedikit seperti ini, tidak masalah jika menggunakan cara pertama. Tapi bagaimana jika object tersebut memiliki puluhan variable yang harus dideklarasikan di awal?

Shortcut lainnya yang menarik adalah dalam mendeklarasikan sebuah Array. Cara lama mendeklarasikan array tersebut adalah seperti ini:

Hasil yang sama bisa didapatkan dengan cara:

Lebih sederhana karena tidak perlu menuliskan kata “new Array” di awal. Dan cara cepat notasi yang paling menarik adalah pada notasi kondisi (if). Sehingga, penggunaan

kondisi seperti ini:

dapat dipersingkat dalam satu baris menjadi: Bagian yang ada dalam tanda kurung adalah kondisi yang disyaratkan. Tanda kurung tersebut hanya memudahkan pembacaan, sehingga Anda bisa menghilangkannya jika tidak memerlukannya. Isi setelah tanda tanya (?) dan sebelum tanda titik dua (:) adalah nilai yang dipilih jika kondisi bernilai true. Sedangkan isi setelah tanda titik dua di bagian akhir adalah nilai yang dipilih jika kondisi bernilai false. Anda bisa mengaplikasikan trik ini pada banyak bagian kode program.

Page 81: Tik Tugas Upload

2. Format data JSON Sebelum mengetahui car penggunaan JSON untuk menyimpan data, biasanya programmer menyimpannya dalam bentuk array multi dimensi, string dengan tanda pemisah, dan cara lainnya yang cukup menyulitkan. Tapi dengan adanya JSON, Anda bisa menyimpan data kompleks dalam format native javascript dan tanpa perlu segala macam proses konversi. JSON adalah singkatan dari JavaScript Object Notation, yang sebenarnya memanfaatkan notasi- notasi yang telah dijelaskan pada poin pertama di atas.

Jadi, jika Anda ingin mendeklarasikan sebuah band, maka dapat ditulis sebagai berikut.

Setelah itu, Anda bisa mengaksesnya seperti biasa. Bahkan JSON ini bisa menjadi penghubung format data antara PHP dengan Javascript. Dalam PHP, tersedia fungsi

json_encode() dan json_decode() untuk memudahkannya.

3. Fungsi-fungsi native

Javascript Beberapa fungsi umum sebenarnya sudah tersedia dalam javascript, terutama untuk fungsi matematika dan manipulasi string. Dengan demikian Anda tidak perlu membuat banyak perulangan lagi beserta kondisi dan fungsi-fungsinya. Sebagai contoh, ketika mencari angka terbesar dalam sebuah array, biasanya menggunakan perulangan

seperti ini:

Padahal sebenarnya dapat dipermudah tanpa menggunakan perulangan, yaitu dengan mengurutkan nilai-nilai tersebut. Fungsi sort() sudah terdapat dalam semua array. Setelah diurutkan, maka nilai yang diambil adalah nilai yang terbesar. Proses pengurutannya sesuai dengan fungsi yang dimasukkan sebagai parameter.

Cara lainnya adalah dengan menggunakan method Math.max(). Fungsi ini mengembalikan nilai terbesar dari sekumpulan parameter yang dimasukkan. Fungsi lain yang powerful untuk memanipulasi string adalah split() dan

join(). Salah satu contoh pemanfaatannya adalah pada saat ingin menambahkan class css pada suatu elemen html. Ketika akan menambahkan class dalam sebuah elemen DOM, semisal div, maka yang harus diperhatikan adalah menambahkan spasi di akhir class tersebut jika peletakannya di paling awal class yang sudah ada, atau menambahkan spasi sebelum class tersebut jika peletakannya di paling akhir class yang sudah ada. Ketika

Page 82: Tik Tugas Upload

menghapus class tersebut, harus diperhatikan juga untuk menghilangkan spasi yang ada, karena bisa berdampak pada browser-browser lama yang tidak support hal tersebut.

Cara konvensional adalah dengan langkah sebagai berikut.

Hal tersebut cukup merepotkan, karena ada banyak kondisi yang harus dipenuhi. Namun bisa dipermudah dengan sedikit manipulasi string sederhana menggunakan fungsi split dan join tersebut, menjadi sebagai berikut.

Jadi intinya adalah mengubah string dari nama-nama class yang sudah ada menjadi bentuk array, kemudian menambahkan class yang baru. Setelah itu menggabungkan array tersebut menjadi satu string utuh kembali dengan pemisah berupa spasi.

4. Delegasi event

Penggunaan delegasi event membuat aplikasi berbasis web menjadi semakin hidup. Sebagai contoh, suatu elemen DOM jika diklik akan menjalankan suatu proses tertentu yang berbasis javascript. Biasanya, untuk memberikan handler pada banyak elemen dalam satu parent dilakukan dalam proses perulangan. Tapi ada cara yang lebih mudah, yaitu mendefinisikannya pada parent-nya saja. Sebagai contoh untuk kode html sebagai berikut.

Cara klasik yang digunakan untuk memberikan event adalah sebagai berikut. Namun cara ini dapat dipersingkat menjadi. Karena event klik terjadi pada semua elemen, maka cukup membandingkan apakah elemen tersebut adalah elemen “a” atau bukan. Dengan demikian akan mempersingkat penulisan kode program menjadi lebih sederhana.

5. Anonymous functions dan pattern singleton Salah hal yang cukup merepotkan dalam Javascript adalah tidak adanya scope dari variable. Semua variable, fungsi, object, dan array yang tidak terdapat dalam suatu fungsi lainnya dianggap sebagai variable global, yang artinya jika ada script lain yang mendeklarasikan nama yang sama, akan tertumpuk menjadi nilai yang paling akhir.

Cara untuk mengatasinya adalah dengan membuat anonymous function (fungsi tanpa nama), kemudian langsung memanggilnya. Contohnya, jika menggunakan cara biasa, maka kode di bawah ini akan menghasilkan 3 variable global dan 2 fungsi global. Dengan kode ini, semua script pada halaman yang menggunakan variable name akan terganggu. Untuk menanggulanginya, adalah dengan memasukkannya dalam sebuah fungsi.

Anda bisa membuatnya menjadi fungsi tanpa nama. Sayangnya kedua hal tersebut tidak memungkinkan variable dan fungsi di dalamnya untuk bisa diakses dari luar fungsi. Caranya

Page 83: Tik Tugas Upload

adalah dengan mengembalikan property berupa fungsi createMember() dan getMemberDetails() tersebut, sehingga kode program akan menjadi sebagai berikut. Bentuk pemrograman seperti ini dinamakan dengan design pattern singleton, dan banyak digunakan pada library javascript Yahoo User Interface (YUI). Selain penggunaan seperti contoh di atas, anonymous function juga bsia diterapkan pada banyak kasus lainnya.

6. Berikan kemudahan

Konfigurasi Setiap mengambil potongan kode javascript dari internet, mau tidak mau ada bagian yang harus diubah untuk menyesuaikan dengan kode yang telah kita miliki. Terkadang hal tersebut cukup mudah, namun bisa saja menjadi sangat sulit jika kode program tersebut sangatlah kompleks. Salah satu cara untuk mengatasi ini adalah membuat kode tersebut dapat dikonfigurasi menjadi lebih fleksibel. Langkah pembuatannya cukup mudah, seperti berikut. Buat sebuah object khusus menyimpan nilai konfigurasi kode program. Di dalamnya, deklarasikan variable- variable yang biasanya sering diubah olehorang yang menggunakan, antara lain adalah id dan nama class dalam CSS, label untuk button, nilai yang ditampilkan, dan sebagainya. Object tersebut harus memiliki akses public agar bisa diakses bagian lain.

Dengan demikian,

potongan kode program Anda dapat dijalankan pada berbagai kondisi tanpa perlu membuka ulang dan mengubah fungsi-fungsi yang sudah ada.

7. Harus support semua browser? Buang-buang waktu. Gunakan Library. Seperti yang diketahui, anatomi setiap browser bisa berbeda-beda dalam menerjemahkan bahasa javascript. Mempelajarinya akan membutuhkan waktu dan usaha yang tidak sedikit. Sebut saja ada beberapa browser umum seperti firefox, chrome, safari, opera, dan internet explorer. Tidak hanya mempelajari saat ini saja, tapi juga harus mempelajari versi-versi sebelumnya dan harus siap jika ada versi baru muncul. Karena itu, penggunaan library sangat disarankan.

Library adalah sekumpulan kode yang berisi fungsi-fungsi siap pakai untuk program Anda. Beberapa library sudah dapat mengatasi perbedaan anatomi web browser umum. Anda tinggal menggunakan fungsi-fungsi yang tersedia. Beberapa library javascript yang banyak digunakan antara lain adalah jQuery, MooTools, Prototype, Dojo Toolkit, ExtJS, dan YUI.

Page 84: Tik Tugas Upload

Anda bisa mengunjungi masing- masing websitenya dan mempelajari library mana yang paling cocok untuk Anda gunakan.

1. Ukuran file kecil

Script dari javascript memiliki ukuran

yang kecil sehingga ketika web yang

memiliki javascript ditampilkan di

browser maka akses tampilannya akan

lebih cepat dibandingkan ketika

browser membuka suatu web yang

memiliki script java. Hal ini juga

sangat berkepentingan dengan daya

kerja server. Semakin kecil space

suatu web yang disimpan dalam suatu

server maka daya kerja server ketika

di browsing oleh user di internet

akan tidak terlalu berat, selain itu

sifat javascript client side yang tidak

perlu lagi di olah oleh server ketika

browser memanggil web dari sebuah

server.

2. Mudah untuk dipelajari

Javascript merupakan bahasa semi

pemograman yang merupakan

Page 85: Tik Tugas Upload

gabungan antara bahasa pemograman

java dengan bahasa kode HTML

sehingga disebut bahasa hybrid.

Walaupun javascript merupakan

turunan dari java namun javascript

tidak memiliki aturan yang serumit

java.

3. Terbuka

Javascript tidak terikat oleh

hardware maupun software tertentu

bahkan system operasi seperti

windows maupun unix. Karena ia

bersifat terbuka, maka ia dapat

dibuat maupun di baca di semua jenis

komputer.

Kekurangan Javascript

1. Script tidak terenkripsi

Karena javascript bersifat client

side, maka script yang kita buat di

text editor dan telah dijadikan web

di server, ketika user me-request

web dari server tersebut maka sintak

javascript akan langsung ditampilkan

di browser. User bisa melihat dan

Page 86: Tik Tugas Upload

menirunya dari sourcenya.

2. Kemampuan terbatas

Walaupun javascript mampu membuat

bentuk web menjadi interaktif dan

dinamis, namun javascript tidak

mampu membuat program aplikasi

sendiri seperti java.

3. Keterbatasan Objek

Javascript tidak mampu membuat

kelas-kelas yang bisa menampung

objek-objek tambahan seperti java

karena javascript teleh memiliki

objek yang built-in pada sturktur

bahasanya.