Knowledge Sharing Program jquery Basic

Ukuran: px
Mulai penontonan dengan halaman:

Download "Knowledge Sharing Program jquery Basic"

Transkripsi

1 2010 Knowledge Sharing Program jquery Basic Andy Saputra Sekolah Tinggi Teknik Surabaya 12/18/2010

2 2 Daftar Isi Intro jquery Pre-requisite Selector DOM Manipulation Event Handler Effect/Animation AJAX

3 3 Intro jquery jquery adalah library javascript yang menyediakan berbagai fasilitas yang dulunya harus dibuat manual oleh user, namun sekarang cukup dipanggil/dijalankan dengan mudah. Misalkan, animasi Fade In, Fade Out, Slide In, Slide Show, dll. Keunggulan lain jquery terletak pada fasilitas selectornya, yaitu fasilitas jquery untuk memilih objek DOM untuk diproses selanjutnya. Website resmi developer jquery: Cara penggunaan: - Download file jquery terbaru dari - Import file jquery.js yang sudah didownload ke halaman web yang ingin menggunakan jquery. <script src="jquery.js" type="text/javascript"> - Notasi penggunaan jquery yang lazim digunakan adalah dengan menambahkan tanda $. - Letak penulisan coding jquery sebaiknya berada di dalam $(document).ready(), untuk memastikan semua script jquery dijalankan setelah semua objek DOM selesai diload untuk halaman web tersebut, $(document).ready(function(){ // coding jquery }); - Contoh jquery sederhana: $(document).ready(function(){ $("a").click(function(event){ alert("thanks for visiting!"); }); });

4 4 Pre-Requisites Untuk mempermudah penggunaan dan aplikasi jquery, maka diharapkan pengguna sudah memiliki basic: - HTML dan pengetahuan tentang DOM (Document Object Modelling) - CSS (Cascading Style Sheet) - Sedikit pengetahuan tentang Javascript dasar. HTML dan DOM HTML merupakan suatu bahasa yang digunakan untuk membuat halaman web. Bahasa ini menggunakan tag-tag khusus untuk menandai elemen-elemen yang terdapat dalam web. <html> <head> <title>halaman Websiteku</title> </head> <body> <div id= Div1 > <a href= Link ke Google </a> </div> <p> Halaman yang menyediakan link ke Google </p> </body> DOM (Document Object Modeling) adalah suatu cara untuk memodelkan objekobjek dalam halaman web (dianggap sebagai suatu dokumen). Hal ini dilakukan untuk mempermudah manipulasi dan pengaksesan elemen-elemen dari halaman tersebut.

5 5 Contoh ilustrasi DOM berdasarkan contoh HTML di atas HTML Head Body Title Div id= Div1 p CSS (Cascading Style Sheet) CSS merupakan kumpulan style yang bertujuan untuk mengatur penampilan dari objek/elemen suatu halaman web. Contoh #div1{ background-color: red; text-align: center; margin-left: 20px; }

6 6 Selector Selector merupakan salah satu keunggulan utama dari jquery, di mana fungsi utamanya adalah memilih objek DOM yang diinginkan oleh user untuk dimanipulasi dengan mudah. Syntax dasar selector: $( #divcontent ).click(function(). Bagian yang dihighlight adalah selector yang akan memilih objek DOM (dalam kasus di atas, yang di-select adalah objek/element dengan id= divcontent ). Beberapa jenis selector: 1. Element: untuk memilih element dengan tag tertentu. Syntax: $( E ). $( a ) akan menyelect semua elemen tag <a> di halaman web. 2. ID: untuk memilih element dengan ID tertentu. Syntax: $( #id ). $( #content ) akan menyelect semua elemen dengan id= content tanpa melihat tag elementnya. 3. Class: untuk memilih element dengan class tertentu. Syntax: $(.class ). $(.myclass ) akan menyelect semua elemen dengan class= myclass tanpa melihat tag elementnya. 4. Descendant: untuk memilih element F yang merupakan bagian/descendant dari element E. Descendant adalah semua elemen yang menjadi bagian dari elemen lainnya. Syntax : $( E F )

7 7 Contoh : <div id= container > <p> <span> <img src= a.jpg /> </span> </p> </div> <img src..> merupakan descendant dari <span>, <p>, dan <div>. Kode $( #container p ) dapat digunakan untuk memilih elemen <p> yang merupakan descendant dari elemen dengan id= container. 5. Child: untuk memilih elemen F yang merupakan child dari elemen E. Syntax: $( E>F ) $( li > ul ) digunakan untuk memilih semua elemen tag <ul> yang merupakan children dari elemen tag <li>. 6. Multiple Element: untuk memilih beberapa elemen sekaligus, dipisahkan dengan koma. Syntax: $( E, F, G ) $( div, p, a ): digunakan untuk memilih semua elemen dengan tag <div>, <p>, dan <a>. 7. Semua Element: untuk memilih semua elemen, menggunakan tanda *. Syntax: $( * ) $( * ): digunakan untuk memilih semua elemen dalam dokumen/halaman HTML. $( p>* ): digunakan untuk memilih semua elemen yang merupakan child dari tag <p>. Selector-selector lainnya 1. :odd dan :even : digunakan untuk memilih elemen yang memiliki index genap maupun ganjil. Syntax: :odd dan :even $( tr:odd ) digunakan untuk memilih elemen <tr> yang nilai indexnya ganjil.

8 8 Contoh pemakaian praktis dari selector ini adalah untuk membuat alternating row suatu table, di mana warna dari baris ganjil dan genap suatu table berbeda. 2. Elemen ke-n : digunakan untuk memilih elemen sesuai dengan index yang diinginkan Syntax: :eq(n) atau :nth(n) $( li:eq(2) ) digunakan untuk memilih elemen <li> ke-3 (karena index elemen ke-1 dihitung sebagai index ke-0). 3. Elemen pertama/terakhir: hampir sama dengan elemen ke-n, namun dapat dipanggil dengan notasi khusus. Syntax: :first atau :last $( li:last ) digunakan untuk memilih elemen <li> yang terakhir. 4. Elemen yang terlihat atau hidden: untuk memilih semua elemen berdasarkan visibilitynya, yaitu yang terlihat ataupun yang hidden. Syntax: :visible atau :hidden $( li:visible ) digunakan untuk memilih semua elemen <li> yang bersifat visible. $( input:hidden ) digunakan untuk memilih semua elemen <input> yang hidden.

9 9 Method manipulasi objek DOM - Mendapatkan, mengganti, dan menghapus atribut suatu element Selector.attr(atribut) : digunakan untuk mendapatkan value dari suatu atribut dari element yang ditunjuk selector. Selector.attr(atribut, new_value) : digunakan untuk mengubah value dari suatu atribut dari element yang ditunjuk selector, sesuai dengan nilai yang dimasukkan pada parameter new_value. Selector.removeAttr(atribut) : digunakan untuk menghapus suatu atribut dari element tertentu. - Mendapatkan dan mengganti nilai Style/CSS dari suatu element Selector.css(property) : digunakan untuk memperoleh nilai dari properti CSS suatu element yang ditunjuk selector. Selector.css(property, new_value) : digunakan untuk mengubah nilai dari properti CSS suatu elemen yang ditunjuk selector, sesuai dengan nilai new_value. - Menambahkan dan mengurangi class yang dimiliki oleh suatu element. Selector.addClass(class) : digunakan untuk menambahkan class baru ke dalam elemen yang ditunjuk selector. Selector.removeClass(class) : digunakan untuk menghapus nama class yang tidak diinginkan dari elemen yang ditunjuk selector. Selector.toggleClass(class) : digunakan untuk men-toggle class, di mana sifatnya adalah akan menambahkan class jika elemen yang ditunjuk selector belum memiliki class ini, dan akan menghapus class jika class tersebut sudah dimiliki oleh elemen yang ditunjuk selector. - Mendapatkan dan mengubah isi HTML dari suatu element. Selector.html() : digunakan untuk mendapatkan isi HTML dari suatu element. Selector.html(html) : digunakan untuk mengubah isi HTML dari suatu element yang ditunjuk selector.

10 10 - Mendapatkan dan mengubah isi text dari suatu element. Yang dimaksud dengan teks adalah semua tulisan yang diapit dalam tag HTML. Misalkan elemennya adalah <a> New Link </a>, maka yang dimaksud teks adalah New Link Selector.text() :Digunakan untuk mendapatkan isi teks dari setiap elemen yang sesuai dengan selector yang digunakan, termasuk descendant-nya. Selector.text(text) : Digunakan untuk mengganti isi teks dari setiap element. Sebagai catatan, method di atas akan mengganti karakter < dan > dengan < dan > sehingga penggunaannya harus diperhatikan - Mendapatkan dan mengubah nilai dari element form. Selector.val() : Digunakan untuk mendapatkan value dari suatu element, terutama untuk element form. Selector.val(value) : Digunakan untuk mengganti value dari suatu element, terutama untuk element form. - Beberapa method ini digunakan untuk menambahkan elemen baru ke dalam elemen lainnya. Yang berbeda adalah peletakkan elemen baru tersebut. Prepend dan Append termasuk dalam Inside Insertion, yaitu elemen baru akan ditambahkan di dalam elemen tersebut. Selector.prepend(content) dan Selector.prepend(object) : Digunakan untuk menambahkan elemen (baik berupa teks HTML yang ditulis dalam content ataupun objek lain dalam web yang dipilih dengan selector jquery) dan diletakkan di bagian paling atas dari element yang ditunjuk selector. $( #diva ).prepend( <div id= 1 ></div> ), maka sebuah div baru akan ditambahkan pada bagian paling atas dari diva. $( #diva ).prepend($( #divb )), maka div lain dengan id=divb akan ditambahkan pada bagian paling atas dari diva. Selector.append(content) dan Selector.append(object) : Digunakan untuk menambahkan elemen (baik berupa teks HTML yang ditulis dalam content ataupun objek lain dalam web yang dipilih dengan selector jquery) dan diletakkan di bagian paling terakhir/bawah dari element yang ditunjuk selector.

11 11 $( #diva ).append( <div id= 1 ></div> ), maka sebuah div baru akan ditambahkan pada bagian paling bawah dari diva. $( #diva ).append($( #divb )), maka div lain dengan id=divb akan ditambahkan pada bagian paling bawah dari diva. Before dan After termasuk dalam Outside Insertion, yaitu elemen baru akan ditambahkan di dalam elemen tersebut. Selector.before(content) dan Selector.before(object) : Digunakan untuk menambahkan elemen (baik berupa teks HTML yang ditulis dalam content ataupun objek lain dalam web yang dipilih dengan selector jquery) dan diletakkan sebelum/di atas element yang ditunjuk selector. $( #diva ).before( <div id= 1 ></div> ), maka sebuah div baru akan ditambahkan sebelum/di atas diva. $( #diva ).before($( #divb )), maka div lain dengan id=divb akan ditambahkan sebelum/di atas diva. Selector.after(content) dan Selector.after(object) : Digunakan untuk menambahkan elemen (baik berupa teks HTML yang ditulis dalam content ataupun objek lain dalam web yang dipilih dengan selector jquery) dan diletakkan sesudah/di bawah element yang ditunjuk selector. $( #diva ).after( <div id= 1 ></div> ), maka sebuah div baru akan ditambahkan sesudah/di bawah diva. $( #diva ).after($( #divb )), maka div lain dengan id=divb akan ditambahkan sesudah/di bawah diva. - Menghapus elemen DOM. Selector.remove() : digunakan untuk menghapus semua elemen yang ditunjuk oleh selector.

12 12 Event Handler Sama halnya dengan Javascript, jquery juga dilengkapi dengan event handler. Event handler adalah event yang akan dipanggil (ditrigger) jika terjadi event-event tertentu. Contohnya, event onclick adalah event ketika kita melakukan penekanan mouse click. Jika kita memasangkan fungsi A sebagai handler pada event onclick, maka setiap kali terjadi penekanan mouse click, fungsi A akan dipanggil dan dijalankan. Method yang berkaitan dengan event handler pada jquery adalah: -.bind(event_type, handler) : digunakan untuk memasangkan suatu fungsi handler terhadap event tertentu. misalkan kita memiliki fungsi bernama showmessage(), dan kita ingin setiap terjadi penekanan mouse click pada div dengan ID = mydiv, fungsi showmessage akan dipanggil, maka kita lakukan binding seperti demikian. $( #mydiv ).bind( click,showmessage); Jika kita tidak ingin memanggil fungsi lain, maka kita dapat langsung membuat anonymous function sebagai handler. $( #mydiv ).bind( click, function(){ alert( Hello World ); }); jquery juga menyediakan short-cut untuk mempersingkat penulisan event handler, yaitu dengan langsung mengetikkan nama eventnya. Misalkan, untuk event mouse click, kita hanya perlu mengetikkan: $( #mydiv ).click(showmessage); Perintah di atas sama persis dengan perintah $( #mydiv ).bind( click,showmessage); -.unbind() : digunakan untuk menghapus suatu handler dari event tertentu. Yang dihapus adalah event handlernya, bukan fungsi yang dipanggil oleh event tersebut.

13 13 untuk menghapus event handler click dari suatu element, kita dapat memberikan perintah Selector.unbind( click ); -> untuk event handler dengan anonymous function Selector.unbind( click, showmessage); -> untuk event handler dengan function showmessage() -.one() : merupakan method yang khusus, karena akan memasangkan fungsi handler dengan event tertentu, namun hanya dapat dipanggil sekali saja. Setelah terjadi event, maka event handler akan dihapus/di-unbind. Selector.one( click, onemessage); -> dengan perintah ini, maka pada click pertama yang terjadi pada element sesuai selector, function onemessage() akan dipanggil. Namun, setelah selesai, maka function akan di-unbind sehingga click-click berikutnya tidak akan memanggil function onemessage(). -.trigger() : digunakan untuk memicu event handler tertentu secara manual. Kita memasangkan handler function validate() pada saat submit form $( #myform ).submit(validate); Namun, jika kita ingin menjalankan submit tersebut bukan hanya dari tombol submit, namun dari penekanan tombol lainnya, maka harus menggunakan trigger seperti berikut. $( #elemenlain ).click(function){ $( #myform ).trigger( submit ); }); Dengan perintah di atas, maka event handler dari myform akan dijalankan meskipun form tidak benar-benar mengalami event submit.

14 14 Effect/Animation jquery menyediakan beberapa fungsi bawaan siap pakai yang berhubungan dengan efek-efek animasi, seperti slide in, slide out, fade in, dll. Method-method yang dapat digunakan - Selector.show([speed][,callback]) : digunakan untuk menampilkan elemen sesuai selector, dari yang semula hidden/invisible menjadi visible. Parameter speed dapat diisi dengan kecepatan animasi dalam milisecond (misalkan diisi 100,200 dsb). Namun, jquery juga menyediakan 3 jenis speed, yaitu fast (200 ms), normal (400 ms), dan slow (600ms). Jika parameter speed ini tidak diisi, maka kecepatan normal yang digunakan. Callback function adalah fungsi yang akan dijalankan setelah suatu method (dalam hal ini adalah.show() ) selesai dijalankan. - Selector.hidden([speed][,callback]): digunakan untuk menampilkan elemen sesuai selector, dari yang semula visible menjadi hidden/invisible. - Selector.toggle([speed][,callback]) : digunakan untuk men-toggle status visible/hidden dari elemen sesuai selector. Jika elemen visible, maka akan menjadi hidden. Sebaliknya, jika elemen hidden, maka akan dimunculkan/visible. - Selector.slideDown([speed][,callback]) : digunakan untuk menampilkan animasi slidedown (dari elemen yang tertutup menjadi terbuka dengan animasi slide down) pada elemen yang ditunjuk selector. - Selector.slideUp([speed][,callback]) : digunakan untuk menampilkan animasi slideup (dari elemen yang terbuka menjadi tertutup dengan animasi slide up) pada elemen yang ditunjuk selector. - Selector.slideToggle([speed][,callback]) : digunakan untuk men-toggle slideup dan slidedown. - Selector.fadeIn([speed][,callback]) : digunakan untuk menampilkan animasi fade in pada elemen yang ditunjuk selector.

15 15 - Selector.fadeOut([speed][,callback]) : digunakan untuk menampilkan animasi fade out pada elemen yang ditunjuk selector. - Selector.fadeTo(speed,opacity[,callback]) : digunakan untuk menampilkan animasi fade sesuai dengan opacity dan speed yang diinginkan user. Opacity yang dimasukkan bernilai antara 0 1.

16 16 AJAX Berikut merupakan method-method yang digunakan untuk menangani AJAX via jquery. - Selector.load(url [,data][,success]) : digunakan untuk me-load data yang diterima dari server dan meletakkan hasil HTML yang diperoleh pada elemen yang ditunjuk oleh selector. Parameter url diisi dengan alamat yang dikirimi request. Parameter data dapat diisi dengan data-data yang akan disertakan dengan request. Parameter success dapat diisi dengan function yang akan dijalankan jika request berhasil dijalankan. Request yang dijalankan secara default akan dikirimkan dengan metode GET, namun apabila terdapat data yang juga dikirimkan, maka request akan dikirimkan dengan metode POST. o Siapkan dua halaman html, index.html dan content.html. o Content.html diisi dengan teks sembarang di dalam tag <body> o Kita akan meload halaman content.html dari index.html dengan cara $( #div1 ).load( content.html ); Isi content.html akan diload ke dalam isi div1. - $.get(url [,data][,success]): digunakan untuk melakukan request AJAX dengan metode GET terhadap url yang dituju. Contoh, kita akan melakukan sebuah request sederhana seperti demikian $.get("test.php", {username : us, password: ps}, function(data){ alert("data Loaded: " + data); $("#result").html(data); });

17 17 Dari perintah di atas, kita melakukan AJAX request terhadap test.php dan mengirimkan dua data dengan nama variabel username dan password. Nama variable ini nantinya akan diakses dari PHP dengan $_GET[ username ] dan $_GET[ password ]. *perhatikan bahwa nama variable yang ditulis dalam jquery akan digunakan untuk mengakses isi variable itu dalam PHP* Pada function callback, kita dapat menangkap parameter pertama yang berisi response dari server yang diperoleh. Dalam kasus di atas, hasil kembalian dari server ditampung dalam variable bernama data dan akan ditampilkan dalam div dengan id result. Isi file PHP yang berhubungan dengan contoh ini. <?php $username = $_GET['username']; $password = $_GET['password']; echo "Username : ". $username. " <BR>"; echo "Password : ". $password;?> - $.post(url [,data][,success]): digunakan untuk melakukan request AJAX dengan metode POST terhadap url yang dituju. Cara penggunaan sama persis dengan $.get(), hanya perlu mengganti kata get dengan post.

PEMROGRAMAN WEB 13 jquery

PEMROGRAMAN WEB 13 jquery PEMROGRAMAN WEB 13 jquery Andi WRE jquery Library yang berisi fungsi-fungsi javascript Write Less, Do More Library jquery berisi fitur : - HTML element selections - HTML element manipulation - CSS manipulation

Lebih terperinci

Pemrograman Web Week 4. Team Teaching

Pemrograman Web Week 4. Team Teaching Pemrograman Web Week 4 Team Teaching Peran Masing-masing Bahasa HTML => Mengatur Struktur CSS => Mengatur tampilan JSS => Mengatur interaktifitas Penggunaan Javascript Sama seperti pada CSS, ada 3 cara

Lebih terperinci

AJAX Framework. Pemrograman Web 1. Genap

AJAX Framework. Pemrograman Web 1. Genap AJAX Framework Pemrograman Web 1 Genap 2011-2012 Framework Apa itu Framework (Software Framework)? Kumpulan pustaka-pustaka (library) perangkat lunak yang script-nya dapat digunakan kembali (reusable)

Lebih terperinci

Dasar-dasar jquery. Disampaikan pada Kelas Daring BlankOn, 1 Oktober Fitra Aditya /

Dasar-dasar jquery. Disampaikan pada Kelas Daring BlankOn, 1 Oktober Fitra Aditya / Dasar-dasar jquery Disampaikan pada Kelas Daring BlankOn, 1 Oktober 2012 Fitra Aditya fitra@di.blankon.in / http://fitraditya.wordpress.com/ Pendahuluan Sebelum mempelajari jquery, ada baiknya kita mengetahui

Lebih terperinci

Intro To JQuery Training Online Ilmuwebsite

Intro To JQuery Training Online Ilmuwebsite MODUL I JQUERY KELAS ZEROZERO Intro To JQuery Training Online Ilmuwebsite http://www.ilmuwebsite.com Lisensi Dokumen: Copyright 2014-2015 Ilmuwebsite.Com Untuk semua kalangan, silahkan menyebarluaskan

Lebih terperinci

CSS (Cascading Style Sheet) Oleh : Devie Rosa Anamisa

CSS (Cascading Style Sheet) Oleh : Devie Rosa Anamisa CSS (Cascading Style Sheet) Oleh : Devie Rosa Anamisa Pembahasan Pengertian CSS CSS (FONT, TEXT, COLOR) CSS - Image PENGERTIAN CSS Singkatan dari Cascading Style Sheet Digunakan dalam kode HTML untuk menciptakan

Lebih terperinci

TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif

TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif www.ilmuwebsite.com Bagian 4. Menggunakan Selector JQuery 1

Lebih terperinci

Mahasiswa memahami Pengertian, fungsi, aplikasi untuk menjalankan JavaScript, cara menjalankan kode, cara memasukkan kode JavaScript ke dalam HTML

Mahasiswa memahami Pengertian, fungsi, aplikasi untuk menjalankan JavaScript, cara menjalankan kode, cara memasukkan kode JavaScript ke dalam HTML Pengenalan JavaScript Standar Kompetensi Mahasiswa memahami Pengertian, fungsi, aplikasi untuk menjalankan JavaScript, cara menjalankan kode, cara memasukkan kode JavaScript ke dalam HTML Indikator Hasil

Lebih terperinci

MODUL 7. Pengantar jquery

MODUL 7. Pengantar jquery MODUL 7 Pengantar jquery Laboratorium Komputer STIMIK PPKIA Pradnya Paramita Malang 2016 Pertemuan 7 7.1 Tujuan : 1. Mahasiswa dapat memahami mengenai PHP dengan jquery 2. Mahasiswa dapat mengaplikasikan

Lebih terperinci

AJAX dengan jquery Part 1

AJAX dengan jquery Part 1 AJAX dengan jquery Part 1 Oleh: Cecep Yusuf Kali ini saya akan share tutorial AJAX dengan jquery. Dengan menggunakan jquery, penggunaan AJAX akan jauh menjadi lebih mudah. Penjelasan Kali ini saya akan

Lebih terperinci

POLITEKNIK ELEKTRONIKA NEGERI SURABAYA

POLITEKNIK ELEKTRONIKA NEGERI SURABAYA WEB DESAIN Pengenalan JavaScript Alfira Rizky Ayuputri 4103141039 3 D3 Multimedia Broadcasting B Dwi Susanto, S.ST, MT. D3 Teknologi Multimedia Broadcasting Departemen Multimedia Kreatif POLITEKNIK ELEKTRONIKA

Lebih terperinci

Dasar Pemrograman Web. Pemrograman Web. Adam Hendra Brata

Dasar Pemrograman Web. Pemrograman Web. Adam Hendra Brata Dasar Pemrograman Web Pemrograman Web Adam Hendra Brata Konsep Dasar Desain Web HTML CSS HTML HTML (HyperText Markup Language) Bahasa standar yang digunakan untuk menampilkan document web. Mengontrol tampilan

Lebih terperinci

Pemrograman Web Week 2. Team Teaching

Pemrograman Web Week 2. Team Teaching Pemrograman Web Week 2 Team Teaching WEEK 2 HTML IKG2I4 Software Project I Persiapan Instalasi Editor Download dan Install apilkasi editor (mis. Notepad++) Karena membantu dalam pengembangan syntax highlighting

Lebih terperinci

MODUL 1 PENGENALAN HTML

MODUL 1 PENGENALAN HTML MODUL 1 PENGENALAN HTML TUJUAN PRAKTIKUM : 1. Praktikan memahami tentang HTML, CSS, frame dan JS pada HTML serta kegunaannya. 2. Praktikan memahami bagaimana cara membuat web menggunakan HTML, CSS dan

Lebih terperinci

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

Sintaks jquery biasanya dibuat untuk memilih elemen-elemen HTML dan melakukan aksi terhadap elemen yang dipilih. jquery jquery adalah javascript library, jquery mempunyai semboyan write less, do more. jquery dirancang untuk memperingkas kode-kode javascript. JQuery adalah javascript library yang cepat dan ringan

Lebih terperinci

Review Pemrograman Web I

Review Pemrograman Web I Review Pemrograman Web I Pemrograman Web II Ganjil 2010 2011 Intro Mata kuliah : Pemrograman Web 2 SKS : 3 Jenis : Mata kuliah wajib Pertemuan : 14 pertemuan kelas Periode : Ganjil 2010 2011 Dosen : Sandra

Lebih terperinci

DOM (Document Object Model) dan Event

DOM (Document Object Model) dan Event DOM (Document Object Model) dan Event Tujuan Praktikum - Praktikan mampu mengakses DOM dalam HTML dan mengatur event pada elemenelemen dalam dokumen HTML Pengantar Ketentuan yang dikembangkan oleh W3C

Lebih terperinci

HTML DOM. Pemrograman Web 1. Genap

HTML DOM. Pemrograman Web 1. Genap HTML DOM Pemrograman Web 1 Genap 2011-2012 HTML DOM DOM, singkatan dari Document Object Model, adalah sebuah cross-platform dan sebuah bahasa independen untuk merepresentasikan dan berinteraksi dengan

Lebih terperinci

Tag dasar yang akan kita gunakan untuk membuat form di HTML adalah tag form, input, textarea, select dan option.

Tag dasar yang akan kita gunakan untuk membuat form di HTML adalah tag form, input, textarea, select dan option. Form Form biasanya digunakan untuk mengumpulkan data dari pengunjung web kita. Mulai dari form untuk login, form kontak, form untuk pendaftaran user, bahkan untuk mengirimkan data antar halaman web Tag

Lebih terperinci

Basic jquery Menyentuh jquery sekarang juga

Basic jquery Menyentuh jquery sekarang juga Basic jquery Menyentuh jquery sekarang juga JQuery merupakan suatu framework (library) Javascript yang menekankan bagaimana interaksi antara Javascript dan HTML yanwar 11/8/2013 Apa sih jquery? 2 Kenapa

Lebih terperinci

AJAX. Pemrograman Web. Rajif Agung Yunmar, S.Kom

AJAX. Pemrograman Web. Rajif Agung Yunmar, S.Kom AJAX Pemrograman Web Rajif Agung Yunmar, S.Kom Synchronous Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada saat client mengirimkan request terhadap server, client

Lebih terperinci

Pertemuan Ke-5 Client Side Scripting (JavaScript) S1 Teknik Informatika - Unijoyo 1

Pertemuan Ke-5 Client Side Scripting (JavaScript) S1 Teknik Informatika - Unijoyo 1 Pertemuan Ke-5 Client Side Scripting (JavaScript) S1 Teknik Informatika - Unijoyo 1 Konsep Client Side Scripting JavaScript? Pendeklarasian JavaScript JavaScript sederhana Peletakan JavaScript Komentar

Lebih terperinci

HTML DOM #1 Yosef Murya Kusuma Ardhana. ST., M.Kom

HTML DOM #1 Yosef Murya Kusuma Ardhana. ST., M.Kom HTML DOM #1 Yosef Murya Kusuma Ardhana. ST., M.Kom HTML? HTML merupakan singkatan dari Hypertext Markup Language. HTML adalah sekumpulan text atau file ASCII yang berisi intruksi atau perintah program

Lebih terperinci

PEMROGRAMAN WEB 09 JavaScript Lanjut

PEMROGRAMAN WEB 09 JavaScript Lanjut PEMROGRAMAN WEB 09 JavaScript Lanjut Andi WRE JavaScript Objects Object Based Programming language Setiap object dapat memiliki properti dan method Properti the values associated with an object Contoh

Lebih terperinci

Membuat Login Pop Up Dengan JqueryUI

Membuat Login Pop Up Dengan JqueryUI Membuat Login Pop Up Dengan JqueryUI Oleh: Dadan Berawal dari maraknya tayangan goyang di telivisi. Terinspirasi juga untuk membuat efek goyang pada website saya. Hehe kagak nyambung nih ilustrasi ceritanya

Lebih terperinci

Upload File dengan Metode AJAX

Upload File dengan Metode AJAX Upload File dengan Metode AJAX Oleh: Cecep Yusuf Saya akan membahas bagaimana membuat form upload file beserta prosesnya dengan menggunakan teknik AJAX memakai library Ajax File Upload, salah satu library

Lebih terperinci

CSS. inheritance (pewarisan)

CSS. inheritance (pewarisan) {CSS} lanjut CSS inheritance (pewarisan) sebuah elemen mewarisi beberapa nilai dari properti yang dimiliki oleh elemen parent-nya http://www.w3.org/tr/css21/cascade.html#inheritance http://www.slideshare.net/diniscorreia/htmlcss-3-introduction-to-css

Lebih terperinci

Pemrograman Web. Cascading Style Sheets. Created by : Rifqi Sambas Khairurrohman

Pemrograman Web. Cascading Style Sheets. Created by : Rifqi Sambas Khairurrohman Pemrograman Web Cascading Style Sheets Created by : Rifqi Sambas Khairurrohman Home Page Anatomi CSS Macam Selector Cara Kerja Anatomi CSS CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector,

Lebih terperinci

A. Tujuan B. Dasar Teori 1. Pemrosesan Form 2. Konsep Penggunaan Tag <form> pada HTML

A. Tujuan B. Dasar Teori 1. Pemrosesan Form 2. Konsep Penggunaan Tag <form> pada HTML Form HTML A. Tujuan Memahami konsep penggunaan tag pada HTML Mampu menangani masukan data dari form HTML Mampu membuat dan memproses beragam elemen kontrol B. Dasar Teori 1. Pemrosesan Form Pemrosesan

Lebih terperinci

Kapita Selekta (KBKI82127, 2 sks) Materi : Penanganan Form

Kapita Selekta (KBKI82127, 2 sks) Materi : Penanganan Form Kapita Selekta (KBKI82127, 2 sks) Materi : Penanganan Form Form inputan dibuat dengan tag-tag HTML. Halaman yang mengandung form murni (tidak ada script php) tidak harus disimpan dalam bentuk php, bisa

Lebih terperinci

Dasar Pemrograman Web. Pemrograman Web. Adam Hendra Brata

Dasar Pemrograman Web. Pemrograman Web. Adam Hendra Brata Dasar Pemrograman Web 2 Pemrograman Web Adam Hendra Brata Teknologi Client Server Konsep Dasar Desain Web Teknologi Client Server Arsitektur Client Server Model komunikasi yang terdiri server sebagai pemberi

Lebih terperinci

Pemrograman Web I (HTML) Oleh: Devie Rosa Anamisa

Pemrograman Web I (HTML) Oleh: Devie Rosa Anamisa Pemrograman Web I (HTML) Oleh: Devie Rosa Anamisa Tujuan Kuliah Mampu Menjelaskan mengenai: Pengertian struktur dasar tag-tag HTML membuat aplikasi dengan perintah-perintah HTML HTML Hyper Text Markup

Lebih terperinci

PENGANTAR KOMPUTER DAN TI 2C

PENGANTAR KOMPUTER DAN TI 2C PENGANTAR KOMPUTER DAN TI 2C PERTEMUAN 4 Peg. Komp & TI 2C M4 HyperText Markup Language (HTML) Sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di

Lebih terperinci

CSS Cascading Style Sheet

CSS Cascading Style Sheet CSS Cascading Style Sheet Pemrograman Web 1 Genap 2011-2012 Pengenalan CSS CSS = Cascading Style Sheet. Suatu style yang digunakan untuk menampilkan elemen HTML. Dapat mengatur dan mengontrol tampilan

Lebih terperinci

C. Ms Powerpoint D. Notepad E. Ms Acces

C. Ms Powerpoint D. Notepad E. Ms Acces 1. Apakah kepanjangan dari HTML? A. Hyper Text Mark Up Language B. Hyper Text Mark Language C. Hight Text Mark Up Language D. Hight Text Mark Language 2. Berikut ini adalah termasuk Software Browser, Kecuali:

Lebih terperinci

Jquery Events. Contoh : $(.tombol ).click(function() { $( p ).hide(1000); }); 5

Jquery Events. Contoh : $(.tombol ).click(function() { $( p ).hide(1000); }); 5 PENGENALAN JQUERY Apa itu Jquery? jquery dirancang untuk memperingkas kode-kode javascript. JQuery adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, dan membuat

Lebih terperinci

TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif

TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif www.ilmuwebsite.com Bagian 8. Menggunakan JQuery Manipulation

Lebih terperinci

Contoh Syntax: Contoh di atas menunjukkan. S e l e c t o r : h 1. P r o p e r t y : c o l o r. V a l u e : r e d. (red).

Contoh Syntax: Contoh di atas menunjukkan. S e l e c t o r : h 1. P r o p e r t y : c o l o r. V a l u e : r e d. (red). Apa Itu CSS? PENGENALAN CSS CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke

Lebih terperinci

TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif

TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif www.ilmuwebsite.com Bagian 7. Menggunakan JQuery Traversing

Lebih terperinci

{CSS} Cascading Style Sheet

{CSS} Cascading Style Sheet {CSS} Cascading Style Sheet mekanisme sederhana yang mengatur gaya / style (cth: warna, ukuran, posisi, dll) pada halaman web. http://www.w3.org/style/css sebelum CSS sebelum CSS sebelum CSS sebelum

Lebih terperinci

Prak. E-Bussiness & E-Commerce HTML. (HyperText Markup Language) RAHMADY LIYANTANTO liyantanto.wordpress.com

Prak. E-Bussiness & E-Commerce HTML. (HyperText Markup Language) RAHMADY LIYANTANTO liyantanto.wordpress.com Prak. E-Bussiness & E-Commerce HTML (HyperText Markup Language) RAHMADY LIYANTANTO liyantanto@gmail.com liyantanto.wordpress.com Pendahuluan HTML adalah sebuah bahasa markup yang digunakan untuk membuat

Lebih terperinci

TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif

TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif www.ilmuwebsite.com Bagian 6. Menggunakan JQuery Effect 1 Bagian

Lebih terperinci

MODUL PRAKTIKUM PEMROGRAMAN WEB

MODUL PRAKTIKUM PEMROGRAMAN WEB MODUL PRAKTIKUM PEMROGRAMAN WEB Pengenalan PHP, HTML, CSS dan Javascript LABORATORIUM KOMPUTER UNIVERSITAS UBUDIYAH INDOENSIA MODUL PRAKTIKUM PEMROGRAMAN WEB 1. Review HTML 5 part 1 (Basic Attribute +

Lebih terperinci

Pemrograman Web. Page 188

Pemrograman Web. Page 188 Page 188 15. Kegiatan Belajar 15 : Mengolah Interaksi User a. Tujuan Pembelajaran. Setelah mengikuti kegiatan belajar 15 ini siswa diharapkan dapat : 1) Mengetahui bentuk penanganan interaksi user pada

Lebih terperinci

Pemrograman Basis Data Berbasis Web

Pemrograman Basis Data Berbasis Web Pemrograman Basis Data Berbasis Web Pertemuan Ke-6 (JavaScript) Noor Ifada noor.ifada@if.trunojoyo.ac.id S1 Teknik Informatika - Unijoyo 1 Sub Pokok Bahasan JavaScript? Pendeklarasian JavaScript JavaScript

Lebih terperinci

AJAX. Pemrograman Web 1. Asynchronous JavaScript and XML. Genap

AJAX. Pemrograman Web 1. Asynchronous JavaScript and XML. Genap AJAX Asynchronous JavaScript and XML Pemrograman Web 1 Genap 2011-2012 AJAX - Intro AJAX = Asynchornous JavaScript And XML Diperkanalkan oleh Jesse James Garret pada tahun 2005. AJAX bukan bahasa pemrograman

Lebih terperinci

AJAX dengan jquery Part 3

AJAX dengan jquery Part 3 AJAX dengan jquery Part 3 Oleh: Cecep Yusuf Pada tutorial ini, kita akan belajar bagaimana mengirim data POST dari sebuah form dan dikirim dengan metode AJAX post dengan menggunakan jquery. Selamat pagi

Lebih terperinci

CSS? Contoh sederhana Selector Mekanisme mengaplikasikan CSS Elemen-elemen CSS

CSS? Contoh sederhana Selector Mekanisme mengaplikasikan CSS Elemen-elemen CSS PERTEMUAN 4 CSS? Contoh sederhana Selector Mekanisme mengaplikasikan CSS Elemen-elemen CSS Singkatan dari Cascading Style Sheet Merupakan suatu cara untuk memformat atau membuat layout halaman web menjadi

Lebih terperinci

Pengenalan Script. Definisi HTML

Pengenalan Script. Definisi HTML 1 Pengenalan Script Pada bab ini akan dibahas bahasa script yang dapat digunakan untuk membuat halaman web. Untuk dapat membuat halaman web bahasa script pertama yang harus anda kenal adalah HTML. HTML

Lebih terperinci

Pengenalan Perancangan Web 2017

Pengenalan Perancangan Web 2017 9. Form dan Input HTML Form adalah elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web. Pengguna web dapat memasukkan input melalui halaman-halaman HTML. Form biasa digunakan untuk membuat

Lebih terperinci

PELATIHAN PHP ALUMNI DAN CALON ALUMNI INSTITUT BISNIS DAN INFORMATIKA STIKOM SURABAYA. By: Julianto Lemantara, S,Kom., M.Eng

PELATIHAN PHP ALUMNI DAN CALON ALUMNI INSTITUT BISNIS DAN INFORMATIKA STIKOM SURABAYA. By: Julianto Lemantara, S,Kom., M.Eng PELATIHAN PHP ALUMNI DAN CALON ALUMNI INSTITUT BISNIS DAN INFORMATIKA STIKOM SURABAYA By: Julianto Lemantara, S,Kom., M.Eng LATAR BELAKANG PELATIHAN Coba simak beberapa lowongan PHP programmer berikut:

Lebih terperinci

HTML (HyperText Markup Language)

HTML (HyperText Markup Language) HTML (HyperText Markup Language) IMS HTML HyperText Markup Language adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah

Lebih terperinci

Pemrograman Basis Data Berbasis Web

Pemrograman Basis Data Berbasis Web Pemrograman Basis Data Berbasis Web Pertemuan Ke-5 (CSS) Noor Ifada noor.ifada@if.trunojoyo.ac.id S1 Teknik Informatika - Unijoyo 1 Sub Pokok Bahasan CSS? Contoh sederhana Selector Mekanisme mengaplikasikan

Lebih terperinci

Persiapan. Jalankan server apache dari XAMPP control panel Ekstrak file yang telah dibagikan, Salin folder week_8 ke htdocs

Persiapan. Jalankan server apache dari XAMPP control panel Ekstrak file yang telah dibagikan, Salin folder week_8 ke htdocs Ajax Persiapan Download: https://drive.google.com/file/d/0bxksp6axeejqa3loddvnd2fcx3c/vi ew?usp=sharing Latihan-latihan ini memerlukan koneksi aktif internet Cek kembali koneksi internet anda Jalankan

Lebih terperinci

Pemrograman Basis Data Berbasis Web

Pemrograman Basis Data Berbasis Web Pemrograman Basis Data Berbasis Web Pertemuan Ke-6 (JavaScript) Noor Ifada S1 Teknik Informatika - Unijoyo 1 Sub Pokok Bahasan JavaScript? Pendeklarasian JavaScript JavaScript sederhana Peletakan JavaScript

Lebih terperinci

Daftar Isi. Bab 1 Pengantar Aplikasi Web 1.1 Aplikasi Web 1.2 Tahapan Persiapan untuk Mencoba Aplikasi Web 1.3 HTML5 1.4 CSS 1.5 JavaScript 1.

Daftar Isi. Bab 1 Pengantar Aplikasi Web 1.1 Aplikasi Web 1.2 Tahapan Persiapan untuk Mencoba Aplikasi Web 1.3 HTML5 1.4 CSS 1.5 JavaScript 1. Daftar Isi Bab 1 Pengantar Aplikasi Web 1.1 Aplikasi Web 1.2 Tahapan Persiapan untuk Mencoba Aplikasi Web 1.3 HTML5 1.4 CSS 1.5 JavaScript 1.6 jquery Bab 2 Yuk, Mencoba Menulis Kode JavaScript! 2.1 Menulis

Lebih terperinci

Modul-5 GET & POST. Pemograman Web TEKNIK INFORMATIKA UNIVERSITAS PASUNDAN BANDUNG

Modul-5 GET & POST. Pemograman Web TEKNIK INFORMATIKA UNIVERSITAS PASUNDAN BANDUNG Modul-5 GET & POST Pemograman Web TEKNIK INFORMATIKA UNIVERSITAS PASUNDAN BANDUNG Pendahuluan Pada modul sebelumnya, kita telah mengenal proses assignment. Kita dapat mengassign suatu nilai kepada suatu

Lebih terperinci

CSS (Cascade Style Sheet)

CSS (Cascade Style Sheet) CSS (Cascade Style Sheet) CSS merupakan bahasa (script) yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika kita berbicara dalam konteks web, bisa

Lebih terperinci

Materi Pertemuan 1. Pengenalan Web Design Bagian I : Dasar- dasar CSS. lilih suhaeri WATERFIRE DEV. Kelaskita.com

Materi Pertemuan 1. Pengenalan Web Design Bagian I : Dasar- dasar CSS. lilih suhaeri WATERFIRE DEV. Kelaskita.com Materi Pertemuan 1 Pengenalan Web Design Bagian I : Dasar- dasar CSS lilih suhaeri WATERFIRE DEV. Kelaskita.com Pengenalan Web Design 1. Sejarah singkat tentang website Sejak awal kelahiran website di

Lebih terperinci

Cascading Style Sheet (CSS) Didik Dwi Prasetya

Cascading Style Sheet (CSS) Didik Dwi Prasetya Cascading Style Sheet (CSS) Didik Dwi Prasetya didikdwi@gmail.com CSS vcss à Cascading Style Sheet vstyle à mendefinisikan aturan untuk menampilkan elemen HTML. vdefinisi: Cascading Style Sheets (CSS)

Lebih terperinci

PEMROGRAMAN WEB 1 JavaScript Rio Andriyat Krisdiawan, M.Kom

PEMROGRAMAN WEB 1 JavaScript Rio Andriyat Krisdiawan, M.Kom PEMROGRAMAN WEB 1 JavaScript Rio Andriyat Krisdiawan, M.Kom Definisi JavaScript Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu dokumen HTML. Java Script

Lebih terperinci

MODUL PEMOGRAMAN WEB II STMIK IM BANDUNG MODUL PEMOGRAMAN WEB II. Oleh: CHALIFA CHAZAR. Chalifa Chazar edu.script.id

MODUL PEMOGRAMAN WEB II STMIK IM BANDUNG MODUL PEMOGRAMAN WEB II. Oleh: CHALIFA CHAZAR. Chalifa Chazar edu.script.id 1 MODUL PEMOGRAMAN WEB II Oleh: CHALIFA CHAZAR 2 MODUL 10 Penanganan Form HTML Tujuan: Mahasiswa memahami cara penanganan permintaan dalam kode PHP yang dikirimkan melalui form HTML untuk menyelesaikan

Lebih terperinci

BAB IV PENGUJIAN DAN ANALISIS

BAB IV PENGUJIAN DAN ANALISIS BAB IV PENGUJIAN DAN ANALISIS Pada bab ini akan dibahas mengenai pengujian sistem serta analisis dari hasil pengujian. Tujuan dilakukannya pengujian ini adalah mengetahui sejauh mana kinerja dari hasil

Lebih terperinci

Persiapan. File latihan.rar diekstrak. Contoh apabila Bahan diekstrak di d:\

Persiapan. File latihan.rar diekstrak. Contoh apabila Bahan diekstrak di d:\ CSS & CSS Framework CSS Cascading Style Sheets (CSS) adalah sebuah bahasa yang digunakan untuk menampilkan style dari sebuah dokumen HTML. CSS menjelaskan bagaimana elemen HTML harus ditampilkan. Persiapan

Lebih terperinci

6. HTML & CSS. PTI15010 Pemrograman Web. Agi Putra Kharisma, S.T., M.T. Genap 2014/2015. Desain slide ini dadaptasi dari University of San Fransisco

6. HTML & CSS. PTI15010 Pemrograman Web. Agi Putra Kharisma, S.T., M.T. Genap 2014/2015. Desain slide ini dadaptasi dari University of San Fransisco 6. HTML & CSS PTI15010 Pemrograman Web Agi Putra Kharisma, S.T., M.T. Genap 2014/2015 Desain slide ini dadaptasi dari University of San Fransisco HTML, CSS, JavaScript HTML (Struktur Dokumen) CSS (Tampilan

Lebih terperinci

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) Pengertian CSS CSS singkatan dari Cascading Style Sheets, yaitu bahasa yang digunakan untuk memberikan konten gaya penampilan yang bagus CSS menggambarkan bagaimana elemen-elemen

Lebih terperinci

Tutorial Jquery. Untuk mencari sebuah element HTML, dengan JavaScript kita menggunakan fungsi getelementbyid():

Tutorial Jquery. Untuk mencari sebuah element HTML, dengan JavaScript kita menggunakan fungsi getelementbyid(): Tutorial Jquery Apa itu Jquery? Sederhananya Jquery adalah sebuah library JavaScript. Dimana library adalah kumpulan dari berbagai fungsi siap pakai untuk memudahkan pembuatan sebuah aplikasi. Dengan demikian,

Lebih terperinci

AJAX dengan jquery Part 4

AJAX dengan jquery Part 4 AJAX dengan jquery Part 4 Oleh: Cecep Yusuf Kali ini kita akan mempelajari bagaimana data dikirim melalui HTTP Request dan client akan menerima data callback berupa JSON, melanjutkan tutorial sebelumnya.

Lebih terperinci

Desain Web. MODUL 2 Desain Form

Desain Web. MODUL 2 Desain Form 1 MODUL 2 Desain Form A. TUJUAN 1. Mampu membuat form dalam HTML 2. Mampu menggunakan input dalam HTML 3. Mampu menggunakan select dalam HTML 4. Mampu menggunakan textarea dalam HTML B. PETUNJUK 1. Awali

Lebih terperinci

Ruang Kerja DREAMWEAVER MX 2004 :

Ruang Kerja DREAMWEAVER MX 2004 : 1.1 Pengertian Macromedia Dreamweaver : merupakan sebuah HTML editor Profesional untuk mendesain secara visual dan mengelola situs web beserta halaman- web. 1.2 Spesifikasi PC untuk menjalankan DREAMWEAVER

Lebih terperinci

Pengenalan JavaScript

Pengenalan JavaScript Pengenalan JavaScript Tujuan - Mahasiswa memahami konsep dasar Javascript - Mahasiswa mampu memahami cara menggunakan Javascript - Mahasiswa mampu memahami dasar variabel di Javascript - Mahasiswa mampu

Lebih terperinci

KBKF53110 WEB PROGRAMMING

KBKF53110 WEB PROGRAMMING RENCANA PEMBELAJARAN SEMESTER (RPS) KBKF53110 WEB PROGRAMMING Disusun oleh: PROGRAM STUDI S1 SISTEM KOMPUTER FAKULTAS ILMU KOMPUTER (FILKOM) UNIVERSITAS PUTRA INDONESIA YPTK PADANG LEMBAR PENGESAHAN Rencana

Lebih terperinci

BAB I PERKENALAN HTML

BAB I PERKENALAN HTML BAB I PERKENALAN HTML A. PENDAHULUAN Hypertext Markup Language (HTML) sebuah bahasa markup atau tanda yang digunakan untuk membuat sebuah halaman website, HTML merupakan berupa kode-kode tag yang menginstruksikan

Lebih terperinci

Form Mampu membuat form dan dan mengirim data ke halaman lain Pengaturan Validasi dan keamanan form. Sesi 5

Form Mampu membuat form dan dan mengirim data ke halaman lain Pengaturan Validasi dan keamanan form. Sesi 5 Robby Cokro Buwono Badiyanto, S.Kom., M.Kom Sesi 5 Form Tujuan Intruksional Mampu membuat form dan dan mengirim data ke halaman lain Pengaturan Validasi dan keamanan form Kode MK : AK2011T Revisi Terakhir

Lebih terperinci

SMH2D3 Web Programming. 7 BAB V PHP SESSION & COOKIES. H a l IDENTITAS. Kajian Teknik pemrograman menggunakan PHP

SMH2D3 Web Programming. 7 BAB V PHP SESSION & COOKIES. H a l IDENTITAS. Kajian Teknik pemrograman menggunakan PHP 7 BAB V PHP SESSION & COOKIES 71 IDENTITAS Kajian Teknik pemrograman menggunakan PHP Topik Penggunaan Library PHP dan teknik lanjutan Web Dinamis Kompetensi Utama 1 Memahami penggunaan Form dan Validasi

Lebih terperinci

HTML. ( HyperText Markup Language) Pertemuan 2 Oleh : Nufan Balafif. Mata Kuliah : Pemrograman Berbasis Web

HTML. ( HyperText Markup Language) Pertemuan 2 Oleh : Nufan Balafif. Mata Kuliah : Pemrograman Berbasis Web HTML ( HyperText Markup Language) Mata Kuliah : Pemrograman Berbasis Web Pertemuan 2 Oleh : Nufan Balafif html (hypertext markup language) Adalah bahasa pemrograman Web (client) yang dikhususkan untuk

Lebih terperinci

BAB 2 TINJAUAN TEORI

BAB 2 TINJAUAN TEORI BAB 2 TINJAUAN TEORI 2.1. Pengenalan HTML 2.1.1. Pendahuluan HTML Hypertext Markup Language merupakan kepanjangan dari kata HTML. Adalah script dimana kita bisa menampilkan informasi dan daya kreasi kita

Lebih terperinci

Perancangan & Pemprograman WEB. Pertemuan 4 Materi Formulir &Latihan HTML

Perancangan & Pemprograman WEB. Pertemuan 4 Materi Formulir &Latihan HTML Perancangan & Pemprograman WEB Pertemuan 4 Materi Formulir &Latihan HTML Dasar Penggunaan Formulir Untuk membuat formulir maka kita menggunakan tag dan . Dua atribut yang umum digunakan pada

Lebih terperinci

Pemrograman Web Sisi Client Pertemuan 3 PI

Pemrograman Web Sisi Client Pertemuan 3 PI Pemrograman Web Sisi Client Pertemuan 3 PI Oleh : Hasanuddin, S.T. Program Studi Teknik Informatika Fakultas Teknologi Industri Universitas Ahmad Dahlan Yogyakarta Topik Pendahuluan HTML CSS JavaScript

Lebih terperinci

MODUL 3 HTML. (HyperText Mark-Up Language) Sub : Tabel & Form

MODUL 3 HTML. (HyperText Mark-Up Language) Sub : Tabel & Form MODUL 3 HTML (HyperText Mark-Up Language) Sub : Tabel & Form Laboratorium Komputer STIMIK PPKIA Pradnya Paramita Malang Pertemuan 3 3.1 Tujuan : 1. Mahasiswa dapat memahami dan mengenai perintah perintah

Lebih terperinci

Pemrograman Web. Javascript. Indrato, S.Kom Introduction. Penyisipan JS dalam HTML. PemrogramanWeb.2009

Pemrograman Web. Javascript. Indrato, S.Kom Introduction. Penyisipan JS dalam HTML. PemrogramanWeb.2009 Pemrograman Web Indrato, S.Kom indra.ndr7@gmail.com Javascript Page 2 Introduction JavaScript merupakan bahasa berbasis objek, akan tetapi bukanlah bahasa berorientasi objek karena tidak memiliki kelas

Lebih terperinci

Pemrograman Web Berbasis Framework. Pertemuan 5 : Konsep MVC : View. Hasanuddin, S.T., M.Cs. Prodi Teknik Informatika UAD

Pemrograman Web Berbasis Framework. Pertemuan 5 : Konsep MVC : View. Hasanuddin, S.T., M.Cs. Prodi Teknik Informatika UAD Pemrograman Web Berbasis Framework Pertemuan 5 : Konsep MVC : View Hasanuddin, S.T., M.Cs. Prodi Teknik Informatika UAD hasan@uad.ac.id Pokok Bahasan Pendahuluan Penanganan HTML Penanganan Form Penanganan

Lebih terperinci

Desain Grafis. RAHMADY LIYANTANTO liyantanto.wordpress.com

Desain Grafis. RAHMADY LIYANTANTO liyantanto.wordpress.com Desain Grafis RAHMADY LIYANTANTO liyantanto@gmail.com liyantanto.wordpress.com Apa Desain Grafis..? Desain Grafis dapat diartikan sebagai proses pemikiran yang diwujudkan dalam gambar. >> Ruang Lingkup:

Lebih terperinci

Web Programming (WP) Step 2 [ HTML & PHP BASIC]

Web Programming (WP) Step 2 [ HTML & PHP BASIC] Web Programming (WP) Step 2 [ HTML & PHP BASIC] Created By Rolly Yesputra, M.Kom rollyyp.wordpress.com rollyyesputra1@gmail.com 082391177785 767E4C4D 4 March 2015 rollyyp.wordpress.com 1 HTML (Hypertext

Lebih terperinci

DASAR-DASAR CSS DASAR-DASAR CSS By: Rohi Abdulloh A. PENGENALAN

DASAR-DASAR CSS DASAR-DASAR CSS By: Rohi Abdulloh A. PENGENALAN DASAR-DASAR CSS DASAR-DASAR CSS 2015 A. PENGENALAN CSS merupakan kependekan dari Cascading Style Sheet yaitu suatu skrip yang digunakan untuk mempercantik tampilan HTML atau mengatur bagaimana elemen HTML

Lebih terperinci

PRAKTIKUM SISTEM INFORMASI MANAJEMEN

PRAKTIKUM SISTEM INFORMASI MANAJEMEN MODUL V DREAMWEAVER 5.1 Tujuan Praktikum Setelah menyelesaikan modul ini, mahasiswa diharapkan mampu : 1. Mengenal komponen aplikasi Macromedia Dreamweaver 2. Membuat template website offline sederhana

Lebih terperinci

Modul-7 CRUD & Searching. Pemograman Web TEKNIK INFORMATIKA UNIVERSITAS PASUNDAN BANDUNG

Modul-7 CRUD & Searching. Pemograman Web TEKNIK INFORMATIKA UNIVERSITAS PASUNDAN BANDUNG Modul-7 CRUD & Searching Pemograman Web TEKNIK INFORMATIKA UNIVERSITAS PASUNDAN BANDUNG Kali ini, kita akan membuat halaman back-end (halaman admin). Pada modul kali ini, ada beberapa hal yang harus kalian

Lebih terperinci

PEMROGRAMAN WEB. 1 P a g e

PEMROGRAMAN WEB. 1 P a g e BAB I PENDAHULUAN A. Pengertian HTML HTML merupakan singkatan dari Hypertext Markup Language. HTML digunakan untuk membangun halaman web. HTML digunakan untuk melakukan mark-up (penandaan ) terhadap sebuah

Lebih terperinci

BAB I PERKENALAN HTML

BAB I PERKENALAN HTML BAB I PERKENALAN HTML A. PENDAHULUAN Hypertext Markup Language (HTML) sebuah bahasa markup atau tanda yang digunakan untuk membuat sebuah halaman website, HTML merupakan berupa kode-kode tag yang menginstruksikan

Lebih terperinci

Materi 1 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya nizar.radliya@yahoo.com

Materi 1 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya nizar.radliya@yahoo.com Materi 1 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya nizar.radliya@yahoo.com Nama Mahasiswa NIM Kelas Memahami cakupan materi dan sistem perkuliahan

Lebih terperinci

Modul 5. Membuat Formulir Pada Template. Disusun oleh. Sri Siska Wirdaniyati JURUSAN STATISTIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

Modul 5. Membuat Formulir Pada Template. Disusun oleh. Sri Siska Wirdaniyati JURUSAN STATISTIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM Modul 5 Membuat Formulir Pada Template Disusun oleh Sri Siska Wirdaniyati JURUSAN STATISTIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS ISLAM INDONESIA YOGYAKARTA 2013 1 BAB I PENDAHULUAN

Lebih terperinci

MODUL 7 JavaScript pada Form HTML

MODUL 7 JavaScript pada Form HTML 1 MODUL 7 JavaScript pada Form HTML A. TUJUAN 1. Mampu memahami konsep JavaScript pada HTML 2. Mampu memahami penggunaan JavaScript pada HTML 3. Mampu memproses form HTML menggunakan JavaScript B. PETUNJUK

Lebih terperinci

SMH2D3 Web Programming. 4 BAB IV WEB DESIGN CSS3. H a l IDENTITAS. Kajian Web Design menggunakan HTML5 dan CSS3

SMH2D3 Web Programming. 4 BAB IV WEB DESIGN CSS3. H a l IDENTITAS. Kajian Web Design menggunakan HTML5 dan CSS3 4 BAB IV WEB DESIGN CSS3 41 IDENTITAS Kajian Web Design menggunakan HTML5 dan CSS3 Topik Penggunaan CSS3 untuk Design dan Layout Web Kompetensi Utama 1 Mengetahui penggunaan script HTML5 dan CSS3 2 Penggunaan

Lebih terperinci

MODUL 8 Insert, Update, & delete

MODUL 8 Insert, Update, & delete MODUL 8 Insert, Update, & delete Pemograman Web Teknik Informatika Universitas Pasundan Bandung 2016/2017 Konten Mengubah Data dari Array menjadi Database... Error! Bookmark not defined. Mengkoneksikan

Lebih terperinci

disertai contoh-contoh javascript yang kompatibel dengan Firefox

disertai contoh-contoh javascript yang kompatibel dengan Firefox JAVASCRIPT disertai contoh-contoh javascript yang kompatibel dengan Firefox by Ek kian S U R A B A Y A - 2010 hal 1 dari 36 TUJUAN: PRAKTIKUM I Mahasiswa mengenal tentang Javascript serta dapat menuliskan

Lebih terperinci

1. Mahasiswa mampu membuat form pada dokumen HTML. 2. Mahasiswa memahami cara penggunaan dari fasilitas Form pada halaman dokumen HTML

1. Mahasiswa mampu membuat form pada dokumen HTML. 2. Mahasiswa memahami cara penggunaan dari fasilitas Form pada halaman dokumen HTML Bab 4. Form Overview Salah satu fasilitas yang disediakan oleh dokumen HTML memungkinkan kita untuk melakukan interaksi lebih terhadap halaman dokumen tersebut. Semisal, kemampuan dokumen HTML mampu menyediakan

Lebih terperinci

Cascading Style Sheet (CSS) pada HTML

Cascading Style Sheet (CSS) pada HTML Cascading Style Sheet (CSS) pada HTML Singkatan dari Cascading Style Sheet Merupakan suatu cara untuk memformat atau membuat layout halaman web menjadi lebih menarik dan mudah dikelola. Di dalamnya terdapat

Lebih terperinci

Membuat Form Kontak yang Indah dan Atraktif dengan AJAX [Part 5]

Membuat Form Kontak yang Indah dan Atraktif dengan AJAX [Part 5] Membuat Form Kontak yang Indah dan Atraktif dengan AJAX [Part 5] Oleh: Sendy PK Sekarang kita telah menyiapkan form bukannya di-submit dengan cara yang biasa, itu akan memicu fungsi submitform () ketika

Lebih terperinci

JavaScript. Pemrograman Web 1. Genap

JavaScript. Pemrograman Web 1. Genap JavaScript Pemrograman Web 1 Genap 2011-2012 Popup Box JavaScript memiliki tiga macam Popup Box, yaitu : Alert box Biasanya digunakan untuk memberikan informasi ke pengguna. Confirm box Biasanya digunakan

Lebih terperinci

Pemrograman Internet dengan AJAX (Asynchronous JavaScript And XML)

Pemrograman Internet dengan AJAX (Asynchronous JavaScript And XML) Pemrograman Internet dengan AJAX (Asynchronous JavaScript And XML) Suprayogi Abstract : AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to

Lebih terperinci