Angular dan ELement

AngularJS

AngularJS merupakan framework javascript berbasis open-source yang dirilis oleh Google pada tahun 2009

Maksud dari tagline ini AngularJS merupakan HTML yang ditingkatkan fungsinya untuk membangun web app. Melihat sejarah kemunculan HTML, awalnya HTML hanya digunakan untuk membuat dokumen statis (website) bukan untuk membuat web app. Nah, sekarang bayangkan kalau sejak awal HTML memang dikembangkan untuk membuat web app, seperti itulah konsep AngularJS.

AngularJS bukan merupakan pustaka (library) javascript melainkan sebuah framework yang solid untuk membangun web app, seperti framework javascript pada umumnya AngularJS mengadopsi konsep MVC (Model, View, Controller), meskipun menggunakan implementasi yang berbeda dengan konsep asli MVC. Agar tujuan dari MVC ini tercapai, yaitu pemisahan tugas masing-masing komponen, AngularJS memiliki model,view, dan Controller yang saling berinteraksi. Berikut beberapa filosofi dalam AngularJS:

1.      View haruslah deklaratif

Elemen-elemen pada View harus memberikan arti yang jelas dan bersih dari kode logika.

2.      Controller bersifat imperatif (logika)

Kode pemrosesan dan logika dihandle dan dituangkan di dalam Controller sebelum dikirim hasilnya keView.

AngularJS istimewa :

Two way data-binding

Two way data-binding merupakan mekanisme sinkronisasi otomatis antara controller dan view. Gampangnya, ketika ada perubahan pada model yang berasal dari view, Angular secara otomatis membuat perubahan pada controller. Begitu pula sebaliknya. Hal ini terjadi secara otomatis, jadi kita tidak perlu menuliskan kode secara manual untuk mencapai mekanisme ini.

HTML5 menawarkan sejumlah elemen baru semisal <video>,<section>,<article>, dsb. Nah dengan AngularJS, Kita bahkan dapat menambahkan lebih banyak lagi elemen-elemen baru yang akan dimengerti oleh browser, missal < draggable>membuat elemen bisa didrag,<zippy>membuat elemen semisal akordion, atau bahkan menggunakan bahasa indonesia seperti <sembunyikan> jika diklik akan menyembunyikan elemen (contoh saja, pada praktik gunakanlah bahasa inggris sebagai bahasa internasional). Fungsi ini disebut dengan istilah directive. Kitalah yang bertanggungjawab membuat directive tersebut bisa ditafsirkan oleh browser dengan menuliskan kode pada deklarasi directive itu sendiri. Atau dengan kata lain, kita mengajari browser sintak HTML baru. Bahkan tidak terbatas pada elemen, kita bisa membuat directive  menggunakan attribute, HTML comment atau class.

HTML Template

Template yang digunakan AngularJS hanyalah HTML biasa dengan penambahan ekspresi (expression), sehingga kita tidak perlu menggunakan template engine khusus.

Dependency Injection (DI)

Dependency Injection memungkinkan developer menulis beberapa komponen kode yang terpisah satu sama lain. Ketika memerlukan salah satu komponen, developer dapat memanggil komponen yang dibutuhkan tersebut dan dapat menggunakan fungsi yang tersedia. Fitur ini memudahkan developer dalam membuat komponen yang dapat dipakai berulang kali (reusable component)

Key Concept AngularJS

·         Model

Dalam pola MVC, Model merepresentasikan suatu set data yang digunakan oleh Controller danView.Model dapat mendeteksi perubahan data dan memberikan notifikasi perubahan tersebut keController dan View. Pada implementasi pasif, notifikasi perubahan dapat diabaikan. Untuk membuatModel di beberapa framework selain AngularJS diperlukan konstruktor khusus. Sedangkan Model pada AngularJS tidak memiliki konstruktor tersendiri dan tidak memerlukan inheritance dari Object Class tertentu. Model tidak memerlukan setter atau getter method khusus. Model bisa berupa primitive, object hash, atau full object. Dengan kata lain Model hanyalah javascript object biasa.

·         Scope ($scope)

Scope merupakan perekat (glue) atau perantara antara Controller dengan View. Masing-masing controller memiliki scope atau lingkup sendiri.

·         Controller

