Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML...
Transcript of Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML...
![Page 1: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/1.jpg)
HTML5, CSS3 dan Javascript
Pemrograman Web
![Page 2: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/2.jpg)
HTML5
![Page 3: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/3.jpg)
HTML (HyperText Markup Language) Bahasa standar yang digunakan untuk
menampilkan document web Mengontrol tampilan dari web page
dan contentnya
Mempublikasikan document secaraonline sehingga bisa di akses
Membuat online form yang bisa di gunakan untuk menanganipendaftaran, transaksi secara online
Menambahkan object-object sepertiimage, audio, video dan juga java applet dalam document HTML
Versi terbaru adalah versi 5 atau yang lebih dikenal dengan HTML 5
Teman-teman dari program studi Sistem Informasi sudah mendapat materi HTML5 di mata kuliah Desain Web
![Page 4: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/4.jpg)
Sudah diajarin apa aja nih ?
1. Desain Web2. Layout3. HTML Elements
![Page 5: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/5.jpg)
HTML5
![Page 6: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/6.jpg)
Cascading Style Sheet CSS = Cascading Style Sheet Fungsi : mendefinisikan style untuk
suatu teks dengan jenis huruf, ukuran , warna tertentu
CSS adalah standard pembuatan dan pemakaian style untuk dokumen terstruktur , CSS digunakan untuk mempersingkat penulisan tag HTML seperti font,color,text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan.
Versi terbaru adalah versi 3 atau yang lebih dikenal dengan CSS3
Perkembangan CSS memunculkan CSS Framework (Ex. Bootstrap)
Teman-teman dari program studi Sistem Informasi sudah mendapat materi CSS3 di mata kuliah Desain Web
![Page 7: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/7.jpg)
Sudah diajarin apa aja nih ?
1. Layout2. CSS Manipulation
![Page 8: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/8.jpg)
HTML5
![Page 9: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/9.jpg)
JavaScript JavaScript is the programming
language of HTML and the Web to makes computers do what you want them to do– Slide Kuliah Desain Web
JavaScript adalah bahasa pemrogramanyang bisa disisipkan ke HTML sepertihalnya PHP akan tetapi javascriptberjalan di sisi Client
Pada awalnya JS diciptakan untuk melakukan operasi-operasi kecil untuk “membantu” server memproses data, namun seiring perkembangannya JS menjadi bahasa pemrograman web yang tidak bisa terpisahkan dengan web modern
Perkembangan JS memunculkan JS Framework (Ex. jQuery)
Teman-teman dari program studi Sistem Informasi sudah mendapat materi JS di mata kuliah Desain Web
![Page 10: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/10.jpg)
Sudah diajarin apa aja nih ?
1. Javascript Basic
![Page 11: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/11.jpg)
Integrasi Teknologi Webhttp://bit.ly/MateriDesainWeb2016
![Page 12: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/12.jpg)
Terus kita ngapain dunkz kalau
semuanya sudah pernah dibahas ?
![Page 13: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/13.jpg)
Integrasi Teknologi Web
![Page 14: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/14.jpg)
Website Modern Teknologi website modern menjadi
standar yang harus dipenuhi dalam pembuatan website dalam masa kini
Standar ini memiliki banyak parameter yang harus dipenuhi, misalnya cross platform dan responsive
Salah satu kunci dari teknologi website modern adalah integrasi dari teknologi HTML5, CSS3 dan Javascript sebagai pemrograman sisi front-end dan tentu saja PHP sebagai pemrograman sisi back-end
![Page 15: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/15.jpg)
Integrasi HTML5, CSS3, Javascript dan PHP
![Page 16: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/16.jpg)
Integrasi HTML5, CSS3, Javascript dan PHP
Dalam materi kuliah ini akan dijelaskan beberapa contoh integrasi dari beberapa teknologi web, yaitu :
Pemrograman Javascript
Form dan Form Validation
DOM
![Page 17: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/17.jpg)
HTML5Pemrograman Javascript
![Page 18: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/18.jpg)
Javascript sebagai bahasa pemrograman tentu saja memiliki aturan dan syntax dasar yang harus dipatuhi
Pemrograman Javascript
![Page 19: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/19.jpg)
Dalam PHP, penulisan variabel diawali dengan keyword var, kemudian diikuti dengan huruf sebagai karakter pertama. Setelah itu, dapat dilajutkan dengan kombinasi huruf dan angka
Variabel tidak boleh mengandung spasi maupun tanda baca di dalamnya, kecuali underscore (’_’)
Variabel pada Javascript bersifat “case sensitif”, yang berarti Anda harus memperhatikan penulisan huruf besar dan huruf kecil.
Variabel
![Page 20: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/20.jpg)
Contoh penamaan variabel yang salah : var nama pemakai
var 3kota
var us\er1
Contoh penamaan variabel yang benar : var nama_pemakai
var kota_3
var user1
var kodeHuruf
var _nama
Variabel
![Page 21: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/21.jpg)
Variabel – Tipe DataData type
Description
Boolean Scalar; either True or False
Integer Scalar; a whole number
Float Scalar; a number which may have a decimal place
String Scalar; a series of characters
ArrayCompound; an ordered map (contains names mapped to values)
ObjectCompound; a type that may contain properties and methods
ResourceSpecial; contains a reference to an external resource, such as a handler to an open file
NULLSpecial; may only contain NULL as a value, meaning the variable; explicitly does not contain any value
![Page 22: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/22.jpg)
Assignment =, +=, -=, *=, /=, %=
Arithmetic +, -, /, *, %
Concatenation +
Logic ||, &&, >, <, ==, >=, <=, !=,
===, !===, and, or
Increment ++, --
Variabel – Operator
![Page 23: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/23.jpg)
Variabel
![Page 24: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/24.jpg)
Fungsi
Fungsi harus didefinisikan di bagian tag head pada dokumen HTML untuk menjamin fungsi sudah dijalankan terlebih dahulu
Syntax fungsi :
function nama_fungsi
(parameter1, …, parameterN)
{ pernyataan; }
Bisa jadi fungsi mengembalikan nilai atau tidak
Untuk memanggil fungsi tinggal menulis nama_fungsi
(parameter1, …, parameterN);
![Page 25: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/25.jpg)
Pemrograman Javascript
Materi yang lain ?? http://bit.ly/MateriDesainWeb2016
www.w3schools.com
![Page 26: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/26.jpg)
Form dan Form Validation
![Page 27: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/27.jpg)
Dalam pemrograman web, kita selalu bertemu dengan model interaksi menggunakan form
Pada HTML, form didesain untuk memberikan masukan pada web
Namun tanpa adanya pemrograman yang mengatur pemrosesan data yang dikirimkan melalui form, maka website akan menjadi statis dan “hambar”
PHP dengan salah satu kelebihannya yang memiliki skenario form handling yang simpel, membuat pemrosesan data yang dikirimkan melalui form menjadi sangat mudah
Form
![Page 28: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/28.jpg)
Text Fields
<input type="text" name="text1" />
Password Field
<input type="password" name ="pass" />
Radio Buttons
<input type="radio" name="radio1" value="Men" />
<input type="radio" name="radio1"value="Women" />
Checkboxes
<input type="checkbox" name="vehicle" value="Bike" />
Submit Button
<input type="submit" value="Submit" />
Hidden fields
<input type="hidden" name="product_id" value="122" />
Standar HTML untuk Form
![Page 29: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/29.jpg)
Dalam pengiriman data melalui form di PHP, terdapat 2 metode dasar yang digunakan, yaitu :
POST
Sending request variables through the POST body. Variable name and it’s value will not be shown on the URL
GET
Sending request variables through an URL as a Query String
Form - Request
![Page 30: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/30.jpg)
GET When to use GET ?
Information sent from a form with the GET method is visible to everyone (all variable names and values are displayed in the URL). GET also has limits on the amount of information to send. The limitation is about 2000 characters. However, because the variables are displayed in the URL, it is possible to bookmark the page. This can be useful in some cases.
GET may be used for sending non-sensitive data.
Note: GET should NEVER be used for sending passwords or other sensitive information!
Form - Request
![Page 31: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/31.jpg)
POST When to use POST ?
Information sent from a form with the POST method is invisible to others (all names/values are embedded within the body of the HTTP request) and has no limits on the amount of information to send.
Moreover POST supports advanced functionality such as support for multi-part binary input while uploading files to server.
However, because the variables are not displayed in the URL, it is not possible to bookmark the page
.
Form - Request
![Page 32: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/32.jpg)
Menangani form HTML menggunakan PHP merupakan proses yang paling penting pada website dinamis
Terdapat dua proses dasar pada penanganan form :
Membuat HTML form itu sendiri
Membuat script PHP yang akan menerima dan memproses data yang dikirim dari form
HTML form dibuat menggunakan tag form dan beberapa element untuk mengambil inputan.
Teknik Penanganan Form
![Page 33: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/33.jpg)
Tag form terlihat seperti berikut :
<form action="script.php" method="post" >script 1script 2script n
</form>
Teknik Penanganan Form
![Page 34: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/34.jpg)
Terdapat 3 bagian utama pada pembuatan form di web, yaitu :
1. Method
Method dari sebuah form menentukan bagaimana data input form dikirim. Method ini ada dua macam, yaitu GET dan POST. Method ini menentukan bagaimana data input dikirim dan diproses oleh PHP
2. Action
Action menunjukkan letak dimana nantinya data input akan diproses secara logika untuk menentukan hasilnya
Teknik Penanganan Form
![Page 35: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/35.jpg)
3. Submit Button
Submit button merupakan sebuah tombol (pada umumnya) yang berfungsi sebagai trigger pengiriman data dari form input. Jika tombol ini ditekan, maka data form akan dikirimkan (diproses) di halaman yang sudah ditentukan pada atribut action.
Teknik Penanganan Form
![Page 36: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/36.jpg)
Sintax dasar form terlihat seperti berikut :
Form<FORM ACTION="proses02.php" METHOD="POST“NAME="input">Nama Anda : <input type="text" name="nama"><br><input type="submit" name="Input" value="Input"></FORM>
Sintax dasar untuk menangkap nilai dari form terlihat seperti berikut :
<?phpif (isset($_POST['Input'])) {
$nama = $_POST['nama'];echo "Nama Anda : <b>$nama</b>";
}?>
Syntax Form
![Page 37: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/37.jpg)
Form validation adalah proses dimana isi dari form akan divalidasi terlebih dahulu sebelum akan diproses di server untuk memastikan apakah form sudah terisi dengan benar atau belum
Form validation dapat dilakukan dengan beberapa cara, yaitu :
Menggunakan HTML 5 Form Standard Menulis kode Javascript untuk melakukan
form validation
Form Validation
![Page 38: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/38.jpg)
Form validation pada umumnya dilakukan secara on the fly di sisi klien sebelum data dikirim ke server untuk diproses lebih lanjut
Form Validation
![Page 39: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/39.jpg)
Contoh Form Validation
![Page 40: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/40.jpg)
Contoh Form Validation
![Page 41: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/41.jpg)
Form Validation : HTML 5
Dapat digunakan untuk memeriksa apakah form sudah terisi atau belum
Yang lain ? Cek http://www.w3schools.com/ yak ^^
![Page 42: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/42.jpg)
Form Validation : HTML 5
http://www.w3schools.com/
http://www.sitepoint.com/html5-form-validation/
http://webdesign.tutsplus.com/tutorials/bring-your-forms-up-to-date-with-css3-and-html5-validation--webdesign-4738
Lebih Lanjut :
![Page 43: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/43.jpg)
Form Validation : Javascript
Penggunaan Javascript untuk melakukan form validation dapat dilakukan dengan menggunakan DOM API yang dipanggil di dalam script Javascript
![Page 44: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/44.jpg)
Document Object Model
![Page 45: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/45.jpg)
Document Object Model Document Object Model (DOM) merupakan
sebuah ketentuan yang dikembangkan oleh W3C untuk berinteraksi dengan objek-objek yang ada di dalam HTML, XML, maupun XHTML
DOM bersifat cross-platform dan language-independent, yang artinya DOM dapat digunakan dengan bahasa pemrograman apapun, dalam sistem operasi manapun
Standar DOM dikembangkan untuk berinteraksi dengan elemen-elemen dokumen HTML dan XML, mulai dari pembuatan elemen baru sampai dengan manipulasi dan penghapusan elemen
![Page 46: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/46.jpg)
Document Object Model
Struktur DOM Untuk memahami struktur DOM, maka kita
harus melihat struktur dokumen HTML
![Page 47: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/47.jpg)
Document Object Model Struktur DOM
Sederhananya, kode HTML tersebut dapat direpresentasikan sebagai pohon sesuai dengan gambar berikut :
Inilah cara DOM “melihat” HTML
![Page 48: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/48.jpg)
Document Object Model Sebagai bahasa yang dibuat untuk
membuat dokumen HTML menjadi interaktif, Javascript memiliki kaitan yang erat dengan DOM
DOM menyediakan antarmuka untuk manipulasi dokumen
Javascript menjadi bahasa yang melakukan eksekusi terhadap antarmuka yang disediakan
Antarmuka ini terdiri dari method dan property
“With the object model, JavaScript gets all the power it needs to create dynamic HTML” - http://www.w3schools.com/
![Page 49: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/49.jpg)
Document Object Model
Syntax dasar DOM Dalam DOM, semua elemen HTML
didefinisikan sebagai object Property adalah nilai yang dapat kita ambil
ataupun diisi (get/set) Method adalah aksi yang dapat kita lakukan
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello
World!";
</script>
</body>
</html>
objectmethod property
Kode ini berfungsi untuk “merubah” isi dari konten HTML (innerHTML) dari elemen yang didefinisikan oleh tag <p> dengan id = “demo”
![Page 50: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/50.jpg)
Document Object Model
![Page 51: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/51.jpg)
Document Object Model
Kesimpulannya ? DOM dapat “memanipulasi” apapun
unsur dalam dokumen HTML Salah satunya form, dan biasanya
dimanfaatkan untuk form validation
Lebih banyak tentang DOM http://www.w3schools.com/js/js_htmld
om.asp
http://bertzzie.com/knowledge/javascript/Document-Object-Model.html
![Page 52: Rekayasa Perangkat Lunak - · PDF filependaftaran, transaksi secara online ... Membuat HTML form itu sendiri Membuat script PHP yang akan menerima dan memproses data yang dikirim dari](https://reader034.fdocument.pub/reader034/viewer/2022042517/5a7892487f8b9a7b698cf427/html5/thumbnails/52.jpg)
Terimakasih dan Semoga Bermanfaat ̂ ^