Contoh Ordered List:

1. S1 Pendidikan Teknologi Informasi
2. D3 Manajemen Informatika
3. S1 Sistem Informasi

1. Apel
2. Pisang
3. Mangga
4. Jambu

1. Apel
2. Pisang
3. Mangga
4. Jambu

1. Apel
2. Pisang
3. Mangga
4. Jambu

1. Apel
2. Pisang
3. Mangga
4. Jambu

1. Apel
2. Pisang
3. Mangga
4. Jambu

dan diakhiri dengan tag

Contoh Unordered List:

• Candi Borobudur
• Candi Prambanan
• Candi Tikus
• Candi Penataran

• Merah
• Kuning
• Hijau
• Biru

• Merah
• Kuning
• Hijau
• Biru

• Merah
• Kuning
• Hijau
• Biru

Minuman :

1. Kopi
   • Arabika
   • Capucino
2. Teh
   • Teh hitam
   • Teh hijau
3. Susu

….

Untuk menyatakan list definisi

Istilah yang akan didefinisikan, tag tunggal tanpa penutup

Definisi dari istilah tersebut, tag tunggal tanpa penutup Berikut ini adalah contoh penggunaan dari list definisi dalam HTML Kode :

Contoh Definition List

Ordered List

Metode mengurutkan daftar dengan menggunakan angka, abjad dan angka romawi pada html.

Unordered List

Metode mengurutkan daftar dengan menggunakan simbol atau special character pada html.

Definition List

Digunakan untuk mendefinisikan atau menjelaskan istilah-istilah, oleh karena itu disebut juga daftar istilah (definition list).

Gambar :

K. Elemen Tabel Element TABLE befungsi untuk membuat suatu data multidimensi yang terdiri atas kolom dan baris. Pada saat pembuatan tabel ada beberapa elemen utama yang digunakan untuk membuat table. Elemen-elemen tersebut adalah sebagai berikut : Elemen Kegunaan TABLE Tag utama. Digunakan untuk memberitahu browser “ini adalah table”, bersama dengan beberapa atribut seperti ukuran, lebar border dan beberapa hal lagi. Tag .. TR Table Row (TR) / Baris Tabel, yaitu baris-baris pada suatu tabel, yang dinyatakan dalam pasangan tag .. TD Table Data (TD) /tabel data, yaitu tempat dimana informasi /data dimasukkan dalam tabel. Tabel data adalah colom dari suatu baris tabel. Tabel data dinyatakan dengan tag CAPTION Judul tabel yang terletak diluar tabel biasanya di bagian atas/bawah tabel. tag

Didalam table juga ada beberapa attribute pendukung yang digunakan untuk mengatur tabel. ATTRIBUTE Border Cellspasing Cellpadding Width Height Align Valign Rowspan Colspan

KETERANGAN Digunakan untuk menentukan tebal garis batas tepi tabel Digunakan untuk menentukan jumlah spasi/celah diantara tiap-tiap sel Digunakan untuk menentukan jumlah spasi antara data dalam suatu sel Digunakan untuk mengatur lebar tabel, dapat menggunakan ukuran piksel atau persentasi % Digunakan untuk mengatur tinggi tabel, dapat menggunakan ukuran piksel atau persentasi % Digunakan untuk perataan tabel secara horizontal Digunakan untuk perataan tabel secara vertikal Menggabungkan beberapa baris tabel Menggabungkan beberapa kolom tabel

Contoh pembuatan tabel yang disertai elemen dan attribute tabel adalah sebagai berikut : Contoh Tabel Sederhana Kode :

..

..	TH Table Header (TH) / Judul tabel, biasanya terletak di bagian paling atas atau paling kiri dari suatu tabel. Tabel header yang terletak di bagian atas adalah judul kolom tabel, sedang tabel header yang terletak di bagian kiri adalah judul baris tabel. Tag yang digunakan adalah	…

Tabel Sederhana

Baris 1 Kolom 1

Baris 1 Kolom 2

Gambar

Contoh tabel dengan Judul / Header tanpa Cellpadding dan Cellspasing Kode

Judul Kolom 1	Judul Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Gambar

Contoh penggabungan baris dan kolom tabel Kode

Menggabungkan Baris atau Kolom

Baris 1 Kolom 1	Baris 1 Kolom 2 & 3
Baris 2 & 3 Kolom 1	Baris 2 Kolom 2	Baris 2 Kolom 3
	Baris 3 Kolom 1	Baris 3 Kolom 2
Baris 4 Kolom 1	Baris 4 Kolom 2	Baris 4 Kolom 3

Gambar

L. Insert Image Selain teks, halaman web juga dapat memuat gambar/image. Terdapat beberapa jenis format gambar yang dapat digunakan pada halaman web, antara lain :  GIF (Grafical Interchange Format) (.gif)  JPEG (Joint Photographic Expert Image) (.jpg)  PNG( Portable Network Graphic) (.png)  BMP (Bitmap) (.bmp) Untuk menyisipkan suatu gambar dalam halaman web dapat dilakukan dengan menggunakan tag . Terdapat dua cara untuk memuat gambar dalam web dengan menggunakan tag :

1.

Penggunaan Absolute path, biasanya gambar diletakkan pada folder yang sama dengan halaman web, sehingga cukup dipanggil nama filenya saja, atau dapat berupa alamat dari suatu website. Kode

Penggunaan Absolute path

di ambil dari website "http://www.unesa.ac.id/bank/banner/elearning.j pg"

Di ambil dari folder

NB : yang berwarna merah adalah alamat gambar Gambar

2.

Penggunaan relative path, yaitu file gambar disimpan pada folder yang terpisah dengan folder halaman webnya. Kode

Relative Path

Gambar ini diambil dari folder image


Gambar

M. Hyperlink Link adalah suatu kemampuan yang dimiliki oleh halaman web. Link berfungsi untuk menghubungkan halaman-halaman web, situs yang lain atau bagian-bagian tertentu pada suatu halaman web. Tag …. digunakan untuk membentuk suatu link ke dokumen atau sumber yang akan dimuat ketika user melakukan klik pada link tersebut. Atribut yang digunakan pada tag terdiri dari : Attribute href

Argumen URL/ Halaman web

name

#namabagian

Keterangan Diisi dengan nama halaman web atau nama URL yang akan di-link-kan Digunakan untuk link dalam satu dokumen web

Penulisannya dapat dilihat seperti berikut :  teks ditandai dengan link  teks (sebagai penghubung)  (bagian yang dihubungkan) Contoh program untuk memberikan hyperlink pada halaman web agar menuju halaman web lain : Kode Klik "tabel" untuk menuju dokumen tabel

Gambar

Catatan : Jika table anda klik maka akan muncul tampilan dari tabel.html

NB : yang ada di dalam tag …… adalah objek yang diklik yang digunakan untuk membuat hyperlink. N. Frame, Frameset dan Noframes ELEMENT FRAMESET Element FRAMESET berfungsi untuk membagi isi jendela web browser menjadi beberapa bagian. Element ini mempunyai attribute yaitu cols (membagi jendela berdasarkan kolom), rows (membagi jendela berdasarkan baris), border , bordercolor, frameborder (untuk menampilkan border frame), dan framespacing (spasi antara frame). Element FRAMESET terletak di antara element HEAD dan BODY. Kode ...........................

Element Frame Element FRAME mendefinisikan frame yang terdapat dalam frameset. Element ini mempunyai attribute yaitu name (nama frame), marginheight, marginwidth, bordercolor, frameborder, noresize, scrolling, src (dokumen yang ditampilkan pada frame). Element ini tidak mempunyai tag penutup.

Sintaks:

Element Noframes Element NOFRAME mendefinisikan isi ditampilkan jika suatu frame tidak dapat diakses .

yang

akan

Sintaks: <noframes> .....................

O. Elemen Iframe Dalam dokumen HTML suatu frame dapat dibuat tanpa harus membagi seluruh window browser dengan menggunakan tag <iframe>. Tampilan frame ini mirip dengan text-box, jika browser melakukan scroll maka frame ini juga ikut ter-scroll. Tag <iframe> juga memiliki atribut src dan name yang fungsinya sama seperti pada tag , lalu width dan height untuk mengatur luas area frame yang akan ditampilkan, serta atribut align untuk mengatur posisi dari frame dalam dokumen HTML. Contoh : <iframe src="url" width="300" height="200" align="center" name="A">

P. Element Input Pada Form

Membuat form dengan sintak HTML sangatlah sederhana. Dalam HTML form sering digunakan untuk input data dalam website. Form ini diawali dengan tag

dan diakhiri dengan

. Input data dalam form sendiri ada beberapa cara seperti Text Field, Text area, option, Radio, checkboxes, submit botton. Berikut penjelasan dan contoh dari type-type form. Text Field Elemen yang digunakan untuk memasukan text dalam satu baris. Lebar karakter defaultnya adalah 20 karakter. Contoh :

Nama Depan :

Nama Belakang :

Gambar

Password Field Untuk memasukan datu baris teks dengan format chiphertext/password. Dengan karakter yang disamarkan dengan bulatan atau tanda “*”. Contoh

Username :

Password :

Gambar

Radio Button Radio button digunakan agar dapat memilih salah satu pilihan. Contoh :

Jenis kelamin : Laki-laki Perempuan

Gambar

Text Area Digunakan sebagai input kontrol form untuk memasukan teks lebih dari satu baris. Elemen ini mempunyai atribut yaitu name, cols, dan rows.: Name : nama dari veriabel yang dikirim ke suatu aplikasi Rows : panjang baris dalam karakter Cols : tinggi kotak Contoh

Alamat :

Gambar

Check Box Check Box digunakan untuk dapat memilih lebih dari satu pilihan. Contoh

Hoby : Memancing Main Bola Lain-Lain

Gambar

Select List Digunakan untuk menampilkan daftar pilihan dalam bentuk drop-down list.

Contoh

Prodi : <select name="prodi"> S1 Pendidikan Teknologi Informasi S1 Teknik Informatika S1 Sistem Informasi D3 anajemen Informatika

Gambar

Submit Button Digunakan untuk mengirimkan data dari halaman web ke server. Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan nilinya ke suatu aplikasi yang di tentukan dalam atribut ACTION dalam elemen FORM (Dibahas dalam bab PHP). Contoh

Nama Depan :

Nama Belakang :

Gambar

Reset Button Digunakan untuk membatalkan semua proses atau mereset proses pengisian data yang dilakukan di elemen input form. Contoh

Nama Depan :

Nama Belakang :

Gambar

Catatan 3 Mempelajari CSS Surabaya, 1 – 8 Maret 2015 Mempelajari teori di kelas. Uji coba dikost-kostan, ditemani layar televisi dan segelas kopi pahit.

1. Pengenalan CSS CSS adalah kependekan dari Cascading Style Sheet, berfungsi untuk mempercantik penampilan HTML atau menentukan bagaimana elemen HTML ditampilkan, seperti menentukan posisi, merubah warna teks atau background dan lain sebagainya. Perhatikan contoh kode CSS berikut : h1 { color : red; background : blue; }

