33
TUGAS 3 Nama : Dewi Apriliani NIM : 1412510602 Matakuliah : Rekayasa Web Dosen : Andry sunandar, S.T. m.kom

Tugas 3 0317-dewi apriliani-1412510602

Embed Size (px)

Citation preview

Page 1: Tugas 3 0317-dewi apriliani-1412510602

TUGAS 3

Nama : Dewi AprilianiNIM : 1412510602Matakuliah : Rekayasa WebDosen : Andry sunandar, S.T. m.kom

Page 2: Tugas 3 0317-dewi apriliani-1412510602

1. Apa yang anda ketahui tentang konsep MVC (Model, View, Controller) pada pemrograman web?jelaskan!, berikan contoh web framework yang menggunakan konsep MVC serta jelaskan kelebihan dan kekurangannya !

Page 3: Tugas 3 0317-dewi apriliani-1412510602

Model View Controller (MVC) merupakan suatu konsep yang cukup populer dalam pembangunan aplikasi web, berawal pada bahasa pemrograman Small Talk (Wikipedia), MVC memisahkan pengembangan aplikasi berdasarkan komponen utama yang membangun sebuah aplikasi seperti manipulasi data, user interface, dan bagian yang menjadi kontrol aplikasi. Terdapat 3 jenis komponen yang membangun suatu MVC pattern dalam suatu aplikasi yaitu :

View, merupakan bagian yang menangani presentation logic. Pada suatu aplikasi web bagian ini biasanya berupa file template HTML, yang diatur oleh controller. View berfungsi untuk menerima dan merepresentasikan data kepada user. Bagian ini tidak memiliki akses langsung terhadap bagian model.

Model View Controller (MVC)

Page 4: Tugas 3 0317-dewi apriliani-1412510602

Model, biasanya berhubungan langsung dengan database untuk memanipulasi data (insert, update, delete, search), menangani validasi dari bagian controller, namun tidak dapat berhubungan langsung dengan bagian view.

Controller, merupakan bagian yang mengatur hubungan antara bagian model dan bagian view, controller berfungsi untuk menerima request dan data dari user kemudian menentukan apa yang akan diproses oleh aplikasi.Singkat kata Model untuk mengatur alur database, View untuk menampilkan web, sedangkan Controller untuk mengatur alur kerja antara Model dan View. Jadi misalnya Anda ingin membuat akun facebook atau e-mail. Pertama Anda akan melihat tampilan sign-up / register itulah View, kemudian Anda menuliskan form pengisian seperti username, password, dll dan Anda klik sign-up / register maka di sini View memanggil Controller dan Controller memanggil Model, sedangkan Model mengecek apakah Anda sudah sesuai dengan kriteria pendaftaran seperti sudah mengisi username, password dan lain sebagainya. Kemudian Model menggembalikan (callback) ke Controller dan Controller mengembalikan ke View, dan kita akan melihat berhasil atau tidak kita sign-up/register.

Page 5: Tugas 3 0317-dewi apriliani-1412510602
Page 6: Tugas 3 0317-dewi apriliani-1412510602

2. Apa yang anda ketahui tentang XML, JSON?jelaskan dan berikan contohnya !

Page 7: Tugas 3 0317-dewi apriliani-1412510602

Definisi XML  adalah kependekkan dari "Extensible Markup Language". Ya tepat sekali, secara teknis itu harusnya EML.  Loh kenapa?

XML di manfaatkan dalam mendefinisikan dokumen dengan format standar dimana yang dapat dibaca dan di dukung oleh aplikasi-XML yang kompatibel. 

Bahasa format xml bisa digunakan dengan halaman HTML, akan tetapi XML itu sendiri bukan bahasa markup. Sebaliknya, XML itu merupakan“metabahasa” yang dapat di pakai dalam membuat bahasa markup untuk aplikasi khusus. Sebagai contoh nya itu, dapat menggambarkan item yang bisa diakses di saat membuka halaman Web. Dimana pada dasarnya, XML ini dapat memungkinkan Anda untuk membuat database informasi tanpa memiliki database yang sebenarnya. Yaa meskipun secara default hanya digunakan dalam aplikasi Web, banyak program lainnya juga yang dapat menggunakan dokumen XML, misalnya kode sumber aplikasi Android.