Controller merupakan kode dibalik View. Kode pemrosesan dan logika ditaruh pada controller yang akan menghasilkan Model untuk ditampilkan pada View.

·         View

View adalah apa yang terlihat oleh pengguna. Dimulai dari sebuah template kemudian digabungkan dengan Model lalu browser melakukan proses rendering dan hasilnya ditampilkan ke pengguna. Template yang digunakan hanyalah sintak HTML (bukan HTML diselingi dengan markup khusus seperti pada template engine pada umumnya).

·         Expression

Expression merupakan kode snippet yang dapat kita tulis pada View. Expression berkaitan dengan mekanisme binding pada AngularJS, formatnya adalah sebagai berikut {{ expression }} Contoh :

1. {{ 1+2 }} , akan menampilkan angka 3 ke pengguna.
2. {{ user.name }} , akan menampilkan nilai properti 'name' dari model 'user'
3. {{ 1000 | currency }} , akan menampilkan angka 1000 dalam format mata uang (currency), keyword setelah tanda pipa ( | ) merupakan filter.

·         Filter

Filter melakukan transformasi data pada Model. Bisa digunakan untuk menyesuaikan format sesuai keinginan kita atau melakukan pengurutan data, dsb. AngularJS juga memiliki beberapa filter bawaan, seperti contoh yang sudah kita lihat pada poin pembahasan Expression yaitu currency, lainnya seperti number, filter, limitTo, sortBy, lowercase, upercase, dsb. Kita juga dapat menulis custom filter jika dibutuhkan.

·         Directive

Directive merupakan cara untuk membuat sintak HTML baru yang akan dimengerti oleh browser. Directive dapat berupa elemen, attribute, HTML comment atau Class. Angular telah menyediakan beberapa directive bawaan yang penting dalam pengembangan web app. Beberepa directive bawaan Angular diantaranya ng-controller, ng-model, ng-repeat, ng-click dll. Kita dapat pula membuat custom directive dengan perilaku (behavior) tertentu seperti yang telah dijelaskan pada pembahasan Apa yang membuat AngularJS istimewa

Untuk mengetahui bagaimana komponen-komponen di atas saling berinteraksi, lihat contoh berikut:

    // file: index.html --> sebagai View

      <!DOCTYPE html>

      <html ng-app>

      <head>

        <title>Angular Hello</title>

        <script src="js/angular-min.js"></script>

        <script src="js/main.js"></script>

      </head>

      <body>

        <div ng-controller="MyCtrl">

          <input ng-model="nama" />

          <span>Hello {{ nama | lowercase }}</span>

        </div>

      </body>

      </html>

Keterangan:

1. Terdapat satu model yaitu 'nama'.

2. Pada View kita memiliki beberapa deklarasi

  - `<html ng-app>`, menginstruksikan angular untuk melakukan inisialisasi app

  - `<div ng-controller="MyCtrl">`, menginstruksikan angular untuk menggunakan controller bernama `MyCtrl` dalam lingkup div yang terdapat directive ng-controller itu. Controller `MyCtrl` dapat ditemukan pada file main.js

  - `<input ng-model="nama" />`, binding ke model `nama`. Artinya input tersebut memiliki value sesuai nilai model `nama`

  - `{{ nama | lowercase }}` merupakan expression, tampilkan nilai dari model `nama`.

  - `lowercase` pada `expression` di atas merupakan `filter` untuk menampilkan nilai model `nama` dalam format lowercase.

Lalu perhatikan contoh kode `controller` di bawah ini

          // file: main.js --> sebagai tempat Controller

          function MyCtrl = angular.controller($scope) {

            $scope.nama = "World";

          }         

Keterangan:

1.      MyCtrl merupakan controller, dan memiliki scope tersendiri. Pada controller ini Model nama diberi nilai awal 'World', agar Model bisa diakses oleh View maka kita rekatkan dengan Scope seperti ini$scope.nama = "World";

2.    Scope digunakan untuk mengirimkan nilai 'nama' dari controller (lihat $scope.nama) ke View.

Minggu, 24 November 2013

Elemen - Elemen HTML 5

ELEMEN – ELEMEN HTML 5

