MODUL PRAKTIKUM PEMROGRAMAN WEB

MODUL PRAKTIKUM

PEMROGRAMAN WEB

LABORATORIUM SISTEM INFORMASI DAN REKAYASA PERANGKAT LUNAK JURUSAN TEKNIK INFORMATIKA, FAKULTAS TEKNOLOGI INDUSTRI UNIVERSITAS ISLAM INDONESIA 2014/2015

MODUL PRAKTIKUM PEMOGRAMAN WEB Asisten Laboratorium SIRKEL @ 2015, Laboratorium Sistem Informasi dan Rekayasa Perangkat Lunak Editor & Desain Layout : Maulia Fajri Andriani Desain Cover : Wuriandietry Mayang P. Tim Penyusun : : : : : : : : : : : : : : : : :

Almed Hamzah, ST., M.Eng. ([email protected]) Arma Novarendi (2011) Arni Hapsari Wahyutami (2011) Ayub Narwidian Adiputra (2011) Gita Putry Nabilah (2011) Maulia Fajri Andriani (2011) Nabila Sholihah (2011) Rudi Dwi Apriyanto (2011) Ulung Fikri Abriantoro (2011) Agas Arya Widodo (2012) Bharamida Dwi Rizky (2012) Demi Lazuardi (2012) Fajar Mubarok (2012) Gatra Anggadita (2012) Ira Mira Santi (2012) M. Kausar Ramadhan (2012) Novia Vazela (2012)

Laboratorium Sistem Informasi dan Rekayasa Perangkat Lunak Jurusan Teknik Informatika, Fakultas Teknologi Industri, Universitas Islam Indonesia Jalan Kaliurang km 14,5 Yogyakarta 55584 Telepon 0274-895287 ext. 143 Website : www.sirkel.informatics.uii.ac.id E-mail : [email protected] Twitter : @LabSIRKEL Fanpage FB : Sirkel’s Laboratory

2

Modul Praktikum Pemrograman Web 2014/2015

HALAMAN PENGESAHAN MODUL PRAKTIKUM PEMROGRAMAN WEB

Telah disetujui dan disahkan sebagai modul praktikum Pemograman Web Tahun Akademik 2014/2015

Disahkan di : Yogyakarta Pada tanggal : 5 Maret 2015 Disiapkan oleh, Kepala Laboratorium Sistem Informasi dan Rekayasa Perangkat Lunak

Almed Hamzah, ST., M.Eng. NIP 13.523.1103

Disahkan oleh, Ketua Jurusan Teknik Informatika Fakultas teknologi Industri Universitas Islam Indonesia

Hendrik, S.T., M.Eng NIP 05.523.0503


3

KATA PENGANTAR Assalamu’alaikum wr.wb. Bismillahirrohmanirrohiim Alhamdulillah, segala puji bagi Allah SWT yang atas rahmat-Nya maka selesailah penyusunan Modul Praktikum Pemrograman Web Jurusan Teknik Informatika Fakultas Teknologi Industri Universitas Islam Indonesia ini. Modul ini dibuat sebagai panduan dasar untuk belajar pengembangan website. Secara khusus, modul ini ditujukan untuk mahasiswa/i peserta praktikum Pemrograman Web. Modul praktikum ini dibuat sebagai pedoman dalam melakukan kegiatan praktikum Pemrograman Web pada Jurusan Teknik Informatika Universitas Islam Indonesia. Modul ini adalah perbaikan dari modul-modul praktikum sebelumnya sehingga diharapkan muatan yang ada di dalamnya lebih berkualitas. Tiap bab berisi pengenalan dan teori singkat tentang materi, kemudian diikuti tutorial, dan diakhiri dengan latihan soal untuk melatih dan memperdalam pemahaman mahasiswa mengenai materi yang dipelajari. Sebagai Kepala Laboratorium Sistem Informasi dan Rekayasa Perangkat Lunak, saya ucapkan selamat datang dan selamat berkreasi bagi para praktikan. Semoga modul ini dapat mengantarkan Anda dalam memahami bidang pemrograman web secara khusus dan pengembangan web secara umum. Meskipun telah mengalami beberapa perbaikan, modul ini masih jauh dari sempurna. Oleh karena itu, kami tetap mengharapkan kritik dan saran yang membangun agar modul ini jauh lebih baik lagi dari sebelumnya. Akhir kata, saya ucapkan terima kasih kepada semua pihak yang telah membantu terselesaikannya modul ini terutama para asisten Lab. Sirkel : Ayub (manager), Arma, Ayub, Arni, Nabila, Maul, Gita, Rudi, Ulung, Agas, Demi, Fajar, Gatra, Ira, Mida, Ovi, dan Ucang. Wassalamu’alaikum wr. wb. Yogyakarta, 5 Maret 2015 Kepala Laboratorium Sirkel,

Almed Hamzah, ST., M.Eng.

4


DAFTAR ISI MODUL PRAKTIKUM ..................................................................................................................... 1 HALAMAN PENGESAHAN .............................................................................................................. 3 KATA PENGANTAR ......................................................................................................................... 4 DAFTAR ISI ..................................................................................................................................... 5 DAFTAR TABEL ............................................................................................................................. 10 DAFTAR GAMBAR ........................................................................................................................ 12 UNIT 1 .......................................................................................................................................... 16 1.

Materi Praktikum ............................................................. Error! Bookmark not defined.

2.

Pengenalan HTML ............................................................ Error! Bookmark not defined. HTML 5 .............................................................................. Error! Bookmark not defined. Aturan Dasar HTML .......................................................... Error! Bookmark not defined. Struktur HTML 5 ............................................................... Error! Bookmark not defined. Elemen HTML ................................................................... Error! Bookmark not defined. Kesimpulan ....................................................................... Error! Bookmark not defined. Glosarium ......................................................................... Error! Bookmark not defined.

3.

HTML5 Elements .............................................................. Error! Bookmark not defined. HTML5 Attributes ............................................................. Error! Bookmark not defined. Simple Exercise ................................................................. Error! Bookmark not defined.

4.

a) Layout Halaman HTML ............................................. Error! Bookmark not defined. b) Tabel HTML ............................................................... Error! Bookmark not defined. c) Form HTML ............................................................... Error! Bookmark not defined. d) Contoh Form Input dalam HTML ............................. Error! Bookmark not defined. e) Blok dalam HTML ...................................................... Error! Bookmark not defined. f) Media dalam HTML .................................................. Error! Bookmark not defined. Worksheet ........................................................................ Error! Bookmark not defined.

UNIT 2 .......................................................................................................................................... 16 1.

Materi Praktikum ......................................................................................................... 18 Pengenalan CSS ............................................................................................................ 18 CSS3 .............................................................................................................................. 18 Aturan Dasar Penulisan CSS ......................................................................................... 18 Penerapan CSS pada Dokumen HTML ........................................................................ 19


5

2.

Multiple Stylesheet ...................................................................................................... 20 Selectors ....................................................................................................................... 20 CSS Box Model .............................................................................................................. 22 Mengatur Pewarnaan pada Elemen Web dengan CSS .............................................. 23 CSS3 Properties ............................................................................................................ 24 Kesimpulan ................................................................................................................... 30 Glosarium ..................................................................................................................... 31

3.

CSS3 Properties ............................................................................................................ 31 Simple Exercise ............................................................................................................. 32