Pengertian XML

Page 8: Tugas 3 0317-dewi apriliani-1412510602

Mungkin jelasnya pengertian dari XML (Extensible Markup Language) adalah bahasa markup untuk keperluan umum yang telah disarankan oleh W3C dalam hal membuat dokumen markup untuk kepentingan pertukaran data antar sistem yang beraneka ragam. Tepatnya XML yaitu kelanjutan dari HTML (HyperText Markup Language) dimana yang merupakan bahasa standar untuk melacak Internet. Jadi, untuk membaca bahasa markup ada kesinambungannya. Baca dan cari tahulah selengkap-lengkap nya.

XML justru didesain untuk mempu menyimpan data secara lengkap, ringkas serta mudah dalam mengatur. Kata kunci utama dari XML ini adalah data (jamak dari datum) apabila jika diolah bisa memberikan informasi.

XML juga menyediakan suatu cara terstandarisasi namun dapat dimodifikasi untuk menggambarkan isi dari dokumen. Dengan sendirinya, XML dapat di gunakan dalam menggambarkan sembarang view database, akan tetapi hanya dengan suatu cara yang standar.

Page 9: Tugas 3 0317-dewi apriliani-1412510602

Kegunaan dan Cara dalam Menggunakan XML – XML ini memiliki kepanjangan (eXtensible Markup Language) dimana dapat digunakan dalam berbagai aspek pengembangan web, lumrah dipakai dalam menyederhanakan penyimpanan dan juga pertukaran data. Berikut di bawah ini ada beberapa penggunaan umum XML untuk web saat ini:

Banyak digunakan dalam pengembangan web Sebagai dokumentasi Sebagai pengembangan database

Kegunaan dan cara menggunakan XML

Page 10: Tugas 3 0317-dewi apriliani-1412510602

Di sisi lain, Anda bisa berpendapat bahwa ini merupakan penggunaan paling luas dari XML, sebagai XHTML.Hal ini di karenakan  XHTML hanya sebatas pengerjaan ulang HTML 4.0, banyak situs HTML 4.0 yang memang benar-benar menggunakan bentuk valid di  XHTML.Akan tetapi dalam hal manfaat XML itu sudah tidak ada sebagai XHTML, tetapi disini Anda boleh membuat dokumen web dari XML dengan menggunakan XSLT dimana untuk mengubah dokumen Anda ke dalam bentuk HTML. Lalu kemudian Anda dapat mengirim XML untuk prosesor XSLT kepada server web dan pada akhirnya melayani hasil nya yang ke browser web. Hal ini lah yang membuat dokumentasi Anda tersedia dalam bentuk format apapun yang Anda butuhkan untuk menjadi di dalamnya.

XML dalam Pengembangan Web

Page 11: Tugas 3 0317-dewi apriliani-1412510602

Banyak dari sekian situs-situs yang menggunakan XML. Ironisnya, begitu banyak  para desainer web dan juga pengembang konten tidak tahu bahwa mereka sedang menggunaka XML padahal XML ada disana. Hal ini bisa jadi karena umumnya ada CMS atau dikenal dengan sistem manajemen konten yang berada di depan XML yang dalam membuatnya lebih mudah bagi si penulis konten.Kemudian untuk menulis konten web mereka pun tidak perlu khawatir atau panik dengan menulis HTML atau pun saat mendesain halaman web nya bagi para si pengguna.

XML dan dalam Pengelolaan Konten

Page 12: Tugas 3 0317-dewi apriliani-1412510602

Begitu banyak perusahaan yang berpindah ke XML dimana dalam hal menulis dokumentasi internal mereka. Keunggulan dari XML pada bagian dokumentasi adalah bisa digunakan untuk menentukan bagaimana ciri-ciri umum dalam sebuah buku-buku, koran, majalah, cerita, iklan, dan lainnya.Kisah menarik tentang XML untuk dokumentasi ini adalah bahwa XML begitu mudah dipahami bagi si pengguna pemula, baik dari dokumentasi yang sebenarnya, dan juga kode XML sekitarnya. XML mampu digunakan untuk semua macam dari dokumentasi, untuk penerbitan dalam bahan pemasaran:

