Web Applications - Behind the Scenes + Open Source Examples


Published on

Web Applications - Behind the Scenes + Open Source Examples

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Applications - Behind the Scenes + Open Source Examples

  1. 1. Web Application behind the scenes Arpee Ong
  2. 2. Who Am I? Name: Richard Pet er Ong a.k.a. Arpee Work: Lead Software Developer, Internal Projects @ SysIQ Inc. USA Other Affiliations: Core Developer of Mambo CMS, MiaCMS and CamiroCMS Member, PHP User Group Philippines IT Consultant @ LevitanSoftware, Kalibo, PH
  3. 3. Who Are you? <ul><li>IT Students / Faculty </li></ul><ul><li>Future Web Application Developers </li></ul>
  4. 4. Scope and Coverage: <ul><ul><li>Basic Web Application Workflow </li></ul></ul><ul><ul><li>Examples </li></ul></ul><ul><ul><li>Components, what makes Web Applications tick </li></ul></ul><ul><ul><li>Sample on the spot codes using PHP </li></ul></ul>
  5. 5. WHAT IS A WEB APPLICATION? <ul><li>Any application that is served commonly via http or https protocol </li></ul><ul><li>Usually being served from a remote computer acting as a host/server </li></ul>
  6. 6. How does a Web Application differ with Desktop Applications ?
  7. 7. <ul><li>Common Web Applications do not need to be installed on the client </li></ul><ul><li>Requires only a Web Browser to run </li></ul><ul><li>Easily Distributable due to native support of the underlying technoloy to concurrent connections and users </li></ul>Web vs Desktop
  8. 8. <ul><li>Common Desktop Applications are secured by nature, because physical access is needed to tamper with data </li></ul><ul><li>Does not require network or internet connection to function because they usually deal with offline data only </li></ul>Web vs Desktop
  9. 9. Common Types Web Applications (Open Source Examples)
  10. 10. <ul><li>Content Management Systems (CMS) </li></ul><ul><li>E-Commerce </li></ul><ul><li>Customer Relationship Management Systems (CRM) </li></ul><ul><li>Forums / Discussion Boards </li></ul>Common Types
  11. 11. <ul><li>Are Web Applications which supply the basic functionalities of a ready-to-deploy dynamic website which deals with articles and content. </li></ul>Content Management Systems
  12. 12. <ul><ul><li>Mambo CMS - </li></ul></ul><ul><li>http://mambo-foundation.org </li></ul><ul><li>MiaCMS - </li></ul><ul><li>http://miacms.org </li></ul><ul><li>Joomla - </li></ul><ul><li>http://joomla.org </li></ul><ul><li>Drupal - http://drupal.org </li></ul>Content Management Systems
  13. 13. <ul><li>Are Web Applications which supply the basic functionalities of a ready-to-deploy E-Commerce Website which serve as an online shopping portal. </li></ul>E-Commerce Systems
  14. 14. <ul><ul><li>OSCommerce - </li></ul></ul><ul><li>http://oscommerce.com </li></ul><ul><li>Magento - </li></ul><ul><li>http://www.magentocommerce.com/ </li></ul>E-Commerce Systems
  15. 15. <ul><li>Are Web Applications mainly used for Customer Support. It is a system where client ' Ticket Complaints ' are managed and resolved </li></ul>Customer Relationship Management Systems
  16. 16. <ul><ul><li>SugarCRM - </li></ul></ul><ul><li>http://sugarcrm.com </li></ul><ul><li>VTiger - </li></ul><ul><li>http://vtiger.com </li></ul>Customer Relationship Management Systems
  17. 17. <ul><li>Are Web Applications mainly used for threaded communication among its community user-base. It is considered as an 'enhanced bulletin board' system due to its similarity with the BBS systems we knew from the late 80's </li></ul>Forums / Discussion Boards
  18. 18. <ul><ul><li>PunBB - </li></ul></ul><ul><li>http://punbb.informer.com/ </li></ul><ul><li>SMF - </li></ul><ul><li>http://www.simplemachines.org/ </li></ul>Forums / Discussion Boards
  19. 19. Layers of a Web Application
  20. 20. Layers: <ul><ul><li>Browser Rendered HTML </li></ul></ul><ul><ul><li>HTML Code </li></ul></ul><ul><ul><li>Script (Server Side) </li></ul></ul>
  21. 21. <ul><ul><li>Browser Rendered HTML </li></ul></ul><ul><ul><li>HTML Code </li></ul></ul><ul><ul><li>Script (Source) </li></ul></ul>
  22. 22. HTTP Request Workflow
  23. 23. REQUEST RESPONSE Server (Host) User (Client)
  24. 24. User (Client) – Actions invoking a Web Request <ul><li>Initial Page Load </li></ul><ul><li>Loading of Media (CSS, Javascript, Images, Flash, Videos etc.) </li></ul><ul><li>Submission of Forms </li></ul><ul><li>Download Requests </li></ul>
  25. 25. Basic Components of a Web Application
  26. 26. Basic Components: <ul><ul><li>Datamodel </li></ul></ul><ul><ul><li>User Interface </li></ul></ul><ul><ul><li>Application Logic </li></ul></ul>
  27. 27. Datamodel: <ul><ul><li>Is where the actual data is stored/retrieved </li></ul></ul><ul><ul><li>Data is stored in tabular format with predefined columns and datatypes </li></ul></ul>
  28. 28. User Interface: <ul><ul><li>Is what the end-user sees. It is commonly a collection of static HTML files (optionally with Javascript/CSS and other media). These Static HTML are commonly called “Theme” or “Template” and where processed Data will be placed upon script processing. </li></ul></ul>
  29. 29. Application Logic: <ul><ul><li>Is the main workhorse of a web application, it interacts with the Datamodel and outputs processed data to the User Interface. </li></ul></ul>
  30. 30. Live Code Demo
  31. 31. The END Contact Info: [email_address]