4.

a) Menggunakan Font External dengan CSS3 ......................................................... 32 b) Implementasi Sibling Selector .............................................................................. 33 c) Membuat Notifikasi dengan CSS3 Animation ..................................................... 34 Worksheet .................................................................................................................... 36

UNIT 3 .......................................................................................................................................... 37 1.


2.

Pengenalan Javascript ...................................................... Error! Bookmark not defined. Perbedaan Java dengan JavaScript ................................. Error! Bookmark not defined. Bentuk Script Dari Javascript. .......................................... Error! Bookmark not defined. Memberikan Komentar (Script tidak tereksekusi).......... Error! Bookmark not defined. Operator ........................................................................... Error! Bookmark not defined. Event Handler ................................................................... Error! Bookmark not defined. Struktur Kendali ................................................................ Error! Bookmark not defined. Kotak Dialog ...................................................................... Error! Bookmark not defined. Variabel ............................................................................. Error! Bookmark not defined. Mendeklarasikan Variabel ............................................... Error! Bookmark not defined. Meletakkan variabel ......................................................... Error! Bookmark not defined. Objek Dalam Javascript .................................................... Error! Bookmark not defined. Glosarium ......................................................................... Error! Bookmark not defined.

3.

JavaScript Global Properties ............................................ Error! Bookmark not defined. JavaScript Global Methods .............................................. Error! Bookmark not defined. JavaScript Global Functions ............................................. Error! Bookmark not defined. JavaScript Event Handler ................................................. Error! Bookmark not defined. Simple Exercise ................................................................. Error! Bookmark not defined. a). Memanggil file eksternal javascript ......................... Error! Bookmark not defined. b). Menambahkan internal javascript ........................... Error! Bookmark not defined. c). Mengubah isi konten html ....................................... Error! Bookmark not defined.

6


4.

d). Mengubah style css .................................................. Error! Bookmark not defined. e). Javascript pada Validasi Form .................................. Error! Bookmark not defined. Worksheet ........................................................................ Error! Bookmark not defined.

UNIT 4 .............................................................................................. Error! Bookmark not defined. 1.


2.

Pengenalan jQuery ........................................................... Error! Bookmark not defined. Kemampuan Library jQuery ............................................. Error! Bookmark not defined. Hubungan Javascript dengan jQuery .............................. Error! Bookmark not defined. Penerapan jQuery di HTML ............................................. Error! Bookmark not defined. Perbedaan versi jQuery ................................................... Error! Bookmark not defined. jQuery Selector ................................................................. Error! Bookmark not defined. Macam-Macam jQuery Selector ..................................... Error! Bookmark not defined. jQuery Events ................................................................... Error! Bookmark not defined. jQuery Effects ................................................................... Error! Bookmark not defined. jQuery noConflict ............................................................. Error! Bookmark not defined. Manipulasi HTML dengan jQuery .................................... Error! Bookmark not defined. Manipulasi CSS dengan jQuery ........................................ Error! Bookmark not defined. Kesimpulan ....................................................................... Error! Bookmark not defined. Glosarium ......................................................................... Error! Bookmark not defined.

3.

jQuery Selector ................................................................. Error! Bookmark not defined. jQuery Event ..................................................................... Error! Bookmark not defined. Simple Exercise ................................................................. Error! Bookmark not defined.

4.

a). jQuery Events ............................................................ Error! Bookmark not defined. b). jQuery Effects............................................................ Error! Bookmark not defined. Worksheet ........................................................................ Error! Bookmark not defined.

5.

Referensi ........................................................................... Error! Bookmark not defined.


Materi Praktikum ............................................................. Error! Bookmark not defined. Pengertian AJAX ............................................................... Error! Bookmark not defined. Mekanisme Proses AJAX menggunakan PHP .................. Error! Bookmark not defined. Kegunaan AJAX ................................................................. Error! Bookmark not defined. Hal yang harus diperhatikan dalam penggunaan Ajax ... Error! Bookmark not defined. JSON (JavaScript Object Notation) .................................. Error! Bookmark not defined. AJAX Interface .................................................................. Error! Bookmark not defined.


7

2.

AJAX Event Handler .......................................................... Error! Bookmark not defined. Glosarium ......................................................................... Error! Bookmark not defined.

3.

Simple Exercise ................................................................. Error! Bookmark not defined.

4.

Worksheet ........................................................................ Error! Bookmark not defined.



2.

Pengenalan PHP ............................................................... Error! Bookmark not defined. Keunggulan PHP ............................................................... Error! Bookmark not defined. Karakteristik skrip PHP yaitu: ........................................... Error! Bookmark not defined. Komentar Dalam PHP ....................................................... Error! Bookmark not defined. Identifier ........................................................................... Error! Bookmark not defined. Variabel dalam PHP .......................................................... Error! Bookmark not defined. Konstanta dalam PHP ....................................................... Error! Bookmark not defined. Tipe Data dalam PHP ........................................................ Error! Bookmark not defined. Operator ........................................................................... Error! Bookmark not defined. Struktur Kontrol pada PHP ............................................... Error! Bookmark not defined. Cookies.............................................................................. Error! Bookmark not defined. Session .............................................................................. Error! Bookmark not defined. Glosarium ......................................................................... Error! Bookmark not defined.

3.


4.

a. Elseif .......................................................................... Error! Bookmark not defined. b. Switch ........................................................................ Error! Bookmark not defined. c. Session....................................................................... Error! Bookmark not defined. Worksheet ........................................................................ Error! Bookmark not defined.



2.

Pengenalan PHP Advance ................................................ Error! Bookmark not defined. Konsep Menerima Data dari Input Form ........................ Error! Bookmark not defined. Konektivitas Dan Manipulasi Basis Data ......................... Error! Bookmark not defined. Glosarium ......................................................................... Error! Bookmark not defined.

3.


4.

a). Simple Exercise 1 (Crud) ........................................... Error! Bookmark not defined. b). Simple Exercise 2 (Upload Gambar) ........................ Error! Bookmark not defined. Worksheet ........................................................................ Error! Bookmark not defined.

8




2.

Pengenalan PHP Classes .................................................. Error! Bookmark not defined. Keuntungan Penggunaan PHP Classes ............................ Error! Bookmark not defined. Perbedaan PHP4 dan PHP 5............................................. Error! Bookmark not defined. Manfaat Penggunaan PHP Classes .................................. Error! Bookmark not defined. Konsep Utama dalam PHP Classes .................................. Error! Bookmark not defined. Glosarium ......................................................................... Error! Bookmark not defined.

3.


4.

a). Membuat Class dan Variable ................................... Error! Bookmark not defined. b). Membuat Method ( Setter dan Getter ).................. Error! Bookmark not defined. c). Membuat Object ...................................................... Error! Bookmark not defined. d). Menggunakan Constructur ...................................... Error! Bookmark not defined. e). Menggunakan Encapsulation ................................... Error! Bookmark not defined. f). Menggunakan Inheritance ....................................... Error! Bookmark not defined. Worksheet ........................................................................ Error! Bookmark not defined.

5.

Referensi ........................................................................... Error! Bookmark not defined.

DAFTAR PUSTAKA ........................................................................................................................ 37 PERATURAN LAB .......................................................................................................................... 38 KALENDER PRAKTIKUM PW 2014/2015 ..................................................................................... 44


