MODERN WEB DEVELOPMENT

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

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 Proprietary HTTP • 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 Belumterikut: Javascriptdan CSS http://devzone.zend.com/node/view/id/663

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 http://www.queness.com/resources/images/Evolution-of-web-design-med.gif

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 DB Model HTML, CSS, Templates Controller Template Framework yang berdasarkan MVC membagi komponen dalam 3 bagian – Model, View, Controller

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 • 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 • 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. CSS Framework • Membantu dengan layout dan desain • Membuat penampilan web menarik secara cepat • Typography (fonts) • CSS Frameworks: • Blueprint - http://www.blueprintcss.org/ • Bootstrap - http://twitter.github.com/bootstrap/

24. 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 • 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 v2a v2b Branch v1 v2 v3 Trunk • Branching • Membuat copy lalu melakukan perubahan yang parallel • Berguna untuk “release” atau membuat fitur software yang baru tanpa berefek ke yang ada sekarang

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

30. Tipe Version Control • Sentralisasi • 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 • Software: • Git • Mercurial, Bazaar

31. 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