tugas iii 0317_arie firmandani_1512510445

25
REKAYASA WEB TUGAS III NIM :1512510445 NAMA : Arie Firmandani FAKULTAS : Fakultas Teknologi Informasi Prodi : Sistem Informasi

Upload: arie-firmandani

Post on 06-Apr-2017

12 views

Category:

Education


0 download

TRANSCRIPT

Page 1: Tugas iii  0317_arie firmandani_1512510445

REKAYASA WEBTUGAS III

NIM :1512510445NAMA : Arie FirmandaniFAKULTAS : Fakultas Teknologi InformasiProdi : Sistem Informasi

Page 2: Tugas iii  0317_arie firmandani_1512510445

  KONSEP MVC

A. PENGERTIAN Model-View-Controller (MVC) adalah pola 

arsitektur yang memisahkan aplikasi dalam tiga komponen utama Logis: Model, View dan Controller. Masing - masing komponen ini dibangun untuk menangani aspek-aspek tertentu pembangunan aplikasi. MVC adalah salah satu kerangka pembangunan web standar industri paling sering digunakan untuk menciptakan proyek yang terukur an besar dan extensible.

Page 3: Tugas iii  0317_arie firmandani_1512510445

B. KOMPONEN1. Model

Model adalah bagian kode program yang menangani query atau database. Jadi isi dari model merupakan bagian (fungsi-fungsi) yang berhubungan langsung dengan database untuk memanipulasi data seperti memasukkan data, pembaruan data, hapus data, dan lain-lain, namun tidak dapat berhubungan langsung dengan bagian view.

2. ViewView adalah bagian kode prgram yang mengatur tampilan website. Pada aplikasi web bagian view biasanya berupa file template HTML, yang diatur oleh controller. Bagian ini tidak memiliki akses langsung terhadap bagian model namu berhubungan langsung dengan controller. View berfungsi untuk menerima dan merepresentasikan data kepada pengguna. Jadi bisa di katakan bahwa viiew merupakan halaman web.

3. ControllerController merupakan bagian yang menjembatani model dan view. Controller berisi perintah-perintah yang berfungsi untuk memproses suatu data dan mengirimkannya ke halaman web. Controller berfungsi untuk menerima request dan data dari user kemudian menentukan apa yang akan diproses oleh aplikasi.

Page 4: Tugas iii  0317_arie firmandani_1512510445

C. LANGKAH-LANGKAH ALIRAN MVC

• Browser klien mengirimkan permintaan ke aplikasi MVC.• Global.ascx menerima permintaan ini dan melakukan routing berdasarkan URL permintaan masuk menggunakan RouteTable, RouteData, UrlRoutingModule dan MvcRouteHandler objek

• Operasi ini routing panggilan controller sesuai dan mengeksekusinya menggunakan objek  menggunakan metode IControllerFactory dan MvcHandler objek.

• Controller memproses data menggunakan Model dan memanggil metode yang tepat menggunakan ControllerActionInvoker objek

• Model diproses kemudian dilewatkan ke View yang pada gilirannya membuat Keluaran terakhir.

Page 5: Tugas iii  0317_arie firmandani_1512510445

Contoh web framework yang menggunakan konsep MVC

1. CodeIgniter (CI)

Kelebihan :1. Fungsi-fungsi pendukung yang cukup lengkap2. Mendukung PHP4 dan PHP53. Memakai konsep MVC (Model View Controller)4. Performa dalam mengeksekusi sangat cepat5. Dokumentasi lengkap, friendly dan didukung oleh forum, wiki, dan komunitas yang

besar6. Mudah dipelajari bagi pemula

Kekurangan :7. Tidak support AJAX dan ORM8. Masih banyak kelonggaran dalam hal coding, misalnya penamaan file dan

membebaskan programmer untuk melanggar aturan MVC9. Karena kelonggaran tersebut, CodeIgniter Tidak ditujukan untuk pembuatan web

dengan skala besar (enterprise) walaupun tersedia banyak library, karena pengembangan akan semakin sulit dilakukan.

Page 6: Tugas iii  0317_arie firmandani_1512510445