9

DAFTAR TABEL Tabel 1.1 Heading Tabel ......................................................... Error! Bookmark not defined. Tabel 1.2 HTML5 Elements ..................................................... Error! Bookmark not defined. Tabel 1.3 HTML5 Attributes ................................................... Error! Bookmark not defined. Tabel 2.1 CSS3 Border Radius........................................................................................... 27 Tabel 2.2 CSS3 Properties ................................................................................................ 31 Tabel 3.1 Keuntungan Menggunakan Javascript .................... Error! Bookmark not defined. Tabel 3.2 Perbedaan Java dengan Javascript.......................... Error! Bookmark not defined. Tabel 3.3 Operator Pembanding Javascript ............................ Error! Bookmark not defined. Tabel 3.4 Operator Logika Javascript ..................................... Error! Bookmark not defined. Tabel 3.5 Event Handler ......................................................... Error! Bookmark not defined. Tabel 3.6 JavaScript Global Properties ................................... Error! Bookmark not defined. Tabel 3.7 JavaScript Global Methods ..................................... Error! Bookmark not defined. Tabel 3.8 JavaScript Global Functions .................................... Error! Bookmark not defined. Tabel 3.9 JavaScript Event Handler ........................................ Error! Bookmark not defined. Tabel 4.1 Hubungan Javascript dengan jQuery ...................... Error! Bookmark not defined. Tabel 4.2 jQuery Selector ....................................................... Error! Bookmark not defined. Tabel 4.3 jQuery Hierarchy Selectors ..................................... Error! Bookmark not defined. Tabel 4.4 jQuery Events ......................................................... Error! Bookmark not defined. Tabel 4.5 jQuery Effects ......................................................... Error! Bookmark not defined. Tabel 4.6 jQuery Selector ....................................................... Error! Bookmark not defined. Tabel 4.7 jQuery Events ......................................................... Error! Bookmark not defined. Tabel 4.8 jQuery event click ................................................... Error! Bookmark not defined. Tabel 4.9 jquery show & hide effects ..................................... Error! Bookmark not defined. Tabel 4.10 jquery animate effects .......................................... Error! Bookmark not defined. Tabel 5.1 Ajax Interface – load() ............................................ Error! Bookmark not defined. Tabel 5.2 Ajax ........................................................................ Error! Bookmark not defined. Tabel 6.1 Operator dalam PHP ............................................... Error! Bookmark not defined. Tabel 6.2 PHP Basic ................................................................ Error! Bookmark not defined. Tabel 7.1 PHP Advance .......................................................... Error! Bookmark not defined. Tabel 8.1 Tabel Constructor Destructor................................. Error! Bookmark not defined.

10


Tabel 8.2 Tabel Enkapsulasi ................................................... Error! Bookmark not defined. Tabel 8.3 Tabel Setter Getter ................................................. Error! Bookmark not defined. Tabel 8.4 PHP Classes............................................................. Error! Bookmark not defined.


11

DAFTAR GAMBAR Gambar 1.1 Elemen HTML ..................................................... Error! Bookmark not defined. Gambar 1.2 Form Input HTML................................................ Error! Bookmark not defined. Gambar 1.3 Paragraph ........................................................... Error! Bookmark not defined. Gambar 1.4 HTML Text Tags .................................................. Error! Bookmark not defined. Gambar 1.5 Blockquote ......................................................... Error! Bookmark not defined. Gambar 1.6 Datalist ............................................................... Error! Bookmark not defined. Gambar 1.7 HTML Tabel ........................................................ Error! Bookmark not defined. Gambar 1.8 Layout HTML5 .................................................... Error! Bookmark not defined. Gambar 1.9 Simple Exercise Layout HTML.............................. Error! Bookmark not defined. Gambar 1.10 Simple Exercise Tabel HTML .............................. Error! Bookmark not defined. Gambar 1.11 Simple Exercise Form HTML ............................. Error! Bookmark not defined. Gambar 1.12 Simple Exercise HTML Form Input ..................... Error! Bookmark not defined. Gambar 1.13 Simple Exercise Blok HTML ............................... Error! Bookmark not defined. Gambar 1.14 Simple Exercise HTML Media ............................ Error! Bookmark not defined. Gambar 2.1 Aturan Dasar CSS .......................................................................................... 18 Gambar 2.2 CSS Box Model .............................................................................................. 22 Gambar 2.3 CSS3 Background-Origin Property ................................................................. 25 Gambar 2.4 CSS3 Box Shadow Property ........................................................................... 26 Gambar 2.5 CSS3 Border Radius....................................................................................... 26 Gambar 2.6 CSS3 Border-image Property......................................................................... 27 Gambar 2.7 CSS3 translate() ............................................................................................ 28 Gambar 2.8 CSS3 rotate()................................................................................................. 29 Gambar 2.9 Simple Exercise CSS 1 .................................................................................... 33 Gambar 2.10 Simple Exercise CSS 2 .................................................................................. 34 Gambar 2.11 Simple Exercise CSS 3 .................................................................................. 36 Gambar 3.1 Event Handler ..................................................... Error! Bookmark not defined. Gambar 3.2 Kotak Dialog Alert .............................................. Error! Bookmark not defined. Gambar 3.3 Kotak Dialog Confirm .......................................... Error! Bookmark not defined. Gambar 3.4 Kotak Dialog Prompt .......................................... Error! Bookmark not defined. Gambar 3.5 Variabel Javascript.............................................. Error! Bookmark not defined.

12


Gambar 3.6 Hirarki Objek Browser 1...................................... Error! Bookmark not defined. Gambar 3.7 Hirarki Objek Browser 2...................................... Error! Bookmark not defined. Gambar 3.8 Simple Exercise Javascript 1 ................................ Error! Bookmark not defined. Gambar 3.9 Simple Exercise Javascript 2 ................................ Error! Bookmark not defined. Gambar 3.10 Simple Exercise Javascript 3 .............................. Error! Bookmark not defined. Gambar 3.11 Simple Exercise Javascript 4 .............................. Error! Bookmark not defined. Gambar 3.12 Simple Exercise Javascript 5 .............................. Error! Bookmark not defined. Gambar 3.13 Simple Exercise Javascript 6 .............................. Error! Bookmark not defined. Gambar 4.1 Manipulasi HTML 1 ............................................. Error! Bookmark not defined. Gambar 4.2 Manipulasi HTML 2 ............................................. Error! Bookmark not defined. Gambar 4.3 Manipulasi CSS 1 ................................................ Error! Bookmark not defined. Gambar 4.4 Manipulasi CSS 3 ................................................ Error! Bookmark not defined. Gambar 4.5 Simple Exercise jQuery 1 ..................................... Error! Bookmark not defined. Gambar 4.6 Simple Exercise jQuery 2 ..................................... Error! Bookmark not defined. Gambar 4.7 Simple Exercise jQuery 3 ..................................... Error! Bookmark not defined. Gambar 4.8 Simple Exercise jQuery 4 ..................................... Error! Bookmark not defined. Gambar 4.9 Simple Exercise jQuery 5 ..................................... Error! Bookmark not defined. Gambar 4.10 Simple Exercise jQuery 6 ................................... Error! Bookmark not defined. Gambar 4.11 Simple Exercise jQuery 7 ................................... Error! Bookmark not defined. Gambar 4.12 Simple Exercise jQuery 8 ................................... Error! Bookmark not defined. Gambar 4.13 Simple Exercise jQuery 9 ................................... Error! Bookmark not defined. Gambar 4.14 Simple Exercise jQuery 10 ................................. Error! Bookmark not defined. Gambar 4.15 Simple Exercise jQuery 11 ................................. Error! Bookmark not defined. Gambar 4.16 Simple Exercise jQuery 12 ................................ Error! Bookmark not defined. Gambar 4.17 Simple Exercise jQuery 13 ................................. Error! Bookmark not defined. Gambar 4.18 jQuery datepicker ............................................. Error! Bookmark not defined. Gambar 4.19 jQuery sladeshow ............................................. Error! Bookmark not defined. Gambar 5.1 Proses Menggunakan AJAX ................................. Error! Bookmark not defined. Gambar 5.2 Proses Tanpa Menggunakan AJAX ...................... Error! Bookmark not defined. Gambar 5.3 Ajax Interface – ajax() ......................................... Error! Bookmark not defined. Gambar 5.4 Ajax Interface2 – ajax() ....................................... Error! Bookmark not defined. Modul Praktikum Pemrograman Web 2014/2015

