Web Programing 2.pdf

WEB PROGRAMMING II Pertemuan 1

Tools yang dipergunakan untuk materi web programming 2 ini antara lain :  Xampp : versi 1.7 sampai versi 1.8  Adobe/ Macromedia Dreamweaver CS .XX atau editor sejenisnya (untuk pembelajaran kita gunakan tools yang memiliki bagian views dan code untuk memudahkan dalam medesain)  Browser Google chrome , mozilla, Opera, Safari yang update agar mensupport fungsi HTML5

Referensi : • Buku Pintar HTML5 + CSS3 + DreamWeaver CS6,Jubilee Enterprise,2012, Elex Media Komputindo • Membangun website dinamis interaktif dengan php mysql, Mohamad Sukarno, 2006.eska media • Buku Pintar Jquery Dan Php Untuk Pemula, Abdul Kadir,2011. bukuseru • http://ekajogja.com/jquery-definisi-fiturpenggunaan-jquery-dalam-pengembanganwebsite/w3shools .com • http://php.net/manual/en/

Pada materi pertemuan 1- 2 ini, kita akan pelajari 3 latihan 1

latihan manipulasi String : tujuannya untuk menyeragamkan data

yang diinput (masuk ke database), data yang diproses, dan data yang tampil. Contohnya adalah: a. Di database : field array_hari -> senin;selasa;rabu;kamis;jumat;sabtu b. Di proses, data array akan dipecah berdasarkan titik koma (;) : $exlode[0],$explode[1],$explode[2],$explode[3],$explode[4], $explode[5],$explode[6] c. Di data yang akan tampil misalnya SENIN : strtoupper($explode[0]) begitu pula dengan contoh lain, misalnya format tanggal, format rupiah dll.

2

Latihan operasi : tujuannya untuk melatih kalkulasi terhadap data yang akan tampil.

Misalkan : a. 2 hari lagi dari hari senin adalah hari apa. b. menentukan ongkos kirim barang yang total beratnya 1,25 kg dll.

Latihan proses : tujuannya untuk melatih analisa aliran data. Misalnya : misalkan di keranjang belanja tersimpan di tabel temporary, pada saat konsumen checkout, data masuk ke tabel transaksi dan tabel detail, tabel temporary akan terhapus 3

Latihan : Buat database dg nama : materi_web2 Buat tabel dengan nama table_1. Strukturnya seperti berikut :

• Isilah record sbb :

Buatlah tabel dengan nama table_2

Buat table dengan nama table_3 dengan struktur yang sama persis dengan table_2 (boleh di duplicate)

1. Latihan memanipulasi string Latihan string ini penting untuk menyeragamkan nilai yang akan dikirim ataupun yang ditampilkan • Strtouuper • strtolower • Ucwords • substr

buat folder latihan_pra_uts di htdocs buat file koneksi.php

Buat file lat_string1.php

Outputnya adalah :

Latihan selanjutnya : Masih di lat_string1.php Bagaimana menampilkan Rosi (di urutan 4 record) dg dua cara. Menggunakan php dan dengan query sql

Cara 1. Dengan array php:

Cara 2. Menggunakan query sql : Anda tinggal tambahkan skrip limit 3,1 pada baris ke 3 dari skrip lat_string1.php. “select a_nama1 from table_1 limit 3,1” Artinya, mengambil 1 nilai dari field a_nama1 dari table_1 diambil dari index ke-3 (posisi ke-4)

Latihan lanjutan (untuk mhs) : Buat output untuk menampilkan tulisan Ogi Buat output untuk menampilkan tulisan Yog Buat output untuk menampilkan tulisan Gigi Dengan menggunkan substr,ucword

Buat file lat_string2.php

Outputnya :

Latihan lanjutan (untuk MHS): Buat output untuk menampilkan tulisan Rosi K.S (R=huruf capital, K=capital, S=Kapital ) Buat output untuk menampilkan tulisan Serli, Rosi Kusuma Dengan menggunakan explode,substr,ucword

Buat lat_string3.php

Outputnya :

Latihan lanjutan (untuk mhs) : Buat tampilan seperti berikut :

Keterangan :  Hari disusun dari field d_array_hari , di table_1  Setelah tersusun ke dalam bentuk list. Huruf pertama menjadi capital

Latihan lanjutan Buat tampilan seperti berikut :