XML ini merupakan standar format dari struktur berkas (file). XSL ini merupakan standar dimana bertugas memodifikasi data yang diimpor dan

diekspor. XSD ini merupakan standar yang memiliki arti sebagai struktur database dalam

XML. Pintar (Intelligence). XML  juga dapat menangani berbagai level yang

kompleksitas. Bisa dengan mudah dalam menyesuaikan. Dapat mengadaptasi untuk membuat

bahasa sendiri. Seperti Microsoft membuaat bahasa MSXML atau pun Macromedia mengembangkan MXML.

Mudah dalam pemeliharaannya. Sederhana yaa benar sekali XML lebih sederhana. Mudah pada dipindah-pindahkan (Portability).

XML dan Dokumentasi

Page 13: Tugas 3 0317-dewi apriliani-1412510602

JSON : JavaScript Object Notations JSON merupakan suatu syntax atau format untuk

menyimpan data atau digunakan dalam sebuah proses pertukaran data.

JSON merupakan sebuah format penukaran data yang mudah dibaca da ditulis oleh manusia, serta mudah diterjemahkan serta 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.

Pengertian JSON

Page 14: Tugas 3 0317-dewi apriliani-1412510602

JSON terbuat dari dua struktur utama, yaitu: 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).Struktur-struktur data ini disebut sebagai struktur data universal. Pada dasarnya, semua bahasa pemprograman moderen mendukung struktur data ini dalam bentuk yang sama maupun berlainan. Hal ini pantas disebut demikian karena format data mudah dipertukarkan dengan bahasa-bahasa pemprograman yang juga berdasarkan pada struktur data ini.

Page 15: Tugas 3 0317-dewi apriliani-1412510602

{"siswa":[ {"Nama":"Tama", "Umur":"17"},

{"Nama":"Adhi", "Umur":"17"}, {"Nama":"Septian", "Umur":"18"}

]}

Contoh Sintaks Script JSON

Page 16: Tugas 3 0317-dewi apriliani-1412510602

Format yang digunakan JSON secara sintaks indentik aatau memiliki kesamaan dengan code yang digunakan JavaScript untuk membuat sebuah objek.

Karena kesamaan inilah dibandingkan dengan menggunakan parser (seperti yang dilakukan XML) sebuah program JavaScript dapat menggunakan function JavaScipt Standard untuk mengubah data pada JSON menjadi sebuah objek asli JavaScript. Hal ini merupakan salah satu faktor yang menjadikan JSON sebagai alternatif yang lebih baik dibandingkan XML sebagai bahasa format pernyimpanan dan pertukaran data.

Penggunaan JSON Sebagai Objek pada JavaScript

Page 17: Tugas 3 0317-dewi apriliani-1412510602

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.

Keunggulan JSON

Page 18: Tugas 3 0317-dewi apriliani-1412510602

3. Apa yang anda ketahui tentang AJAX(asynchronous JavaScript and XML)?Jelaskan dan berikan contohnya!

Page 19: Tugas 3 0317-dewi apriliani-1412510602

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.Berikut uraian yang lebih ringkas:AJAX: Asynchronous JavaScript and XML. Sebuah sistem untuk mengirim dan menerima data dari server tanpa penyegaran laman (page refresh). (contoh di bawah)

Pengertian AJAX

Page 20: Tugas 3 0317-dewi apriliani-1412510602

XML: eXtensible Markup Language. Sebuah bahasa untuk mengorganisir data arbitrer. Menggunakan banyak sekali kurung sudut (angle brackets): “<>”. (contoh)HTML: HyperText Markup Language. Sebuah subset XML yang khususnya berfungsi untuk menjelaskan dan mengorganisir laman web. (contoh)JSON: JavaScript Object Notation. Metode yang lebih modern untuk memindahkan paket data yang sering dipakai bersama dengan AJAX. Bisa dibaca secara bawaan oleh JavaScript. (contoh)

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.

