MODERN WEB DEVELOPMENT Andrew Hadinyoto hadinyoto.andrew@gmail.com

Evolusi Bisnis Memakai Web (1) Static HTML Biaya pembuatan terhitung berdasarkan jumlah halaman Biaya untuk hosting Setiap perubahan perlu developer atau ahli HTML Situs-situs gratis untuk static HTML Google Site

Evolusi Bisnis Memakai Web (2) Content Management System (CMS) Aplikasi web (program) yang diinstal di web server Mudah untuk mengupdate isi web (tanpa perlu memahami HTML) Desain dapat distandardisasi Perlu server dan provider yang mengsupport aplikasi tersebut Contoh: Joomla, Drupal, Wordpress Free online: blogger.com, wordpress.com

Evolusi Bisnis Memakai Web (3) Penyesuaian (customize) CMS yang ada Memakai “plugins” yang tersedia Membuat “plugin” sendiri Jika Open Source: mengadaptasi code sesuai keperluan (opsi terakhir)

Evolusi Bisnis Memakai Web (4) Membuat aplikasi sendiri dari awal Tergantung kebutuhan bisnis Strategy bisnis Pengembangan ke masa depan Opsi ini biasanya tidak murah Biaya untuk developers (internal atau external) Waktu (good software takes time) Saran: lakukan ini sebagai opsi terakhir

Komponen di web aplikasi pada umumnya HTTP Proprietary Client: Browser HTML CSS Javascript Server: - Web Server (Apache, IIS) Business Logic Program (PHP, JSP) SQL untuk akses ke database Storage: - SQL database

Komplikasi Teknologi HTML PHP SQL Belum terikut: Javascript dan CSS Source from: http://devzone.zend.com/node/view/id/663 Belum terikut: Javascript dan CSS http://devzone.zend.com/node/view/id/663

Membuat Aplikasi Web itu SULIT! Penguasaan teknologi: HTML CSS Backend Programming (PHP, Java JSP/Servlet, .NET, dsb.) Javascript (front-end programming) SQL Security

Evolusi Pembuatan Aplikasi Web Awal 1990s Text Images Pertengahan 1990s Flash mulai diperkenalkan HTML table, HTML forms Animated images Cold Fusion, CGI programming dengan Perl Akhir 1990s PHP Database dengan MySQL Flash menjadi sangat populer Javascript mulai banyak pemakaiannya http://www.queness.com/resources/images/Evolution-of-web-design-med.gif

Evolusi Pembuatan Aplikasi Web 2000 CSS mulai berpengaruh Pemisahan layout dengan desain Awal 2000s Javascript menjadi sangat populer, dengan support dari browsers Microsoft’s Asynchronous HTTP Request (AJAX) Pertengahan 2000s XML, Web Services Content Management System (CMS) Web Frameworks (Struts, Spring, Ruby on Rails)

Evolusi Pembuatan Aplikasi Web Akhir 2000s Web 2.0 – AJAX semakin dominan HTML 5 (kemajuan penting) Frameworks semakin dominan (Rails, Django, Spring) Javascript menjadi populer lagi (jQuery library) Integrasi dengan web aplikasi yang lain lewat web services (Facebook, Google, Twitter, dsb.) Web di smart phone (dengan dimensi dan limitasi yang berbeda dengan desktop/laptop)

Membuat Aplikasi Web Perlu Strategi

Tanpa Strategi dan Perencanaan Sulit pemeliharaanya Pembetulan bugs Sulit dikembangkan penambahan fitur akan sulit Berpotensi adanya lubang dalam keamanan aplikasi tersebut

Strategi mempermudah pembuatan aplikasi web Menggunakan Framework Web Framework Javascript Framework CSS Framework Menggunakan Version Control

Perencanaan: Web Framework Kerangka pengaturan komponen web aplikasi untuk mempermudah development Pengaturan peletakan dan pembagian files HTML, CSS Template Konfigurasi files Pengaksesan data Pengaturan akses lewat URL Pengaturan session

Tipe framework yang dominan: MVC Framework yang berdasarkan MVC membagi komponen dalam 3 bagian – Model, View, Controller DB Model HTML, CSS, Templates Controller Template