13

Gambar 5.5 Ajax Interface – load() ........................................ Error! Bookmark not defined. Gambar 5.6 Ajax Interface2 – load() ...................................... Error! Bookmark not defined. Gambar 5.7 Ajax Interface – get() .......................................... Error! Bookmark not defined. Gambar 5.8 Ajax Interface2 – get() ........................................ Error! Bookmark not defined. Gambar 5.9 Ajax Interface – post() ........................................ Error! Bookmark not defined. Gambar 5.10 Ajax Interface2 – post() .................................... Error! Bookmark not defined. Gambar 5.11 Ajax Complete 1 ............................................... Error! Bookmark not defined. Gambar 5.12 Ajax Complete 2 ............................................... Error! Bookmark not defined. Gambar 5.13 Ajax Error 1 ....................................................... Error! Bookmark not defined. Gambar 5.14 Ajax Error 2 ....................................................... Error! Bookmark not defined. Gambar 5.15 Ajax Send 1 ....................................................... Error! Bookmark not defined. Gambar 5.16 Ajax Send 2 ....................................................... Error! Bookmark not defined. Gambar 5.17 Ajax Interface2 – get() ...................................... Error! Bookmark not defined. Gambar 5.18 Ajax Interface2 – get() ...................................... Error! Bookmark not defined. Gambar 5.19 Ajax Stop 1 ....................................................... Error! Bookmark not defined. Gambar 5.20 Ajax Stop 2 ....................................................... Error! Bookmark not defined. Gambar 5.21 Simple Exercise Ajax 1 ....................................... Error! Bookmark not defined. Gambar 5.22 Simple Exercise Ajax 2 ....................................... Error! Bookmark not defined. Gambar 6.1 Simple Exercise PHP Basic 1 ................................ Error! Bookmark not defined. Gambar 6.2 Simple Exercise PHP Basic 2 ................................ Error! Bookmark not defined. Gambar 6.3 Simple Exercise PHP Basic 3 ................................ Error! Bookmark not defined. Gambar 7.1 Form Input 1 ....................................................... Error! Bookmark not defined. Gambar 7.2 Form Input 2 ....................................................... Error! Bookmark not defined. Gambar 7.3 Method Post ....................................................... Error! Bookmark not defined. Gambar 7.4 Form Input 3 ....................................................... Error! Bookmark not defined. Gambar 7.5 Method Get ........................................................ Error! Bookmark not defined. Gambar 7.6 Simple Exercise PHP Advance 1 - mysql .............. Error! Bookmark not defined. Gambar 7.7 Simple Exercise PHP Advance 2 ........................... Error! Bookmark not defined. Gambar 7.8 Simple Exercise PHP Advance 3 ........................... Error! Bookmark not defined. Gambar 7.9 Simple Exercise PHP Advance 4 ........................... Error! Bookmark not defined. Gambar 7.10 Simple Exercise PHP Advance 5 ......................... Error! Bookmark not defined.

14


Gambar 7.11 Simple Exercise PHP Advance 6 ......................... Error! Bookmark not defined. Gambar 7.12 Simple Exercise PHP Advance 7 ......................... Error! Bookmark not defined. Gambar 7.13 Simple Exercise PHP Advance 8 ......................... Error! Bookmark not defined. Gambar 7.14 Simple Exercise PHP Advance 9 ......................... Error! Bookmark not defined. Gambar 7.15 Simple Exercise PHP Advance 10 ....................... Error! Bookmark not defined. Gambar 7.16 Simple Exercise PHP Advance 11 ....................... Error! Bookmark not defined. Gambar 7.17 Simple Exercise PHP Advance 12 ....................... Error! Bookmark not defined. Gambar 7.18 Simple Exercise PHP Advance 13 ....................... Error! Bookmark not defined. Gambar 7.19 Simple Exercise PHP Advance 14 ....................... Error! Bookmark not defined. Gambar 7.20 Simple Exercise PHP Advance 15 ....................... Error! Bookmark not defined. Gambar 8.1 Konsep Sederhana dalam Inheritance (Pewarisan) ........... Error! Bookmark not defined. Gambar 8.2 Membuat Object PHP ......................................... Error! Bookmark not defined. Gambar 8.3 Menggunakan Constructor PHP .......................... Error! Bookmark not defined. Gambar 8.4 Menggunakan Encapsulation PHP ...................... Error! Bookmark not defined. Gambar 8.5 Menggunakan Inheritance .................................. Error! Bookmark not defined. Gambar 8.6 PHP Classes 1 ...................................................... Error! Bookmark not defined. Gambar 8.7 PHP Classes 2 ...................................................... Error! Bookmark not defined. Gambar 8.8 PHP Classes 3 ...................................................... Error! Bookmark not defined.


15

16


UNIT 2 CASCADING STYLE SHEET (CSS) – “Art of Painting” Hai kak… aku mau belajar CSS nih.. ajarin yaah

1

Hai juga.. boleh2, mari sini merapat

CSS ini kepanjangan dari “Cascading Style Sheet”. Kita belajar bab CSS agar nanti kamu paham akan konsep dasar penggunaan CSS, setelah itu kamu juga dapat mengimplementasikanya di CSS3

Tujuan kita belajar bab CSS, itu apa ya kak ?

2


17

1. Materi Praktikum Pengenalan CSS CSS (Cascading Style Sheet) merupakan sekumpulan aturan untuk mengendalikan elemen dalam sebuah halaman web agar memiliki tampilan yang lebih terstruktur dan rapi. CSS bukanlah merupakan bahasa pemograman. Penggunaan CSS erat kaitannya dengan web designing. CSS digunakan untuk menentukan aturan style dari suatu halaman web. Dengan menggunakan CSS, kita dapat melakukan hal-hal sebagai berikut: a.

Mengendalikan ukuran gambar dan memberikan background dari suatu elemen web.

b.

Memberikan warna baik pada suatu elemen web, teks, tabel, border, hyperlink, mouse over, dan lainnya.

c.

Menentukan jarak antar teks, spasi antar paragraph, margin kiri, kanan, atas, atau bawah dari suatu elemen web.

