HTML5, CSS3 dan Javascript

   HTML (HyperText Markup Language)

   Bahasa standar yang digunakan untuk

  menampilkan document web

   Mengontrol tampilan dari web page dan contentnya

   Mempublikasikan document secara

online sehingga bisa di akses

   Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online

   Menambahkan object-object seperti image, 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

  

Sudah diajarin apa aja nih ?

  1. Desain Web

  2. Layout

  3. HTML Elements

   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

  

Sudah diajarin apa aja nih ?

  1. Layout

  2. CSS Manipulation

   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 pemrograman yang bisa disisipkan ke HTML seperti halnya PHP akan tetapi javascript berjalan 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

  

Sudah diajarin apa aja nih ?

  

Terus kita ngapain

dunkz kalau

semuanya sudah

pernah dibahas ?

   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

   Integrasi HTML5, CSS3, Javascript dan PHP

   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

  

Pemrograman Javascript

Pemrograman Javascript

  

  Javascript sebagai bahasa pemrograman tentu saja memiliki aturan dan syntax dasar yang harus dipatuhi

Variabel

   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.

  

  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

Variabel – Tipe Data Data Description type

  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

  Compound; an ordered map (contains names Array mapped to values) Compound; a type that may contain properties and

  Object methods

Special; contains a reference to an external

Resource

resource, such as a handler to an open file

Special; may only contain NULL as a value,

  

  Assignment

   =, +=, -=, *=, /=, %=  Arithmetic 

• , -, /, *, %

  

  Concatenation

  

•  Logic 

  ||, &&, >, <, ==, >=, <=, !=, ===, !===, and, or

  

  Increment

   ++, -- Variabel – Operator

  Variabel

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);

Pemrograman Javascript

   Materi yang lain ??

  

   Form dan Form

Form

  

  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

Standar HTML untuk Form

   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" />

Form - Request

  

  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

   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

Form - Request

   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

Teknik Penanganan Form

   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

  

  Tag form terlihat seperti berikut : <form action="script.php" method="post" > script 1 script 2 script n

  </form>

Teknik Penanganan Form

  

  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

   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.

Syntax Form

  

  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 :

  <?php if (isset($_POST['Input'])) { $nama = $_POST['nama']; echo "Nama Anda : <b>$nama</b>";

Form Validation

  

  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

   Form validation pada umumnya dilakukan

  secara on the fly di sisi klien sebelum data

  Contoh Form Validation

  Contoh Form Validation

Form Validation : HTML 5

  Dapat digunakan untuk memeriksa apakah form sudah terisi atau belum

  Yang lain ? Cek yak ^^

  

Form Validation : HTML 5

Lebih Lanjut :

  

Form Validation : Javascript



  Penggunaan Javascript untuk melakukan form validation dapat dilakukan dengan menggunakan DOM API yang dipanggil di dalam script Javascript Document Object

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

Document Object Model

   Struktur DOM 

  

Untuk memahami struktur DOM, maka kita

harus melihat struktur dokumen HTML

Document Object Model

  

  Struktur DOM

   Sederhananya, kode HTML tersebut dapat direpresentasikan sebagai pohon sesuai dengan gambar berikut :

  Inilah cara DOM “melihat” HTML

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/

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> property method object

  <p id="demo" ></p> <script> document.getElementById("demo").innerHTML = "Hello World!";

  </script> Kode ini berfungsi untuk isi dari konten

  “merubah” HTML (innerHTML) dari elemen yang didefinisikan oleh

  </body>

  Document Object Model

Document Object Model

  

  Kesimpulannya ?

   DOM dapat “ ” apapun

memanipulasi

  unsur dalam dokumen HTML

  

  Salah satunya form , dan biasanya dimanfaatkan untuk form validation

   Lebih banyak tentang DOM

  

  

  Terimakasih dan Semoga

Bermanfaat ^^