TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif
|
|
|
- Verawati Gunardi
- 6 tahun lalu
- Tontonan:
Transkripsi
1 TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif Bagian 4. Menggunakan Selector JQuery 1
2 Bagian 4. Menggunakan Selector JQuery Jquery selector memungkinkan seorang web designer untuk dapat menyeleksi dan memanipulasi elemen HTML. Jquery selector itu biasanya digunakan untuk mencari atau menyeleksi elemen-elemen HTML yang sudah anda definisikan, misalkan mencari id elementya, class-nya, type-nya, attributes, dan banyak lagi. Yang jelas Anda bisa mengkostumisasi proses pencarian dan manipulasi elemen HTML ini. Semua selector dalam jquery di awalin dengan tanda ini $( ) Sebagai contohnya saya sudah mempersiapkan sebuah dokumen HTML bagian ke 4 <!DOCTYPE html> <html> <head> <title>jquery</title> </head> <body> <h1 id="title-article">latihan JQuery Bagian 4</h1> <em class="author">oleh : Loka Dwiartara</em> <p>saat ini kita akan memulai mempelajari lebih dalam JQuery Library</p> <button>klik Saya</button> </body> </html> Setelah itu saya meload (memasukkan) javascript library ke dalam halaman HTML, dan mempersiapkannya untuk bisa langsung digunakan <!DOCTYPE html> <html> <head> <title>jquery</title> <script type="text/javascript" src="jquery min.js"></script> <script type="text/javascript"> $(function(){ 2
3 </script> </head> <body> <h1 id="title-article">latihan JQuery Bagian 4</h1> <em class="author">oleh : Loka Dwiartara</em> <p>saat ini kita akan memulai mempelajari lebih dalam JQuery Library</p> <button>klik Saya</button> </body> </html> Nah, untuk penggunaan jquery selector, contohnya adalah seperti ini <!DOCTYPE html> <html> <head> <title>jquery</title> <script type="text/javascript" src="jquery min.js"></script> <script type="text/javascript"> $(function(){ $("button").click(function(){ $("p").hide(); </script> </head> <body> <h1 id="title-article">latihan JQuery Bagian 4</h1> <em class="author">oleh : Loka Dwiartara</em> <p>saat ini kita akan memulai mempelajari lebih dalam JQuery Library</p> <button>klik Saya</button> </body> </html> Dalam jquerynya terdapat $("button").click(function(){ $("p").hide(); 3
4 Kita lihat dalam script htmlnya terdapat sebuah button dengan text Klik saya. Dan juga terdapat paragraf "saat ini... ". Ketika script di bawah ini $("button").click(function(){ $("p").hide(); Digunakan, maka jika buttonn-ya di klik, maka paragrafnya akan disembunyikan (hide). Sederhananya seperti itu. Yang dikatakan selector adalah $("button") nya dan $("p"). Dua-duanya menggunakan selector jenis tag selector. Karena menggunakan nama elemen HTML nya langsung yakni button dan p. Mengapa dikatakan selector? Karena selector itu digunakan untuk menyeleksi elemen html apa yang akan dikenai suatu penderitaan. Bagian button di sini penderitaannya adalah mendapatkan perlakuan mouse yakni jika diklik, dan bagian p (paragraph) adalah disembunyikan. Dan p atau paragraph akan disembunyikan jika buttonnya di klik. Kurang lebih seperti itu. Menggunakan Selector #id Pada JQUERY Setelah sebelumnya mempelajari contoh penggunaan selector pada Jquery, kali ini kita akan belajar lagi menggunakan Selector ID pada jquery. Selector #id pada jquery itu menggunakan atribut ID yang berada pada elemen HTML. Sebagai contohnya pada dokumen HTML sebelumnya kita telah mempersiapkan elemen H1 dengan Atribut ID nya adalah 'title-article'. <!DOCTYPE html> <html> <head> <title>jquery</title> <script type="text/javascript" src="jquery min.js"></script> <script type="text/javascript"> $(function(){ $("button").click(function(){ 4
5 $("p").hide(); </script> </head> <body> <h1 id="title-article">latihan JQuery Bagian 4</h1> <em class="author">oleh : Loka Dwiartara</em> <p>saat ini kita akan memulai mempelajari lebih dalam JQuery Library</p> <button>klik Saya</button> </body> </html> Maka bagaimana menggunakan Jquery selectornya, ketika button di klik maka si H1 dengan atribut 'title-article' ini ikut-ikutan di sembunyikan. Caranya adalah dengan menggunakan selector ID. H1 memiliki atribut ID nya adalah "title-article" maka penggunaan selectornya adalah $("#title-article") Contoh penggunaannya adalah seperti ini : <!DOCTYPE html> <html> <head> <title>jquery</title> <script type="text/javascript" src="jquery min.js"></script> <script type="text/javascript"> $(function(){ $("button").click(function(){ $("p").hide(); $("#title-article").hide(); </script> </head> <body> 5
6 <h1 id="title-article">latihan JQuery Bagian 4</h1> <em class="author">oleh : Loka Dwiartara</em> <p>saat ini kita akan memulai mempelajari lebih dalam JQuery Library</p> <button>klik Saya</button> </body> </html> Menggunakan Selector.class Pada JQUERY Jika selector #ID pada Jquery itu menggunakan atribut ID yang ada pada sebuah elemen HTML maka selector.class pun menggunakan atribut Class yang ada pada sebuah elemen HTML juga. Sebagai contohnya kita telah mempersiapkan elemen EM dengan CLASS-nya adalah "author". Selector.class pada jquery di wakili dengan tanda $(".author") Contoh lengkap penggunaannya adalah sebagai berikut : <!DOCTYPE html> <html> <head> <title>jquery</title> <script type="text/javascript" src="jquery min.js"></script> <script type="text/javascript"> $(function(){ $("button").click(function(){ $("p").hide(); $("#title-article").hide(); $(".author").hide(); </script> </head> 6
7 <body> <h1 id="title-article">latihan JQuery Bagian 4</h1> <em class="author">oleh : Loka Dwiartara</em> <p>saat ini kita akan memulai mempelajari lebih dalam JQuery Library</p> <button>klik Saya</button> </body> </html> Berikut adalah daftar lengkap selector Jquery yang bisa Anda gunakan : Selector Example Selects * $("*") Selector untuk semua elemen pada halaman HTML #id $("#lastname") Selector untuk elemen yang memiliki atribut id="lastname".class $(".intro") All elements with class="intro".class,.class element el1,el2,el3 $(".intro,.demo") $("p") $("h1,div,p") Selector untuk elemen yang memiliki class "intro" ataupun "demo" Semua elemen <p> pada halaman HTML Selector hanya untuk elemen <h1>, <div> dan <p> pada halaman html (bisa menggunakan koma untuk memilih banyak elemen) :first :last $("p:first") $("p:last") Elemen pertama <p> (paragraph) Elemen terakhir <p> (paragraph) 7
8 :even :odd $("tr:even") $("tr:odd") Semua elemen <tr> yang berurutan genap. Biasanya dalam table terdapat banyak tr. Maka setiap tr itu memiliki urutan ganjil atau genap. Semua elemen <tr> yang beruturan ganjil :first-child $("p:first-child") Semua elemen <p> yang merupakan anak pertama / paragraf awal dari setiap orang tuanya (misalkan orangtuanya adalah div) :first-of-type $("p:first-of-type") Sama dengan atas :last-child :last-of-type :nth-child(n) :nth-last-child(n) :nth-of-type(n) :nth-last-of-type(n) $("p:last-child") $("p:last-of-type") $("p:nth-child(2)") $("p:nth-last-child(2)") $("p:nth-of-type(2)") $("p:nth-last-of-type(2)") Semua elemen <p> yang merupakan anak terakhir / paragraf akhir dari setiap orang tuanya (misalkan orangtuanya adalah div) Semua elemen p yang terakhir dari orang tuanya. Misalkan semua p yang terakhir anak dari div. Semua elemen <p> yang merupakan anak urutan ke dua dari orang tuanya Semua elemen <p> yang yang merupakan anak urutan ke dua dari belakang dari orang tuanya Semua elemen p yang merupakan anak ke 2 dari orang tuanya Semua elemen <p> yang yang merupakan anak urutan ke dua dari belakang dari orang tuanya 8
9 :only-child :only-of-type $("p:only-child") $("p:only-of-type") Semua elemen <p> yang orang tuanya hanya memiliki satu anak, yakni <p> saja. Contoh div yang punya satu anak p saja. Semua elemen <p> yang merupakan anak tunggal dari orang tuanya. Sebagai contoh div yang hanya memiliki satu paragraph parent > child parent descendant element + next element ~ siblings $("div > p") $("div p") $("div + p") $("div ~ p") Semua elemen <p> yang merupakan anak langsung dari elemen <div> Semua elemen <p> yang orang tuanya adalah elemen <div> Elemen p yang disebelahnya itu me Semua elemen <p> yang merupakan siblings (saudara kandung) dari elemen <div> :eq(index) :gt(no) :lt(no) :not(selector) $("ul li:eq(3)") $("ul li:gt(3)") $("ul li:lt(3)") $("input:not(:empty)") Elemen list urutan ke 4 karena (index elemen list di mulai dari angka 0) Element list yang memiliki index (urutan) lebih dari tiga Element list yang memiliki index (urutan) kurang dari 3 tidak kosong :header $(":header") Semua elemen header HTML <h1>, <h2>, <h3>, <h4>, <h5>, 9
10 <h7> :animated $(":animated") Semua elemen yang animated :focus :contains(text) :has(selector) :empty :parent :hidden $(":focus") $(":contains('hello')") $("div:has(p)") $(":empty") $(":parent") $("p:hidden") Elemen yang saat ini sedang di gunakan (focus) Semua elemen yang di dalamnya itu terdapat mengandung kata 'Hello' Semua elemen div yang memiliki tag p di dalamnya Semua elemen yang kosong isinya, tidak ada teks didalamnya atau tidak memiliki nilai sama sekali Semua elemen yang merupakan orang tua dari suatu elemen Semua elemen <p> yang tidak tampil atau disembunyikan :visible $("table:visible") Semua table yang ditampilkan :root :lang(language) $(":root") $("p:lang(de)") Semua element root pada dokumen html, root di sini adalah orang tua tertinggi Semua elemen <p> yang atribut lang -nya memiliki nilai dimulai dengan kata "de" [attribute] [attribute=value] [attribute!=value] $("[href]") $("[href='default.htm']") $("[href!='default.htm']") Semua elemen yang memiliki atribut href All elements with a href attribute value equal to "default.htm" Semua elemen yang atribut hrefnya itu tidak sama dengan 10
11 [attribute$=value] [attribute =value] [attribute^=value] [attribute~=value] [attribute*=value] $("[href$='.jpg']") $("[title ='Tomorrow']") $("[title^='tom']") $("[title~='hello']") $("[title*='hello']") atau tidak mengandung "default.htm" Semua elemen yang atribut hrefnya di akhiri dengan kata ".jpg" Semua elemen yang atribut titlenya sama dengan 'Tomorrow', atau dimulai dengan kata 'Tomorrow' di ikuti dengan tanda penghubung Semua elemen yang atribut titlenya "Tom" Semua elemen yang atribut titlenya mengandung kata "hello" Semua elemen yang atribut titlenya mengandung kata "hello" :input :text :password :radio :checkbox :submit :reset $(":input") $(":text") $(":password") $(":radio") $(":checkbox") $(":submit") $(":reset") memiliki memiliki type="text" memiliki type="password" memiliki type="radio" memiliki type="checkbox" memiliki type="submit" memiliki type="reset" 11
12 :button :image :file :enabled :disabled :selected :checked $(":button") $(":image") $(":file") $(":enabled") $(":disabled") $(":selected") $(":checked") memiliki type="button" memiliki type="image" memiliki type="file" kondisinya adalah enabled kondisinya adalah disabled Semua element input yang diselect Semua elemen input checkbox yang telah di ceklis 12
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 5. Menggunakan JQuery Event 1 Bagian
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
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
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
HTML5. HTML Links Link Images HTML Plug-ins HTML Youtube HTML Input HTML Input Attribute
Author : Minarni, S.Kom.,MM Mata Kuliah : Internet Multimedia Lanjut HTML5 HTML Links Link Images HTML Plug-ins HTML Youtube HTML Input HTML Input Attribute HTML5 HTML Links Link digunakan hampir di semua
Pemrosesan form HTML
Pemrosesan form HTML Pemrosesan form HTML Memahami tentang penggunaan Form Memahami tentang perbedaan antara metode GET & POST Memahami tentang pemrosesan file upload Pengolahan Data Dari Form Web menerima
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
MODUL TIK - HTML II KELAS XI SEMESTER I
MODUL TIK - HTML II KELAS XI SEMESTER I Dapatkan tutorial-tutorial komputer, soal-soal matematika, soal-soal TIK, modul TIK, modul matematika di http://istiyanto.com. Kini Anda dapat berlangganan dan menerima
PENGANTAR KOMPUTER DAN TI 2C PERTEMUAN 6 FORM & INPUT HTML
PENGANTAR KOMPUTER DAN TI 2C PERTEMUAN 6 FORM & INPUT HTML FORM Elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web. Pengguna web dapat memasukkan input melalui halaman-halaman HTML.
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
Web Programming (WP) Step 2 [ HTML & PHP BASIC]
![Web Programming (WP) Step 2 [ HTML & PHP BASIC]](/thumbs/55/37130440.jpg "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
KURSUS ONLINE JASA WEBMASTERS
KURSUS ONLINE JASA WEBMASTERS HTML FORM JASA WEBMASTERS Jl. Ringin Raya No 124A Condong Catur, Sleman, Yogyakarta FORM 9.1 Form Input HTML Form digunakan untuk mengumpulkan data dari user atau pengguna
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
Form identik dengan formulir
Oleh : Moh Sulhan Form identik dengan formulir Form sangat dibutuhkan pada saat kita mengizinkan/menginginkan adanya nilai (data) yang dipilih atau dimasukkan olehpengguna. Kapasitas dari form hanya menyediakan
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
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
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
X/HTML5 Form. Auriza Akbar 25 Mei 2012
X/HTML5 Form Auriza Akbar auriza.akbar@gmail.com 25 Mei 2012 Form Form Komponen halaman web yang memiliki kontrol-kontrol formulir: text field, text area, button, radio button, checkbox, User dapat berinteraksi
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
[FORM AND FRAME] PEMROGRAMAN WEB MODUL [ O L E H : Y U N I T A P R A S T Y N I N G S I H, S. K O M ]
![[FORM AND FRAME] PEMROGRAMAN WEB MODUL [ O L E H : Y U N I T A P R A S T Y N I N G S I H, S. K O M ]](/thumbs/63/50441664.jpg "[FORM AND FRAME] PEMROGRAMAN WEB MODUL [ O L E H : Y U N I T A P R A S T Y N I N G S I H, S. K O M ]")
[FORM AND FRAME] PEMROGRAMAN WEB MODUL [ O L E H : Y U N I T A P R A S T Y N I N G S I H, S. K O M ] Modul FORM DAN FRAME 1. TEORI DASAR FORM Form identik dengan formulir. Form sangat dibutuhkan pada saat
Aplikasi Form Menggunakan HTML
Aplikasi Form Menggunakan HTML Pendahuluan Pembahasan Definisi Form HTML Form diperlukan bila Anda ingin mengumpulkan beberapa data dari pengunjung situs untuk di kirim ke server. Misalnya informasi pendaftaran:
Pemrograman Web. HTML Lanjut. Indrato, S.Kom List. Ordered Lists (OL) Ordered List (OL) Ordered List (OL) PemrogramanWeb.
Pemrograman Web Indrato, S.Kom indra.ndr7@gmail.com HTML Lanjut Page 2 List Digunakan untuk membuat daftar, terdiriatas: Ordered List (Numbering) Unordered List (Bullet) Definition List Ordered Lists (OL)
1. #**# merupakan karakter yang terdapat pada type data a. text b. password c. radio d. submit e. file jawaban : b
1. #**# merupakan karakter yang terdapat pada type data a. text b. password c. radio d. submit e. file 2. Perintah untuk mengosongkan kolom pada HTML adalah a. tr b. br c. td d.   e. &nsp jawaban :
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
Atribut ACTION tempat menspesifikasikan URL yang akan digunakan sebagai pemroses field input form.
FORM DAN INPUT HTML Elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web. Pengguna web dapat memasukkan input melalui halaman-halaman HTML. Elemen/ TAG ini digunakan membatasi input.
MODUL 3 INTERNET PROGRAMMING : PHP 3
MODUL 3 INTERNET PROGRAMMING : PHP 3 A. Tujuan : 1. Memahami tentang penggunaan Form 2. Memahami tentang perbedaan antara metode GET & POST 3. Memahami tentang pemrosesan validasi form B. Dasar Teori PENGOLAHAN
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
Desain Web. Oleh : Ady Purna Kurniawan, ST., MT.
Desain Web HTML Lanjut Oleh : Ady Purna Kurniawan, ST., MT. Materi HTML Lanjut 1. List 2. Fontasi 3. Image 4. Hyperlink 5. Form Tag LIST Membuat daftar urutan berupa bullet tdan numbering. Terdiri dari
Tutorial Implementasi Jquery Mobile dan JSP. 1. Definisi Jquery Mobile
Tutorial Implementasi Jquery Mobile dan JSP 1. Definisi Jquery Mobile Jquery mobile : framework tampilan berbasis HTML 5, sehingga situs responsive baik di desktop, tablet atau smarphone. 2. Download Jquery
Tujuan: Siswa dapat membuat list item dan form untuk diterapkan dalam pembuatan halaman web
HTML DASAR BAGIAN 2 Oleh: Heribertus Heri Istiyanto Materi: 1. List Item 2. Form Tujuan: Siswa dapat membuat list item dan form untuk diterapkan dalam pembuatan halaman web Indikator: 1. Siswa dapat membuat
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
Ikbal jamaludin
Ikbal jamaludin 085 2222 01644 Elemen link berfungsi sebagai penghubung antara suatu halaman dengan halaman lain, atau ke URL (uniform Resource Locator) lain bahkan dalam satu halaman untuk berpindah ke
{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
PENGENALAN HTML - 2. Anda bisa menambahkan beberapa cell (kolom) untuk membuat satu baris cell (kolom).
PENGENALAN HTML - 2 G. Tabel HTML Setting untk membuat perintah tabel terdiri dari : Row : mementukan banyaknya baris yang dimiliki oleh tabel. Columns : menentukan banyaknya kolom yang dimiliki tabel.
MODUL III MEMBUAT FORM DAN HALAMAN WEB DENGAN FRAME
MODUL III MEMBUAT FORM DAN HALAMAN WEB DENGAN FRAME A. MAKSUD DAN TUJUAN 1. MAKSUD a. Membuat formulir dengan berbagai tipe b. Membuat tampilan halaman web dengan frame 2. TUJUAN a. Mahasiswa dapat membuat
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)
Knowledge Sharing Program jquery Basic
2010 Knowledge Sharing Program jquery Basic Andy Saputra Sekolah Tinggi Teknik Surabaya 12/18/2010 2 Daftar Isi Intro jquery Pre-requisite Selector DOM Manipulation Event Handler Effect/Animation AJAX
10/04/2014. Oleh: Fiftin Noviyanto, S.T., M.Cs. Form Server Side Scripting
Oleh: Fiftin Noviyanto, S.T., M.Cs. Form Server Side Scripting 1 Kegunaan Form Memperoleh data-data user baik nama, alamat dan data lainnya untuk mendaftar pada service yang di sediakan Memperoleh informasi
Form Input HTML dan Frame. Siti Maesyaroh. M.Kom.
Form Input HTML dan Frame Siti Maesyaroh. M.Kom. Tag Tag ini digunakan untuk membuat rancangan form atau formulir dalam memasukkan data, dimana nantinya data tersebut akan diproses sesuai dengan
BAB-12 MEMBUAT FORM HTML
BAB-12 MEMBUAT FORM HTML 12.1. Form HTML Form HTML digunakan untuk mendapatkan masukan (input) dari pengguna Web. Pengguna Web dapat memasukkan input melalui halaman-halaman HTML. Elemen/tag Form digunakan
HTML.
HTML www.amikom.info HTML HTTP (hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protokol ini mentransfer dokumendokumen web yang
Membuat Form Dinamis dengan HTML & Javascript.
Membuat Form Dinamis dengan HTML & Javascript. Oleh: d-newbie Assalamualaikum wr.wb. Form tentunya sudah tidak asing lagi bagi para developer web, element html yg satu ini seolah-olah merupakan element
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
Pertemuan IV. Semester 1
Tables dan Forms Pertemuan IV Pemrograman Web Dasar Semester 1 Tabel HTML Tag digunakan untuk mengawali sebuah tabel. Di dalam elemen table, terdapat tag (table rows) dan tag (table
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
Tabel dan Form HTML. Kuliah #2. Dept. Ilmu Komputer IPB 2016
Tabel dan Form HTML Kuliah #2 Dept. Ilmu Komputer IPB 2016 Tabel Table Elemen table digunakan untuk membuat tabel Tabel: representasi data tabular dalam baris dan kolom. Caption Elemen caption digunakan
4. Type yang berfungsi untuk menerima masukan berupa teks dari pengguna adalah A. Checkbox B. Submit C. File D. Text E. Button
NAMA : KELAS/NoAbsensi : A. PILIHAN GANDA 1. #**# merupakan karakter yang terdapat pada type data a. text b. password c. radio d. submit e. file 2. Perintah untuk mengosongkan kolom pada HTML adalah a.
Struktur dasar HTML terdiri dari element element didalam tag, tiap element tag harus memiliki close element tag, seberti contohnya <html></html>
Catatan Ria tentang HTML Struktur dasar HTML Struktur dasar HTML terdiri dari element element didalam tag, tiap element tag harus memiliki close element tag, seberti contohnya File HTML harus diakhri dengan
MENAMPILKAN FRAME FRAME
MENAMPILKAN FRAME FRAME digunakan untuk membagi window browser menjadi beberapa bagian window, sehingga dapat menampilkan beberapa file dalam window yang berbeda-beda Format Penulisan:
FORM DAN ELEMENNYA. Pemrograman Web Teknik Informatika Fakultas Teknologi Industri
FORM DAN ELEMENNYA 9 Kegunaan Form Memperoleh data-data user baik nama, alamat dan data lainnya untuk mendaftar pada service yang disediakan Memperoleh informasi dari customer secara online Memperoleh
P - 6 Bab 4 : HTML (Hypertext Markup Language)
P - 6 Bab 4 : HTML (Hypertext Markup Language) 4.1 Tujuan Mengerti cara membuat table, form & frame HTML. 4.2 Materi 1. Table 2. Form 3. Frame HTML 4.3 Latihan Tabel 1 Latihan Table_1
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
MODUL 8 WEB PROGRAMMING : PHP 3
MODUL 8 WEB PROGRAMMING : PHP 3 BENGKEL INTERNET PENS-ITS Tujuan : 1. Memahami tentang penggunaan Form 2. Memahami tentang perbedaan antara metode GET & POST 3. Memahami tentang pemrosesan file upload
Muhammad Zen Samsono Hadi, ST. MSc.
Penanganan Form Muhammad Zen Samsono Hadi, ST. MSc. On this slide Jenis-jenis Form Form Validation Contoh Aplikasi Form Form Inputan Tag Atribut ACTION Atribut t METHOD SUBMIT BUTTON Tag
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
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
WEB DINAMIS 1 PENANGANAN FORM. Agustina Purwatiningsih., S.Kom
WEB DINAMIS 1 PENANGANAN FORM Agustina Purwatiningsih., S.Kom 1 PENGERTIAN Form merupakan sebuah metode yang digunakan dalam Web Site yang mengizinkan seorang pengunjung untuk dapat berinteraksi dengan
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
PHP Penanganan Form. Overview. 15-Jan Jenis-jenis Form Form Validation. Tag <FORM> Atribut ACTION Atribut METHOD SUBMIT BUTTON
Overview Jenis-jenis Form Form Validation PHP Penanganan Form Acep Irham Gufroni, M.Eng. 1 Contoh Aplikasi Form Form Inputan Tag Atribut ACTION Atribut METHOD SUBMIT BUTTON Tag Atribut ACTION
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
Membuat sendiri helper sederhana ala framework
Membuat sendiri helper sederhana ala framework Oleh: Fuad Indra Setiawan Pada tutorial saya terdahulu kita sudah belajar tentang bagaimana cara membuat sendiri active record sederhana ala framework, nah
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
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
HTML DOM(2) Yosef Murya Kusuma Ardhana. ST., M.Kom
HTML DOM(2) Yosef Murya Kusuma Ardhana. ST., M.Kom Dengan HTML DOM, Anda dapat menavigasi pohon simpul menggunakan hubungan simpul. DOM Nodes Menurut standar W3C HTML DOM, segala sesuatu dalam dokumen
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
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
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,
Mengelola isi halaman web. Memeriksa informasi untuk relevansi dan currency
Mengelola isi halaman web Memeriksa informasi untuk Software Web Design Software web design merupakan perangkat lunak yang berguna untuk membangun/membuat/mendisain halaman-halaman web, baik yang bersifat
FRAMEWORK JAVASCRIPT : MANIPULASI HTML & CSS DENGAN JQUERY
BAB 15 FRAMEWORK JAVASCRIPT : MANIPULASI HTML & CSS DENGAN JQUERY A. TUJUAN: 1. Mempelajari dan dapat mengimplementasikan manipulasi HTML dengan jquery 2. Mempelajari dan dapat mengimplementasikan manipulasi
Modul 3 CSS CASCADE STYLE SHEET
Modul 3 CSS CASCADE STYLE SHEET Fungsi: Mengatur style elemen yang ada di halaman web, mulai dari memformat text dan format layout. Mengatur kekonsistenan style pada elemen tertentu Keuntungan CSS: Ukuran
TUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah
TUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah www.ilmuwebsite.com Bagian 7. Membuat Data Pagination Menggunakan
2011 Ahmad Amarullah
1 Silabus Mata Kuliah Program Studi : Sistem Informasi Kode Mata Kuliah : Nama Mata Kuliah : Komputer Aplikasi IT ( XHTML & CSS ) Jumlah SKS : 2 SKS Semester : 1 Deskripsi Mata Kuliah : Mata kuliah ini
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
SMH2D3 Web Programming. 3 BAB III TABLE & FORM INPUT DATA HTML5. H a l IDENTITAS. Kajian Web Design menggunakan HTML5 dan CSS3
3 BAB III TABLE & FORM INPUT DATA HTML5 31 IDENTITAS Kajian Web Design menggunakan HTML5 dan CSS3 Topik Scripting tingkat lanjut, Tabel dan Form HTML5 Kompetensi Utama 3 Mengetahui penggunaan script HTML5
UAS (Pemrograman Web Statis) Oleh : N.I.M : : Reza Bayu Permana : Teknik Informatika Mata Kuliah : Pemrograman Web Statis
UAS (Pemrograman Web Statis) Oleh : N.I.M : 12141378 Nama : Reza Bayu Permana Prodi : Teknik Informatika Mata Kuliah : Pemrograman Web Statis SEKOLAH TINGGI MANAGEMEN INFORMATIKA DAN ILMU KOMPUTER EL-RAHMA
1. Praktikan mampu mendeskripsikan cara pengiriman data ke server melalui form. 3. Praktikan mengetahui Control Text dan penggunaannya pada form
MODUL 2 Form dan JSP TUJUAN PRAKTIKUM : 1. Praktikan mampu mendeskripsikan cara pengiriman data ke server melalui form 2. Praktikan mengetahui elemen-elemen dari form 3. Praktikan mengetahui Control Text
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
Perbedaan antara XHTML dan HTML
Ditulis oleh Yasin Setiawan Perbedaan antara XHTML dan HTML Anda dapat mengamati sendiri pembuatan XHTML dengan mulai menyusun HTML yang diberi ketentuan XHTML sebagai aturan tambahan. Memulai XHTML XHTML
Modul Praktikum Web Statis Disusun : Wahyu Widodo, S.Kom.,M.Kom
Modul Praktikum Web Statis Disusun : Wahyu Widodo, S.Kom.,M.Kom Pertemuan 1 Point Pembahasan : Feature baru HTML5 Attribut Element Element Semantik Mengenal HTML 5 HTML5 memperkenalkan sejumlah elemen
HTML Dasar HTML (Hypertext Markup Language) merupakan bahasa pemrograman web yang digunakan untuk membuat halaman situs.
HTML Dasar HTML (Hypertext Markup Language) merupakan bahasa pemrograman web yang digunakan untuk membuat halaman situs. Untuk belajar HTML dasar sebaiknya Anda ketikkan di Notepad. Bentuk umum:
HTML Dasar. PERTEMUAN 1 Tujuan: 1. Siswa dapat memahami dan mengenal perintah-perintah dasar HTML 2. Siswa dapat membuat tabel dan pengaturannya
HTML Dasar Tujuan: Siswa dapat membuat desain situs menggunakan pemrograman web PERTEMUAN 1 Tujuan: 1. Siswa dapat memahami dan mengenal perintah-perintah dasar HTML 2. Siswa dapat membuat tabel dan pengaturannya
Bab 5. Cascading Style Sheet (CSS)
Bab 5. Cascading Style Sheet (CSS) Overview Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan sebuah dokumen yang ditulis dalam bahasa markup. CSS diperkenalkan
Bab 5 FORM. A. Maksud Dan Tujuan 1. Maksud
A. Maksud Dan Tujuan 1. Maksud Bab 5 FORM Menginputkan data menggunakan form dan membuat tombol dengan tag HTML Membuat halaman web terhubung dengan halaman lain (link) 2. Tujuan Mahasiswa dapat membuat
Sintak penulisan form adalah: <form method= post atau get action= program_pemroses > elemen-elemen FORM </form>
Form Html Digunakan untuk menerima masukan / input dari user dan memproses hasil inputan tersebut di server. User menerima informasi melalui sejumlah elemen yang disebut kontrol. Kontrol ini dapat berupa:
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
Pemrograman Web PRAKTIKUM 6. Query Data 2. TUJUAN BELAJAR Mahasiswa dapat menggunakan PHP dan MySQL untuk mengupdate data
PRAKTIKUM 6 Query Data 2 TUJUAN BELAJAR Mahasiswa dapat menggunakan PHP dan MySQL untuk mengupdate data MATERI Program edit dan hapus TUGAS Menambahkan fitur edit dan hapus untuk semua form input data
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
HTML (HYPERTEXT MARKUP LANGUAGE)
HTML (HYPERTEXT MARKUP LANGUAGE) HTML merupakan Script dimana kita bisa menampilkan informasi dan daya kreasi kita lewat internet. HTML sendiri terdiri dari tag-tag yang fungsinya untuk membuat dokumen
Penanganan Form. Muhammad Zen Samsono Hadi, ST. MSc. T.TELEKOMUNIKASI - PENS
Penanganan Form Muhammad Zen Samsono Hadi, ST. MSc. zenhadi@eepis-its.edu T.TELEKOMUNIKASI - PENS On this slide Jenis-jenis Form Form Validation Contoh Aplikasi Form Form Inputan Tag Atribut ACTION
MODUL PEMROGRAMAN WEB
MODUL PEMROGRAMAN WEB FORM & METHOD Rajif Agung Yunmar, S.Kom STMIK AMIKOM Yogyakarta 2011 DAFTAR ISI Form & Method... 1 1. Struktur Umum... 1 2. HTML Form Element... 1 3. Method... 5 3.1 Metode GET...
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
BAB 1 PENGENALAN HTML
1 BAB 1 PENGENALAN HTML HyperText Markup Language (HTML) merupakan bahasa standar yang digunakan untuk membuat sebuah tampilan halaman website. Sesuai dengan namanya yaitu HyperText Markup Language (HTML)
Secara garis besar, terdapat 3 cara menginput kode CSS, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets.
Sebagaimana telah dipelajari pada saat pembahasan tentang HTML (pada artikel tutorial belajar HTML), HTML pada dasarnya adalah kumpulan dari tag-tag yang disusun sehingga memiliki bagian-bagian tertentu,
Pemrograman Basis Data Berbasis Web
Pemrograman Basis Data Berbasis Web Pertemuan Ke-3 (HTML Lanjut [1]) Noor Ifada noor.ifada@if.trunojoyo.ac.id S1 Teknik Informatika - Unijoyo 1 Sub Pokok Bahasan: Tabel Membuat tabel sederhana Menambahkan
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
1. Pengenalan HTML. 2. Tag Dasar HTML
1. Pengenalan HTML 1.1. Sejarah Singkat HTML HTML dibuat oleh Tim Bernels-Lee seorang ahli Fisika ketika masih bekerja untuk CERN (organisasi Eropa untuk riset nuklir) dan dipopulerkan pertama kali oleh
Soal Remedial Prakarya-1
Soal Remedial Prakarya-1 Kerjakan soal ini, dengan memilih salah satu jawaban yang benar. Perhatikan petunjuk: a. Pilihan jawaban yang benar dengan cara memblok pada soal tersebut. b. Dan kirim soal dan
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
Pemrograman Web PRAKTIKUM 1 PENGANTAR
PRAKTIKUM 1 PENGANTAR TUJUAN BELAJAR Mengenalkan dunia web MATERI Teknologi dan Terminologi Web (konsep dan istilah di dunia web) TUGAS Tidak ada TEORI W3C Singkatan World Wide Web Consortium suatu konsorsium
HTML FORM. Praktikum III
Praktikum III HTML FORM Tujuan : 1. Mengetahui tentang Elemen-elemen FORM. 2. Mampu membuat script FORM HTML. 3. Mampu membuat halaman web dengan menggunakan script HTML dan PHP. Alat dan Bahan : 1. Buku