CSS3 CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS3 juga dapat menampilkan animasi pada halaman website, baik animasi warna hingga animasi 3D. Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, CSS Object Model, dan lain sebagainya.

Aturan Dasar Penulisan CSS Penulisan sintaks CSS menggunakan aturan yang disebut selector, dan pendeklarasiannya terdiri dari property dan value. Bentuk umum penulisan CSS :

Gambar Error! No text of specified style in document..1 Aturan Dasar CSS

18


Contoh: Contoh di atas merupakan style untuk menentukan setiap elemen teks yang berada di dalam tag h1 diatur menjadi berwarna merah. Pada umumnya selector merupakan elemen/tag HTML yang ingin diberikan suatu style. Property merupakan suatu atribut dari elemen/tag HTML yang mempunyai value.

Penerapan CSS pada Dokumen HTML Untuk menerapkan CSS pada dokumen HTML, kita dapat menggunakan 3 cara yaitu : 1.

Inline Style Style ini didefinisikan pada setiap elemen HTML yang diinginkan dan biasanya digunakan untuk style yang sudah fix saja (tidak berubah-ubah).
INFORMATIKA

2.

Internal Style Style ini didefinisikan menjadi satu dengan dokumen HTML, tepatnya diletakkan dalam

tag

,

dan

menggunakan

tag

<style>

untuk

mendefinisikan. <style> h1 { color : red; text-decoration : underline; } b { font-size:30px; }

3.

External Style Cara ini memisahkan antara dokumen HTML dengan sintak CSS. File CSS tersebut disimpan dengan format (.css). Cara ini sangat dianjurkan apabila CSS akan digunakan pada banyak halaman. Contoh pemanggilan :


19

Multiple Stylesheet Pada suatu ketika, dimungkinkan juga terdapat tiga penggunaan stylesheet secara bersamaan. Jika hal itu terjadi, prioritas penggunaanya dari yang tertinggi adalah : 1)

Inline Style

2)

Internal Stylesheet

3)

External Stylesheet

Jadi apabila suatu saat terjadi penggunaan inline dan external secara bersamaan, maka style yang akan diterapkan adalah inline style karena prioritas inline style lebih tinggi dibandingkan external style.

Selectors Dengan CSS selector kita akan menentukan suatu style tertentu kepada elemen-elemen dengan pola yang kita inginkan. Selector-selector dalam CSS antara lain: a.

Universal selector Universal selector ditandai dengan simbol bintang “*”. Contoh: * {font-family:Verdana; }

Dengan selector ini berarti huruf default font untuk seluruh document XHTML kita adalah Verdana. b.

Elemen / Tag Selector Selector tag HTML tidak memerlukan tanda awalan apapun. Cukup dengan mengetikkan langsung nama tag HTML-nya yang akan diberikan suatu style tertentu. Contoh : p { text-align: center; color: red; }

Contoh pemanggilan di sintaks HTML:
Aku adalah anak gembala selalu riang walaupun susah. Karena aku senang bekerja tak pernah lelah ataupun kzl.

20


c.

Class Selector Selector class digunakan untuk menentukan style dari sebuah group elemen. Berbeda dengan ID, selector class bisa dipakai berulangkali pada sebuah dokumen web. Artinya sebuah nama class dapat dipanggil beberapa kali pada elemen-elemen yang ada pada sebuah halaman web. Selector class dituliskan dengan ditandai dengan tanda titik “.”. Contoh : .nama_class{ text-align: center; background-color: blue; }

ini contoh selector class

d.

ID Selector Selector id digunakan untuk menentukan style bagian unik dari html. Unik disini artinya satu nama id hanya bisa digunakan satu kali pada sebuah halaman web. Apabila satu nama ID digunakan lebih dari satu kali pada sebuah halaman, maka style hanya akan berlaku pada id yang pertama saja. Selector ID pada sintaks CSS ditandai dengan “#”. Contoh: #nama_ID { Padding: 5px; color: blue; border : solid; }

ini contoh selector ID

e. Grouping Selectors Jika kita ingin menggunakan style CSS yang sama untuk beberapa elemen sekaligus, kita bisa menggunakan grouping untuk menggabungkan semua elemen tersebut kedalam satu selector.


21

Contoh : h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p {

h1, h2, p { text-align: center; color: red; }

text-align: center; color: red; }

Selain beberapa contoh selector yang dijelaskan, di CSS juga mengenal selector lain yaitu sibling selector. Dengan penggunaan sibling selector, kita dapat menerapkan style yang lebih variatif.

CSS Box Model Jika di HTML kita menggunakan table untuk membuat layout, di CSS ini kita dianjurkan untuk membuat suatu layout dengan menggunakan tag
. Hal-hal yang perlu dipahami dalam penggunaan div untuk membuat suatu layout halaman web yaitu property width, height, margin, padding dan border. Berikut gambarannya :

Gambar Error! No text of specified style in document..2 CSS Box Model

22


Keterangan: Content - konten atau isi elemen, dimana teks dan gambar muncul Padding - jarak antara isi/content dengan border Border - garis tepi / batas dari elemen Margin - arak tepi terluar elemen dengan elemen lain Width

- lebar konten

Height - tinggi konten Contoh : div { width: 300px; padding: 25px; border: 25px solid navy; margin: 25px; }

Perlu diperhatikan bila kita mengatur lebar dan tinggi suatu elemen dengan CSS, berarti kita hanya mengatur lebar dan tinggi area content saja. Untuk menghitung ukuran penuh suatu elemen, kita juga harus menambahkan padding, border dan margin dalam perhitungan.

Mengatur Pewarnaan pada Elemen Web dengan CSS Salah satu hal yang paling penting dalam pemanfaatan CSS adalah styling dengan memberikan warna ke dalam elemen-elemen yang telah dibuat. Pewarnaan elemen dengan CSS dapat menggunakan beberapa metode yang dapat dipilih, yaitu: a.

Hexadecimal Colors Pewarnaan elemen dengan hexadecimal diawali dengan menggunakan tanda pagar (#) yang diikuti oleh kode warna hexadecimal yang dikehendaki. Sebagai contoh untuk menggunakan warna merah maroon dapat menggunakan kode warna hexadecimal #C0392B. .konten { background: #c0392b; }

b.

RGB Colors Warna RGB terdiri atas 3 warna dasar, yaitu Red (merah), Green (hijau), dan Blue (biru).


23

Pewarnaan RGB ini memiliki rentang antara 0-255 untuk setiap parameternya. .konten { background: rgb(57, 213, 255); }

c.

RGBA Colors Pada dasarnya, pewarnaan dengan metode RGBA adalah sama dengan pewarnaan menggunakan RGB, namun terdapat parameter untuk memberikan efek transparasi (Alpha Level) setelah penulisan kode warna RGB. Value untuk alpha level memiliki rentang antara 0 – 1, yang berarti jika nilai alpha adalah 0.1 maka akan membuat warna elemen hampir tak tampak. .konten { background: rgba(57, 213, 255, 0.4); }

Kita dapat mengakses eberapa website yang menyediakan katalog warna dalam baik dalam format hexadecimal maupun RGB, seperti yang ada pada http://www.flatcolorsui.com/ atau http://www.colorpicker.com/.

CSS3 Properties Penulisan property-property yang ada di CSS3 sedikit berbeda dengan penulisan sintaks di CSS versi 1 dan 2. Ada sedikit tambahan sintaks sebelum penulisan property CSS3 yang tak lain karena masih belum sempurnanya CSS3 untuk didukung oleh setiap browser yang ada. Oleh karena itu, sintaks tambahan ini untuk mengatasi kompatibilitas antar browser yang berbeda. Contoh sintaks tambahan yang ada adalah sebagai berikut. -webkit-propertyname: value; -moz-propertyname: value; -o-propertyname: value;

Keterangan: -

webkit-: konfigurasi untuk kompatibilitas webkit, seperti browser Safari, Chrome, dan pada iPhone.

-

moz-: konfigurasi untuk kompatibilitas property pada browser berbasis Mozilla Firefox.

-

o-: konfigurasi untuk kompatibilitas property pada browser berbasis Opera Browser.

24


Ada banyak property-property baru yang dikenalkan di CSS3 ini, namun setidaknya ada beberapa property berikut yang sebaiknya dikuasai.

a) CSS3 Backgrounds Property CSS3 memiliki beberapa property baru untuk background yang lebih bagus dari versi sebelumnya. 