MVC Model Bagian dari software aplikasi yang berhubungan dengan logika pengaksesan data Dalam aplikasi web, biasanya ini adalah code yang mengakses database View Bagian dari software aplikasi yang mengatur presentasi atau user interface Dalam aplikasi web, biasanya HTML dan templates Controller Menerima user input dan memproses input tersebut Bagian dari software aplikasi yang mengatur logika bisnis aplikasi Controller juga mengatur Model dan View mana yang akan diakses

Web Frameworks PHP Java Python Ruby CodeIgniter, CakePHP, Symfony, Yii, Zend Java Struts, Spring, JBoss (EJB), ZK Python Django, Web2py, Zope, CherryPy, TurboGears Ruby Ruby on Rails, Sinatra

Ruby on Rails Web Framework berdasarkan oleh Ruby programming language Release pertama: 2004 Oleh: David Heinemeier Hansson Untuk project Basecamp (project managament website)

Ruby MRI (standard) Jruby (Ruby di Java VM) Oleh: Yukihiro Matsumoto (Heroku) Release pertama: 1995 Object Oriented Programming Dynamic typing Library yang cukup lengkap Implementasi MRI (standard) Jruby (Ruby di Java VM) IronRuby (Ruby di .NET CLI)

Prinsip Dari Ruby on Rails Model View Controller (MVC) Convention Over Configuration Hanya perlu konfigurasi secara manual kalau “menyimpang” dari penggunaan biasa Asumsi penamaan model, view, controller dan files Asumsi penamaan kolom-kolom database table Don’t Repeat Yourself Tanpa pengulangan code untuk mengerjakan sesuatu yang sama

Javascript Framework Mempermudah pemograman dengan Javascript Mempermudah seleksi DOM elements dan memanipulasinya Animasi Komponen User Interface Library: JQuery Google Closure Yahoo YUI Menarik: CoffeeScript (Rails 3.1)

Membantu dengan layout dan desain Typography (fonts) CSS Frameworks: Membuat penampilan web menarik secara cepat Typography (fonts) CSS Frameworks: Blueprint - http://www.blueprintcss.org/ Bootstrap - http://twitter.github.com/bootstrap/

<canvas>, <svg>, <audio>, <video>, dsb. Dalam proses standardisasi, tapi sudah banyak terimplementasi Tags yang baru <canvas>, <svg>, <audio>, <video>, dsb. API yang baru File API LocalStorage IndexedDB (non-relational database) Fitur yang lain Offline Web

Menggunakan Version Control Program untuk melacak perubahan dalam file Sangat berguna untuk development Kenapa perlu melacak perubahaan? Untuk melacak bugs dalam development Kapan suatu fitur ditambahkan Kapan suatu code ditambahkan dan dihilangkan (diff), dan kenapa (log)? Sejarah perubahan semua files (log) Sharing dan sinkronisasi perubahan tersebut

Konsep

Konsep

Fitur-fitur Version Control Branching Membuat copy lalu melakukan perubahan yang parallel Berguna untuk “release” atau membuat fitur software yang baru tanpa berefek ke yang ada sekarang v2a v2b Branch v1 v2 v3 Trunk

Fitur-fitur Version Control Merging Untuk menggabungkan 2 cabang (branches) Berguna untuk menggabungkan fitur baru di cabang lain ke cabang utama (trunk) v2b Branch v3 v4 Trunk

Tipe Version Control Sentralisasi Distributed (desentralisasi) Repository di server yang dishare Lebih mudah dimengerti and dikuasai Software: Subversion CVS, Visual SourceSafe Distributed (desentralisasi) Setiap client mempunyai repository masing-masing Repository-repository tersebut dapat disinkronisasi Git Mercurial, Bazaar

Metodologi pembuatan software dalam team Tambahan Metodologi pembuatan software dalam team Agile Web Development Development proses dengan antisipasi perubahan Otomatisasi testing Unit testing (built-in di Rails) Functional testing Performance testing

Penutup Perlukah anda membuat dari awal? Strategi: gunakan tools, libraries dan frameworks untuk mempermudah Pentingnya pemikiran untuk pemeliharaan aplikasi