HTML 5: 2013

Konsep MVC dalam Java

MVC (Model View Controller) merupakan cara atau konsep yang biasa digunakan oleh para programmer dalam pembuatan program yang terstruktur. Konsep MVC sendiri mempunyai tiga bagian, yaitu Model, View dan controller.

Berikut penjelasan konsep MVC:
1. Model digunakan sebagai tempat core suatu program. Model yang akan memproses semua inputan yang dimasukkan oleh user.

2. View sebagai tempat untuk tampilan yang secara langsung berhubungan dengan user. Atau dengan kata lain sebagai tempat inputan bagi user.

3. Controller, merupakan suatu (klas) pengendali yang akan mengendalikan inputan user. Controller akan mengambil inputan yang dimasukkan oleh user dan akan mengirimkannya ke klas model untuk diproses lebih lanjut.

Arsitektur MVC

Arsitektur MVC ini memungkinkan adanya perubahan dalam domain model tanpa harus mengubah code untuk menampilkan domain model tersebut. Hal ini sangat bermanfaat ketika aplikasi mempunyai domain model dan view komponen sangat besar dan kompleks.

Model adalah representasi dari object yang sedang diolah oleh aplikasi, dalam Java, model ini biasanya direpresesentasikan sebagai Java Bean. Java Bean adalah class Java biasa atau POJO (Plain Old Java Object). Syarat sebuah POJO dianggap sebagai Java Bean adalah :

1.Mempunyai constructor default, constructor yang tidak mempunyai parameter.
2.Semua field-field yang bisa diakses dilengkapi dengan getter dan setter method.

Pendekatan terbaik adalah memisahkan kode untuk melakukan akses sumber data ke dalam lapisan tersendiri, lapisan ini biasanya disebut sebagai service. Service diimplementasikan dalam bentuk class-class yang disebut sebagai manager, misalnya SQLManager, PrintManager, ReportManager, XMLManager, WebServiceManager dan seterusnya. Dengan begitu kode akan menjadi lebih rapi dan terstruktur. Manfaat paling terasa adalah kemudahan pencarian kesalahan dan penambahan modul-modul baru tidak harus merombak seluruh struktur aplikasi.

View adalah komponen untuk merepresentasikan Model dalam bentuk visual. Semisal komponen swing, seperti : JTable, JList, JComboBox dan sebagainya. View juga bertanggung jawab untuk menangkap interaksi user terhadap sistem, semisal : klik mouse, penekanan tombol keyboard, barcode scanning dan sebagainya. Controller sebenarnya hanya sekumpulan kode-kode untuk mensinkronisasi keadaan Model dan View. Jika ada perubahan data dari Model, Controller harus mengupdate tampilan View. Dan sebaliknya jika user memberikan event terhadap View, Controller harus mengupdate Model sesuai dengan hasil interaksi user terhadap View.

Document Object Model (DOM)

Document Object Model (DOM) adalah object model standar untuk HTML dan XML yang bersifat platform independent. Sebuah web browser tidak harus menggunakan DOM untuk menampilkan dokumen HTML. Namun DOM diperlukan oleh JavaScript yang akan mengubah tampilan sebuah website secara dinamis. Dengan kata lain, DOM adalah cara JavaScript melihat suatu halaman HTML.

W3C mulai mengembangkan DOM pada awal 1990-an. Pada bulan Oktober 1998, DOM 1 diluncurkan. Spesifikasi DOM W3C terbagi menjadi beberapa tingkat. Sebuah halaman yang mendukung suatu level harus menerapkan semua persyaratan level tersebut dan di bawahnya.

Sebelum ada standar DOM dari W3C, masing-masing web browser memiliki DOM sendiri. Akibatnya, bila suatu website ingin ditampilkan secara cross-browser compatible, ia harus dirancang untuk setiap web browser yang akan didukung. DOM standar mempermudah pengembangan aplikasi web.

DOM dibagi dalam 3 Level :

1. Core DOM, Model Standar untuk Dokumen terstruktur.

2. HTML DOM, Model Standar untuk Dokumen HTML.

3. XML DOM, Model Standar untuk Doukumen XML.

HTML DOM

§ Model Objek Standar untuk HTML

§ Standar Interface programming untuk HTML

§ Platform dan Bahasa Bebas/independent

§ Standard W3C

Definisi : objek dan properti dari semua elemen HTML dan ada mehod2 untuk mengakses semua elemen tersebut.

Bagan HTML DOM :

Objek HTML DOM!

Document object

Anchor object

Area object

Base object

Body object

Button object

Event object

Form object

Frame object

Frameset object

IFrame object

Image object

Input Button object

Input Checkbox object

Input File object

Input Hidden object

Input Password object

Input Radio object

Input Reset object

Input Submit object

Input Text object

Link object

Meta object

Object object

Option object

Select object

Style object

Table object

TableCell object

TableRow object

Textarea object

2. XML DOM

Definisi : Sebuah standar untuk mengakses dan memanipulasi XML.

View dari Dokumen XML adalah seperti Struktur pohon.semua elemen dapat diakses melalui DOM tree. konten dari XML berupa teks dan atribut2 dapat dimodifikasi dan dihapus atau dapat dibuat elemen baru. Elemen2nya, Teks dan atribut dikenal dengan Node.

contoh untuk mendapatkan suatu teks dari <to> sebuah elemen :

xmlDoc.getElementsByTagName(“to”)[0].childNodes[0].nodeValue

§ xmlDoc – the XML document created by the parser.

§ getElementsByTagName(“to”)[0] – the first <to> element

§ childNodes[0] – the first child of the <to> element (the text node)

§ nodeValue – the value of the node (the text itself)

Untuk mengetahui secara pasti coba aja skrip ini :

<html>
<body>
<h1>W3Schools Internal Note</h1>
<p><b>To:</b> <span id=”to”></span><br />
<b>From:</b> <span id=”from”></span><br />
<b>Message:</b> <span id=”message”></span>

document.getElementById(“to”).innerHTML=
xmlDoc.getElementsByTagName(“to”)[0].childNodes[0].nodeValue;
document.getElementById(“from”).innerHTML=
xmlDoc.getElementsByTagName(“from”)[0].childNodes[0].nodeValue;
document.getElementById(“message”).innerHTML=
xmlDoc.getElementsByTagName(“body”)[0].childNodes[0].nodeValue;
</script>

</body>
</html>

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+2 }} , akan menampilkan angka 3 ke pengguna.
{{ user.name }} , akan menampilkan nilai properti 'name' dari model 'user'
{{ 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.

HTML 5

Selasa, 10 Desember 2013

DOM