MODERN WEB DEVELOPMENT

Presentasi berjudul: "MODERN WEB DEVELOPMENT"— Transcript presentasi:

1 MODERN WEB DEVELOPMENT
Andrew Hadinyoto

2 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

3 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

4 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)

5 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

6 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

7 Komplikasi Teknologi HTML PHP SQL Belum terikut: Javascript dan CSS
Source from: Belum terikut: Javascript dan CSS

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

9 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

10 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)

11 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)

12 Membuat Aplikasi Web Perlu Strategi

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

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

15 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

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

17 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

18 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

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

20 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)

21 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

22 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)

23 Membantu dengan layout dan desain Typography (fonts) CSS Frameworks:
Membuat penampilan web menarik secara cepat Typography (fonts) CSS Frameworks: Blueprint - Bootstrap -

24 <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

25 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

26 Konsep

27 Konsep

28 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

29 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

30 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

31 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

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