Background-size property

Bagian ini berguna untuk menentukan ukuran gambar background. Sebelum CSS3, ukuran gambar background ditentukan oleh ukuran sebenarnya dari gambar. Dalam CSS3 kita dapat menentukan ukuran gambar latar belakang, yang memungkinkan kita untuk menggunakan kembali gambar tersebut dalam konteks yang berbeda. Kita bisa menentukan ukuran dalam pixel atau persentase. Selain itu, CSS3 juga memungkinkan kita untuk menggunakan beberapa gambar untuk background pada suatu elemen. Contoh : div { background: url(img_flwr.gif), url(img_girl.gif); background-size: 80px 60px; background-repeat: no-repeat; }



Background-origin Property

Properti background-origin berfungsi untuk menentukan posisi gambar background. Gambar background dapat diletakkan dengan content-box, padding-box, atau borderbox area.

Gambar Error! No text of specified style in document..3 CSS3 Background-Origin Property Contoh : div { background: url(img_flwr.gif); background-repeat: no-repeat; background-size: 100% 100%; background-origin: content-box; } Modul Praktikum Pemrograman Web 2014/2015

25



Box Shadow Property

Dalam CSS3, box shadow property digunakan untuk memberikan efek bayangan.

Gambar Error! No text of specified style in document..4 CSS3 Box Shadow Property Contoh : div { box-shadow: 10px 10px 5px #888888; }



Background-Linier gradient

Untuk membuat gradien linier kita harus menetapkan setidaknya dua warna. Kita juga dapat mengatur titik awal dan arah (atau sudut pandang) dengan efek gradien. #grad { background: linear-gradient(red, blue); }

b) CSS3 Borders Property 

Border-radius

Property border radius dapat digunakan untuk membuat efek melingkar (rounded) pada suatu sudut elemen.

Contoh :

Gambar Error! No text of specified style in document..5 CSS3 Border Radius

div { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

26


Jika ingin memodifikasi efek melingkar setiap masing-masing sudut, dapat diterapkan sintaks sebagai berikut : Tabel Error! No text of specified style in document..1 CSS3 Border Radius Metode 1: Dominasi Value



Metode 2: Dominasi Properti

Border-image Property

Dengan property ini kita dapat menggunakan sebuah gambar untuk dijadikan border. 

Gambar Error! No text of specified style in document..6 CSS3 Border-image Property Contoh: div { -webkit-border-image: url(border.png) 30 30 round; -o-border-image: url(border.png) 30 30 round; border-image: url(border.png) 30 30 round; }


27

c) CSS3 Image Values and Replaced Content 

Text Effects

Text shadow akan memberikan efek bayangan pada elemen teks yang ada, sebagai contoh kita akan memberikan efek bayangan pada semua elemen teks yang berada pada tag h2 maka penulisannya adalah seperti pada sintaks berikut. Contoh : h2 { text-shadow: 5px 5px 5px #FF0000; }



Word wrapping

Apabila sebuah kata panjangnya melebihi area sebuah elemen, kita dapat menggunakan property ini agar kata tersebut tetap berada diarea elemen tersebut. Contoh : p { word-wrap: break-word; }



Transformasi 2D/3D

Dengan CSS3 kita bisa merubah posisi, skala, memutar, dan meregangkan suatu elemen. Transformasi adalah efek yang memungkinkan perubahan bentuk unsur, ukuran dan posisi. Kita dapat mengubah suatu elemen menggunakan transformasi 2D atau 3D. Transformasi 2D 1) translate() :

p {

Gambar Error! No text of specified style in document..7 CSS3 translate()

word-wrap: break-word; }

28


2) rotate() :

Gambar Error! No text of specified style in document..8 CSS3 rotate()

div { -webkit-transform: rotate(30deg); transform: rotate(30deg); }



Animations

Dengan CSS3, kita bisa membuat animasi tanpa menggunakan bantuan Adobe Flash ataupun javascripts di halaman web. Untuk membuat animasi, kita memerlukan @keyframes. @keyframes adalah suatu frame atau wadah yang menyimpan berbagai animasi objek dengan transisi yang halus. @keyframes nama_animasi{ selector_keyframe {style_css;} }

Contoh : @keyframes myfirst { 0% {background: 25% {background: 50% {background: 75% {background: 100% {background: }

red; left:0px; top:0px;} yellow; left:200px; top:0px;} blue; left:200px; top:200px;} green; left:0px; top:200px;} red; left:0px; top:0px;}


29

Kesimpulan 1. CSS kita gunakan di website untuk mengatur tampilan dan desain dari web yang kita buat.

2. Dengan CSS kita dapat memberikan efek warna elemen, penempatan elemen, dan efek grafis lainnya.

3. Ada 3 cara penerapan CSS pada website yang kita buat, yaitu inline, internal, dan external style.

4. Prioritas penerapan CSS dari yang paling tinggi adalah inline style, lalu internal style, dan yang terakhir adalah external style.

5. Versi CSS terbaru saat ini adalah CSS3. 6. Dengan CSS3, kita bisa membuat tampilan website menjadi lebih interaktif dan menarik karena mendukung pembuatan animasi dan transisi yang cantik.

30


2. Glosarium CSS3 Properties Tabel Error! No text of specified style in document..2 CSS3 Properties

Property

Deskripsi

font-size font-weight text-stroke text-overflow box-flex resize

transition

position

Mengatur ukuran font dengan value yang menggunakan ukuran piksel (px) atau point (pt) Mengatur ketebalan font Memberikan efek border pada teks Efek untuk emotong kalimat yang panjangnya melebihi batas elemen Membuat suatu elemen untuk mengisi sisa ruang yang ada Mengatur ukuran suatu elemen textarea baik secara vertical ataupun horizontal Memberikan efek transisi yang dapat dikombinasikan dengan property lain dan dapat diatur lama waktu transisinya Menentukan posisi suatu elemen baik itu relative atau absolute


31