Keterangan :  Tgl default diambil dari field b_tgl1  Format tgl menggunakan perintah substr, dan logical (if/switch case)

2. Latihan Operasi Mengenai function dan Class Function adalah kumpulan perintah yg dimuat ke dalam suatu alias. Dimana perintah yg sudah menjadi alias tersebut dapat dipanggil di halaman yg sama, ataupun halaman lain. Function dapat menerima , mengolah parameter serta mengubahnya, sebagai contoh adalah sbb :

Buat halaman dg nama fungsi_waktu.php

Buat halaman dg nama fungsi_nominal.php

Buat halaman lat_operation1.php Pada contoh diatas kita dapat temukan , kata new. New disini adalah penggunaan Class . yaitu sekumpulan dari function (dalam kasus ini, class dan function2-nya sudah disediakan oleh PHP5, jadi tidak perlu membuat function lagi )

Outputnya adalah sbb :

Latihan untuk mahasiswa :  Buat halaman baru dengan nama lat_operation2.php 1. Buat tampilan seperti lat_operation1.php a) Namun nilai yang ditampilkan adalah b) Tanggal paling awal dari b_tgl1, c) Tanggal paling akhir dari b_tgl2. d) Hitung jaraknya, dan hitung biayanya (biaya menggunakan b_tgl1 di record pertama) e) Tanggal yang tampil di perulangan bentuknya adalah d-m-YYYY

Outputnya :

Clue : gunakan query query (max, min)

Buat halaman baru dengan nama lat_process1.php Pada latihan ini , kita akan mempelajari pola/skema aliran data.

 Kita akan memasukan data di tabel_2 (tabel summary) dari tabel_1. Bentuknya adalah a) C_rupiah di table_2 adalah seluruh c_rupiah di table_1 b) C_jml di table_2 adalah seluruh c_jml di table_1 c) C_tot_jml adalah summary dari perkalian c_jml*c_rupiah di table1 d) C_tgl_pindah adalah tgl terakhir data berubah e) Pada saat bersamaan terjadi 2 proses, proses penyimpanan/update ke tabel_2, dan proses insert ke table_2

Jawaban : Buat halaman lat_process1.php

Buat halaman update.php

1) Sebelum data masuk ke table 2 , dilakukan pengecekan terlelebih dahulu, jika belum ada data maka sistemnya adalah meng-insert, jika belum, maka update. 2) Data akan terus mengisi ke table_3 (tabel history) a) C_rupiah di table_2 adalah c_rupiah di table_1 b) C_jml di table_2 adalah c_jml di table_1 c) C_tot_jml adalah perkalian c_jml*c_rupiah di table1 d) C_tgl_pindah adalah tgl terakhir terisi data

tampilan sebelum diklik update

tampilan setelah diklik update

Ket : Jumlah : total jumlah = 2+1 di tabel_1 Rupiah = 30.000+70.000 Summary total = 30.000*2+ 70.000*1

Web Programming II Pertemuan 2&3