2. CakePHPKelebihan :

1. Support AJAX dan ORM2. Pengembangan yang terus dilakukan3. Mendukung PHP4 dan PHP54. Arsitektur OOP dan MVC yang sesungguhnya5. Automagic function seperti validasi input, dll, yang mempercepat coding6. Komunitas pengguna yang besar dan forum cukup baik

Kekurangan :7. Manual Book tidak selengkap CodeIgniter8. Butuh waktu belajar yang lebih lama untuk menguasai framework ini 

dibanding CI. (namun jika sudah benar-benar menguasai, Framework CakePHP mempunyai kemampuan yang benar-benar luar biasa handal)

Page 7: Tugas iii  0317_arie firmandani_1512510445

3. SymfonyKelebihan :

1. Kelebihan :2. Dukungan terhadap AJAX, ORM.3. Kompatibel dengan berbagai macam database.4. Banyak library dan fungsi symfony yang sudah tersedia. Bahkan hampir 

mendekati CMS. Sehingga ada yang mengatakan ”Symphony is a CMS with a heart of a framework.” ini menjadi kelebihan sekaligus kekurangan.

Kekurangan :5. Tidak mendukung PHP4.6. Relatif butuh waktu lama untuk mengerti framework ini.7. Instalasi dan konfigurasinya cukup rumit.

Page 8: Tugas iii  0317_arie firmandani_1512510445

4. ZendKelebihan :

1. Kelebihan :2. Dukungan terhadap AJAX, ORM.3. Berdasarkan informasi dari situs resminya, disebutkan bahwa fokus dari Zend 

Framework ini adalah untuk membangun aplikasi berbasis Web dan untuk memudahkan dalam mengakses API dari berbagai vendor seperti Google, Amazon, Yahoo!, dan Flickr.

Kekurangan :4. Tidak mendukung PHP4.5. Manual yang ada kurang mengakomodasi kebutuhan.6. Performanya relatif lambat (mungkin karena banyaknya library).7. Konon katanya Framework ini hanya cocok untuk orang dengan skill PHP yang 

sudah sangat tinggi

Page 9: Tugas iii  0317_arie firmandani_1512510445

5. YiiKelebihan :

1. framework yang sangat ringan dan dilengkapi dengan solusi caching yang memuaskan.

2. Yii sangat cocok untuk pengembangan aplikasi dengan lalu lintas-tinggi, seperti portal, manajemen konten (CMS), sistem e-commerce, dll.

3. Yii didokumentasikan dengan jelas, efisien, dan kaya-fitur.4. Cocok untuk pengembangan aplikasi skala enterprise.

Kekurangan :5. Tidak mendukung PHP versi 4

Page 10: Tugas iii  0317_arie firmandani_1512510445

6. KohanaKelebihan :

1. Menggunakan konsep MVC perbedaannya dengan Code Igniter adalah Kohana sudah memiliki implementasi ORM (Object-Relational-Mapping) yakni langsung dapat memetakan sebuah class terhadap database.

2. Cascading resource structure, Model ini memudahkan pengembang untuk mengembangkan modul-modul pada Kohana. Selain itu, Kohana juga memiliki library dasar yang diambil dari Code Igniter.

Kekurangan :3. Masih banyak fitur-fitur dari Ruby on Rails yang belum diimplementasikan pada 

Kohana4. Masih belum memiliki scaffolding terintegrasi sehingga sedikit merepotkan5. Sebagai framework yang sedang berkembang pesat, perkembangan ini tidak diikuti 

oleh dokumentasi yang up to date, karena banyak sekali penambahan fitur-fitur pada setiap versinya.

Page 11: Tugas iii  0317_arie firmandani_1512510445

7. LaravelKelebihan :

1. Sintak lebih mudah dipahami karena lebih simpel

2. Full MVCKekurangan :

3. Framework yang tergolong baru sehingga sedikit dokumentasi dan susah dipahami bagi pemula

Page 12: Tugas iii  0317_arie firmandani_1512510445

XMLA. PENGERTIAN DAN SEJARAH XML