3. Simple Exercise a) Menggunakan Font External dengan CSS3 Dalam merancang sebuah website yang menarik, terkadang membutuhkan penggunaan font yang variatif. Dalam CSS3 terdapat sebuah property @font-face untuk menggunakan font secara external. Font yang dapat digunakan dapat berupa font dengan ekstensi file .ttf, .woff, dan .otf. Siapkan terlebih dahulu font yang akan digunakan dan masukkan ke dalam sebuah folder bernama font di dalam folder project Anda. Pada simple exercise ini terdapat 2 font yaitu font Neou-Bold.otf dan Neou-Thin.ttf. Simpanlah sintaks CSS berikut dengan nama style1.css. Sintaks CSS: @font-face { font-family: fontmu; src: url(font/Neou-Bold.otf); } @font-face { font-family: fontku; src: url(font/Neou-Thin.ttf); } .judul { font-family: fontmu; } .konten { font-family: fontku; }

Sintaks HTML: Penggunaan font external
Laboratorium SIRKEL

Sistem Informasi dan Rekayasa Perangkat Lunak

32


Berikut adalah tampilan hasil akhir dari latihan ini:

Gambar Error! No text of specified style in document..9 Simple Exercise CSS 1

b) Implementasi Sibling Selector Seperti yang sudah dijelaskan pada sub bab Selector pada modul ini, untuk implementasi Sibling Selector dapat dicermati pada simple exercise berikut. Simpanlah sintaks CSS dengan nama file style2.css. Sintaks CSS: body{ text-align: center; } .box{ width: 600px; margin: 0px auto; padding: 4px; margin-top: 50px; margin-bottom: 20px; border:1px solid #ccc; } .sibling + .sibling{ color:#ff0000; margin-bottom: 20px; }

Sintaks HTML: Sibling
css sibling

1. Laboratorium SIRKEL





33



c) Membuat Notifikasi dengan CSS3 Animation Pada simple exercise ini akan dipelajari cara membuat sebuah notification box yang akan muncul selama 5 detik dengan menerapkan CSS3 Animation. Simpanlah sintaks CSS ke dalam file dengan nama style3.css terlebih dahulu. Sintaks CSS: .notifbox{ width:360px; position:relative; margin: 0 auto 20px auto; padding:10px 10px; border-radius:5px; display:none; opacity:0; cursor:default; background:#e7ebf2; color:#4a6ea8; border:2px solid #d4dae5; } label { -moz-appearance:button; cursor:pointer; } input#activate-check{ position:absolute; top:-999px; left:-999px; } input#activate-check{ position:absolute; top:-999px; left:-999px; }

34


input#activate-check:checked ~ .notifbox{ display:block; -webkit-animation: fadeOut 5s linear forwards; -moz-animation: fadeOut 5s linear forwards; animation: fadeOut 5s linear forwards; } @-webkit-keyframes fadeOut { 0% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; -webkit-transform: translateY(0px);} 99% { opacity: 0; -webkit-transform: translateY(-30px);} 100% { opacity: 0; } } @-moz-keyframes fadeOut { 0% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; -moz-transform: translateY(0px);} 99% { opacity: 0; -moz-transform: translateY(-30px);} 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; transform: translateY(0px);} 99% { opacity: 0; transform: translateY(-30px);} 100% { opacity: 0; } } @-moz-keyframes fadeOut { 0% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; -moz-transform: translateY(0px);} 99% { opacity: 0; -moz-transform: translateY(-30px);} 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; transform: translateY(0px);} 99% { opacity: 0; transform: translateY(-30px);} 100% { opacity: 0; } }

Sintaks HTML: Notification Box
Notification Box
Tampilkan Notifikasi

Artikel berhasil ditambahkan.


35



4. Worksheet Modifikasilah layout website yang telah dibuat pada worksheet di Bab HTML dengan memanfaatkan CSS. Ubah layouting Anda menggunakan CSS Box Model dan berikan warna pada layout dengan memanfaatkan metode pewarnaan yang ada di CSS. Terapkan fitur transisi dari CSS3 untuk memodifikasi link navigasi dari website yang Anda buat. Jangan lupa juga untuk mengubah teks yang ada di website Anda dengan font external yang sesuai agar tampilan website Anda terlihat lebih menarik dan tidak membosankan. Manfaatkan literatur yang tersebar di internet sebagai pedoman tambahan Anda. Jika website yang Anda buat ingin tampak lebih menarik lagi, pelajari juga desain Responsive Website dan Parallax Design yang sedang hits diimplementasikan pada desain website modern saat ini.

36


DAFTAR PUSTAKA Puspitosari, H. A. (2011). Pemrograman Web Database dengan PHP dan MySQL. Yogyakarta: PT. Skripta Media Creative.

Raharjo, B. (n.d.). Belajar Pemrograman Web. Bandung: Penerbit Modula.

Sitorus, I. (2012). Panduan Mudah Menjadi Programmer Web Menggunakan HTML, XHTML, dan CSS#. Yogyakarta: Penerbit ANDI.

Kurniawan, Yahya. (2002). Aplikasi Web Database dengan PHP dan MySQL. Elex Media Komputindo. Jakarta.

Nugroho, Adi (2005). Analisis dan Perancangan Sistem Informasi dengan Metodologi Berorientasi Objek, Edisi Revisi. Informatika Bandung. Bandung.

Nugroho. Bunafit. (2004). Aplikasi Pemograman Web Dinamis dengan PHP dan MySQL(Studi kasus membuat system informasi pengolahan data buku). Gava Media.

Tim Penyusun. (2013) Modul Praktikum Pemograman Web Semester Genap 2013. Laboratorium Sistem Informasi dan Rekayasa Perangakat Lunak. Jurusan Teknik Informatika, UII Yogyakarta.


37

LAMPIRAN

PERATURAN LAB A. PEMBEKALAN 1.

Diadakan paling lambat satu minggu sebelum pelaksanaan praktikum.

2.

Wajib dihadiri oleh praktikan.

3.

Toleransi keterlambatan maksimal 30 menit, apabila lebih dari 30 menit atau tidak hadir dianggap Inhal Pembekalan.

4.

Praktikan yang dikenai Inhal Pembekalan diwajibkan melengkapi administrasi dengan menyerahkan buku yang telah ditentukan oleh Laboratorium SIRKEL (1 buku maksimal untuk 2 orang).

5.

Apabila belum melengkapi administrasi Inhal Pembekalan, maka nilai praktikum yang bersangkutan akan dianggap sebagai Nilai Pending (tidak diserahkan ke bagian Nilai Fakultas).

B. PRAKTIKUM 1.

Praktikum berlangsung selama 90 menit dengan rincian : 5 menit

:

Murotal

10 menit

:

Pretest

15 menit

:

Materi Praktikum

60 menit

:

Studi Kasus

2.

Kehadiran wajib 100%, kurang dari 100% otomatis gugur.

3.

Toleransi keterlambatan maksimal 15 menit, apabila lebih dari 15 menit atau tidak hadir dianggap Inhal.

C. ASISTENSI 1.

Praktikan wajib melaksanakan asistensi yang akan dibimbing oleh Asisten Pembimbing Kelompok (APK).

38


2.

Setiap praktikan harus membawa lembar asistensi sesuai format yang ditentukan Laboratorium SIRKEL.

3.

Tidak melayani asistensi diluar jadwal asistensi, kecuali ada kesepakatan dengan APK masing-masing.

D. INHAL 1.

Praktikan dianggap inhal apabila tidak datang praktikum baik ijin, sakit, bolos, ataupun terlambat datang.

2.

Inhal dilaksanakan pada hari Sabtu untuk setiap pertemuannya.

3.

Inhal maksimal 2 kali.

4.

Pendaftaran inhal dilakukan dengan menyelesaikan administrasi sebesar Rp.30.000,- per pertemuan di loket Rektorat atau melalui rekening : a) Bank Mandiri