Pada artikel serial HTML5 kali ini kita akan membahas tentang elemen – elemen yang ada pada HTML5. Oh iya sebelumnya saya jelaskan dulu kenapa HTML 4.01 diperbaharui ialah karena beberapa elemen dalam HTML 4.01 sudah usang, tidak pernah digunakan, atau tidak banyak memberikan manfaat, maka lahirlah HTML5. Silakan baca dulu tutorial tentang perbedaan HTML dengan HTML5 ini untuk lebih memperkaya latar belakang perubahan HTML menjadi HTML5.

Seperti contohnya pada elemen HTML5 untuk mendefinisikan video, seperti klip video atau video stream lainnya menggunakan tag <video>, mendefinisikan tag suara, seperti musik atau audio lain menggunakan tag <audio>, mendefinisikan konten tertanam, seperti plug-in menggunakan tag <embed>.

Ok, untuk lebih jelasnya berikut ini contoh – contoh elemen pada html5 :

A.    Elemen Markup

HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).

Tag yang ada dalam elemen markup adalah :

1.      <article>  digunakan untuk konten eksternal, seperti teks dari artikel-berita, blog, forum, atau konten lain dari sumber eksternal

2.      <aside> digunakan untuk konten selain konten itu ditempatkan di samping konten yang masuk harus berkaitan dengan isi sekitarnya

3.      <command> digunakan untuk Sebuah tombol, atau radiobutton, atau sebuah kotak centang

4.      <details> digunakan untuk rincian menggambarkan tentang sebuah dokumen, atau bagian dari dokumen

5.      <summary> digunakan sebagai Sebuah keterangan, atau ringkasan, dalam rincian elemen

6.      <figure> digunakan untuk pengelompokan bagian dari konten berdiri sendiri, bisa video

7.      <figcaption> digunakan sebagai Keterangan dari tokoh bagian

8.      <footer> digunakan untuk footer dari dokumen atau bagian, dapat meliputi nama penulis, tanggal dokumen, informasi kontak, atau informasi hak cipta

9.      <header> digunakan untuk penerapan suatu dokumen atau bagian, dapat mencakup navigasi

10.  <hgroup> digunakan untuk bagian dari pos, menggunakan <h1> untuk <h6>, di mana yang terbesar adalah pos utama bagian tersebut, dan yang lainnya sub-judul

11.  <mark> digunakan untuk teks yang harus disorot

12.  <meter> digunakan untuk pengukuran, digunakan hanya jika nilai-nilai maksimum dan minimum diketahui

13.  <nav> digunkan untuk bagian navigasi atau menu

14.  <progress> menyatakan keadaan pekerjaan berlangsung

15.  <ruby> digunakan untuk penjelasan ruby (catatan Cina atau karakter)

16.  <rt> digunakan untuk penjelasan tentang penjelasan ruby

17.  <rp> digunakan untuk menunjukkan browser yang tidak mendukung elemen ruby

18.  <section> digunakan untuk bagian dalam dokumen. Seperti bab, header, footer, atau bagian lain dari dokumen

19.  <time> digunakan untuk menentukan waktu atau tanggal, atau keduanya

B.     Elemen Media

Elemen media adalah penggabungan antara penggabungan dari dua atau lebih  unsur (elemen)  media yang terdiri visual / video,  suara / audio dan gerak / animasi serta navigasi, secara terintegrasi

Berikut ini adalah tag elemen media :

1.      <audio> digunakan untuk konten multimedia , suara, musik atau streaming audio lainya

2.      <video> digunakan untuk konten video , seperti klip film atau Streaming video lainya

3.      <source> digunakan untuk mengisi embedded , contohnya seperti plug-in atau mengambil video dari Youtube

4.      <canvas> digunakan untuk membuat gambar pada halaman web

C.     Elemen Form

Elemen Form digunakan untuk menentukan ukuran dan jenis dari masing- masing input field. Walaupun dapat dimiliki banyak form dalam satu halaman, tetapi anda tidak dapat melakukan form dalam form.

D.    Sedangkan tag yang ada dalam elemen form adalah :

1.      <datalist> sebagai daftar pilihan untuk nilai input

2.      <keygen> digunakan sebagai hasilkan kunci untuk mengotentikasi pengguna

3.      <output> digunakan untuk berbagai jenis output, seperti output yang ditulis oleh script