XML dibuat oleh XML Working Group (yang juga disebut SGML Editorial Review Board) dibentuk di bawah pengawasan World Wide Web Consortium (W3C) pada tahun 1996. Dipimpin oleh Jon Bosak dari Sun Microsystems dengan partisipasi aktif XML Special Interest Group (yang sebelumnya disebut SGML Working Group) yang juga diorganisir oleh W3C.Secara umum XML adalah : XML kependekan dari EXtensible Markup Language. XML adalah markup language / bahasa markup seperti HTML. XML didesain untuk mendeskripsikan data. XML tags tidak didefiniskan pada XML, karena itu kita harus

mendefinisikannya sendiri. XML menggunakan DTD (Document Type Definition) untuk

mendeskripsikan data. XML dengan DTD didesain untuk dapat menjelaskan dirinya

sendiri.

Page 13: Tugas iii  0317_arie firmandani_1512510445

B. FUNGSI DAN PENGGUNAAN XMLFUNGSI XML

XML sama sekali dibuat bukan untuk menggantikan HTML. Pada pengembangan web di masa depan XML lebih ke arah deskripsi data, sedangkan HTML lebih ke bentuk data dan bagaimana menampilkannya. Sebenarnya yang terjadi adalah saling menggunakan (cross platform) tanpa tergantung dari perangkat lunak ataupun perangkat keras dan saling mengirim informasi.

PENGGUNAAN XMLXML dapat memisahkan data dari HTML Dengan XML data dapat tersimpan terpisah dari HTML.  Dengan XML kita dapat berkonsentrasi menggunakan HTML hanya untuk layout data dan tampilannya sehingga kita tidak khawatir perubahan data akan mengubah HTML.

XML dan B2B Dengan XML, informasi finansial dapat dipertukarkan melalui internet. Dengan XML pertukaran aplikasi B2B (business to business) akan menjadi lebih baik.

Page 14: Tugas iii  0317_arie firmandani_1512510445

C. KEGUNAAN XMLA. XML digunakan untuk pertukaran data Dengan XML, data dapat dipertukarkan

antara sistem yang tidak kompatibel. Dalam kasus nyata, sistem komputer dan database meyimpan data dalam format yang tidak kompatibel satu sama lain. Hal itu menjadi salah satu hambatan bagi para developer untuk mempertukarkan data di Internet. Dengan mengkonversikan data ke XML kita dapat mengurangi kompleksitas masalah dan membuat data yang dapat dibaca oleh berbagai tipe aplikasi.

B. XML dapat digunakan untuk membagi data Dengan XML, file teks biasa dapat untuk membagi data. Karena XML data disimpan dalam format teks biasa, XML menyediakan jalan yang independen untuk membagi data. Hal ini memudahkan untuk membuat data yang dapat digunakan oleh aplikasi‐aplikasi berbeda, selain itu juga memudahkan untuk mengekspan dan mengupgrade ke sistem operasi baru, server baru, aplikasi baru dan browserbaru.

C. XML dapat digunakan untuk menyimpan data Dengan XML, file teks biasa dapat untuk menyimpan data. XML juga dapat digunakan untuk menimpan data dalam file maupun database. Aplikasi tertentu dapat dibuat untuk menulis dan mengambil informasi dari tempat penyimpanan dan aplikasi umum dapat digunakan untuk menampilkan data.

Page 15: Tugas iii  0317_arie firmandani_1512510445

D. XML dapat membuat data lebih berguna Dengan XML, data dapat digunakan oleh lebih banyak orang. Karena sifatnya yang independen dan cross platform maka data kita dapat diakses oleh banyak orang dan tidak tergantung pada standar browser maupun HTML tertentu klien dan aplikasi dapat mengakses file XML sebagai sumber data seperti mengakses database.

E. XML dapat digunakan untuk membuat bahasa baru XML adalah induk dari WAP (Wireless Application Protocol) dan WML (Wireless Markup Language). WML digunakan untuk memarkup aplikasi Internet untuk peralatan handheld semacam telpon selular yang ditulis dalam XML.