137 – 0002283907

b) Bank Muamalat

531 – 0003915

c) Bank Bukopin

10 – 00048042

Kemudian menyerahkan bukti pembayaran kepada Lab. SIRKEL maksimal pada saat pelaksanaan inhal berlangsung. 5.

Praktikan yang tidak menyerahkan bukti pembayaran inhal sebelum pertemuan inhal berlangsung tidak dapat mengikuti pretest/posttest pada pertemuan tersebut.

Namun,

dapat

mengikuti

pretest/posttest

menyerahkan bukti pembayaran dan secara aktif

susulan

setelah

menghubungi APK untuk

menentukan jadwal pretest/posttest susulan. 6.

Peraturan dalam pelaksanaan inhal sama dengan peraturan dalam praktikum.

7.

Praktikan yang tidak mendaftar inhal diwajibkan mendaftar dan mengikuti Inhal Susulan (inhal di atas inhal), apabila tidak statusnya dianggap gugur.

E. INHAL SUSULAN 1.

Diperuntukkan bagi praktikan yang tidak menghadiri inhal.

2.

Inhal susulan dilaksanakan pada hari Sabtu di minggu berikutnya setelah pelaksanaan praktikum.


39

3.

Inhal susulan maksimal 1 kali.

4.

Pendaftaran inhal susulan dilakukan dengan menyelesaikan administrasi sebesar Rp.60.000,- per pertemuan di loket Rektorat atau melalui rekening : a) Bank Mandiri

137 – 0002283907

b) Bank Muamalat

531 – 0003915

c) Bank Bukopin

10 – 00048042

Kemudian menyerahkan bukti pembayaran kepada Lab. SIRKEL maksimal pada saat pelaksanaan inhal susulan berlangsung. 5.

Peraturan dalam pelaksanaan inhal susulan sama dengan peraturan dalam praktikum.

6.

Praktikan yang tidak menyerahkan bukti pembayaran insus sebelum pertemuan insus berlangsung tidak dapat mengikuti pretest/posttest pada pertemuan tersebut.

Namun,

dapat

mengikuti

pretest/posttest

menyerahkan bukti pembayaran dan secara aktif

susulan

setelah

menghubungi APK untuk

menentukan jadwal pretest/posttest susulan. 7.

Praktikan yang tidak mendaftar dan mengikuti inhal susulan dinyatakan gugur.

F. STATUS GUGUR 1.

Kehadiran praktikum tidak 100%.

2.

Praktikan dianggap gugur apabila telah melebihi dari 2 kali inhal dan 1 kali inhal susulan.

G. PERIZINAN 1.

Persyaratan surat izin praktikum : a) Apabila sakit  Menyerahkan surat keterangan sakit dari Dokter (maksimal seminggu setelah sakit, surat harus sudah diserahkan ke Lab).  Menyerahkan surat perizinan FTI yang dapat di download pada situs FTI UII b) Apabila izin  Menyerahkan surat perizinan dengan format dari Fakultas (maksimal sehari sebelum praktikum berlangsung).

40


 Hanya diizinkan untuk hal yang terdapat di list surat perizinan FTI.  Untuk hal yang bersangkutan dengan organisasi harus disertai tandatangan pihak yang berwenang (Dosen, Jurusan, atau Dekanat). 2.

Praktikan yang terlambat dianggap bolos (tanpa keterangan).

3.

Izin yang bersifat mendadak akan dilayani paling lambat 15 menit pertama saat praktikum berjalan.

H. PROGRAMMING PROJECT (PP) 1.

Kelompok PP terdiri dari dua praktikan.

2.

Kelompok PP harus berasal dari 1 kelas praktikum yang sama.

3.

Wajib mendaftarkan kelompok PP dan judul PP sesuai jadwal yang telah ditentukan Lab. SIRKEL.

4.

Jika terlambat mendaftarkan kelompok PP dan judul PP, maka akan ditentukan oleh Lab secara acak (random).

5.

Setiap kelompok akan dibimbing oleh satu orang Asisten Pembimbing Kelompok (APK).

I.

RESPONSI 1.

Responsi wajib diikuti oleh semua praktikan yang telah menyelesaikan/mengikuti praktikum sesuai dengan ketentuan praktikum masing-masing.

2.

Syarat mengikuti responsi adalah kehadiran wajib 100%.

3.

Wajib mendaftarkan jadwal responsi sesuai jadwal yang telah ditentukan oleh Lab.

4.

Jika terlambat mendaftarkan jadwal responsi, maka akan ditentukan oleh Lab secara acak (random).

5.

Waktu responsi yaitu 45 menit dengan rincian : 5 menit

:

Persiapan

10 menit

:

Presentasi Programming Project (PP)

30 menit

:

Tanya Jawab dan Studi Kasus


41

6.

Toleransi keterlambatan maksimal 5 menit, lebih dari 5 menit maka tidak diperkenankan mengikuti responsi dengan alasan apapun.

7.

Wajib membawa laporan dan lembar asistensi yang telah ditandatangai APK (tiap praktikan) saat responsi.

8.

Apabila tidak mengikuti responsi (terlambat atau tidak datang) tetap boleh mengumpulkan laporan dan lembar asistensi.

J. LAPORAN 1.

Mengumpulkan laporan sesuai dengan format yang telah ditentukan Lab.

2.

Dikumpulkan pada saat responsi.

3.

Mengumpulkan softcopy laporan yang telah direvisi dan melampirkan lembar asistensi maksimal sehari setelah responsi berlangsung.

K. KOMPONEN PENILAIAN 1.

Persentase Nilai Akhir Praktikum : Pretest

:

30%

Live Coding

:

25%

Laporan

:

10%

Responsi

:

35%

2.

Nilai akhir maksimal A.

3.

Nilai dikatakan Pending apabila belum melengkapi administrasi inhal pembekalan, inhal praktikum, atau inhal susulan praktikum.

L. RESPONSI REMEDIAL 1.

Diperuntukkan bagi mahasiswa yang pernah mengikuti praktikum yang bersangkutan dengan nilai akhir ≤ C.

2.

Pelaksanaan Responsi Remedial dilakukan sesuai dengan jadwal yang telah ditentukan Lab.

3.

Mempersiapkan PP yang dikerjakan secara perorangan.

4.

Wajib mengikuti 1 kali asistensi sesuai jadwal yang ditentukan Lab.

42


5.

Mengurus biaya administrasi Responsi Remedial sebesar Rp.60.000,- di Lab. Sirkel.

6.

Nilai Akhir Responsi Remedial maksimal B.

7.

Tidak perlu melakukan key-in untuk praktikum yang akan di Responsi Remedial.

8.

Khusus untuk praktikan dengan status gugur yang telah menempuh sekurangkurangnya 8 semester, dapat mengambil Responsi Remedial tanpa harus mengikuti praktikum dari awal.


43

KALENDER PRAKTIKUM PW 2014/2015

44


MODUL PRAKTIKUM PEMROGRAMAN WEB

Recommend Documents

INFORMATIKA

css sibling

Notification Box