Selector h1 adalah sebuah selector. Selector adalah elemen/tag HTML yang ingin diberi style. Anda dapat menuliskan langsung nama tag yang ingin diberi style tanpa perlu menambahkan tanda <>. Pada contoh kode CSS di atas, kita akan memberi style pada seluruh tag h1 yang terdapat dalam file HTML. Jika tag HTML yang ingin diberi style memiliki ID, anda dapat menuliskan nama ID tersebut dengan diawali tanda kress (#). #footer

Dan jika tag yang diberi style memiliki Class, maka penulisan selector bisa dilakukan dengan tanda titik (.) diikuti dengan nama class. .menu

Property Color dan background adalah sebuah property. Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah tag HTML. CSS memiliki puluhan property yang dapat digunakan agar menampilkan hasil akhir yang kita inginkan. Hampir semua property dalam CSS dapat dipakai untuk seluruh selector.

Jika selector digunakan misalnya untuk “mencari seluruh tag

“, maka property adalah “efek apa yang ingin dimanipulasi dari tag p tersebut“, seperti ukuran text, warna text, jenis fontnya, dll. Value Red dan blue adalah sebuah value. Value CSS adalah nilai dari property. Misalkan untuk property background-color yang digunakan untuk mengubah warna latar belakang dari sebuah selector, value atau nilainya dapat berupa red, blue, black, atau white. 2. Penulisan CSS Ada 3 cara untuk penulisan CSS, yaitu : Inline Styles Inline style adalah dengan cara menuliskan CSS pada tag HTML. Kita dapat menggunakan atribut style yang dalam tag yang relevan. Atribut style dapat berisi property CSS. Sebagai contoh lihat script di bawah.

Style Menggunakan CSS

Internal Sytle Sheet Internal sytle sheet yaitu menulisakan CSS dengan cara menuliskannya langsung ke dalam file HTML yang di tuju. Internal style sheet digunakan pada dokumen tunggal yang unik kita dapat mendefinisikannya pada . Sebagai contoh lihat script di bawah.

<style type=”text/css”> p {color: white; } body {background-color: black; }

Selamat Datang CSS

Eksternal Style Sheet External Style Sheet yaitu dengan cara memanggil sebuah file CSS yang telah di buat sebelumnya dari lokasi file tersebut, dengan kata lain Script CSS akan terpisah dari HTML. Sebuah file CSS yang di panggil harus berekstensi .CSS file CSS tersebut idealnya tidak perlu berisi tag HTML. External Style Sheet ideal untuk digunakan pada banyak halaman. Setiap halaman harus terhubung ke CSS dengan menggunakan tag dan diletakan dalam bagian pada HTML. Sebagai contoh lihat script di bawah.

Selamat Datang CSS

3. Jenis-Jenis Selector Type Selector Type Selector merupakan bentuk paling dasar dari selector css. Dengan menggunakan tag HTML tertentu, kita dapat menerapkan style css langsung pada tag yang dimaksud. Type selector digunakan untuk mengatur style dasar yang akan diterapkan pada seluruh situs web. Misalnya saja kita ingin menerapkan aturan untuk elemen paragraf pada web seperti berikut: Kode <style type="text/css"> p { font-family: arial, helvetica, sans-serif; font-size: 16px; color : 990000; }

Paragraf ini menggunakan type selector

Gambar

Kumpulan Element Selector tidak hanya dilakukan pada satu selector saja, tetapi selector juga bisa dilakukan dengan banyak element secara langsung. Contohnya sebagai berikut : Kode

<style type="text/css"> h1, h3, h5 { font-family: arial, helvetica, sans-serif; font-size: 16px; color : 990000; }

Yang menggunakan stryle adalah h1, h3 dan h5

Teks dengan tag h1

Teks dengan tag h2

Teks dengan tag h3

Teks dengan tag h4

Teks dengan tag h5

Teks dengan tag h6

Gambar

Class Selector Class selector digunakan jika ingin menerapkan style yang berbeda untuk sekelompok elemen yang identik. Misalnya kita ingin suatu paragraf memiliki style yang berbeda dari style paragraf secara umum. Maka kita bisa menggunakan class selector dengan nama selector yang khusus misalnya dengan nama selector "beda". Dan untuk menuliskan class selector, kita harus menggunakan tanda titik untuk penamaan selector tersebut. karena nama selector kali ini adalah beda maka penulisan class selector yang benar menjadi .beda, kemudian untuk memakainya kita harus memanggil nama selector tersebut dalam tag HTML yang dimaksud. Contoh seperti gambar beriku , Merah adalah penulisan kode css dan yang berwarna biru untuk pemanggilannya: Kode <style type="text/css"> .beda { font-family: arial, helvetica, sans-serif; font-size: 16px; color : 990000; }

Paragraf dengan teks normal

Paragraf dengan Class Selector

Gambar

Identifier Selector ID selector digunakan jika kita ingin menerapkan style yang berbeda hanya untuk satu elemen tertentu. Cara penulisan kode css untuk id selector adalah dengan tanda hash atau pagar (#) sebelum nama selector. untuk menggunakannya kita harus menggunakan atribut id pada elemen html yang dimaksud. id selector ini hanya boleh digunakan sekali pada sebuah halaman web. Ini dikarenakan id bersifat unik. Berbeda dengan Class Selector yang bisa dipanggil berkali-kali. Contoh penggunaan Identifier Selector dan perbedaan antara Identifier Selector dan Class Selector sebagai berikut (merah adalah penulisan kode css dan biru adalah pemanggilannya) : Kode <style type="text/css"> #khusus { font-family: arial, helvetica, sans-serif; font-size: 16px; color : 990000; } .beda { font-size: 22px; color : 000099; }

Paragraf dengan Class Selector

Paragraf dengan teks normal

Paragraf dengan Identifier Selector

Paragraf dengan Class Selector

Gambar

Descendant Selector Pada halaman web biasanya terdapat bagian konten. Nah, pada bagian konten tersebut biasanya terdapat lebih dari satu paragraf. Untuk menerapkan style yang sama pada paragrafparagraf tersebut, kita bisa saja menuliskan kelas pada setiap tag paragraf, namun alangkah baiknya kita menggunakan descendant selector. Berikut merupakan contoh kode css descendan selector beserta penerapan dalam kode html: Kode <style type="text/css"> .grup h1 { font-family: arial, helvetica, sans-serif; font-size: 16px; color : 990000; }

Teks dengan tag h1 disertai dengan Descendant Selector

Teks dengan tag h2

Teks dengan tag h1

Teks dengan tag h4

Gambar

Universal Selector Universal selector merupakan jenis selektor yang dapat diterapkan pada seluruh elemen html. Penulisan tanda * sebelum menuliskan attribute-attribute yang ada dalam css. Contohnya sebagai berikut: Kode <style type="text/css"> *{ font-family: arial, helvetica, sans-serif; font-size: 16px; color : 990000; }

Yang menggunakan stryle adalah h1, h3 dan h5

Teks dengan tag h1

Teks dengan tag h2

Teks dengan tag h3

Teks dengan tag h4

Teks dengan tag h5

Teks dengan tag h6

Gambar :

Catatan 4 CSS Tips Surabaya, 22 – 29 Maret 2015

Mempelajari teori di kelas. Uji coba di kost-kostan, ditemani lagu album emas didi kempot dan secangkir kopi pahit.

1. Membuat Menu Hover dengan Animasi Gif Saat kita ingin membuat suatu menu, kadang kala kita ingin memberikan suatu efek animasi agar menu kita terlihat lebih indah atau keren. CSS adalah salah satu solusi yang digunakan agar menu kita terlihat lebih keren. Biasanya dengan menyorot menu, menu tersebut bisa berubah tampilan atau menandakan menu tersebut sedang disorot. Yang dimaksud dengan menu hover adalah menu yang jika kita sorot maka tampilan menu tersebut akan berubah. Kode <style type="text/css"> a:link { color: #000; white-space: nowrap; text-decoration: none; padding-right:25px; } a:visited { text-decoration: none; color: #000; } a:hover { text-decoration: none; background-position:right; background-image: url(arrow_down_animated.gif); background-repeat: no-repeat; /*background-position: 100% 100%;*/ padding-left: 0px; color: #F00; } a:active { } Facebook | Twitter |

Gambar

2. Button Image Button tidak hanya bisa dibuat dengan menggunakan tag yang tersedia pada html. Tapi kita juga bisa memanipulasi dengan gambar. Ingin tau lebih lanjut ?, Yah, kita akan melakukan eksperimen pada percobaan ini. Persiapan - Siapkan beberapa gambar untuk dibuat sebagai background untuk manipulasi button Kode <style type="text/css"> a.ovalbutton{ background: transparent url('ovalleft.gif') norepeat top left; display: block; float: left; font: normal 13px Tahoma; line-height: 16px; height: 24px; padding-left: 11px; text-decoration: none; } a:link.ovalbutton, a:visited.ovalbutton, a:active.ovalbutton{ color: #494949; } a.ovalbutton span{ background: transparent url('ovalright.gif') norepeat top right; display: block; padding: 4px 11px 4px 0; } a.ovalbutton:hover{ background-position: bottom left;

} a.ovalbutton:hover span{ background-position: bottom right; color: black; } <span>Website Link <span>Produk link

Gambar

Meski dengan sourch code yang panjang, akan tetapi kode tersebut bisa digunakan pada banyak button, sehingga akan membuat ukuran web kita lebih kecil. 3. Pop Up Gambar Pop Up sudah tidak asing lagi di telinga kita bagi seorang enginer IT. Dengan menyorot atau meng klik sebuah text atau gambar kita dapat menampilkan tampilan lain pada satu halaman yang sama. Kita coba eksperimen membuat sebuah pop up gambar kita tau bagaimana menggunakan pop up. Persiapan - Siapkan gambar yang akan dibuat tampilan pop up. Kode <style> .popUpGambar{ position:relative; z-index: 0;

} .popUpGambar:hover{ z-index: 1; } .popUpGambar span{ position: absolute; background-color:#990000; color:#FFFFFF; padding: 5px; border: 1px solid gray; visibility: hidden; } .popUpGambar span img{ padding: 2px; height:450px; width:300px; } .popUpGambar:hover span{ visibility:visible; top: 0; left: 105px; }
<span>
Wayang Raden Gatot Kaca

<span>
Wayang Gunung

Gambar Sebelum disorot

Sesudah disorot

4. Sudut Melipat Dalam membuat website, biasanya kita menginginkan tampilan tersebut terlihat seperti lembaran-lembarang buku yang memiliki lipatan kertas dibagian pojoknya. Kita bisa membuat tampilan seperti itu dengan menggunakan CSS. Langsung saja : Kode <style type="text/css"> .sudutmelipat{ background-color:#CCCCCC; border: 1px solid #b8b8b8; margin-bottom: 1em; width: 300px; } .sudutmelipat .innerdiv{ background: transparent url(sudutmelipat.gif) bottom right no-repeat ; position: relative; left: 2px; top: 2px; padding: 1px 4px 15px 5px; }

<strong>Data Mantan
- Sukiyem
- Sri
- Siti

Gambar

5. CSS Position Position dalam CSS digunakan untuk mengatur tata letak suatu element dalam CSS. Ada beberapa tipe untuk memberikan Position dalam CSS. a. Static Static adalah posisi default setiap elemen HTML yang ada. Jadi tanpa harus kita nyatakan suatu elemen dengan position : static secara otomatis elemen tersebut adalah position : static. Lalu bagaimana prilaku dari elemen dengan position : static ? Mari kita lihat contoh di bawah ini. Contoh : Kode : <style type="text/css"> .kotak1 { position: static; width: 150px; height: 150px; background: #990000; } .kotak2 { position: static; width: 150px; height: 150px; background: #009900; } .kotak3 { position: static; width: 150px; height: 150px; background: #000099;

}

Gambar :

Pada gambar di atas kita bisa melihat 3 kotak dengan position : static, maka kotak-kotak ini akan disusun bertumpuk (normal flow). Bila kita menambahkan kotak ke-4, maka kotak tersebut akan diletakkan di posisi terbawah di bawah kotak3 (kotak biru). Adapun kotak1 (kotak merah) akan merapat ke titik origin (0,0) dari containing block . b. Relative Relative berarti elemen tersebut diposisikan relatif terhadap posisi normalnya. Apakah yang dimaksud posisi normal tersebut ? kita akan melihat contoh berikut.

Kode <style type="text/css"> .kotak1 { position: static; width: 150px; height: 150px; background: #990000; } .kotak2 { position: relative; width: 150px; height: 150px; top: 50px; left: 20px; background: #009900; } .kotak3 { position: static; width: 150px; height: 150px; background: #000099; }

Gambar

Pada gambar di atas kita akan mengenakan propertyposition : relative pada kotak2 (hijau), lalu mencoba menggeser kotak tersebut dengan propertytop : 50px dan left : 20px. Ilustasinya bisa dilihat pada gambar diatas, tampak kotak2 bergeser ke bawah 50px dan geser ke kanan 20px. Kotak2 yang bergeser ini tampak overlap dengan elemen lainnya yakni kotak3 (biru). Artinya elemen dengan position : relative bila dikenakan property top, bottom, left, right hanya akan mempengaruhi elemen yang bersangkutan, elemen lain disekitarnya tidak terpengaruh yakni tetap pada posisinya. c. Absolute Elemen dengan position : absolute berarti elemen tersebut dikeluarkan dari normal flownya, lalu kita bisa menempatkan elemen tersebut ke posisi mana yang kita inginkan

menggunakan property top, bottom, left, right. Mari kita lihat contoh di bawah ini. Kode : <style type="text/css"> .kotak1 { position: static; width: 150px; height: 150px; background: #990000; } .kotak2 { position: absolute; top: 20px; left: 20px; width: 150px; height: 150px; background: #009900; } .kotak3 { position: static; width: 150px; height: 150px; background: #000099; }

Gambar :

Pada gambar di atas kita kenakan position : absolute pada kotak2 (hijau), dan kita berikan propertytop : 40px, left : 40px. Apa yang terjadi pada kotak2 tersebut? yang terjadi adalah kotak2 keluar dari normal flownya bergeser ke atas menuju ke titik origin dari containing block dalam hal ini browser viewport. Selanjutnya titik ini akan menjadi titik acuan bagi kotak2 ini akan diposiisikan dimana. Dengan dikenakan property top : 40px, left : 40px maka kotak2 akan bergeser 40px ke bawah dan 40px ke kanan dihitung dari titik originnya. Selanjutnya dengan bergesernya kotak2 ke atas maka akan meninggalkan ruang kosong yang tadinya di tempati kotak2. Ruang kosong ini kemudian diisi oleh kotak3 (biru) yang ada persis di bawah kotak2.

d. Fixed Elemen yang dikenakan position : fixed diposisikan relatif terhadap browser viewport. Maksud dari istilah fixed adalah elemen ini tetap pada posisi yang sama walaupun kita melakukan scroll pada halaman web. Pada contoh di bawah ini kita membuat elemen dengan position : fixed yang sering dipakai untuk header di halaman web. Kode :

Gambar :

Perhatikan scroll bar nya, meskipun scroll bar tersebut digeser, maka kotak berwarna merah tersebut akan tetap pada posisinya. 6. Z-Index Apakah anda pernah menggunakan photoshop. Jika anda pernah maka z-index merupakan hal yang tidak asing untuk anda, karena untuk menggunakan z-index sama halnya anda menggunakan layer pada photoshop. z-index adalah property css yang mulai ada pada css2, fungsinya yaitu untuk mengatur posisi depan atau belakang suatu elemen. Semakin kecil value yang anda deklarasikan pada z-index maka semakin kebelakang pula elemen tersebut. Hal yang sama juga berlaku jika value yang

masukkan lebih besar, maka elemen tersebut akan semakin ke depan. Berikut contohnya : Kode <style type="text/css"> #satu, #dua, #tiga, #empat, #lima { position: absolute; height: 100px; } #satu{ width: 100px; left: 0px; top: 0px; background-color:red; z-index: 1; } #dua{ width: 100px; left: 25px; top: 50px; background-color:green; z-index: 2; } #tiga{ width: 175px; left: 75px; top: 100px; background-color:blue; z-index: 3; } #empat{ width: 100px; left: 200px; top: 50px; background-color:yellow; z-index: 2; } #lima{ width: 100px; left: 250px; top: 0px; background-color:cyan;

z-index: 1; }

satu

dua

tiga

empat

lima

Gambar

Catatan 5 Mempelajari Javascript dan DOM Surabaya, 5-19 April 2015

Mempelajari teori di kelas. Uji coba di kost-kostan, ditemani lagu iwan fals dan secangkir kopi pahit.

1. Pendahuluan JavaScript adalah sebuah bahasa pemrograman yang dirancang untuk penggunaan pada browser (peramban) web. JavaScript bukan scripting language, juga sama sekali tidak berhubungan dengan platform software Java milik Oracle, jadi memang namanya agak menyesatkan. Bagian Core JavaScript membahas tentang “bahasa” (atau syntax) dari JavaScript. Jika anda pernah menggunakan bahasa pemograman seperti C++ atau PHP, tidak akan terlalu sulit untuk mempelajari aturan penulisan dalam JavaScript. Perbedaan mendasar antara JavaScript dengan dengan bahasa pemograman lain, adalah sifat JavaScript yang lebih berorientasi ke Objek. Namun JavaScript „tidak mengharuskan‟ menggunakan objek. Saya menyebutnya „tidak harus‟ karena kita bisa membuat beberapa kode program yang seolah-olah tanpa menggunakan objek. Kita bisa menulis kode dalam JavaScript sebagai bahasa full fitur yang – dengan satu pengecualian – mampu berjalan dalam sebuah browser web seperti Chrome, Firefox, atau Internet Explorer. Secara umum ia dipergunakan untuk memanipulasi “Document Object Model” (DOM), yang meliputi elemen-elemen pada sebuah laman web. JavaScript dieksekusi pada client side (komputer pengguna): Sebuah server website mengirim javascript ke peramban milik pengguna, dan browser tersebut menginterpretasikan dan menjalankan kodenya. Semua ini terjadi dalam sebuah sandbox, yang menjaga agar javascript tidak menyentuh internal sistem, sehingga mencegah malicious code (kode jahat) menginfeksi komputer pengguna. 2. DOM (Document Object Model) Pengertian DOM adalah W3C (World Wide Web Consortium) standar dimana DOM mendefinisikan standar untuk mengakses dokumen:

"The W3C Document Object Model (DOM) adalah sebuah platform dan antarmuka bahasa-netral yang memungkinkan program dan skrip untuk secara dinamis mengakses dan memperbarui konten, struktur, dan gaya dari sebuah dokumen." Standart W3C DOM Standar W3C DOM dipisahkan menjadi 3 bagian yang berbeda:  Core DOM - model standar untuk semua jenis dokumen  XML DOM - model standar untuk dokumen XML  HTML DOM - model standar untuk dokumen HTML HTML DOM HTML DOM adalah model objek dan pemrograman antarmuka standar untuk HTML digunakan untuk mendefinisikan:  Elemen HTML sebagai obyek  Sifat-sifat semua elemen HTML  Metode untuk mengakses semua elemen HTML  Aktivitas untuk semua elemen HTML Ketika halaman web di muat, browser akan membuat DOM (Document Object Model) untuk halaman tersebut.

Manfaat atau Kegunaan DOM Karena setiap elemen pada halaman html bisa di alamati secara tepat, maka setiap element pada halaman tersebut dapat di manipulasi dengan mekanisme pemrograman server side scripting. Sehingga JavaScript dapat :  Mengubah semua elemen HTML di halaman  Mengubah semua atribut HTML dalam halaman  Mengubah semua gaya CSS di halaman  Menghapus elemen HTML yang ada dan atribut  Menambahkan elemen HTML baru dan atribut  Bereaksi terhadap semua aksi HTML yang ada di halaman  Membuat event HTML baru dalam halaman Antarmuka DOM Berikut adalah ketentuan-ketentuan yang digunakan untuk HTML DOM :  HTML DOM dapat diakses dengan JavaScript (dan dengan bahasa pemrograman lain).  Dalam DOM, semua elemen HTML didefinisikan sebagai obyek.  Antarmuka pemrograman adalah properti dan metode dari setiap objek.  Properti adalah sebuah nilai yang bisa Anda peroleh atau set (seperti mengubah isi dari elemen HTML).  Sebuah metode adalah suatu tindakan yang dapat Anda lakukan (seperti menambah atau menghapus elemen HTML).

OBYEK DOCUMENT Dalam DOM HTML, terdapat suatu obyek yang memiliki semua obyek lainnya. Obyek ini adalah document. Obyek ini mewakili halaman web. Artinya, jika akan mengakses elemenelemen HTML didalam halaman web, maka harus melewati obyek document ini.

Berikutnya adalah daftar contoh penerapan document untuk mengakses dan memanipulasi HTML. Mencari Elemen HTML

obyek

Metode document.getElementById()

Penjelasan mencari elemen HTML menggunakan elemen id document.getElementsByTagN mencari elemen HTML ame() menggunakan nama tag document.getElementsByClass mencari elemen HTML Name() menggunakan nama kelas Mengubah Elemen HTML

Metode element.innerHTML= element.atribut= element.setAttribute(atribut , nilai) element.style.property=

Penjelasan mengubah inner HTML elemen HTML mengubah atribut elemen HTML mengubah atribut elemen HTML mengubah style elemen HTML

Menambah dan Menghapus Elemen HTML

Metode document.createElement() document.removeChild() document.appendChild() document.replaceChild() document.write(teks)

Penjelasan membuat elemen HTML menghapus elemen HTML menambah sebuah elemen HTML mengganti elemen HTML menulis teks ke layar

Contoh Penggunaan DOM dan Javascript document.getElementById() Kode <script> function ucapan(a) { var vucapan1 = a; document.getElementById('indomaret').innerHTML = vucapan1; } function ortu(b) { var vucapan2 = b; document.getElementById('orangtua').innerHTML = vucapan2; } var a="Selamat Datang , Selamat Belanja"; var b="Sekolah seng temen le ..";

Ucapan Indomaret

Ucapan Orang Tua

Penjelasan Dalam script diatas, penulis memberikan warna-warna untuk mempermudah penulis dalam menjelaskan sript. Berikut adalah penjelasan berdasarkan warna Biru : Nama ID, yaitu indomaret dan orangtua Orange: Element p (paragraph) dengan nama ID masing yang dideklarasikan dengan warna biru. Merah : Mendeklarasikan beserta memberikan nilai pada variable.

Merah bata : Script yang document.getElementById() Hijau : Pendeklarasian button.

didalamnya

menggunakan

Awal mulanya element p dengan id masing-masing masih menggunakan nilai defaultnya sendiri atau teks asli. Setelah itu pada script berwarna hijau, lihat onClick=(). Didalam tanda kurung tersebut digunakan untuk memanggil fungsi dari script yang berwarna merah bata. Sebelumnya sudah dideklarasikan variable beserta nilai variable dengan script berwarna merah. Jika button sudah di klik artinya button tersebut memanggil fungsi dari merah bata. Ada dua fungsi yaitu ucapan dan ortu, dalam tanda kurung tersebut adalah nilai yang boleh masuk pada fungsi. Isi dari fungsi tersebut memiliki batas yaitu dengan tanda { dan }. Awal mulanya variable yang ada didalam fungsi dideklarasikan (warna merah). Lalu dengan menggunakan document.getElementByID() maka id dipanggil lalu dengan innerHTML nilai tersebut diubah dengan variable berwarna merah. Gambar Sebelum

Setelah – Button “Klik, Ucapan Indomaret” di klik

Setelah – Button “Klik, Ucapan Indomaret” di klik

Setelah Kedua Button di Klik

document.getElementByClassName() Kode <script> function klik() { var hasil = document.getElementsByClassName("hasil"); hasil[0].innerHTML="teks ini dari Javascript ke 0"; hasil[1].innerHTML="teks ini dari Javascript ke 1"; hasil[2].innerHTML=Date(); }

teks asli - div

teks asli - p

teks asli button

Penjelasan Dalam script diatas, penulis memberikan warna-warna untuk mempermudah penulis dalam menjelaskan sript. Berikut adalah penjelasan berdasarkan warna Biru : Nama Class, yaitu hasil (ingat Class dalam CSS, bahwa class bias digunakan berulangkali pada halaman yang sama) Orange: Element, yang terdiri dari div, p, dan button. Merah : Mendeklarasikan variabel Hijau : Pendeklarasian button. Berdasarkan keterangan diatas maka bisa disimpulkan jika button yang memiliki onClick() yang isinya adalah sebuah fungsi. Maka fungsi tersebut akan memanggil nama Class. Lalu nilainya dirubah dengan innerHTML. Gambar Sebelum

Sesudah

document.getElementByTagName() Kode <script> function klik() { var hasil = document.getElementsByTagName("p"); hasil[0].innerHTML="teks ini dari Javascript ke 0"; hasil[1].innerHTML="teks ini dari Javascript ke 1"; hasil[2].innerHTML=Date(); }

teks asli - p 1

teks asli - p 2

teks asli - p 3

Penjelasan Sama seperti memanggil dengan Class. Hanya saja didalam sini tidak menggunakan Class akan tetapi dengan Tag, yaitu Tag p (paragraph) Gambar Sebelum

Sesudah

element.innerHTML() Penggunaan innerHTML sudah dijelaskan pada document.getElementById(),document.getElementByClassName( ) dan document.getElementByTagName(). element.attribute= Kode

<script> function klik() { document.getElementById("hasil").href="http://www.g oogle.com"; }

Link _self, habis diklik ke google.com

Penjelasan Script diatas sama seperti script sebelumnya. Script ini menggunakan method document.getElemenetByID(). Setelah itu

ada script berwarna merah yang, script tersebut adalah suatu attribute berupa href pada pembuatan hyperlink (Lihat Bab HTML). Sebelum diklik attribute href masih berupa “#” setelah button diklik attribute href sudah berganti menjadi www.google.com, lihat pada addres barnya. Gambar Sebelum button saya klik dan link tersebut saya klik

Sesudah button saya klik dan link tersebut saya klik maka akan menuju ke google

element.setAttribute(attribute, nilai) Kode

<script> function klik() {

document.getElementById("gambar").setAttribute("src ","images/sunset.jpg"); }

Penjelasan element.setAttribute sama dengan element.Attribute. Akan tetapi pada element.Attribute sebelumnya tidak diset atau diatur, akan tetapi untuk element.setAttribute digunakan untuk mengatur ulang element dengan img dengan id gambar. Penulisan “element.setAttribute(attribute,value)” Gambar Sebelum button di klik

Sesudah button di klik

element.style.property= Kode

<script> function klik() { document.getElementById("hasil").style.color="red"; document.getElementById("hasil").style.border="1px dotted #0000FF"; }

Teks asli

Penjelasan Untuk “element.style.property()=” sama dengan element.attribute akan tetapi untuk yang ini digunakan untuk melakukan pengaturan style (Ingat Bab CSS), Penulisannya adalah element.style.”nama property”=nilai atau valuenya; Gambar Sebelum button di klik

Sesudah button di klik

3. Javascript Penulisan Javascript Dalam penulisan javascript ada 3 metodeyang digunakan, yaitu : dalam element HTML, dalam satu dokumen (internal), dan dengan file terpisah (eksternal). Penulisan javascript dalam element html Kode :

teks di elemen HTML, untuk merubah silakan di klik

Penjelasan Dalam file tersebut terdapat element div, yang didalamnya terdapat suatu file javacript. Jika file tersebut dibuka maka akan tampil isi dari element div yaitu “teks di elemen HTML, untuk merubah silakan di klik”. Didalam element div terdapat sebuah event attribute yaitu onClick yang digunakan untuk button, onClick tersebut sama halnya seperti tombol ok, artinya yang diklik adalah element div. Jika tombol tersebut diklik maka akan tampil eventnya yaitu this.innerHTML dengan script sebagai berikut this.innerHTML='teks ini dari Javascript';. Maka jika diklik tampilan tersebut akan berubah menjadi “teks ini dari Javascript” . Gambar Sebelum diklik

Sesudah diklik

Penulisan javascript dalam satu document (internal) Kode

teks di elemen HTML

<script> document.getElementById("tujuan").innerHTML="teks ini dari Javascript";

Penjelasan Pada kode diatas pendekalarasian javascript yang hampir sama pada kode-kode sebelumnya misalnya pada element.getElementById(). Yaitu penulisan dilakukan pada halaman tersebut. Dalam script diatas, isi dari id tujuan adalan text dari javascript. Karena pada kode diatas penulis tidak menggunakan button seperti script-script sebelumnya. Gambar

Penulisan javascript dengan file terpisah (eksternal) Kode 1

teks di elemen HTML

<script src="js_penulisan_eksternal.js">

Kode 2 document.getElementById("tujuan").innerHTML="teks ini dari Javascript";

Penjelasan Ingat cara penulisan CSS secara eksternal ?, konsepnya sama seperti seperti itu yaitu memanggil file lain. Pada contoh diatas, kode 1 yang berisi script html atau memang sebagai file html nya. Simpan kode tersebut dengan ekstensi .html. Untuk kode 2, isikan kode-kode javascript dan simpan dengan ekstensi .js . Pada file html berikan script <script src="js_penulisan_eksternal.js"> untuk memanggil. Warna merah adalah nama filenya, terserah anda mau member nama apa file tersebut. Kode javascript, penulis samakan dengan penggunaan javascript internal, agar pembaca lebih mudah untuk memahami. Gambar

Event pada Javascript Event pada JavaScript sebenarnya juga dapat dianggap seperti layaknya function bawaan yang sudah disediakan oleh JavaScript. Namun, jika function harus dipanggil terlebih dahaulu agar prosesnya dapat dijalankan, event tidak perlu harus dipanggil. Event akan dijalankan ketika suatu aksi tertentu dekenakan pada element tertentu milik HTML. Atau dengna kata

lain, function dikendalikan oleh pemogram, sementara event dikendalikan oleh pengguna. Bahasan ini akan membahas lebih detail mengenai event dan bagaimana memanfaatkan event tersebut secara optimal untuk kebutuhan Anda. Penggunaannya sama seperti contoh yang ada pada DOM, lebih tepatnya disana adalah onClick(). Event yang disediakan JavaScript terbagai menjadi 2 (dua) jenis, yaitu event sistem dan event pengguna. Event sistem adalah event yang selalu ada dan disediakan oelh JavaScript serta sangat terkait dengan sistem dimana halaman web ditampilkan. Sedangkan event pengguna adalah event yang hanya tersedia relatif terhadap konteks elemet halamanweb apa yang diacu oleh pengguna. Berikut dibawah ini adalah event system : Event onError

onLoad

onUnload

Keterangan Event ini dibangkitkan ketika terjadi kesalahan. Event ini dimiliki oleh objek Window dan Image Event ini dibangkitkan ketika suatu objek selesai ditampilkan pada halaman web. Objek yang dimaksud pada keterangan ini adalah objek Window, Frame dan Image Event ini dibangkitkan ketika suatu objek telah dikeluarkan dari ruang memori, atau telah selesai digunakan. Objek ini adalah objek Window, Frame dan Image

Sedangkan table dibawah ini adalah list event pengguna beserta keterangannya Event onAbort

Keterangan Event yang dimiliki oleh objek image ini akan dibangkitkan ketika sebuah gambar dihentikan proses pemunculannya yang dimungkinkan akibat penekanan tombol stop pada

browser onBlur

onChange

onClick

onContextMenu

onDblClick

onFocus

onHelp

Event ini dibangkitkan ketika sebuah element (dalam hal ini adalah element window, frame, select, text, dan textarea) kehilangan focusnya Event ini dibangkitkan ketika sebuah element (dalam hal ini adalah element select, text dan textarea) telah diubah nilainya sebelum element tersebut kehilangan focusnya Event ini dibangkitkan ketika terjadi aksi klik (dilakukan oleh pengguna) terhadap element, dimana element yang dimaksud adalah semua element dari form yang dapat diklik seperti element button (tombol). Aksi klik yang dimaksud adalah adanya penekanan tombol klik kir mouse terhadap suatu element Event ini terbangkitkan ketika terjadi aksi klik kanan dari tombol mouse terhadap suatu element Hampir sama dengan event onClick, namun akan dibangkitkan ketika terjadi aksi klik ganda terhadap suatu element Event ini adalah kebalikan dari event onBlur, dimana akan dibangkitkan ketika suatu element dikenai focus. Element-element yang dimaksud adalah element window, frame, select, text dan textarea Event ini dibangkitkan ketika terjadi penekanan terhadap tombol F1, yang umumnya digunakan berbagai aplikasi sebagai tombol shortcut untuk

onKeydown onKeypress

onKeyup

onMousedown onMousemove

onMouseout

onMouseover

onReset

onResize

menampilkan fasilitas bantuan (help) . Anda dapat menggunakan event ini untuk mengalihkan fitur help milik browser menjadi fitur help yang Anda buat sendiri untuk halaman web Anda. Event ini dibangkitkan ketika terjadi penekanan ke bawah tombol keyboard Event ini dibangkitkan ketika terjadi aksi penekanan tombol keyboard. Aksi penekanan disini adalah sebuah aksi lengkap penekanan tombol keyboard, mulai dari memencet tombol keyboard tersebut hingga melepaskannya Event ini dibangkitkan ketika tombol keyboard yang awalnya ditekan lalu dilepas, ketika tombol dilepas event ini bangkit . Event ini dibangkitkan, ketika tombol mouse ditekan ke bawah Event ini dibangkitkan ketika mouse digerakkan (panah mouse berubah posisinya) Event ini dibangkitkan ketika panah mouse kelaur dari daerah lingkupan suatu element, yaitu element hyperlink dan element area. Event ini dibangkitkan ketika panah mouse berada diatas element , yaitu element hyperlink dan element area . Event yang dimiliki secara khusus oleh objek form ini akan dibangkitkan ketika terjadi penekanan terhadap tombol reset yang dimiliki form yang bersangkutan Event ini dibangkitkan ketika jendela browser diubah ukurannya, baik

diperbesar maupun diperkecil onSelect

onStop

onSubmit

Event ini dibangkitkan ketika terjadi pemilihan teks pada lement text dan textarea dengan cara memberinya highlight (diblok) Event ini dibangkitkan ketika pengguna melakukan penekanan terhadap tombol stop dari browsernya Event ini dibangkitkan setelah terjadi penekanan tombol submit yang dimiliki sebuah form

Penulis akan memberikan sebuah contoh untuk penggunaan event. Yaitu menggunakan event onLoad, contohnya adalah sebagai berikut. Kode <script type="text/javascript"> document.write("

Contoh Event onLoad

"); document.write("
"); document.write("-------------------------------------------"); document.write("
"); document.write("Setiap kali halaman ini di load akan muncul pesan selamat datang"); document.write("
"); document.write("-------------------------------------------");

Gambar

Variabel pada Javascript Ingat pada saat anda belajar DOM pada buku “Hanya Catatan WEB”, anda menemukan kata “var”. Kata tersebut digunakan untuk mendeklarasikan atau biasa juga disebut inisialisasi. Lazimnya bahasa pemrograman, javascript juga memiliki tipe data dan variabel. Variabel pada javascript seperti kotak atau wadah yang digunakan untuk menyimpan informasi yang senantiasa dapat diload. Sedangkan tipe data terkait dengan jenis data atau nilai yang disimpan dalam variabel. Dalam javascript, setiap kali akan menggunakan variabel, langkah pertama yang harus dilakukan adalah mendeklarasikan keberadaan nama variabel. Hal ini perlu dilakukan karena dengan adanya deklarasi nama variabel, computer akan menyediakan beberapa bagian memori untuk menyimpan nilai pada nama variabel tersebut. Untuk mendeklarasikan variabel digunakan kata var (awalan). Dalam mendeklarasikan nama variabel ada beberapa aturan yang harus diperhatikan, yaitu : 1. Nama variabel harus dimulai dengan huruf , $ dan _ . 2. Nama variable tidak boleh menggunakan angka sebagai karakter utama.

3. 4.

Nama variabel adalah case-sensitive (memperhatikan besar kecilnya huruf). Jangan menggunakan Reserved Word atau kata tercadang sebagai nama variabel. Kata tercadang adalah kata yang sudah built in dalam javascript yang sudah bermakna khusus. Penggunaan kata tercadang ini akan mengakibatkan error. Berikut adalah contoh-contoh Reserved Word.

Berikut adalah contoh pendeklarasian variable : 1 2 3 4 5 6 7 8

var var var var var var var var

_soal; $jawaban; Angka; angka 1hari; for; do; while;

Penjelasan : Berdasarkan warna : Biru : pendeklarasian tersebut adalah benar. Karena diawali huruf kecil, huruf besar, _ (underscore) dan $. Lihat aturan nomor 1. Merah : cara pendeklarasian tersebut adalah salah. Lihat aturan nomor 2 dan 4.

Berdasarkan aturan : Aturan nomor 1 : terdapat pada contoh nomor 1 – 4. Aturan nomor 2 : terdapat pada contoh nomor 5. Aturan nomor 3 : terdapat pada contoh nomor 3 dan 4. Artinya nomor 3 dan 4 mempunyai nama variable yang berbeda yaitu Angka dan angka, meskipun karakternya sama. Aturan nomor 4 : Lihat pada contoh nomor 6-8

Tipe Data Dalam Javascript terdapat 3 jenis data : 1. Tipe Data Primer string, number, booleran 2. Tipe Data Komposite (composite/reference) object, array 3. Tipe Data Khusus null, undefined Tipe Data – string String adalah tipe data yang biasa digunakan untuk merepresentasikan Kata atau kalimat. Contoh : var nama = "Dwi Asharialdy";

Tipe Data – number Number adalah tipe data yang digunakan untuk merepresentasikan angka, baik bilangan bulat, real, exponensial dan lain sebagainya. Contoh : var umur = 17; var beratBadan = 50.12;

Tipe Data – boolean Boolean adalah tipe data yang digunakan untuk menyatakan ya atau tidak, true atau false. Contoh : var started = TRUE;

Tipe Data – object Object hampir mirip dengan Array. Bedanya, setiap elemen data yang ditampung di dalamnya memiliki nama atau "key". Contoh : var orang = { nama : "dwi", umur : 17, "berat badan" : 50.4, "sudah nikah" : TRUE, "jumlah anak": NULL };

Tipe Data – array Array adalah tipe data yang berupa kontainer untuk menampung satu atau lebih data. Array dapat menmpung semua tipe data yang terdapat dalam javascript. Contoh : var hari = ["Senin","Selasa","Rabu","Kamis","Jumat","Sabtu","M inggu"]; var nilai = [5,7,8,2.4,4.5,10]; var mix = [ "gfyty$^%", 12.3, NULL, TRUE, FALSE, ["a","b","C"] ];

Tipe Data – null Null adalah kata kunci (keyword) khusus yang berarti „tidak memiliki nilai‟. Kita bisa memberikan nilai null kepada variabel, elemen dari array, property dari objek, atau yang lainnya. Null berbeda dengan string kosong, karena string kosong masih bertipe „string‟. Sedangkan null bukan merupakan tipe data apapun. Jika kita menggunakan operator typeof kepada null, hasilnya adalah : object. Hal Ini berarti bahwa null adalah

object khusus yang mengindikasikan ‟tidak ada nilai‟ di dalam JavaScript. Contoh : <script> var a; a = null; var b=null; console.log(a); console.log(b); console.log(typeof a);

// null // null // object

Tipe Data – undefined Undefined adalah keyword khusus lainnya di dalam JavaScript yang mengindikasikan ‟tidak ada nilai‟. Namun undefined lebih ‟dalam‟ dari pada null. Undefined adalah hasil yang akan didapat dari proses berikut: a. Nilai dari pemanggilan variabel yang belum didefenisikan b. Nilai dari pemanggilan element array yang tidak ada c. Nilai dari pemanggilan property objek yang tidak ada d. Nilai dari pemanggilan fungsi yang tidak mengembalikan nilai e. Nilai dari parameter fungsi yang tidak memiliki argumen Undefined adalah variabel global di dalam javascript, dan bukan merupakan objek khusus seperti null. Pemanggilan operator typeof untuk undefined akan menghasilkan undefined. Contoh : <script> var a = "test"; // var b = [1,2,3,4,5] // console.log(a); // console.log(a.length); // length dari objek string console.log(a.panjang); // bukan property dari string console.log(b[2]); // array b adalah 3 console.log(b[10]); // array b hanya sampai 4

a adalah string b adalah array "test" 4: pemanggilan property undefined : panjang 3 : index ke 2 dari undefined : index dalam

Operator JavaScript menyediakan berbagai operator yang memungkinkan programmer menulis sejumlah ekspresi dari yang paling sederhana sampai yang paling sulit. Operator pada JavaScript terbagi menjadi enam, yaitu : 1. Aritmatika Operator 2. Assignment Operator (=) 3. Bitwise Operator (Pemanipulasian bit) 4. Logikal Operator 5. String Operator 6. Comparison Operator (Operator Pembanding) Operator Aritmatika Operator dalam JavaScript sangat mirip dengan operator yang muncul dalam bahasa pemrograman lain. Definisi operator adalah simbol yang digunakan untuk melakukan operasi. Yang paling sering digunakan operasi ini seperti Operator Aritmetika. Sesuai dengan fungsinya, operator aritmatika melakukan operasi perhitungan aritmatika. JavaScript mendukung operator standard aritmatika seperti penjumlahan (+), pengurangan (-), perkalian (*), dan pembagian (/). Juga memiliki operator modulus (%). Operator Definisi Contoh value hasil x y + Penambahan x=y+2 5 7 -

Pengurangan

x= y-2

5

3

*

Pengkalian

x= y * 2

5

10

/

Pembagian

x= y / 2

5

2.5

%

Modulus

x= y % 2

5

1

++

Increment

x=++y

6

6

x=y++

6

5

x=--y

4

4

--

Decrement

x=y--

4

5

Operator Assignment Seperti kebanyakan bahasa pemograman lainnya, untuk memberikan sebuah nilai kepada suatu variable menggunakan tanda sama dengan (=). Operator pemberi nilai "sama dengan" adalah suatu operator binari yang digunakan untuk memberi nilai dari sisi kiri (biasanya berupa suatu variabel) yang didasarkan pada nilai sebelah kanan Operator = += -= /= %=

Keterangan

Penyingkatan

Contoh

Sama dengan

x=y

x=y

Ditambah sama dengan Dikurangi Sama Dengan Dibagi Sama Dengan

x += y

x=x+y

x -= y

x=x-y

x /= y

x=x/y

Modulus Sama Dengan

x %= y

x=x%y

Bitwise Operator Operator pembanding/Operator Bitwise diterapkan pada perbandingan pada data numerik dan data string serta tidak dapat dilakukan pada nilai Boolean. Masing-masing operan harus memiliki tipe yang sama. Operator == != > < >=

Keterangan Sama dengan Tidak sama dengan Lebih besar dari Lebih kecil dari Lebih besas sama dengan

Contoh x == y x != y x>y x= y

Contoh Bolean TRUE TRUE FALSE TRUE FALSE

<=

Lebih kecil sama dengan

x <= y

FALSE

Logical Operator Operator logika digunakan untuk menentukan logika antara variabel atau nilai. Numerik lebih besar/lebih kecil dengan String atau sebaliknya. Hasil dari Logikal dapat menggunakan sebuah nilai Boolean (false atau True). Logika Keterangan Contoh Contoh Bolean &&

And

x > 100 && y<1

True

||

Or

x == 6 || y == 6

True

! (x == y)

True

!

Not (! adalah suatu unary operator yang mempertahankan nilai ekspresi.)

String Operator Operator juga dapat digunakan untuk menambahkan variabel string atau nilai-nilai teks bersama-sama. Untuk mendeklarasikan tipe string dapat dilakukan dengan cara menuliskan string diantara tanda petik tunggal (‟) atau tanda petik ganda (”). String memiliki beberapa operator, yaitu concatenation (penggabungan) dan operator konversi. Kita mulai dengan String concatenation. Concatenation (Penggabungan) Operasi yang paling umum dilakukan adalah dengan string concatenation. Rangkaian adalah proses menggabungkan dua string menjadi satu string lagi. Sebagai contoh, kita bisa

menggabungkan string "teks1" dan "teks2" ke dalam string satu kesatuan. Contoh var string1 = "penggabungan"; // String Pertama var string2 = "string"; // String kedua stringConcat = string1 + string2; // Menggabungkan string dengan (+) document.write (stringConcat); // Menggabungan string

Keterangan Dalam contoh di atas, kita menggunakan 2 (dua) variabel string. Ingat string dikelilingi oleh salah satu tanda kutip tunggal (' ') atau ganda (" "). Pada baris 3 (tiga) nampak "stringConcat = string1 + string2" dan kita menggunakan operator (+) untuk menggabungkan kedua string "string1 + string2". Sebelum penggabungan, kita memiliki dua string, yaitu "penggabungan" dan "string". Setelah penggabungan dengan operator (+), kita memanggil string tersebut dengan document.write (stringConcat);

Operator Konversi Seperti namanya, yaitu konvert yang artinya merubah. Apa saja yang dapat diubah oleh operator konversi ini. 1. parseInt, untuk mengubah string menjadi Integer 2. parseFloat, untuk mengubah string menjadi Float

Fungsi parseInt; Fungsi parseInt() digunakan untuk melakukan konversi dari tipe data string ke tipe data numerik berbentuk bilangan bulat / integer. Contoh <script language="javascript"> stringInteger = "2.5" diTambah = 3 + parseInt(stringInteger); document.write(diTambah);

Keterangan

maka nilai variabel "diTambah" saat ini adalah 5 hasil dari "2+3" (nilai pecahan dari (2.5) dibulatkan menjadi 2) .

Fungsi parseFloat ; parseFloat() digunakan untuk konversi dari tipe data string ke tipe data numerik bilangan pecahan / floating Contoh <script language="javascript"> stringFloat = "2.5" diTambah = 3 + parseFloat(stringInteger); document.write(diTambah);

Keterangan maka nilai variabel "diTambah" saat ini adalah 5.5 hasil dari "2.5+3".

Function pada Javascript Fungsi adalah salah satu bagian yang paling indah dari Javascript. Sebagai bahasa fungsional Javascript mengimplementasikan fungsi kelas pertama (first class function). Fungsi dapat disimpan dalam variabel, dikembalikan oleh fungsi lain, dan dikirimkan sebagai argumen untuk fungsi lainnya. Implementasi fungsi yang sangat fleksibel seperti ini membuka banyak kesempatan kepada pengembang untuk menuliskan kode yang bukan hanya berjalan dengan baik, tetapi juga sangat elegan dan indah. Sebuah fungsi pada Javascript dibuat dengan cara seperti berikut: function tambah(a, b) { hasil = a + b; return hasil; }

Cara penulisan fungsi seperti ini dikenal dengan nama function declaration, atau deklarasi fungsi. Terdapat empat komponen yang membangun fungsi yang baru kita definisikan di atas, yaitu: 1. 2.

3.

4.

Kata kunci function, yang memberitahu Javascript bahwa kita akan membuat fungsi. Nama fungsi, dalam contoh di atas adalah tambah. Dengan memberikan sebuah fungsi nama maka kita dapat merujuk ke fungsi tersebut dengan nama yang diberikan. Harus diingat bawa nama fungsi bersifat opsional, yang berarti fungsi pada Javascript tidak harus diberi nama. Kita akan membahas tentang hal ini lebih dalam nanti. Daftar parameter fungsi, yaitu a, b pada contoh di atas. Daftar parameter ini selalu dikelilingi oleh tanda kurung (()). Parameter boleh kosong, tetapi tanda kurung wajib tetap dituliskan. Parameter fungsi akan secara otomatis didefinisikan menjadi variabel yang hanya bisa dipakai di dalam fungsi. Variabel pada parameter ini diisi dengan nilai yang dikirimkan kepada fungsi secara otomatis. Sekumpulan perintah yang ada di dalam kurung kurawal ({}). Perintah-perintah ini dikenal dengan nama badan fungsi. Badan fungsi dieksekusi secara berurut ketika fungsi dijalankan.

Looping Statement Setiap bahasa pemrograman pasti memiliki fungsi ini. Tanpa fungsi ini, maka akan sangat sulit untuk menulis sebuah program. Fungsi Loop (seperti namanya) digunakan untuk mengeksekusi suatu baris kode berulang-ulang sesuai dengan kondisi yang diberikan. Dalam JavaScript dikenal beberapa fungsi Loop, yaitu while, do while dan for. Kita akan mengulasnya bersama-sama.

while Loop Loop yang paling simpel adalah while. Kita hanya membutuhkan parameter kondisi yang jika kondisi tersebut terpenuhi (true) maka baris kode yang ada di dalam while akan dieksekusi. Berikut contoh sederhana dari while. var i = 0; while (i < 7) { i++; console.log(i); }

do .. while Loop Dengan sintaks yang mirip (dengan tambahan do), namun memiliki karakteristik yang berbeda. Perbedaannya adalah sintaks ini akan selalu mengeksekusi blok satu kali pada saat mulai baru mengecek parameter kondisi untuk melakukan looping. Berikut contohnya. var i = 7; do { i++; console.log(i); } while (i < 7)

for Loop Untuk melakukan looping yang lebih kompleks, sangat disarankan untuk memakai sintaks ini. Sintaks ini membutuhkan parameter iterator (penghitung), kondisi, dan incremental. Berikut contoh sederhana. for (i = 0; i < 10; i++) { console.log(i); }

for .. in Loop Tidak jauh berbeda dengan for Loop sebelumnya, jenis loop ini biasanya dipakai untuk menyebutkan properti dari suatu Objek satu per satu. Berikut adalah contoh sederhananya. nama = {

firstName: 'Tito', middleName: 'Pandu', lastName: 'Brahmanto'}; for (i in nama) { console.log(i + ' : ' + nama[i]); }

Conditional Statement Sangat sering ketika kita menulis kode, kita ingin melakukan tindakan yang berbeda untuk keputusan yang berbeda. kita dapat menggunakan pernyataan kondisional dalam kode kita untuk melakukan hal ini. Dalam JavaScript kita memiliki pernyataan kondisional berikut: 1. if statement – Digunakan untuk mengeksekusi beberapa kode hanya jika kondisi tertentu adalah benar. 2. if…else statement -Digunakan untuk mengeksekusi beberapa kode jika kondisi benar dan kode lain jika kondisi salah. 3. if…else if….else statement – Digunakan untuk memilih salah satu dari banyak blok kode yang akan dieksekusi. If Statement Gunakan jika pernyataan untuk mengeksekusi beberapa kode hanya jika kondisi tertentu adalah benar. Contoh : <script type=”text/javascript”> //Write a “Good morning” greeting if //the time is less than 10 var d=new Date(); var time=d.getHours(); if (time<10) { : document.write(“Good morning”); }

Statement If…else Gunakan If … else untuk mengeksekusi beberapa kode jika kondisi benar dan kode lain jika kondisi tidak benar.

Contoh : <script type=”text/javascript”> //If the time is less than 10, you will get a “Good morning” greeting. //Otherwise you will get a “Good day” greeting. var d = new Date(); var time = d.getHours(); if (time < 10) { document.write(“Good morning!”); } else { document.write(“Good day!”); }

Statement If…else if…else Gunakan if….else if…else pernyataan untuk memilih salah satu dari beberapa blok kode yang akan dieksekusi. Contoh : <script type=”text/javascript”> var d = new Date() var time = d.getHours() if (time<10) { document.write(“Good morning”); } else if (time>=10 && time<16) { document.write(“Good day”); } else { document.write(“Hello World!”); }

JSON (JavaScript Object Notation) JSON (JavaScript Object Notation) adalah format pertukaran data yang ringan, mudah dibaca dan ditulis oleh

manusia, serta mudah diterjemahkan dan dibuat (generate) oleh komputer. Format ini dibuat berdasarkan bagian dari Bahasa Pemprograman JavaScript, Standar ECMA-262 Edisi ke-3 Desember 1999. JSON merupakan format teks yang tidak bergantung pada bahasa pemprograman apapun karena menggunakan gaya bahasa yang umum digunakan oleh programmer keluarga C termasuk C, C++, C#, Java, JavaScript, Perl, Python dll. Oleh karena sifat-sifat tersebut, menjadikan JSON ideal sebagai bahasa pertukaran-data. JSON terbuat dari dua struktur: 1.

2.

Kumpulan pasangan nama/nilai. Pada beberapa bahasa, hal ini dinyatakan sebagai objek (object), rekaman (record), struktur (struct), kamus (dictionary), tabel hash (hash table), daftar berkunci (keyed list), atau associative array. Daftar nilai terurutkan (an ordered list of values). Pada kebanyakan bahasa, hal ini dinyatakan sebagai larik (array), vektor (vector), daftar (list), atau urutan (sequence).

Struktur-struktur data ini disebut sebagai struktur data universal. Pada dasarnya, semua bahasa pemprograman moderen mendukung struktur data ini dalam bentuk yang sama maupun berlainan. Hal ini pantas disebut demikian karena format data mudah dipertukarkan dengan bahasa-bahasa pemprograman yang juga berdasarkan pada struktur data ini.

Catatan 6 Mempelajari JQuery Surabaya, 26 April – 3 Mei 2015

Mempelajari teori di kelas. Uji coba di warkop dan di kost-kostan, ditemani hilir mudik kendaraan dan secangkir kopi pahit saat di warung dan dengan kopi saat di kostkostan.

A. Pengertian jQuery adalah 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 ukuran nya cukup kecil, sehingga tidak memperlambat proses loading halaman web yang kita buat. jQuery juga kompatibel dengan CSS3 dan yang tak kalah penting adalah jQuery bisa berjalan di semua browser – cross browser. jQuery diluncurkan pada Januari 2006 oleh John Resig. jQuery adalah library Javascript yang paling populer saat ini. Karena kecanggihan nya, jQuery dipakai oleh perusahaan besar seperti Google. Dell, CBS, digg, Netflix, Bank of America, Mozilla, Drupal, dsb. jQuery adalah library Javascript yang gratis dan open source. Oleh karena nya kita bisa menggunakan jQuery dengan bebas untuk keperluan pengembangan website kita. 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 website yang cantik dan interaktif. Selain itu tersedia plugin-plugin lain yang makin memperkaya kemampuan jQuery. Situs resmi jQuery beralamat di jquery.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.

B. Fungsi JQuery jQuery, pada intinya, adalah sebuah library yang berfungsi untuk memanipulasi DOM (Materi pada bab sebelumnya). DOM merupakan representasi struktural dari seluruh elemen pada 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 paradigma 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 fungsifungsi yang dapat dirangkaikan (chain-able) dan namanama 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 antarmuka yang 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.

C. 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 selektor CSS yang memanfaatkan nama-nama dan atribut elemen, misalnya id dan 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

D. Cara Menggunakan JQuery 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 publik (CDN) antara lain:  MaxCDN  Google  Microsoft ASP.NET  cdnJs  jsDelivr Untuk menautkan file jQuery pada server lokal, kita harus terlebih dahulu mendownload file library jquery di http://www.jquery.com . Step 1 : Buka jquery.com

Step 2 : download

Setelah itu kita simpan pada server lokal kita,

Jika sudah tersimpan pada file yang akan include kan javascript kita harus menuliskan sebuah kode dalam tag head, disini penulis menggunakan file index.php untuk percobaan.

<script src=” jquery-1.11.3.min.js” type=”text/javascript”>

Kode diatas karena saya menggunakan jquery versi 1.11.3, masih banyak versi jquery yang lain. Seperti pada penjelasan diatas, bukan hanya menggunakan server local untuk penggunaan jQuery, tetapi juga kita bisa mengambilnya dari server public (CDN). Contoh script yang digunakan adalah sebagai berikut. <script src="//code.jquery.com/jquery-1.11.3.min.js" type=”text/javascript”>

Lihat perbedaan pada kedua script tersebut, yang membedakan hanyalah script untuk mencari kode yang akan digunakan, jika yang server local menggunakan package dari server local, maka yang script kedua diambil dari server public(CDN).

E. Hello World dengan jQuery Setelah tadi penulis mendownload jQuery, maka penulis akan mencoba menggunakan jQuery. Untuk percobaan pertama penulis mencoba membuat sebuah Hello World yang disertai dengan animasi sembunyikan dan tampilkan dengan jQuery. Kode <script type="text/javascript" src="jquery.js"> <script type="text/javascript"> $(document).ready(function(){ $(".tombol1").click(function(){ $("p").hide(1000); }); $(".tombol2").click(function(){ $("p").show(1000); }); });

Hello World!

Sembunyikan Tampilkan Tampilan

Tampilan tersebut disertai efek menghilang seperti fade in.

F. jQuery Selector Selectors memungkinkan Anda untuk memanipulasi elemen HTML sebagai kelompok atau sebagai elemen tunggal. Pada penjelasan sebelumnya kita telah melihat contoh cara memilih elemen HTML menggunakan jQuery. jQuery element selectors dan attribute selectors memungkinkan Anda untuk memilih elemen HTML (atau kelompok elemen) dengan nama tag, nama atribut atau konten. Selectors memungkinkan Anda untuk memanipulasi elemen HTML sebagai kelompok atau sebagai elemen tunggal. jQuery Element Selectors jQuery mirip CSS dalam hal memilih elemen HTML.  $("p") memilih semua elemen

 $("p.intro") memilih semua elemen

yang mempunyai class="intro".  $("p#demo") memilih elemen

yang mempunyai id="demo". jQuery Attribute Selectors jQuery mirip XPath dalam hal memilih elemen berdasarkan atribut yang ada.  $("[href]") memilih semua elemen dengan atribut href.  $("[href='#']") memilih semua elemen dengan atribut href bernilai="#".  $("[href!='#']") memilih semua elemen dengan atribut href dengan nilai bukan sama dengan "#".  $("[href$='.jpg']") memilih semua elemen dengan atribut href yang mengandung ".jpg". Berikut adalah daftar table

Selector

*

Contoh penggunaa n $(“*”)

Diskripsi

Semua elemen

#id

$(“#lastna me”)

Elemen yang mempunyai id=lastname

.class

$(“.intro”)

Semua elemen mempunyai class=”intro”

Element

$(“p”)

Semua elemen

.class.class

$(“.intri.de mo”)

Semua elemen yang mempunyai class=intro dan class=demo.

:first

$(“p:first”)

Elemen pertama.

yang

:last

$(“p:last”)

Elemen terakhir.

yang

:even

$(“tr:even” )

Semua elemen yang genap.

:odd

$(“tr:odd”)

Semua elemen yang ganjil.

:eq(index)

$("ul

Elemen ke-empat dari suatu

li:eq(3)")

list (index starts at 0)

:gt(no)

$("ul li:gt(3)")

Elemen-elemen dari suatu list dengan index lebih besar dari 3

:lt(no)

$("ul li:lt(3)")

Elemen-elemen dari suatu list dengan index

yang

kecil dari 3 :not(selector) [atrtribute]

empty)")

Semua input elemen yang tidak kosong

$(“[href]”)

Semua

$("input:not(:

elemen

yang

mempunyai atribut href [atrtribute=v

$(“[href=‟#‟]

Semua

elemen

alue]

”)

mempunyai

yang

atribut

href

bernilai=”#”. [atrtribute!=

$(“[href!=‟#‟]

Semua

elemen

velue]

”)

mempunyai

yang

atribut

href

bernilai<>”#” [atrtribute$=

$(“[href$=‟.jp

Semua

elemen

value]

g‟]”)

mempunyai

yang

atribut

href

yang nilainya mengandung “.jpg” :input

$(“:input”)

Semua elemen input

:not(selector)

$("input:not(:

Semua input elemen yang

empty)")

tidak kosong

$(":file")

Semua

:file

elemen



dengan type="file" :selected

$(":selected")

Semua elemen yang terseleksi

Selain daftar tabel tersebut juga masih banyak selector lainnya. Penulis akan memberikan salah satu contoh penggunaan, yaitu penggunaan selector pada element class. Pertama siapkan kode berikut, kali ini penulis menggunakan elemnt div yang di berikan class info.

Kode

Info

Info 1

Info dari Class info 1

Gambar

Setelah itu tambah script htmlnya , untuk script lengkapnya adalah sebagai berikut <script type="text/javascript" src="jquery.js"> <script type="text/javascript"> $(document).ready(function() { $(".info").text("Tulisan ini dari JQuery .. untuk Class"); });

Info

Info 1

Info dari Class info 1

Gambar

Penggunaan jQuery ini berhubungan dengan DOM (Bab 5), karena dalam pengeditan elemen jQuery konsepnya sama seperti DOM.

Catatan 7 Mempelajari PHP Surabaya, 10 – 16 Mei 2015 Mempelajari teori di kelas. Uji coba kost-kostan, ditemani hujan rintik dan secangkir kopi pahit.

A. Pengertian PHP PHP adalah singkatan dari "PHP: Hypertext Preprocessor", yang merupakan sebuah bahasa scripting yang terpasang pada HTML. Sebagian besar sintaks mirip dengan bahasa C, Java dan Perl, ditambah beberapa fungsi PHP yang spesifik.Tujuan utama penggunaan bahasa ini adalah untuk memungkinkan perancang web menulis halaman web dinamik dengan cepat. Hubungan PHP dengan HTML Halaman web biasanya disusun dari kode-kode html yang disimpan dalam sebuah file berekstensi .html. File html ini dikirimkan oleh server (atau file) ke browser, kemudian browser menerjemahkan kode-kode tersebut sehingga menghasilkan suatu tampilan yang indah. Lain halnya dengan program php, program ini harus diterjemahkan oleh web-server sehingga menghasilkan kode html yang dikirim ke browser agar dapat ditampilkan. Program ini dapat berdiri sendiri ataupun disisipkan di antara kode-kode html sehingga dapat langsung ditampilkan bersama dengan kode-kode html tersebut. Program php dapat ditambahkan dengan mengapit program tersebut di antara tanda . Tanda-tanda tersebut biasanya disebut tanda untuk escaping (kabur) dari kode html. File html yang telah dibubuhi program php harus diganti ekstensi-nya menjadi .php3 atau .php. PHP merupakan bahasa pemograman web yang bersifat server-side HTML=embedded scripting, di mana script-nya menyatu dengan HTML dan berada si server. Artinya adalah sintaks dan perintah-perintah yang kita berikan akan sepenuhnya dijalankan di server tetapi disertakan HTML biasa. PHP dikenal sebgai bahasa scripting yang menyatu dengan tag HTML, dieksekusi di server dan digunakan untuk membuat halaman web yang dinamis seperti ASP (Active Server Pages) dan JSP (Java Server Pages).

B. Sejarah PHP PHP pertama kali dibuat oleh Rasmus Lerdroft, seorang programmer C. Pada waktu itu PHP masih bernama FI (Form Interpreted), yang wujudnya berupa sekumpulan script yang digunakan untuk mengolah data form dari web. Jadi semula PHP digunakannya untuk menghitung jumlah pengunjung di dalam webnya. Kemudian ia mengeluarkan Personal Home Page Tools versi 1.0 secara gratis. Versi ini pertama kali keluar pada tahun 1995. Isinya adalah sekumpulan script PERL yang dibuatnya untuk membuat halaman webnya menjadi dinamis. Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan menamakannya PHP/FI, kependekan dari Hypertext Preprocessing‟/Form Interpreter. Dengan perilisan kode sumber ini menjadi open source, maka banyak programmer yang tertarik untuk ikut mengembangkan PHP. Kemudian pada tahun 1996 ia mengeluarkan PHP versi 2.0 yang kemampuannya telah dapat mengakses database dan dapat terintegrasi dengan HTML. 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 1998 tepatnya pada tanggal 6 Juni 1998 keluarlah PHP versi 3.0 yang dikeluarkan oleh Rasmus sendiri bersama kelompok pengembang softwarenya. PHP versi 4.0 keluar pada tanggal 22 Mei 2000 merupakan versi yang lebih lengkap lagi dibandingkan dengan versi sebelumnya. Perubahan yang paling mendasar pada PHP 4.0 adalah terintegrasinya Zend Engine yang dibuat oleh Zend Suraski dan Andi Gutmans yang merupakan penyempurnaan dari PHP scripting engine. Yang lainnya adalah build in HTTP session, tidak lagi menggunakan library tambahan seperti pada PHP. Tujuan dari bahasa scripting ini adalah untuk membuat aplikasi-aplikasi yang dijalankan di atas teknologi web. Dalam hal ini, aplikasi pada umumnya akan memberikan hasil pada web browser, tetapi prosesnya secara keseluruhan dijalankan web server.

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. C. Kelebihan dan Kekurangan PHP Banyak sekali kelebihan yang dimiliki PHP dibandingkan dengan bahasa pemrograman yang lain, Diantaranya :  Bisa membuat Web menjadi Dinamis.  PHP bersifat Open Source yang berarti dapat digunakan oleh siapa saja secara gratis.  Program yang dibuat dengan PHP bisa dijalankan oleh Semua Sistem Operasi karena PHP berjalan secara Web Base yag artinya semua Sistem Operasi bahkan HP yang mempunyai Web Browser dapat menggunakan program PHP.  Aplikasi PHP lebih cepat dibandingkan dengan ASP maupun Java.  Mendukung banyak paket Database seperti MySQL, Oracle, PostgrSQL, dan lain-lain.  Bahasa pemrograman PHP tidak memerlukan Kompilasi / Compile dalam penggunaannya.  Banyak Web Server yang mendukung PHP seperti Apache, Lighttpd, IIS dan lain-lain.  Pengembangan Aplikasi PHP mudah karena banyak Dokumentasi, Refrensi & Developer yang membantu dalam pengembangannya.  Banyak bertebaran Aplikasi & Program PHP yang Gratis & Siap pakai seperti WordPress, PrestaShop, dan lain-lain.

Selain kelebihan PHP, PHP juga mempunyai kekurangan. Namun masalah kekurangannya sangat sedikit. Diantaranya :  



PHP Tidak mengenal Package. Jika tidak di encoding, maka kode PHP dabat dibaca semua orang & untuk meng encodingnya dibutuhkan tool dari Zend yang mahal sekali biayanya. PHP memiliki kelemahan keamanan. Jadi Programmer harus jeli & berhati-hati dalam melakukan pemrograman & Konfigurasi PHP.

D. Memulai Belajar PHP Untuk menjalankan file php, anda terlebih dahulu harus memiliki sebuah WEB Server , WEB Browser dan Software teks editor (Bab 1). Ada beberapa hal yang perlu diperhatikan terkait cara menjalankan file PHP: 

 

File php yang akan dijalankan harus berada di dalam folder D:\xampp\htdocs, baik itu di dalam folder tersebut, atau folder-folder dibawahnya. Untuk menjalankan di dalam browser, anda tinggal mengganti alamat D:\xampp\htdocs menjadi localhost. Namun Jika file php tersebut berada di luar folder htdoc, maka web server tidak bisa mengaksesnya. Setiap file PHP harus ditulis menggunakan akhiran .php (walaupun hal ini bisa dirubah pada settingan modul php). Penamaan file PHP, harus tanpa spasi dan sebaiknya menggunakan huruf kecil. Anda dapat menggunakan underscore (_) sebagai pengganti spasi.

E. Aturan Penulisan dalam PHP Penulisan Script dalam PHP mempunyai beberapa aturan, sebagai berikut. - Script PHP menyatu dengan kode HTML dalam satu file, namun disimpan dalam format php dengan ekstensi .php. - Kode PHP diawali dengan tag - Setiap baris perintah harus diakhiri dengan titik koma (;) Contoh :

F. Komentar dengan PHP Seperti halnya dengan html (Bab 2), php juga memiliki script yang berbeda untuk penulisan komentar. Komentar berfungsi sebagai dokumentasi kecil didalam file PHP. Dengan komentar Anda dapat memberi catatan terhadap fungsi dari sebagian script yang Anda buat dan komentar tidak akan dieksekusi. Ada 3 macam cara penulisan komentar yaitu, /* komentar */, //komentar dan #komentar. Pilih /* komentar */ jika Anda ingin membuat komentar lebih dari satu baris. Contoh : Hallo dunia, Bagaimana kabarmu hari ini ?

Gambar :

G. Konstanta pada PHP Dalam bahasa pemograman, Konstanta (constant) adalah suatu lokasi penyimpanan (dalam memory) yang berisikan nilai yang sifatnya tetap dan tidak bisa diubah sepanjang program berjalan (wikipedia). Berbeda dengan variabel yang isi/nilainya dapat diubah bahkan dihapus selama program berjalan, sebuah konstanta jika telah diberikan nilai, tidak dapat diubah lagi dalam kode program. Hal ini seseuai dengan namanya, yakni konstant. Untuk membuat konstanta PHP menyediakan 2 cara: 1. Menggunakan kata kunci (keyword) const. 2. Menggunakan fungsi define. Untuk mendefenisikan konstanta dengan kata kunci const, caranya mirip dengan menambahkan nilai kepada sebuah variabel, namun didahului kata const. Berikut adalah contoh penulisannya:

Jika menggunakan fungsi define, fungsi ini membutuhkan 2 nilai, yakni nama konstanta, dan nilainya. Seperti contoh berikut ini:

Aturan penamaan konstanta sama seperti variabel, yakni untuk karakter pertama hanya boleh menggunakan huruf dan underscore (_), dan untuk huruf kedua dan seterusnya, boleh menggunakan huruf, angka dan underscore. Sehingga sebuah konstanta juga tidak boleh diawal angka atau mengandung karakter khusus sepert #,*, atau &. Catatan : Sedikit catatan tentang perbedaan pendefenisian konstanta menggunakan kata kunci const dan fungsi define: Pembuatan konstanta dengan keyword const hanya dapat digunakan pada top-level scope, yakni harus dalam lingkungan global PHP. Sehingga kita tidak bisa menggunakan const di dalam function, loop, atau kondisi if. Apabila anda membutuhkan konstanta di dalam fungsi, maka harus menggunakan keyword define. H. Variabel pada php Variabel adalah tempat atau wadah untuk menyimpan suatu nilai selama program berjalan didalam memori komputer atau bersifat sementara. Penulinas variable pada php hamper sama dengan penulisan variable dengan javascript, akan tetapi penulis tetap akan menjelaskan tentang penulisan variable. Variabel dalam PHP diawali tanda “$” dan nama variabel casesensitive dalam artian huruf kecil dan kapital berbeda contohnya $nama dengan $Nama. Berikut aturan penamaan variabel:    

Harus diawali dengan alphabet atau underscore ( _ ) “$_nama” atau “$nama”\ Tidak boleh mengandung karakter khusus seperti (*,&,#,@,!, dan lainnya) Tidak boleh diawali dengan angka “$4a” Tidak ada spasi di dalamnya.

Contoh nama variabel yang benar:

   

$nama $_nama $nama2 $nama_lengkap

Contoh nama variabel yang salah:  $2nama  $nama lengkap  $n@ma Ada 2 tipe variabel didalam PHP, yaitu: 1. Variabel by Value adalah variabel yang berisi nilai dari variabel lain (asal), dimana nilai tersebut sifatnya dicopy, dalam artian ketika terjadi perubahan di variabel asal tidak akan mempengaruhi variabel tujuan. 2. Variabel by Reference adalah variabel yang berisi nilai dari variabel lain (asal), dimana nilai tersebut sifatnya reference, dalam artian ketika terjadi perubahan di variabel asal akan mempengaruhi variabel tujuan dan sebaliknya. Contoh variable by value Kode : "; echo "$_nama: " . $_nama . "

"; $nama = "Khoiri"; //nilai variabel $nama dirubah echo "$nama: " . $nama . "
"; echo "$_nama: " . $_nama . "
"; ?>

Gambar :

Contoh varibel by reference "; echo "$_nama: " . $_nama . "

"; $nama = "Khoiri"; //nilai variabel $nama dirubah echo "$nama: " . $nama . "
"; echo "$_nama: " . $_nama . "

"; $_nama = "Bro"; //nilai variabel $_nama dirubah echo "$nama: " . $nama . "
"; echo "$_nama: " . $_nama . "

"; ?>

Gambar

I. Tipe Data pada PHP Untuk tipe data pada php hampir sama dengan javascript, hanya saja ada tambahan, yaitu tipe data Resource. Dalam PHP tipe data tidak dideklarasikan oleh programmer akan tetapi ditentukan secara otomatis oleh Intepreter PHP. Jadi anda tidak perlu deklarasikan tipe data tersebut jika ingin memberikan nilai pada suatu variabel. Anda dapat menuliskan fungsi gettype()untuk mengetahui type data dari nilai yang anda berikan.

0.3; -3; "Hallo Berooo"; "$a adalah type data ". gettype($a)."
"; "$b adalah type data ". gettype($b)."
"; "$c adalah type data ". gettype($c)."
";

Ada 8 macam tipe data pada PHP, diantaranya : Tipe data integer Tipe data integer adalah tipe data yang berguna untuk menyimpan bilangan bulat, bukan desimal. Sebagai contoh (1),(2),(3),(4),(5),(-1),(-2),(-3),(-4) dan lain-lain. Tipe data ini memiliki range antara -2,147,483,648 sampai dengan +2,147,483,648 platform 32bit. Namun bila terdapat data diluar jangkauan tersebut, maka secara otomatis PHP akan mengkonversikannya ke dalam tipe data Floating Point. Integer merupakan Tipe Data yang berisikan bilangan bulat negatif dan positif atautanpa ada nilai pecahan. Tipe ini juga dapat dinyatakan dalam bentuk oktal (berbasis 8), desimal (berbasis 10), heksadesimal (berbasis 16). Seperti dalam contoh berikut : $oktal = 031; $desimal = 25; $heksadesimal = 0×10;

Double Floating Tipe data floating point numbers biasa juga disebut dengan “double”, ” float” atau “real” adalah tipe data yang berguna untuk menyimpan bilangan desimal. Sebagai contoh (0.1),(1.3),(1.7),(1.8),(9.7),(2.4) dan lain-lain. Contoh penulisannya :
= = = =

1.234; 1.2e3; 2E-6; 1.2E8;

?>

Boolean Tipe Data ini adalah tipe data yang paling sederhana. Hanya berupa true atau false. Cara memasukan ke dalam variabel adalah dengan memberikan nilai true atau falsepada variabel tersebut. Penulisannya tidak dipengaruhi penggunaan huruf besar atau kecil. Contoh penulisannya :

Setiap Tipe Data dalam PHP mempunyai Boolean untuk melakukan Seleksi Kondisi. dan Tipe Data tersebut akan memberikan nilai true atau false pada seleksi kondisi tersebut.  Pada Variabel yang bertipe Data integer=0 (nol) mempunyai boolean false, selain itu true.  Pada Variabel yang bertipe Data float=0.0 (nol) mempunyai boolean false, selain itu true.  Pada Tipe Data string yang kosong, dan string="0" mempunyai boolean false, selain itu true.  Array yang tidak mempunyai element mempunyai boolean false, selain itu true.

 

Objek yang tidak mempunyai member mempunyai boolean false, selain itu true. Tipe NULL dan Variabel yang belum terisi mempunyai boolean false.

String String adalah sebuah tipe data yang terdiri dari kata, bisa berupa kata tunggal maupun kalimat. Penulisan string harus diapit oleh tanda petik, baik petik tunggal(„ „) maupun petik ganda (” “) Contoh penulisan tipe data string :

Perbedaan antara petik ganda dan petik tunggal adalah, ketika kita menggunakan petik tunggal maka variabel tidak akan terbaca nilainya. Beda halnya dengan penggunaan petik genap yang akan membaca nilai dari suatu variabel. Lebih spesifiknya :

Jika string yang tertutup dalam tanda kutip ganda (” “), PHP akan menafsirkan escape sequence lebih untuk karakter khusus. Maka penulisan untuk karakter khusus tersebut harus ditambahkan slash didepan karakter tersebut.

Objek Tipe data object dibuat dengan tujuan agar para programmer terbiasa dengan OOP. Tipe data object bisa berupa bilangan, variabel atau fungsi. Data ini dapat dimasukkan ke dalam kode program sehingga meringkas beberapa fungsi dan memperkecil ukuran file. Agar lebih mudah dapat menggunakan variabel dengan nilai string : Contoh Kode : class Nama { var $jenis = “Beroo Haloo”; function ganti_nama($jenis) { $this->jenis = $jenis; } } $nama = new Nama; echo $nama->jenis; $nama->ganti_nama(“Haloo Beroo”); echo “
”.$nama->jenis;

Gambar

Array Array atau Larik merupakan Tipe Compound Primitif, terdapat pada bahasa-bahasa pemrograman lain. Tipe data array digunakan untuk menyimpan banyak data dalam satu variabel. Jenis array dalam php ada 3 (tiga) macam yakni : Numeric Array
$hari[3]="Kamis"; $hari[4]="Jum'at"; $hari[5]="Sabtu"; $hari[6]="Minggu"; //menampilkan tanpa perulangan. echo "sekarang adalah hari $hari[3]
" ; //menampilkan menggunakan perulangan //perulangan akan dijelaskan pada artikel berikutnya for($i=0;$i<=6;$i++){ echo $hari[$i]."
"; } ?>

Pada contoh numeric array diatas dapat disimpulkan bahwa pemanggilan data array tersebut menggunakan angka, angka dimulai dari 0 sampai jumlah data yang dimasukkan. $hari[0] adalah pemanggilan untuk data pertama, $hari[1] adalah pemanggilan untuk data kedua dan seterusnya. Associative Array "Ayam","Selasa"=>"Lele","Rabu"=>"Tempe","K amis"=>"Tahu","Jum'at"=>"Teri","Sabtu"=>"Krupuk","Minggu" =>"Puasa"); //menampilkan tanpa perulangan. echo "Menu hari senin adalah $hari[Senin]" ; ?> Pada contoh associative array diatas dapat disimpulkan bahwa pemanggilan data array tersebut menggunakan string yang ditentukan oleh kita, dengan kata lain pemanggilan menggunakan angka kita ganti menjadi string yang kita inginkan.

Multidimensional Array Pengertian multidimension array adalah array didalam array. Pemanggilan array ini bisa menggunakan numeric array maupun associative array. $makan[0]["pagi"] dapat diartikan sebagai menampilkan nilai array pertama dan array pagi dari variabel makan, $makan["senin"]["pagi"] dapat diartikan sebagai menampilkan nilai array senin dan array pagi dari variabel makan. "bubur","siang"=>"ayam","sore"=>"bebe k"), array("pagi"=>"bubur","siang"=>"tahu","sore"=>"temp e") ); //menampilkan tanpa perulangan. echo "Menu makan pada hari senin pagi adalah " . $makan[0]["pagi"]; echo "
"; echo "Menu makan pada hari senin pagi adalah " . $makan[1]["sore"]; ?>

Null NULL adalah Tipe Data yang tidak memuat apapun. Setiap Variabel yang diset menjadi Tipe Data NULL ini akan menjadikan Variabel tersebut kosong, seperti dalam penggunaan fungsi unset(). Cara untuk menset Variabel menjadi NULL adalah dengan memasukan nilai NULL pada variabel yang dimaksud seperti pada Contoh berikut:

Resources Tipe Data Spesial yang satu ini di khususkan untuk menyimpan resource, sumber atau alamat. Variabel tersebut hanya dapat diciptakan oleh suatu fungsi khusus yang mengembalikan nilai berupa resource seperti penggunaan fungsi fopen, opendir, mysql_connect, mysql_query dan semacamnya.

J. Operator pada PHP Kata operator mungkin sudah tidak asing lagi pada telinga anda. Karena pada bab sebelumnya sudah dijelaskan tentang operator, lebih tepatnya operator pada javascrip. Pada dasarnya konsep operator pada php sama dengan operator pada javascrip. Artinya pada buku ini penulis akan memberikan beberapa contoh penggunaan operator pada php. Operator matematika Kode "; echo "$a - $b = $pengurangan
"; echo "$a * $b = $perkalian
"; echo "$a : $b = $pembagian
"; ?>

Gambar

Operator assignment Operator assignment merupakan operator yang berguna untuk memasukkan nilai kedalam suatu variable. Dan jangan lupa, setiap baris code harus di tutup dengan ';' atau script anda akan error. Contoh : Kode "; echo "b = $b
"; echo "c = $c
"; $a += 2; $b = $b + 2; $c = 10 + 2; echo "nilai a setelah dirubah $a
"; echo "nilai b setelah dirubah $b
"; echo "nilai c setelah dirubah $c
"; ?>

Gambar

Untuk beberapa jenis operator yang lain, penggunaannya masih menggunakan beberapa kondisi. Contohnya akan penulis bahas pada bab selanjutnya.

K. PHP Statement Pernyataan bersyarat digunakan untuk melakukan tindakan yang berbeda berdasarkan pada kondisi yang berbeda. Pada sub bab sebelumnya sudah penulis janjikan contoh

penggunaan operator lain. Operator lain tersebut akan penulis gunakan pada pernyataan bersyarat ini. Berikut penjelasan contoh beberapa php statement. If Statement Digunakan untuk mengeksekusi beberapa kode hanya jika kondisi tertentu adalah benar. Contoh : Kode echo } ?>

$a
"; $b

"; $b){ "
$a lebih besar dari $b";

Gambar

Penjelasan Masih ingat dengan janji penulis ?. Yah, disini penulis akan menjelasankan operator yang lain, yaitu Comparison Operator atau yang biasa dikeanl dengan operator pembanding. Pertamatama penulis mendeklarasikan 2 buah variable. Lalu penulis menampilkannya. Penulis menggunakan if untuk membuat suatu kondisi. Yaitu jika kondisi variable a lebih besar dari b ($a > $b). if disini menggunakan sebuah operator pembading yaitu besar dari. Jika a lebih besar dari b maka akan muncul tulisan 10 lebih besar dari 5. Rubahlah operator pembanding atau value variable pada script diatas, lalu lihat hasilnya.

Statement If … Else Digunakan untuk mengeksekusi beberapa kode jika kondisi benar dan kode lain jika kondisi adalah palsu. Contoh : Kode "; echo "b = $b

"; if ($a > $b) { echo "$a lebih besar dari $b"; } else { echo "$b lebih besar dari $a"; } ?>

Gambar

Penjelasan Statement ini berada satu tingkat lebih tinggi dari pada statement sebelumnya. Jika pada statement sebelumnya hanya memberikan pernyataan jika kondisi benar. Maka pada statement ini memberikan 2 pernyataan. Yaitu jika benar atau salah. Perbedaanya hanya pada else. Else disana menyatakan sebuah nilai tidak benar atau salah. Statement If…Elseif…Else Gunakan If.. Elseif…Else untuk memilih salah satu dari beberapa blok kode yang akan dieksekusi. Contoh : Kode
elseif ($d=="Sun") echo "Dino Minggu Wayahe turu vroh"; else echo "Semoga hari mu menyenangkan "; ?>

Gambar

Penjelasan Statement ini merupakan suatu penggabungan dari statement sebelumnya. Yaitu statement bertumpuk, lihat bahwa if else diulang beberapa kali. Disana penulis mendeklarasikan sebuah variable yang bernilai hari pada hari ini ($d=date("D");) Lalu penulis menggunakan sebuah syarat, yaitu jika hari ini hari jum‟at maka akan muncul “Wayahe Jum‟atan Coy”. Jika tidak kode ini akan mengecek lagi sebuah kondisi jika hari ini hari minggu. Jika benar maka akan muncul "Dino Minggu Wayahe turu vroh". Jika hari ini selain hari jum‟at dan minggu maka akan muncul “Semoga hari mu menyenangkan”. Itu adalah sebuah kondisi salah yang terakhir. Pembaca bisa memberikan kondisi lebih lanjut dengan if else lagi. Mungkin kondisinya jika hari ini hari senin atau yang lain. Switch Case Untuk statement ini logikanya hampir sama dengan statement sebelumnya. Hanya saja penulisannya sedikit berbeda. Kode
case 0: echo "Angka break; case 1 : echo "Angka break; case 2 : echo "Angka break; case 3 : echo "Angka break; default : echo "Angka break; } ?>

Nol "; Satu "; Dua "; Tiga "; diluar jangkauan";

Gambar

Penjelasan Pertama penulis mendeklarasikan sebuah variable a dengan nilai 9. Switch disana digunakan untuk menentukan nilai mana yang digunakan untuk menentukan kondisi. Case digunakan untuk membuat pernyataan seperti if. Break tidak digunakan untuk else atau kondisi salah, tetapi digunakan untuk menghentikan pengecekan. Untuk else pada switch case menggunakan desault. Break hanya digunakan untuk keluar dari case.

L. Perulangan pada php Struktur perulangan (atau dalam bahasa inggris disebut dengan loop) adalah instruksi program yang bertujuan untuk mengulang beberapa baris perintah. Di dalam bahasa

pemograman, terdapat beberapa jenis instruksi perulangan, salah satunya: struktur perulangan FOR. Contoh : Kode "; } ?>

Gambar

Penjelasan Pada program diatas penulis iki menulis Saya sedang belajar PHP sebanyak 10. Mungkin pembaca ingat saat pembaca mendapatkan hukuman dari guru atau dosen untuk menulis kata yang sama berulang kali. Seperti itulah logikanya. Dalam merancang perulangan kode program, penulis setidaknya harus mengetahui 3 komponen, yaitu kondisi awal dari perulangan, perintah program yang akan diulang, serta kondisi akhir dimana perulangan akan berhenti. Contoh diatas adalah contoh infinity loop (ketika membuat kondisi akhir dari perluangan for, kita harus memperhatikan kapan kondisi akhir tersebut dipenuhi. Jika kondisi akhir tidak pernah terpenuhi,

maka perulangan akan berjalan selamanya. Hal ini dikenal dengan infinity loop. Berikut adalah ketentuan penggunaan perulangan dengan for : for (start; condition; increment) { statement; }

Start adalah kondisi pada saat awal perulangan. Biasanya kondisi awal ini digunakan untuk membuat dan memberikan nilai kepada variabel counter yang digunakan untuk mengontrol perulangan. Misalkan, kita akan membuat variabel counter $i, maka untuk kondisi start ini, kita juga harus memberikan nilai awal untuk variabel $i, misalnya dengan 1, maka $i=1. Condition adalah kondisi yang harus dipenuhi agar perulangan dijalankan. Selama kondisi ini terpenuhi, maka PHP akan terus melakukan perulangan. Biasanya variabel counter digunakan untuk mengatur akhir perulangan. Misalkan kita ingin menghentikan perulangan jika variabel $i telah mencapai nilai 20, maka pada bagian condition ini kita membuat perintah $i<=20, yang berarti selama nilai $i kurang atau sama dengan 20, terus lakukan perulangan. Increment adalah bagian yang digunakan untuk memproses variabel counter agar bisa memenuhi kondisi akhir perulangan. Biasanya, pada bagian inilah kita akan membuat kondisi dari variabel counter. Disinilah ada operator lain. Yaitu operator penugasan pengurangan atau penambahan nilai. Ingat operator assignment. Seperti itulah cara kerjanya, akan tetapi hanya denga dengan penulisan yang berbeda, jika operator assignment bisa menggunakan value berapapun untuk nilai penjumlahan atau pengurangannya, maka pada operator valuenya adalah tetap yaitu 1. Statement adalah bagian kode program yang akan diproses secara terus-menerus selama proses perulangan berlangsung. Untuk statement ini, kita membuat blok program di antara tanda kurung kurawal ({ dan }) sebagai penanda bahwa bagian didalam kurung kurawal inilah yang akan dikenai proses perulangan.

Nested loop Selain infinity loop, terdapat istilah lainnya yang sering digunakan dalam proses perulangan, yakni nested loop, atau terjemahan bebasnya: perulangan bersarang. Nested loop adalah istilah pemograman yang berarti membuat perulangan di dalam perulangan. Contoh : Kode 0; $i--) { for ($j=$i; $j > 0; $j--) { echo $i; } echo "
"; }

Gambar

Logika Penulis ingin menampilkan angka 1 sampai 5 dengan urutan descending. Tetapi penulis memiliki permintaan lain, yaitu jika variable tersebut bernilai 5 maka akan menampilkan nilai 5 sebanyak 5 kali, jika 4 maka 4 kali, begitu seterusnya. Penjelasan Pada for yang pertama, digunakan untuk mengulang angka 1 – 5. Karena descending maka penulis mendeklarasikan untuk variable i adalah 5, menurut logika diatas perulangan hanya angka 1 sampai 5. Jika i adalah 5 maka batasannya nilai akhir adalah lebih besar dari 0. Maka pada Condition dituliskan $i > 0. Selanjutnya adalah incrementnya yaitu menggunakan

pengurangan statis. Kita sudah mendapatkan nilai dari 5 – 1. Maka untuk selanjutnya penulis menggunakan logika berikutnya. Yaitu mengulang sebanyak bilangan itu, inilah yang dinamakan nested loop (perulangan didalam perulangan). Lihat kode tersebut, konsepnya sama dengan for atasnya.

Catatan 8 Database dan MySQL Surabaya, 17 – 23 Mei 2015 Mempelajari teori di kelas. Uji coba di laboratoarium kampus dan di kost-kostan, ditemani secangkir kopi pahit.

A. Pengertian Database Data berasal dari bahasa latin yaitu datum, yang berarti item informasi. jika lebih dari satu datum (jamak) maka disebut dengan data. jadi dapat disimpulkan data adalah bentuk jamak dari datum. Database ( Basis Data ) Merupakan Kumpulan dari suatu data yang tersimpan dan saling berhubungan satu sama lain tersimpan dalam suatu komputer dan digunakan perangkat lunak untuk memanipulasinya. Penerapan database dalam suatu informasi disebut dengan datebase System. Suatu data didefinisikan sebagai kumpulan data yang disatukan didalam suatu organisasi.Organisasi tersebut data dikatakan sebagai company, bank sekolah - sekolah, universitas universitas dan lain - lain. Maksudnya database digunakan untuk menyimpan semua data yang diinginkan pada suatu lokasi tertentu.sehingga suatu data dalam organisasi tersebut dapat dieleminasi. Data perlu disimpan di dalam basis data untuk keperluan penyediaan informasi lebih lanjut.data didalam basis data supaya dirganisasikan sedemikian rupa, sehingga membentuk informasi yang lebih berkualitas. B. Membangun Database Pembuatan (design) database yang baik memudahkan kita untuk memelihara dan mengupgrade (suatu saat nanti) menjadi system database yang lebih kompleks. Dengan sistem database yang benar, Anda tidak perlu merubah nomor telepon supplier didalam tiga tempat, tapi cukup didalam data pusatnya. Membangun database yang benar pada awal pembuatan merupakan langkah awal agar database Anda mudah digunakan dan dimodifikasi pada masa-masa berikutnya. Terdapat beberapa langkah dalam membangun database yang baik, yaitu: 1. Tentukan tujuan pembuatan database. 2. Tentukan table-table yang diperlukan.

3. 4. 5. 6. 7.

Tentukan field-field yang dibutuhkan didalam masingmasing table. Tentukan table yang akan digunakan secara bersama-sama. Identifikasi field-field yang akan menjadi kunci, baik primary key maupun foreign key. Tentukan relationships antara masing-masing table. Check ulang, kemudian coba ringkaskan kembali design database yang sudah dibuat (jika memungkinkan).

C. Pengertian MySQL MySQL adalah sebuah implementasi dari sistem manajemen basisdata relasional (RDBMS) yang didistribusikan secara gratis. Setiap pengguna dapat secara bebas menggunakan MySQL, namun dengan batasan perangkat lunak tersebut tidak boleh dijadikan produk turunan yang bersifat komersial. MySQL sebenarnya merupakan turunan salah satu konsep utama dalam basisdata yang telah ada sebelumnya; SQL (Structured Query Language). SQL adalah sebuah konsep pengoperasian basisdata, terutama untuk pemilihan atau seleksi dan pemasukan data, yang memungkinkan pengoperasian data dikerjakan dengan mudah secara otomatis. Kehandalan suatu sistem basisdata (DBMS) dapat diketahui dari cara kerja pengoptimasi-nya dalam melakukan proses perintah-perintah SQL yang dibuat oleh pengguna maupun program-program aplikasi yang memanfaatkannya. Sebagai peladen basis data, MySQL mendukung operasi basisdata transaksional maupun operasi basisdata nontransaksional. Pada modus operasi non-transaksional, MySQL dapat dikatakan unggul dalam hal unjuk kerja dibandingkan perangkat lunak peladen basisdata kompetitor lainnya. Namun demikian pada modus non-transaksional tidak ada jaminan atas reliabilitas terhadap data yang tersimpan, karenanya modus nontransaksional hanya cocok untuk jenis aplikasi yang tidak membutuhkan reliabilitas data seperti aplikasi blogging berbasis web (wordpress), CMS, dan sejenisnya. Untuk kebutuhan sistem yang ditujukan untuk bisnis sangat disarankan untuk menggunakan modus basisdata transaksional, hanya saja sebagai

konsekuensinya unjuk kerja MySQL pada modus transaksional tidak secepat unjuk kerja pada modus non-transaksional. D. Keistimewaan MySQL 1. Portabilitas. MySQL dapat berjalan stabil pada berbagai sistem operasi seperti Windows, Linux, FreeBSD, Mac Os X Server, Solaris, Amiga, dan masih banyak lagi. 2. Perangkat lunak sumber terbuka (open source). MySQL didistribusikan sebagai open source sehingga dapat digunakan secara gratis. 3. Multi-user. MySQL dapat digunakan oleh beberapa pengguna dalam waktu yang bersamaan tanpa mengalami masalah atau konflik. 4. Performance tuning, MySQL memiliki kecepatan yang menakjubkan dalam menangani query sederhana, dengan kata lain dapat memproses lebih banyak SQL per satuan waktu. 5. Ragam tipe data. MySQL memiliki ragam tipe data yang sangat kaya, seperti signed / unsigned integer, float, double, char, text, date, timestamp, dan lain-lain. 6. Perintah dan Fungsi. MySQL memiliki operator dan fungsi secara penuh yang mendukung perintah Select dan Where dalam perintah (query). 7. Keamanan. MySQL memiliki beberapa lapisan keamanan seperti password yang terenkripsi. 8. Skalabilitas dan Pembatasan. MySQL mampu menangani basis data dalam skala besar, dengan jumlah record lebih dari 50 juta dan 60 ribu tabel serta 5 milyar baris. Selain itu batas indeks yang dapat ditampung mencapai 32 indeks pada tiap tabelnya. 9. Konektivitas. MySQL dapat melakukan koneksi dengan klien menggunakan protokol TCP/IP, Unix soket (UNIX), atau named pipes (NT). 10. Localisation. MySQL dapat mendeteksi pesan kesalahan pada klien dengan menggunakan lebih dari dua puluh bahasa. Meski pun demikian, bahasa Indonesia belum termasuk di dalamnya.

11. Antar Muka. MySQL memiliki antar muka (interface) terhadap berbagai aplikasi dan bahasa pemrograman dengan menggunakan fungsi API (Application Programming Interface). 12. Klien dan Peralatan. MySQL dilengkapi dengan berbagai tool yang dapat digunakan untuk administrasi basis data, dan pada setiap peralatan yang ada disertakan petunjuk online. 13. Struktur tabel. MySQL memiliki struktur tabel yang lebih fleksibel dalam menangani ALTER TABLE, dibandingkan basis data lainnya semacam PostgreSQL ataupun Oracle E. Tipe Data MySQL Macam-macam Tipe Data pada MySQL sebenarnya mempunyai beberapa jenis, secara umum tipe-tipe data MySQL ini ada empat (5), diantaranya yaitu: Tipe Data Numeric Tipe data numerik yaitu tipe data yang digunakan untuk menyimpan data numeric (angka). Nama Penggunaan Jangkauan TINYINT Digunakan untuk -128 s/d 127 menyimpan data bilangan bulat positif dan negatif SMALLINT Digunakan untuk -32.768 s/d 32.767 menyimpan data bilangan bulat positif dan negatif MEDIUMIN Digunakan untuk -8.388.608 s/d 8.388.607 T menyimpan data bilangan bulat positif dan negatif INT Digunakan untuk -2.147.483.648 s/d menyimpan data 2.147.483.647 bilangan bulat positif dan negatif

BIGINT

FLOAT

DOUBLE

REAL

DECIMAL

NUMERIC

Digunakan untuk menyimpan data bilangan bulat positif dan negatif Digunakan untuk menyimpan data bilangan pecahan positif dan negatif presisi tunggal D igunakan untuk menyimpan data bilangan pecahan positif dan negatif presisi ganda D igunakan untuk menyimpan data bilangan pecahan positif dan negatif presisi ganda D igunakan untuk menyimpan data bilangan pecahan positif dan negatif D igunakan untuk menyimpan data bilangan pecahan positif dan negatif

± 9,22 x 1018

-3.402823466E+38 s/d 1.175494351E-38, 0, dan 1.175494351E-38 s/d 3.402823466E+38 -1.79...E+308 s/d 2.22...E-308, 0, dan 2.22...E-308 s/d 1.79...E+308 -1.79...E+308 s/d 2.22...E-308, 0, dan 2.22...E-308 s/d 1.79...E+308 -1.79...E+308 s/d 2.22...E-308, 0, dan 2.22...E-308 s/d 1.79...E+308 -1.79...E+308 s/d 2.22...E-308, 0, dan 2.22...E-308 s/d 1.79...E+308

Tipe Data String (Text) Tipe data string yaitu tipe data yang digunakan untuk menyimpan data string (text). Nama Penggunaan Jangkauan CHAR D igunakan untuk 0 s/d 255 karakter menyimpan data string ukuran tetap VARCHAR Digunakan untuk 0 s/d 255 karakter

TINYTEXT

TEXT MEDIUMTEXT LONGTEXT

menyimpan data string ukuran dinamis Digunakan untuk menyimpan data text Digunakan untuk menyimpan data text Digunakan untuk menyimpan data text Digunakan untuk menyimpan data text

(versi 4.1), 0 s/d 65.535 0 s/d 255 karakter (versi 4.1), 0 s/d 65.535 0 s/d 65.535 (216 1) karakter 0 s/d 224 - 1 karakter 0 s/d 232 - 1 karakter

Tipe Data Date dan Time Tipe data date dan time yaitu tipe data yang digunakan untuk menyimpan data tanggal dan waktu. Nama Penggunaan Jangkauan DATE Digunakan untuk 1000-01-01 s/d menyimpan data tanggal. 9999-12-31 (YYYYMM-DD) TIME Digunakan untuk -838:59:59 s/d menyimpan data waktu. +838:59:59 (HH:MM:SS) DATETIME Digunakan untuk '1000-01-01 00:00:00' menyimpan data tanggal s/d '9999-12-31 dan waktu. 23:59:59' YEAR Digunakan untuk 1900 s/d 2155 menyimpan data tahun dari tanggal.

Tipe Data BLOB (Biner) Tipe data blob digunakan untuk menyimpan data biner. Nama Penggunaan Jangkauan BIT Digunakan untuk 64 digit biner menyimpan data TINYBLOB 255 byte biner. BLOB 216 - 1 byte

MEDIUMBLOB LONGBLOB

224 - 1 byte 232 - 1 byte

Tipe Data Kelompok Himpunan Selain tipe data di atas, MySQL juga menyediakan tipe data yang lain, diantaranya adalah : Nama Penggunaan Jangkauan ENUM enumerasi sampai dengan (kumpulan data) 65535 string SET Combination sampai dengan 255 (himpunan data) string anggota

F. Perintah dasar MySQL Create Database Digunakan untuk membuat database baru. Syntax dasar: CREATE DATABASE database_nama Contoh: CREATE DATABASE my_database

Create Table Digunakan untuk membuat tabel data baru dalam sebuah database. Syntax dasar: CREATE TABLE ( Column_name1 table_nama data_type Column_name2 table_nama data_type Column_name3 table_nama data_type )

Contoh: CREATE TABLE anggota (

Nomor int, Username varchar (25), Nama varchar (255), Email varchar(50), Password varchar(50), Kota varchar(255) )

Select Digunakan untuk memilih data dari table database. Syntax dasar: SELECT column_name(s) FROM table_name

Atau SELECT * FROM table_name

Contoh 1: SELECT Nama,Password FROM anggota

Contoh 2: SELECT * FROM anggota

Keterangan : Contoh nomor 1 hanya digunakan untuk memilih field Nama dan Password. Contoh nomor 2 digunakan untuk memilih semua field yang ada dalam table. Select Distinct Digunakan untuk memilih data-data yang (menghilangkan duplikasi) dari sebuah table database. Syntax dasar: SELECT DISTINCT column_name(s) FROM table_name

Contoh: SELECT DISTINCT Kota FROM anggota

berbeda

Where Digunakan untuk memfilter data pada perintah Select Syntax dasar: SELECT column name(s) FROM table_name WHERE column_name operator value

Contoh: SELECT * FROM anggota WHERE Kota=‟LAMONGAN‟

Order By Digunakan untuk mengurutkan data berdasarkan kolom (field) tertentu. Secara default, urutan tersusun secara ascending (urut kecil ke besar). Anda dapat mengubahnya menjadi descending (urut besar ke kecil) dengan menambahkan perintah DESC. Syntax dasar: SELECT column_name(s) FROM table_name ORDER BY column_name(s) ASC|DESC

Contoh 1: SELECT * FROM bukutamu ORDER BY nama

Contoh 2: SELECT * FROM anggota ORDER BY Username DESC

Like Digunakan bersama dengan perintah Where, untuk proses pencarian data dengan spesifikasi tertentu. Syntax dasar: SELECT column_name(s) FROM table_name WHERE column_name LIKE pattern

Contoh 1: SELECT * FROM anggota WHERE Username LIKE „a%‟

Keterangan : Contoh di atas digunakan untuk pencarian berdasarkan kolom Username yang berhuruf depan “a”. Contoh 2: SELECT * FROM anggota WHERE Username LIKE „%a‟

Keterangan : Contoh di atas digunakan untuk pencarian berdasarkan kolom Username yang berhuruf belakang “a”. In Digunakan untuk pencarian data menggunakan lebih dari satu filter pada perintah Where. Syntax dasar : SELECT column_name(s) FROM table_name WHERE column_name IN (value1,value2, . . .)

Contoh: SELECT * FROM anggota WHERE kota IN („Lamongan‟,‟Surabaya‟)

Between Digunakan untuk menentukan jangkauan pencarian. Syntax dasar: SELECT column_name(s) FROM table_name WHERE column_name BETWEEN value1 AND value2

Contoh : SELECT * FROM anggota WHERE Nomor BETWEEN 5 and 15

Keterangan : Contoh di atas digunakan untuk mencari data yang memiliki Nomor antara 5 dan 15. Insert Into Digunakan untuk menambahkan data baru di tabel database. Syntax dasar : INSERT INTO table_name VALUES (value1,value2,value3, . . .)

Atau INSERT INTO table_name (column1,column2,column3, . . .) VALUES (value1,value2,value3, . . .)

Contoh 1: INSERT INTO anggota VALUES (1,‟AnTheWar‟,‟Anwar‟,‟[email protected]‟,‟su sahpayah‟,‟Lamongan‟)

Contoh 2: INSERT INTO anggota (Usermame,Nama,Email,Password)

VALUES („AnTheWar‟,‟Anwar‟,‟[email protected]‟,‟susa hpayah‟)

Keterangan Contoh 1 digunakan untuk menginput data secara keseluruhan, artinya untuk mengisi field-field yang ada pada table. Contoh nomor 2 digunakan untuk menyeleksi field-filed yang akan hendak diisikan data.

Catatan 9 Belajar Lebih Lanjut Tentang PHP dan MySQL Surabaya, 24 Mei – 2 Juni 2015 Mempelajari teori di kelas. Uji coba di kost-kostan dan diwarung kopi, ditemani secangkir kopi pahit.

A. Query pada MySQL MySql query adalah perintah atau instruksi yang dapat digunakan untuk mengelola database atau tabel dalam database mysql. Query lebih dikenal dengan sebutan SQL (Structured Query Language) yang artinya adalah sebuah bahasa yang digunakan untuk mengakses data dalam basis data relasional. Bahasa ini merupakan bahasa standar yang digunakan dalam mengelola basis data atau database. Banyak database modern seperti mysql, sql server, oracle menggunakan bahasa SQL. Secara umum ada 2 jenis query pada mysql yaitu DML dan DML. DDL (Data Definition Language) DDL adalah kependekan dari Data Definition Language. DDL adalah kumpulan perintah SQL yang digunakan untuk membuat (CREATE), mengubah(ALTER, RENAME) dan menghapus(DROP) struktur dan definisi dari objek-objek database seperti database, tabel, view, index, function, trigger dan field. CREATE Nama Perintah CREATE DATABASE CREATE FUNCTION CREATE INDEX CREATE PROCEDURE CREATE TABLE CREATE TRIGGER

CREATE VIEW

Kegunaan digunakan untuk membuat database baru digunakan untuk membuat function dalam database digunakan untuk membuat index digunakan untuk membuat prosedure dalam database digunakan untuk membuat tabel baru digunakan untuk membuat trigger (perintah sql yang dikerjakan otomatis pada even tertentu) digunakan untuk membuat rutin laporan

ALTER, RENAME Nama Perintah ALTER DATABASE ALTER FUNCTION ALTER PROCEDURE ALTER TABLE ALTER VIEW RENAME TABLE

DROP Nama Perintah DROP DATABASE DROP FUNCTION DROP INDEX DROP PROCEDURE DROP TABLE DROP TRIGGER DROP VIEW

Kegunaan digunakan untuk mengubah pengaturan database digunakan untuk mengubah function digunakan untuk mengubah prosedure digunakan untuk mengubah susunan dan pengaturan tabel digunakan untuk mengubah pengaturan laporan digunakan untuk mengubah nama tabel

Kegunaan digunakan untuk menghapus database digunakan untuk menghapus function digunakan untuk menghapus index digunakan untuk prosedure digunakan untuk menghapus tabel digunakan untuk menghapus trigger digunakan untuk menghapus format laporan

DML (Data Manipulation Language) DML adalah kependekan dari Data Manipulation Language. DML adalah kumpulan perintah SQL yang berhubungan dengan proses mengolah dan memanipulasi data dalam table. DML tidak terkait dengan perubahan struktur dan definisi tipe data dari objek database.

Nama Perintah SELECT

Kegunaan digunakan untuk menampilkan data

INSERT

digunakan untuk menambahkan data baru

UPDATE

digunakan untuk mengubah data yang sudah ada

DELETE

digunakan untuk menghapus data

Variasi penggunaan jenis query DML lebih banyak karena berhubungan dengan data dalam satu atau banyak tabel database. Setiap kasus manipulasi data akan menciptakan susunan baru dengan perintah dasar yang sama.Semua jenis query mysql ini dapat digunakan dalam pemrograman web seperti PHP. Sengaja tidak penulis contohkan dari beberapa perintah query diatas, karena kita akan belajar PHP lanjut.

B. Koneksi Database Dengan PHP Setelah kita mempelajari database, mungkin kita memiliki pertanyaan “Kalau database sudah dibuat, bagaimana cara menggunakannya ?”. Sebuah satu kalimat pertanyaan yang mungkin sedikit membuat penulis kebingungan, karena untuk menggunakannya penulis harus membuat koneksi terhadap database terlebih dahulu. Lalu bagaimana cara membuat koneksinya ?. Inilah yang akan kita bahas dalam catatan ini. PHP menyediakan fungsi mysql_connect () untuk membuka koneksi database.Fungsi ini membutuhkan waktu lima parameter dan mengembalikan sebuah identifier link pada keberhasilan MySQL,atau FALSE pada kegagalan.

Untuk melakukan koneksi ke MySQL gunakan perintah berikut : mysql_connect(nama_host, nama_user, password)

atau $var_koneksi = mysql_connect(nama_host, nama_user, password)

dan untuk menutup koneksi kita gunakan : mysql_close()

atau mysql_close($var_koneksi)

Sebagai contoh, misalkan kita ingin melakukan koneksi ke server "localhost" kita dengan user "root" tanpa password (kosong). Berikut adalah contoh scriptnya :

Jika benar maka akan muncul gambar berikut

Setelah berhasil melakukan koneksi pada MySQL, artinya kita hanya perlu memilih database mana yang akan kita buat koneksinya. Untuk itu kita hanya perlu menambahkan secuah

script, yang juga sudah disediakan oleh php yaitu mysql_select_db. Contoh :
?> Penjelasan Masih ingat tentang variable php dan database yang sudah kita buat pada bab sebelumnya. Pada bab sebelumnya kita telah membuat sebuah database yang bernama my_database dan untuk $koneksi dan $db adalah sebuah variable. Pada script yang berwarna merah adalah perintah untuk mendeklarasikan variable koneksi dan memberikan nilai berupa koneksi pada MySQL. Sedangkan script berwarna biru digunakan untuk untuk mendeklarasikan variable $db dan memberikan value berupa memilih database yang bernama my_database. C. Input Data ke Database Dengan PHP Untuk melakukan input data pada database, tidak hanya bisa dilakukan dengan mengakses PhpMyAdmin, akan tetapi juga bisa dilakukan dengan PHP. Disini saya sedikit membahas tentang method post yang akan dijelaskan pada sub bab selanjutnya. Karena sudah memperlajari beberapa dasar. Maka penulis akan langsung menampilkan seluruh script penuh.

Username :
name="username">

Nama :

E-Mail :

Password :

Kota :

Penjelasan Semua script telah dipelajari pada bab-bab sebelumnya. Lihat pada script yang berwarna merah, itu adalah fungsi yang sudah disediakan oleh PHP untuk melakukan interaksi dengan database mysql. Scriptnya yaitu mysql_query().

Gambar

D. Mengambil atau Menampilkan Data Dari Database Pada sub bab ini adalah jawaban dari pertanyaan pertama dari sub bab sebelumnya, yaitu bagamana cara mengakses sebuah database lalu menampilkannya. Untuk melakukan hal ini kita hanya perlu membuat koneksi ke database dan memilih database yang akan ditampilkan datanya (Sub Bab Sebelumnya) lalu menyimpannya dengan koneksi.php. Langkah berikutnya adalah membuat query SQL - dalam hal ini suatu pernyataan SELECT - ke database (Bab MySQL). Sekarang kita coba untuk mendapatkan semua record dari MySQL. Pernyataan SQL untuk ini adalah: $ambil = mysql_query("SELECT * FROM anggota");

Untuk menampilkan data dari table tersebut kita perlu membuat script berikut: $ambil = mysql_query("SELECT * FROM anggota"); while ($row=mysql_fetch_object($ambil)) { $nama = stripslashes($row->Nama); echo "$nama"; }

Penjelasan Pada kode diatas, penulis menggunakan mysql_fetch_object untuk mengambil hasil dari query SQLnya sehingga hasil baris tersebut akan didefenisikan sebagai object. Kita juga dapat menggunakan fungsi lain seperti berikut:   

mysql_fetch_assoc () - Ambil hasil baris sebagai array asosiatif mysql_fetch_row () - Ambil hasil enumerated baris sebagai array mysql_fetch_array () - Ambil hasil baris sebagai array asosiatif, array numerik, atau keduanya

Kode diatas akan menampilkan seluruh data yang ada dalam tabel user. Jika kita ingin memberikan batasan berapa data yang ingin ditampilkan atau kita ingin mengurutkan datanya maka kita perlu menggunakan perintah MySQL LIMIT dan ORDER BY. Lakukan perubahan pada variable ambil. $ambil = mysql_query("SELECT * FROM anggota ORDER BY Nama ASC limit 0,2");

Untuk script lengkapnya adalah sebagai berikut Nama); echo "$nama"; } ?>

E. Mengenal Metode Pengiriman Form Pada PHP Masih ingatkah pembaca tentang variable pada php ?, Dalam PHP, variabel memiliki karakteristik khusus jika dibandingkan dengan pemrograman lainnya. Variabel di PHP tidak perlu dideklarasikan dan ditentukan tipe datanya sebelum digunakan. Variabel bisa langsung diisi dimana dibutuhkan. Tipe data variabel akan mengikuti sesuai dengan isi variabel tersebut. PHP merupakan pemrograman berbasis web. PHP banyak digunakan untuk membuat aplikasi berbasis web seperti website, dimana setiap aplikasi dapat terdiri dari beberapa halaman yang saling terhubung. Dan memang seperti itulah karakteristik dasar dari web, keterhubungan antara satu halaman dengan halaman yang lain. Kondisi tersebut membuat PHP perlu menyediakan suatu metode pengiriman variabel antar halaman, karena seringkali suatu variabel diperlukan di beberapa halaman sekaligus. Penulis akan berusaha mengupas mengenai 4 (empat) metode pengiriman variabel antar halaman di PHP. Keempat metode tersebut yaitu metode POST, GET, SESSION dan COOKIES. Beberapa contoh program sederhana terkait dengan keempat metode tersebut juga akan diberikan agar dapat memberi gambaran yang lebih jelas. GET Method GET sering digunakan pada form pencarian dimana variabel yang dikirimkan akan ditampilkan pada url browser seperti pencarian pada google ,type seperti ini sangat diperlukan untuk melakukan pagination, berikut ini adalah syntax dasar dan contoh sintax penggunaan method get Syntax Dasar

Contoh :

Nama :

Umur :

Kirim Data

Jika program dijalankan maka akan tampil gambar seperti ini.

Setelah form diisi dan tombol kirim data di klik.

Lihat pada kotak merah diatas, method_get.php merupakan action untuk form tersebut. Setelah action muncul beberapa karakter baru yaitu ?nama=Anwar&Umur=18. Setelah tanda Tanya pada alamat tersebut untuk nama dan umur adalah nama textfield yang sudah kita buat. Sedangkan Anwar dan 18 adalah nilai yang sudah kita isikan pada kedua textfield tersebut. Untuk dapat menampilkannya, kita membutuhkan script php. Berikut adalah script lengkap beserta script untuk menampilkannya.

Kode

Nama :

Umur :

Kirim Data

"; echo "Umur anda adalah $umur"; ?>

Keterangan Script berwarna merah adalah script php yang digunakan untuk mengambil informasi dan menampilkannya. Untuk mengambil nama penulis hanya berlu mendeklarasikan variael $nama lalu mengisikan valuenya dengan $_GET[„nama]. Hal yang sama juga terjadi pada umur. Lalu penulis menampilkannya dengan echo. Tampilan sebelum diisi.

Tampilan setelah diisi

POST Method POST tidak akan menampilkan variabel yang dikirimkan untuk diproses pada halaman selanjutnya dan biasanya sering digunakan pada form pendaftaran. Konsep dasarnya hampir sama dengan GET, akan tetapi untuk method post tidak ditampilkan pada url. Berikut ini syntax dasar dan contoh syntax penggunaan method post. Syntax Dasar

Contoh Method POST untuk menampilkan dan input data. Kode Nama :

Umur :

Kirim Data

";

echo "Umur anda adalah $umur"; ?>

Gambar Sebelum

Gambar Sesudah

Keterangan Lihat pada url nya, masih tetap dan tidak ada perubahan tetapi $nama dan $umur terisi sesuai yang di inputkan.

SESSION Session merupakan hal yang cukup penting dalam aplikasi berbasis web. Dengan session memungkinkan programmer menyimpan informasi user secara semi-permanen, artinya selama masa tertentu informasi akan tersimpan. Penyimpanan isi variabel session berada di server, jadi relatif lebih aman karena tidak dapat dimanipulasi secara langsung oleh client. Dalam aplikasi berbasis web, session banyak digunakan sebagai autentifikasi login. Dengan session memungkinkan programmer mengatur siapa saja yang bisa mengakses suatu halaman. Misalnya saja, untuk melihat halaman kotak surat pada email, kita harus login terlebih dahulu. Dalam proses login antara lain akan terjadi pembuatan suatu session yang akan dibawa oleh user di setiap halaman. Di halaman kotak surat, session tersebut akan diperiksa. Jika session benar maka user dipersilahkan membuka halaman kotak surat, namun jika salah maka user tidak bisa membuka halaman kotak surat dan biasanya akan diminta untuk login terlebih dahulu. Itulah sebabnya, user tidak bisa mengakses halaman kotak surat secara langsung tanpa melakukan login. Selain untuk autentifikasi login, session juga dapat digunakan untuk mengirimkan suatu nilai (data) antar halaman. Caranya cukup mudah. Pada halaman pertama, ciptakan sebuah variabel session dan isikan dengan nilai yang akan dikirimkan. Selanjutnya pada halaman kedua, isi variabel session dapat diambil dengan predefined variable $_SESSION. Berikut adalah Contoh penggunaan session. Persiapan Buat 2 file untuk php yang digunakan untuk mengset SESSION dan untuk menjalankan SESSION dihalaman lain. Kode untuk file session1.php

"; echo "Menuju ke halaman kedua"; ?>

Kode file session2.php Kembali ke hal pertama"; ?>

Gambar pada session1.php

Gambar pada session2.php

Keterangan Pada baris kedua terdapat session_start();. Potongan program tersebut telah disedia oleh php untuk memulai fungsi session. Pada halaman pertama, session diset agar mmendapatkan value dari session tersbut. Pada halaman kedua session tersebut dipanggil. COOKIE Cookies adalah informasi yang disimpan di komputer klien dengan bantuan browser. Cookies dapat diakses kapanpun melalui halaman-halaman php selama cookies ini masih tersimpan. Cookies disimpan di komputer klien dalam sebuah file kecil yang diletakkan pada folder tertentu oleh browser. Hal yang perlu diingat tentang penggunaan cookies bahwa ada beberapa komputer yang tidak menerima cookies ini karena si pemilik mematikan fitur cookies pada browser. Jika cookies memang diperlukan kita bisa mengeceknya dengan php dan jika statusnya dimatikan, kita bisa memberitahukan si pemilik untuk menghidupkanya. Penulis akan memberikan syntax dasar dan contoh penggunaan cookie. Syntax dasar setcookie(name, value, expire, path, domain);

Untuk contoh, buat dulu 2 file seperti pada session tadi. Syntax cookie1.php
setcookie("username", $value); setcookie("namalengkap", $value2, time()+3600); /* expire in 1 hour */ ?> Ini halaman pengesetan cookie"; echo "

Klik di sini untuk pemeriksaan cookies

"; ?>

Syntax cookie2.php Cookie 'username' ada. Isinya : " . $_COOKIE['username']; } else { echo "

Cookie 'username' TIDAK ada.

"; } if(isset($_COOKIE['namalengkap'])) { echo "

Cookie 'namalengkap' ada. Isinya : " . $_COOKIE['namalengkap']; } else { echo "

Cookie 'namalengkap' TIDAK ada.

"; } echo "

Klik di sini untuk penciptaan cookies

"; ?>

Gambar file cookie1.php

Gambar file cookie2.php

Konsepnya hampir sama seperti Session, akan tetapi untuk cookie disimpan pada browser. Dan cookie memiliki nilai plus yaitu memberikan batas waktu untuk pengesetan cookie.

Daftar Pustaka Materi PPT http://baru-newbie.blogspot.com/2014/04/pengertian-webserver-beserta-contohnya.html http://faculty.petra.ac.id/dwikris/docs/desgrafisweb/html_das ar/1-apaitu_taghtml.html http://nanix-ilkom.blogspot.com/2012/09/pengertian-sejarahhtml.html http://yadicucuklauk.blogspot.com/2011/12/text-style-padahtml.html http://eliastutik.blogspot.com/2011/11/text-formatting.html https://tetapbersyukur.wordpress.com/2012/07/16/karakterkhusus-html/ http://www.duniailkom.com/ http://jintoples.blogspot.com/2012/12/cara-penulisan-css.html http://www.inzacky.com/2013/05/mengganti-localhostdengan-domain.html http://www.javascripter.net/faq/reserved.htm http://www.w3schools.com/ http://www.duniailkom.com/ https://github.com/ http://gaptek32.blogspot.com/ http://tito.pandubrahmanto.com/ http://tutorial.belajarweb.net/ http://ekajogja.com/jquery-definisi-fitur-penggunaan-jquerydalam-pengembangan-website/ http://www.carikode.com/tutorial-dasar-jquery-untuk-pemulapengenalan-jquery/ http://hastomo.net/php/pengertian-dan-sejarah-php/ http://blog.umy.ac.id/didinfach/2015/04/27/artikel-php/ http://www.nurulimam.com/2013/09/kelebihan-kekuranganphp.html http://belajarphplengkap.blogspot.com/2014/12/belajar-phpdasar.html http://www.rendydwiprastyo.web.id/2013/09/tipe-tipe-datapada-mysql.html

https://oktaviia10.wordpress.com/2013/03/30/mengenalvariabel-dalam-php/