Page 16: Tugas iii  0317_arie firmandani_1512510445

Contoh syntax xml yang di gabung dengan html• <html>• <body> • <xml id="contact-person">• <contact>• <name>Yadi Utama</name>• <company>PT. Gamatechno Indonesia</company>• <address>Jl. Cik Di Tiro No.34</address>• <city>Yogyakarta</city>• <state>Indonesia</state>• <zip>55284</zip>• <phone>081328462499</phone>• <email>[email protected]</email>• </contact>• </xml>

Page 17: Tugas iii  0317_arie firmandani_1512510445

• <table border="1" datasrc="#contact-person">• <tr><th>Name</th> <td><span datafld="name"></span></td></tr>• <tr><th>Company</th> <td><spandatafld="company"></span></td></tr>• <tr><th>Address</th> <td><spandatafld="address"></span></td></tr>• <tr><th>City</th> <td><span datafld="city"></span></td></tr>• <tr><th>State</th> <td><span datafld="state"></span></td></tr>• <tr><th>ZIP</th> <td><span datafld="zip"></span></td></tr>• <tr><th>Phone</th> <td><span datafld="phone"></span></td></tr>• <tr><th>Email</th> <td><span datafld="email"></span></td></tr>• </table> • </body>• </html>

Ketika ditampilkan melalui browser web, Anda akan melihat tampilannya sepeti ini:

Page 18: Tugas iii  0317_arie firmandani_1512510445
Page 19: Tugas iii  0317_arie firmandani_1512510445

JSONA. PENGERTIAN JSON

JSON (JavaScript Object Notation) adalah format pertukaran data yang ringan, mudah dibaca dan ditulis oleh manusia, serta mudah diterjemahkan dan dibuat (generate) oleh komputer. Format ini dibuat berdasarkan bagian dari Bahasa Pemprograman JavaScript, Standar ECMA-262 Edisi ke-3 - Desember 1999. JSON merupakan format teks yang tidak bergantung pada bahasa pemprograman apapun karena menggunakan gaya bahasa yang umum digunakan oleh programmer keluarga C termasuk C, C++, C#, Java, JavaScript, Perl, Python dll. Oleh karena sifat-sifat tersebut, menjadikan JSON ideal sebagai bahasa pertukaran-data.

JSON terbuat dari dua struktur:Kumpulan pasangan nama/nilai. Pada beberapa bahasa, hal ini dinyatakan sebagai objek (object), rekaman (record), struktur (struct), kamus (dictionary), tabel hash (hash table), daftar berkunci (keyed list), atau associative array.

Daftar nilai terurutkan (an ordered list of values). Pada kebanyakan bahasa, hal ini dinyatakan sebagai larik (array), vektor (vector), daftar (list), atau urutan (sequence).

Page 20: Tugas iii  0317_arie firmandani_1512510445

B. KEUNGGULAN JSON DAN CONTOHNYAKeunggulan JSON

JSON memiliki beberapa keunggulan dibandingkan dengan XML terutama dapat penggunaan apikasi AJAX. Beberapa kelebihan JSON antara lain :– JSON lebih ringkas, cepat, dan mudah.– JSON tidak menggunakan tag penutup– JSON lebih cepat untuk dibaca dan ditulis– JSON dapat menggunakan array– JSON tidak perlu menggunakan parser khusus untuk diubah

menjadi sebuah objek, melainkan hanya perlu menggunakan function default dari JavaScript.

