tugas[3] 0317-[tryanita]-[1411511676]

19
REKAYASA WEB TUGAS 3 NIM : 1411511676 NAMA : TRYANITA TEKNIK INFORMATIKA FAKULTAS TEKNOLOGI INFORMASI

Upload: trya-nita

Post on 19-Mar-2017

96 views

Category:

Education


2 download

TRANSCRIPT

Page 1: Tugas[3] 0317-[tryanita]-[1411511676]

REKAYASA WEBTUGAS 3

NIM : 1411511676NAMA : TRYANITA

TEKNIK INFORMATIKAFAKULTAS TEKNOLOGI INFORMASI

Page 2: Tugas[3] 0317-[tryanita]-[1411511676]

1. Konsep MVCPengertian

MVC adalah sebuah bentuk pemrograman yang memisahkan berdasarkan logika penanganan tampilan, logika pengontrolan dan logika model. MVC bertujuan supaya pada pengembangan perangkat lunak yang besar mudah untuk dilakukan maintenance (perbaikan/penambahan atau pengurangan code).Model adalah komponen yang berfungsi mengambil data dari database/sumber data. Fungsi yang terdapat dalam Model akan dipanggil oleh Controller.View adalah komponen yang berfungsi menyajikan tampilan kepada user. View menampilkan data yang diperoleh Controller.Controller adalah komponen yang berfungsi untuk memanggil fungsi yang ada di dalam Model dan mengirim hasilnya melalui View, Controller juga berfungsi mengambil input dari user yang selanjutnya akan diolah oleh Model.

Page 3: Tugas[3] 0317-[tryanita]-[1411511676]

1. ModelModel 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[3] 0317-[tryanita]-[1411511676]

Contoh web framework yang menggunakan konsep MVC1. Laravel

Framework ini menggunakan arsitektur/pattern MVC (Model-View-Controller) yang di kembangkan oleh Taylor Otwell. Laravel merupakan kerangka kerja PHP yang masih terbilang baru yang dirilis pada tahun 2011, namun baru-baru ini framework ini merupakan framework yang paling popular di kalangan pengembang. Laravel memiliki ekosistem yang luas dengan instant hosting dan penyebaran platform, website resminya juga menawarkan banyak tutorial screencast yang dinamakan laracast.Laravel memiliki banyak fitur-fitur yang tidak dimiliki framework lain seperti Autoloading, Unit Testing, dll yang membuat pengembngan aplikasi menjadi lebih cepat. Ada juga yang disebut “Blade”, merupakan engine template ringan yang memfasilitasi tugas anda secara umum seperti authentication, sessions, queuing, chaching dan RESTful routing. Selain itu laravel juga mencakup lingkungan pengembangan local yang disebut packaged Vagrant Box.

2. Yii Yii adalah framework php dengan performa yang tinggi untuk mengembangkan aplikasi web 2.0. Yii datang dengan fitur yang cukup banyak: MVC, DAO/Active Record, I18/L10N, caching, authentication, dan role-based control, scaffolding, testing, dll.

Page 5: Tugas[3] 0317-[tryanita]-[1411511676]

3. Code IgniterSalah satu framework berbasis PHP yang juga menggunakan pattern Model View Controller yang sudah berumur cukup lama (diliris pada tahun 2006). Sebagai sebuah framework, Code Igniter tidak membutuhkan proses instalasi yang cukup rumit, sangat mudah, hanya membutuhkan sedikit konfigurasi untuk mulai menggunakannya. Model MVC yang di adopsi oleh Code Igniter tidaklah terlalu mengikat, dimana penggunaan class controller adalah sebuah keharusan, namun tidak pada class Model dan View yang merupakan opsional. Hal tersebut menunjukkan bahwa Code Igniter memberikan kebebasan besar bagi para pengembangnya. Ukuran Code Igniter terbilang ramping hanya berkisar 2MB.

4. Symfonyframework MVC yang sangat powerful dan cukup populer di dunia enterprise. Hal ini sangat terinspirasi oleh Framework website lainnya seperti Ruby on Rails, Django, dan Spring. Symfony mungkin salah satu framework php yang paling lengkap.

Page 6: Tugas[3] 0317-[tryanita]-[1411511676]

2. XMLXML 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 7: Tugas[3] 0317-[tryanita]-[1411511676]

FUNGSI XMLXML 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 8: Tugas[3] 0317-[tryanita]-[1411511676]

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.

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.

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 9: Tugas[3] 0317-[tryanita]-[1411511676]

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.

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 10: Tugas[3] 0317-[tryanita]-[1411511676]

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 11: Tugas[3] 0317-[tryanita]-[1411511676]

<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 12: Tugas[3] 0317-[tryanita]-[1411511676]
Page 13: Tugas[3] 0317-[tryanita]-[1411511676]

3. JSONPengertian

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 14: Tugas[3] 0317-[tryanita]-[1411511676]

Keunggulan JSONJSON 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 15: Tugas[3] 0317-[tryanita]-[1411511676]

4. AJAXPengertian

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 16: Tugas[3] 0317-[tryanita]-[1411511676]

5. 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 17: Tugas[3] 0317-[tryanita]-[1411511676]

6. WebSocketPengertian 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. Protokol WebSocket sudah di standarisasi oleh IETF sebagai RFC 6455 pada tahun 2011, dan API WebSocket di Web IDL sedang distandarisasi oleh W3C.

Page 18: Tugas[3] 0317-[tryanita]-[1411511676]

Manfaat WebSocket 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 (bukan dua).

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

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

Aplikasi Yang Harus Menggunakan WebSocket Aplikasi dengan banyak pengguna atau Multi-User Apps Aplikasi langsung atau Realtime Apps Aplikasi dimana data live sangat dibutuhkan, seperti pasar saham,

atau kurs.

Page 19: Tugas[3] 0317-[tryanita]-[1411511676]

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