Page 21: Tugas 3 0317-dewi apriliani-1412510602

Facebook, Gmail, dan Pinterest adalah contoh situs-situs yang banyak menggunakan AJAX.

Bagian “Asynchronous” merujuk pada fakta bahwa ketika JavaScript menyampaikan panggilan AJAX ke webserver, ia terus berjalan sampai memperoleh respon – ia tidak memblokir dan berhenti saat data sedang diproses oleh server.

Page 22: Tugas 3 0317-dewi apriliani-1412510602

4. Jelaskan mengenai Cross-site request forgery(csrf)!

Page 23: Tugas 3 0317-dewi apriliani-1412510602

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.

Celah keamanan banyak di temukan di berbagai CMS, contohnya CMS VCalendar.

Pengertian CSRF (Cross-site Request Forgery)

Page 24: Tugas 3 0317-dewi apriliani-1412510602
Page 25: Tugas 3 0317-dewi apriliani-1412510602

Penulis buat sebuah cerita agar mudah di mengerti, ada seorang admin memiliki situs yang dibangun dengan VCalendar, suatu saat dia login ke halaman administrator.

Page 26: Tugas 3 0317-dewi apriliani-1412510602

Setelah si admin login dan masuk ke menu pilihan user maka akan tampil para user di situs tersebut.

Page 27: Tugas 3 0317-dewi apriliani-1412510602

Terlihat ada 3 buah account, pada saat itu juga diminta oleh seseorang temannya untuk membuka suatu halaman situs.

Page 28: Tugas 3 0317-dewi apriliani-1412510602

Saat admin melakukan klik tiba-tiba muncul halaman daftar user untuk login.

Page 29: Tugas 3 0317-dewi apriliani-1412510602

5. Apa yang anda ketahui tentang WebSocket serta berikan contohnya!

Page 30: Tugas 3 0317-dewi apriliani-1412510602

WebSocket 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.WebSocket merupakan bagian dari HTML5. WebSocket menghadirkan pengurangan besar dalam lalu-lintas jaringan yang tidak penting dan latency dibandingkan dengan solusi polling dan long-polling yang telah digunakan untuk mensimulasikan koneksi dua arah dengan cara menjaga dua koneksi tetap terhubung.

Pengertian WebSocket

Page 31: Tugas 3 0317-dewi apriliani-1412510602

WebSocket pertama kali dirujuk sebagai TCP Connection dalam spesifikasi HTML5, sebagai tempat untuk berbasis TCP socket API. Pada bulan Juni 2008, Nama WebSocket diciptakan oleh Ian Hickson dan Michael Carter, serangkaian diskusi yang dipimpin oleh Michael Carter yang mengakibatkan versi pertama dari protokol dikenal sebagai WebSocket.

Kapan WebSocket Pertama Kali Di temukan ?

Page 32: Tugas 3 0317-dewi apriliani-1412510602

Websocket memungkinkan server untuk mendorong data kepada klien yang terhubung

Mengurangi traffic atau lalu lintas jaringan yang tidak perlu dan latency menggunakan full duplex melalui koneksi tunggal.

Streaming melalui proxy dan firewall, mendukung komunikasi simultan hulu dan hilir.

Kompatibel dengan pre-WebSocket dunia dengan cara beralih dari koneksi HTTP ke WebSockets.

Manfaat WebSocket

Page 33: Tugas 3 0317-dewi apriliani-1412510602

Sebelum memulai tutorial, anda sebelumnya harus memahami:

Java programming language Basic knowledge Java EE 7 Basic knowledge HTML 5, JavaScript, dan cascading

style sheets (CSS)Cara paling mudah untuk memahami WebSocket dengan menggunakan contoh aplikasi chat sederhana. Berikut ini langkah membuat aplikasi WebSocket chat sederhana dalam bahasa Java menggunakan annotation :Kebutuhan :

Install JAVA EE7 Netbeans IDE reccomended version 7.3.1 Glassfish Server 4.0

Membuat WebSocket