Contoh Sintaks Script JSON{"siswa":[ {"Nama":"Tama", "Umur":"17"}, {"Nama":"Adhi", "Umur":"17"}, {"Nama":"Septian", "Umur":"18"}

Page 21: Tugas iii  0317_arie firmandani_1512510445

AJAXA. PENGERTIAN DAN CONTOH PERINTAH AJAX

Pengertian AJAX, singkatan dari “Asynchronous JavaScript and XML“, merupakan metode suatu laman web menggunakan JavaScript untuk mengirim dan menerima data dari server tanpa harus menyegarkan (refresh) laman itu. XML adalah sejenis markup language – seperti HTML, yang kerap dipakai untuk mengirimkan data melalui internet. Belakangan ini, JSON (“JavaScript Object Notation”) lebih populer dan bisa dibaca – secara bawaan (native) – oleh JavaScript.

Sebuah contoh perintah AJAX bisa berjalan seperti berikut:• Client memanggil laman dari server• Server merespon panggilan dan mengirimkan laman• Client membuat perintah AJAX ke server dan memanggil lebih banyak data• Server mengirimkan data tersebut• Client memutakhirkan laman dengan data tersebut tanpa me-refresh laman.Facebook, Gmail, dan Pinterest adalah contoh situs-situs yang banyak

menggunakan AJAX.

Page 22: Tugas iii  0317_arie firmandani_1512510445

CROSS-SITE REQUEST FORGERY(CSRF)

CSRF (Cross-site Request Forgery) merupakan suatu teknik hacking untuk mendapatkan atau bahkan menguasai suatu account dengan cara menyerang web yang dieksekusi atas wewenang korban, tanpa dikehendakinya.CSRF merupakan teknik pemalsuan permintaan yang berasal dari halaman web atau situs yang berbeda, saat halaman situs dieksekusi oleh korban maka akan muncul account baru yang tanpa dikehendaki si admin.

Pengertian CSRF (sea surf) adalah serangan/exploitasi terhadap situs web dengan memanfaatkanpengguna yang sudah terautentikasi. CSRF mengexploitasi tingkat kepercayaan situsweb terhadap pengguna dan menganggap setiap perintah adalah sah untuk dijalankan.Karena sifat inilah sangat sulit untuk menentukan sebuah aksi adalah murni dari pengguna atau karena kelemahan CSRF di situs. Ketika kita membuka sebuah situs,browser secara otomatis akan mengirim request atau permintaan kepada web-browser.Begitu pula ketika browser menemukan kode HTML yang meminta file agardidownload ke browser.

Page 23: Tugas iii  0317_arie firmandani_1512510445

WEBSOCKET

A. PENGERTIANWebSocket adalah standar baru untuk komunikasi realtime pada Web dan aplikasi mobile. WebSocket dirancang untuk diterapkan di browser web dan server web, tetapi dapat digunakan oleh aplikasi client atau server. 

WebSocket adalah protokol yang menyediakan saluran komunikasi full-duplex melalui koneksi TCP tunggal. Protokol WebSocket sudah di standarisasi oleh IETF sebagai RFC 6455 pada tahun 2011, dan API WebSocket di Web IDL sedang distandarisasi oleh W3C.

Page 24: Tugas iii  0317_arie firmandani_1512510445

B. MANFAAT WEBSOCKET1. Websocket memungkinkan server untuk mendorong data kepada klien yang

terhubung2. Mengurangi traffic atau lalu lintas jaringan yang tidak perlu dan latency

menggunakan full duplex melalui koneksi tunggal (bukan dua).3. Streaming melalui proxy dan firewall, mendukung komunikasi simultan hulu dan

hilir.4. Kompatibel dengan pre-WebSocket dunia dengan cara beralih dari koneksi HTTP

ke WebSockets

C. APLIKASI YANG HARUS MENGGUNAKAN WEBSOCKET

5. Aplikasi dengan banyak pengguna atau Multi-User Apps6. Aplikasi langsung atau Realtime Apps7. Aplikasi dimana data live sangat dibutuhkan, seperti pasar saham, atau kurs.

Page 25: Tugas iii  0317_arie firmandani_1512510445

WebSocket Client• Di website, WebSocket didukung oleh browser seperti Google

Chrome, Firefox, Opera• Pada ponsel, WebSocket support di iOS dan Android• WebSocket client menggunakan Javascript untuk meminta

atau merequest ke server WebSocket.

WebSocket Server• Pada server, WebSocket sudah support di Ruby, Java, Objective-C, 

PHP, .NET, Node.js, ActionScript dan banyak bahasa lainnya, bisa dicoba pada website-website berikut ini Ruby Java, Objective-C(iOS), PHP, .NET, node.js