Ketentuan :  Pada web 2 ini dosen tidak dianjurkan untuk menginstruksikan mahasiswa mengetik seluruh script sekaligus, sebaiknya dilakukan pemodul, atau per-subsistem.  Contohnya login anggota, maka script yg difokuskan adalah script yg berkaitan deg login anggota. (index.php, tampilkonten.php, daftar.php, login.php),  atau modul komentar, maka script yang difokuskan adalah (index.php, tampilkonten.php, detailberita.php, komentar.php

alasannya :  mahasiswa akan ringkih dg script yg terlalu banyak  memudahkan dosen/ mahasiswa pada saat pengecekan/error. Karena bisa segera ditemukan  Memudahkan mahasiswa memahami setiap script  Materi di tiap pertemuan bisa diseragamkan. Tidak ada mahasiswa yg belum mengerjakan materi sebelumnya (tertinggal).

MATERI PERTEMUAN 2-3  Masyarakat kini mulai sadar bahwa penggunaan teknologi informasi sangatlah berperan dalam menopang roda bisnis. Utamanya dalam penyajian informasi bisa menjadi lebih cepat, akurat dan luas. Bahkan, kini masyarakat sudah sangat akrab dengan teknologi web. Setiap hari bahkan setiap menit masyarakat (khususnya di kota-kota besar) pasti membuka website. Baik untuk berbelanja, bisnis,ataupun untuk sekedar iseng mengunjungi situs jejaring sosial

 Itulah yang membuat bahasa pemrogramman web berkembang dengan sangan cepat. Kalau dulu, di era 80-an kita hanya mengenal web dengan konten statis menggunakan HTML, di era 90-an atau sepuluh tahun berikutnya kita sudah mengenal, web dinamis dengan PHP. Dan di era saat ini, kita dapat lihat web yang tak hanya dinamis, namun responsif dengan bantuan CSS, Jquery, AJAX, dan dengan jenis pertukaran data yang beragam pula (contohnya XML dan JSON).

Para Pekerja yang bergelut di bidang web dapat dispesialisasikan lagi, kita dapat kenal dengan istilah-istilah berikut :

Web Programmer : Orang yang membuat/menangani sistem yang menggunakan pemrograman web Web designer : orang yang khusus untuk membuat tampilan website menjadi lebih menarik Web administrator : orang khusus mengelola konten/isi dari web

 diperkirakan, pemrograman web di tahun-tahun ke depan akan terus berkembang. Salah satu alasannya adalah karena pemorograman web bersipat lintas sistem operasi (cross platform).  Namun janganlah khawatir apalagi kalau materi yang sedang anda pelajari saat ini sudah ketingglan zaman.  Materi pada Web Programming II ini dapat dengan mudah anda pelajari. Dan jika anda sudah menyukai web programming anda akan cepat faham dan mudah beradaptasi dengan perkembangan web programing.  Ingatlah bahwa seberagam apapun bahasa pemrograman yang ada, yang utama adalah bagaimna cara/logika kita menangani studi kasus dengan menggunakan script yang dikuasai

 Bila di Web Programming I anda sudah menjumpai penggunaan skrip PHP untuk CRUD (create, read, update, delete)  maka di Web Programming II ini anda tidak akan terlalu sulit mempelajarinya lagi. Di materi ini , kita akan mempelajari contoh maupun studi kasus yang familier dengan anda.  Mahasiswa akan dilatih membuat projek yang struktur filenya terpisah antara script tampilan dengan script untuk eksekusi. Dibiasakan juga dengan penggunaan function agar skrip yang dikembangkan bisa lebih ringkas (tidak terlalu panjang) dan mudah digunakan kembali (re-usable), serta script menjadi lebih tersusun rapi.

Contoh yang akan kita ambil adalah website portal berita. Alasan memilih contoh ini karena website portal berita cukup populer dan studi kasusnya mudah dipahami

User Requirements  Hal yang dibutuhkan dan disediakan oleh sistem 1. Sistem memuat konten berita yang dipisahkan berdasarkan kategori dan dapat dikelola oleh admin (tambah, edit, hapus) 2. Untuk memperoleh laba, perusahaan menyediakan fasilitas layanan iklan. Dimana siapapun dapat beriklan dan ditampilkan di kolom yang disediakan dalam jangka waktu tertentu (sesuai permintaan). Perusahaan dapat melihat laporan keuntungan yang diperoleh dari iklan 3. Iklan yang tampil adalah iklan yang belum lewat masa aktifnya, jika sudah lewat tanggal akhir, maka iklan akan nonaktif dengan sendirinya 4. Jadikan Kategori yang ada di halaman depan, sebagai menu utama, selain home (satu baris dengan home) dengan format huruf kapital semua 5. Untuk konten / isi berita : a. judul huruf besar di awal kata b. Tampil nama admin dan tanggal posting dengan huruf kecil berbahasa indonesia 6. Pengunjung dapat memberikan komentarnya terhadap berita , dengan syarat harus menjadi anggota terlebih dahulu

Dari user requirement sebelumnya, kita dapat membentuk suatu database dengan tabel-tabel seperti berikut

Buat database dengan nama: materi_portalberita Buat tabel kategori dengan struktur sebagai berikut

Isilah tabel kategori seperti berikut:

NB : perhatikan huruf yang digunakan huruf kecil semua (lowercase)

Buat tablel berita dengan struktur seperti di bawah ini

Isi tabel berita sebanyak 3 record dengan masing-masing kategori Contohnya :

Buat tabel admin sebagai berikut:

Isi tabel admin dengan record berikut:

Password nilainya kita enkripsi dengan bantuan fungsi md5

Buat tabel anggota dengan struktur sebagai berikut :

Isi tabel anggota :

Tabel Komentar : Ket : tabel ini berguna untuk menampilkan komentar . pengunjung yang dapat mengirim komentar harus login terlebih dahulu.

Tabel iklan :

 Isi lah tabel iklan sebanyak 2 record dengan ketentuan  Isi record bebas, kecuali : 1. record diisi tgl_awal =saat ini, tgl_akhir=saat ini, lamasewa=1 hari, hargasewa=15000, totalharga=15000, aktif=1 2. record diisi tgl_awal =tgl_kemarin, tgl_akhir=tgl_kemarin, lamasewa=1 hari, hargasewa=15000, totalharga=15000,aktif=1. (pada saat website di-load, posisi aktif akan menjadi 0 karena lewat dari tgl sekarang) 3. Untuk gambar, pastikan ektensi gambarnya ikut disebutkan, sebagai contoh, seperti berikut 4. Pastikan gambar dengan nama dan ekstensinya yang sama, di-simpan di folder gambar

Contoh :

Relasinya adalah sebagai berikut :

Langkah awal pembuatan web Download file dg nama materi_web2.zip . di elibrary.bsi.ac.id/room/ Ekstrak file tersebut lalu taruh di htdocs/ Didalamnya terdapat folder:

 Aset : tempat untuk menaruh file css, atau jquery. Yang mana filefile tersebut berguna untuk memakimalkan tampilan antarmuka pengguna  Fungsi : tempat untuk menaruh file php yang mana berisi kumpulan function yang dapat dipergunakan di folder perintah ataupun tampilan.  Gambar : tempat untuk menaruh gambar  Pengaturan : berisi file php yang berkenaan dengan aturan-aturan keselurahan dari web, semisal. Jam server, koneksi database dll.  Perintah : berisi file php yang bertugas untuk melakukan eksekusi terhadap perintah. Misalkan tampil,simpan, hapus atau edit,  Tampilan : berisi file tampilan dari konten

Untuk Design & pengcodingan mari kita lihat Modul Pertemuan 2&3 Halaman 10-35

Web Programming II Pertemuan 2&3

Ketentuan :  Pada web 2 ini dosen tidak dianjurkan untuk menginstruksikan mahasiswa mengetik seluruh script sekaligus, sebaiknya dilakukan pemodul, atau per-subsistem.  Contohnya login anggota, maka script yg difokuskan adalah script yg berkaitan deg login anggota. (index.php, tampilkonten.php, daftar.php, login.php),  atau modul komentar, maka script yang difokuskan adalah (index.php, tampilkonten.php, detailberita.php, komentar.php

alasannya :  mahasiswa akan ringkih dg script yg terlalu banyak  memudahkan dosen/ mahasiswa pada saat pengecekan/error. Karena bisa segera ditemukan  Memudahkan mahasiswa memahami setiap script  Materi di tiap pertemuan bisa diseragamkan. Tidak ada mahasiswa yg belum mengerjakan materi sebelumnya (tertinggal).

MATERI PERTEMUAN 2-3  Masyarakat kini mulai sadar bahwa penggunaan teknologi informasi sangatlah berperan dalam menopang roda bisnis. Utamanya dalam penyajian informasi bisa menjadi lebih cepat, akurat dan luas. Bahkan, kini masyarakat sudah sangat akrab dengan teknologi web. Setiap hari bahkan setiap menit masyarakat (khususnya di kota-kota besar) pasti membuka website. Baik untuk berbelanja, bisnis,ataupun untuk sekedar iseng mengunjungi situs jejaring sosial

 Itulah yang membuat bahasa pemrogramman web berkembang dengan sangan cepat. Kalau dulu, di era 80-an kita hanya mengenal web dengan konten statis menggunakan HTML, di era 90-an atau sepuluh tahun berikutnya kita sudah mengenal, web dinamis dengan PHP. Dan di era saat ini, kita dapat lihat web yang tak hanya dinamis, namun responsif dengan bantuan CSS, Jquery, AJAX, dan dengan jenis pertukaran data yang beragam pula (contohnya XML dan JSON).

Para Pekerja yang bergelut di bidang web dapat dispesialisasikan lagi, kita dapat kenal dengan istilah-istilah berikut :

Web Programmer : Orang yang membuat/menangani sistem yang menggunakan pemrograman web Web designer : orang yang khusus untuk membuat tampilan website menjadi lebih menarik Web administrator : orang khusus mengelola konten/isi dari web

 diperkirakan, pemrograman web di tahun-tahun ke depan akan terus berkembang. Salah satu alasannya adalah karena pemorograman web bersipat lintas sistem operasi (cross platform).  Namun janganlah khawatir apalagi kalau materi yang sedang anda pelajari saat ini sudah ketingglan zaman.  Materi pada Web Programming II ini dapat dengan mudah anda pelajari. Dan jika anda sudah menyukai web programming anda akan cepat faham dan mudah beradaptasi dengan perkembangan web programing.  Ingatlah bahwa seberagam apapun bahasa pemrograman yang ada, yang utama adalah bagaimna cara/logika kita menangani studi kasus dengan menggunakan script yang dikuasai

 Bila di Web Programming I anda sudah menjumpai penggunaan skrip PHP untuk CRUD (create, read, update, delete)  maka di Web Programming II ini anda tidak akan terlalu sulit mempelajarinya lagi. Di materi ini , kita akan mempelajari contoh maupun studi kasus yang familier dengan anda.  Mahasiswa akan dilatih membuat projek yang struktur filenya terpisah antara script tampilan dengan script untuk eksekusi. Dibiasakan juga dengan penggunaan function agar skrip yang dikembangkan bisa lebih ringkas (tidak terlalu panjang) dan mudah digunakan kembali (re-usable), serta script menjadi lebih tersusun rapi.

Contoh yang akan kita ambil adalah website portal berita. Alasan memilih contoh ini karena website portal berita cukup populer dan studi kasusnya mudah dipahami

User Requirements  Hal yang dibutuhkan dan disediakan oleh sistem 1. Sistem memuat konten berita yang dipisahkan berdasarkan kategori dan dapat dikelola oleh admin (tambah, edit, hapus) 2. Untuk memperoleh laba, perusahaan menyediakan fasilitas layanan iklan. Dimana siapapun dapat beriklan dan ditampilkan di kolom yang disediakan dalam jangka waktu tertentu (sesuai permintaan). Perusahaan dapat melihat laporan keuntungan yang diperoleh dari iklan 3. Iklan yang tampil adalah iklan yang belum lewat masa aktifnya, jika sudah lewat tanggal akhir, maka iklan akan nonaktif dengan sendirinya 4. Jadikan Kategori yang ada di halaman depan, sebagai menu utama, selain home (satu baris dengan home) dengan format huruf kapital semua 5. Untuk konten / isi berita : a. judul huruf besar di awal kata b. Tampil nama admin dan tanggal posting dengan huruf kecil berbahasa indonesia 6. Pengunjung dapat memberikan komentarnya terhadap berita , dengan syarat harus menjadi anggota terlebih dahulu

Dari user requirement sebelumnya, kita dapat membentuk suatu database dengan tabel-tabel seperti berikut

Buat database dengan nama: materi_portalberita Buat tabel kategori dengan struktur sebagai berikut

Isilah tabel kategori seperti berikut:

NB : perhatikan huruf yang digunakan huruf kecil semua (lowercase)

Buat tablel berita dengan struktur seperti di bawah ini

Isi tabel berita sebanyak 3 record dengan masing-masing kategori Contohnya :

Buat tabel admin sebagai berikut:

Isi tabel admin dengan record berikut:

Password nilainya kita enkripsi dengan bantuan fungsi md5

Buat tabel anggota dengan struktur sebagai berikut :

Isi tabel anggota :

Tabel Komentar : Ket : tabel ini berguna untuk menampilkan komentar . pengunjung yang dapat mengirim komentar harus login terlebih dahulu.

Tabel iklan :

 Isi lah tabel iklan sebanyak 2 record dengan ketentuan  Isi record bebas, kecuali : 1. record diisi tgl_awal =saat ini, tgl_akhir=saat ini, lamasewa=1 hari, hargasewa=15000, totalharga=15000, aktif=1 2. record diisi tgl_awal =tgl_kemarin, tgl_akhir=tgl_kemarin, lamasewa=1 hari, hargasewa=15000, totalharga=15000,aktif=1. (pada saat website di-load, posisi aktif akan menjadi 0 karena lewat dari tgl sekarang) 3. Untuk gambar, pastikan ektensi gambarnya ikut disebutkan, sebagai contoh, seperti berikut 4. Pastikan gambar dengan nama dan ekstensinya yang sama, di-simpan di folder gambar

Contoh :

Relasinya adalah sebagai berikut :

Langkah awal pembuatan web Download file dg nama materi_web2.zip . di elibrary.bsi.ac.id/room/ Ekstrak file tersebut lalu taruh di htdocs/ Didalamnya terdapat folder:

 Aset : tempat untuk menaruh file css, atau jquery. Yang mana filefile tersebut berguna untuk memakimalkan tampilan antarmuka pengguna  Fungsi : tempat untuk menaruh file php yang mana berisi kumpulan function yang dapat dipergunakan di folder perintah ataupun tampilan.  Gambar : tempat untuk menaruh gambar  Pengaturan : berisi file php yang berkenaan dengan aturan-aturan keselurahan dari web, semisal. Jam server, koneksi database dll.  Perintah : berisi file php yang bertugas untuk melakukan eksekusi terhadap perintah. Misalkan tampil,simpan, hapus atau edit,  Tampilan : berisi file tampilan dari konten

Untuk Design & pengcodingan mari kita lihat Modul Pertemuan 2&3 Halaman 10-35

Web Programming II Pertemuan 4&5

Admin portal berita  Admin portal berita melakukan pengelolaan data /modul a. Berita (lihat, tambah, edit, hapus) b. Iklan (lihat, tambah edit, hapus) c. Anggota (lihat, edit status)  ket : Pada halaman ini, Admin dapat melakukan entry iklan , sekaligus juga menentukan tanggal mulainya iklan dan kapan berakhirnya, sekaligus menentukan harga per hari iklan yg ditampilkan sehingga dapat diketahui jumlah keuntungan yang diperoleh

tampilan yg diharapkan adalah sebagai berikut:

ket : 1 adalah tgl perdana iklan 2. adalah tgl berakhirnya penayangan iklan 3. harga iklan tayang perhari 4. adalah masa/ tempo dimana iklan tayang sampai berakhir 5. adalah biaya/ subtotal 6. masih aktif/tidak. Jika sudah lewat tanggal, secara otomatis menadi tidak aktif

Selanjutnya mari kita lihat pertemuan 4&5 halaman 2-25

pada

modul

Web Programming II Pertemuan 4&5

Admin portal berita  Admin portal berita melakukan pengelolaan data /modul a. Berita (lihat, tambah, edit, hapus) b. Iklan (lihat, tambah edit, hapus) c. Anggota (lihat, edit status)  ket : Pada halaman ini, Admin dapat melakukan entry iklan , sekaligus juga menentukan tanggal mulainya iklan dan kapan berakhirnya, sekaligus menentukan harga per hari iklan yg ditampilkan sehingga dapat diketahui jumlah keuntungan yang diperoleh

tampilan yg diharapkan adalah sebagai berikut:

ket : 1 adalah tgl perdana iklan 2. adalah tgl berakhirnya penayangan iklan 3. harga iklan tayang perhari 4. adalah masa/ tempo dimana iklan tayang sampai berakhir 5. adalah biaya/ subtotal 6. masih aktif/tidak. Jika sudah lewat tanggal, secara otomatis menadi tidak aktif

Selanjutnya mari kita lihat pertemuan 4&5 halaman 2-25

pada

modul

Web Programming II Pertemuan 6,7 & 8

 Pada pertemuan 6,7 dan 8, mahasiswa ditugaskan untuk mengerjakan soal-soal Pemahaman Logika.  Soal-soal yang dikerjakan adalah : Contoh soal A Contoh soal B Contoh soal C Contoh soal D  Soal-soal terlampir

Web Programming II Pertemuan 6,7 & 8

 Pada pertemuan 6,7 dan 8, mahasiswa ditugaskan untuk mengerjakan soal-soal Pemahaman Logika.  Soal-soal yang dikerjakan adalah : Contoh soal A Contoh soal B Contoh soal C Contoh soal D  Soal-soal terlampir

Web Programming II Pertemuan 6,7 & 8

 Pada pertemuan 6,7 dan 8, mahasiswa ditugaskan untuk mengerjakan soal-soal Pemahaman Logika.  Soal-soal yang dikerjakan adalah : Contoh soal A Contoh soal B Contoh soal C Contoh soal D  Soal-soal terlampir

Web Programming II Pertemuan 9 Pasca UTS

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

 Microsoft dan Nokia membundel jQuery pada platform mereka. Microsoft memasukkannya dalam Visual Studio untuk digunakan dalam framework ASP.NET AJAX dan ASP.NET MVC, sedangkan Nokia mengintegrasikannya dalam platform pengembangan widget Web Run-Time. jQuery juga mulai dipakai pada MediaWiki sejak versi 1.16.  Situs resmi jQuery beralamat 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.

 jQuery, pada intinya, adalah sebuah library yang berfungsi untuk memanipulasi DOM. 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 fungsi-fungsi yang dapat dirangkaikan (chain-able) dan nama-nama fungsi yang pendek.  Mengatasi masalah kompatibilitas antar-browser → JavaScript engine pada berbagai browser memiliki perbedaan satu sama lain, sehingga script yang berjalan pada suatu browser bisa gagal pada browser lainnya. jQuery mengatasi segala inkonsistensi antar-browser tersebut dan menyajikan 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

Untuk menautkan file jQuery pada server lokal, gunakan kode berikut: <script src="jquery.js"> Untuk menggunakan CDN, sisipkan kode berikut: <script src="//code.jquery.com/jquery2.1.1.min.js">

2. Gaya Penggunaan jQuery memiliki dua gaya penggunaan: 1. Via fungsi $ → adalah factory method untuk obyek jQuery. Fungsi-fungsi semacam ini, kerap disebut sebagai commands (perintah), dapat dirangkaikan (chainable) sebab masing-masing menyajikan obyek. 2. Via fungsi $.-prefiks → fungsi-fungsi utilitas yang tidak dijalankan secara langsung pada obyek

 Pada penggunaan tipikal, akses dan manipulasi atas simpul-simpul DOM diawali dengan pemanggilan fungsi $ menggunakan string selektor CSS. Metode ini menghasilkan sebuah obyek jQuery yang merujuk pada elemenelemen HTML yang sesuai.  Sebagai contoh, $(“div.namaclass”) akan menghasilkan obyek dengan tipe “div” dan class “namaclass”. Simpul ini dapat dimanipulasi dengan menyambungkan satu atau beberapa fungsi jQuery di belakangnya

$(“button”) = menandakan semua tag button $('button[name="x"]').= manandakan tag button dengan nama x $(“.coba”) = titik menandakan class = misalnya, $(“#coba”) manendakan id=misalnya,

Untuk contoh script nya mari kita lihat pada modul pertemuan 9 halaman 4-10

QUIS

Web Programming II Pertemuan 11, 12, 13 & 14

Presentasi Project Pada pertemuan 11-14 : Mahasiswa melakukan presentasi kelompok dan diskusi Project yang telah dibuat. Dalam 1 pertemuan kelompok yang presentasi sebaiknya 2 kelompok dan maksimal 3 kelompok jika jumlah kelompok banyak. Durasi presentasi dan diskusi Project 45-60 Menit/kelompok

Web Programming II Pertemuan 11, 12, 13 & 14

Presentasi Project Pada pertemuan 11-14 : Mahasiswa melakukan presentasi kelompok dan diskusi Project yang telah dibuat. Dalam 1 pertemuan kelompok yang presentasi sebaiknya 2 kelompok dan maksimal 3 kelompok jika jumlah kelompok banyak. Durasi presentasi dan diskusi Project 45-60 Menit/kelompok

Web Programming II Pertemuan 11, 12, 13 & 14

Presentasi Project Pada pertemuan 11-14 : Mahasiswa melakukan presentasi kelompok dan diskusi Project yang telah dibuat. Dalam 1 pertemuan kelompok yang presentasi sebaiknya 2 kelompok dan maksimal 3 kelompok jika jumlah kelompok banyak. Durasi presentasi dan diskusi Project 45-60 Menit/kelompok

Web Programming II Pertemuan 11, 12, 13 & 14

Presentasi Project Pada pertemuan 11-14 : Mahasiswa melakukan presentasi kelompok dan diskusi Project yang telah dibuat. Dalam 1 pertemuan kelompok yang presentasi sebaiknya 2 kelompok dan maksimal 3 kelompok jika jumlah kelompok banyak. Durasi presentasi dan diskusi Project 45-60 Menit/kelompok