6. Web Technologies Basics Part 1 - PHP & MySQL Web Development


Published on

Basic concepts about Web Design, Web Sites and Web Applications
Telerik Software Academy: http://academy.telerik.com/school-academy/meetings/details/2011/10/11/php-school-academy-meeting
The website and all video materials are in Bulgarian.

This lecture discusses the following topics:

Web Sites and Web Applications
Web 1.0, 2.0, 3.0
Web Browsers
Hardware Servers
Web Servers
Client-Server Architecture
3-Tier / Multi-Tier Architectures
MVC (Model-View-Controller)
Service-Oriented Architecture (SOA)

Published in: Education, Technology
1 Like
  • Be the first to comment

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

No notes for slide

6. Web Technologies Basics Part 1 - PHP & MySQL Web Development

  1. 1. Web Technologies Basics Part 1 - ConceptsNikolay KostovTechnical Trainerhttp://nikolay.itTelerik Software Academyacademy.telerik.com
  2. 2. Table of Contents Web Sites and Web Applications Web 1.0, 2.0, 3.0 Web Browsers Hardware Servers Web Servers Client-Server Architecture 3-Tier / Multi-Tier Architectures MVC (Model-View-Controller) Service-Oriented Architecture (SOA) 2
  3. 3. Web Sites andWeb Applications
  4. 4. Web Site Collection of related web pages containing web resources (web pages, images, videos, CSS files, JS files or other digital assets) Common navigation between web pages A website is hosted on at least one web server Accessible via a network (such as the Internet) All publicly accessible websites collectively constitute the World Wide Web 4
  5. 5. Web Page Document or information resource that is suitable for the World Wide Web Can be accessed through a web browser and displayed on a monitor or mobile device This information is usually in HTML or XHTML format, and may provide navigation to other web pages via hypertext links Web pages frequently refer to other resources such as style sheets (CSS), scripts (JavaScript) and images into their final presentation 5
  6. 6. Web Application Next level web sites High interactivity High accessibility (Cloud) AJAX, Silverlight, Flash, Flex, etc. Applicationsare usually broken into logical chunks called "tiers", where every tier is assigned a role Desktop-like application in the web browser Web applications on desktop (Windows 8) 6
  7. 7. Web 1.0, 2.0, 3.0
  8. 8. Web 1.0 Old media model It all started with a simple idea  Just put content in the web Low content variety  Limited content  Limited creativity  Limited business 10 000 editors serve 500 000 000 internet users 8
  9. 9. Web 1.0 9
  10. 10. Web 2.0 10
  11. 11. Web 2.0 User generated content New platformsallow users to generate content themselves (YouTube, Wiki, Facebook, Blogs) Everyone can publish! Web 2.0 can be described in 3 parts:  Rich Internet application (RIA)  Web-oriented architecture (WOA)  Feeds, RSS, Web Services, etc.  Social Web 11
  12. 12. Web 2.0 12
  13. 13. Web 3.0
  14. 14. Web 3.0 Web 3.0 is where the computer is generating new information, rather than humans. All the new web 3.0 concepts can be divided into 4 parts:  Semantic web  Artificial intelligence  Personalization  Mobility 14
  15. 15. Web 3.0 Semantic web  Changing the web into a language that can be read and categorized by the computers rather than humans  Makes search engines smarter  Enables digital collection of all your images, blog post, videos, etc.  Disadvantage: it is hard to be implemented 15
  16. 16. Web 3.0 Artificial intelligence  Extracting meaning from the way people interact with the web  Examples: google suggest, google translate Personalization  Contextualizing the web based on the people using it  Different content for different users 16
  17. 17. Web 3.0 Mobility  Everything  Web sites  Information  Services  Everywhere  You only need your phone or tablet  All the time 17
  18. 18. Web Browsers and Layout Engines 18
  19. 19. Web Browsers Program designed to enable users to access, retrieve and view documents and other resources on the Internet Main responsibilities:  Bring information resources to the user (issuing requests to the web server and handling any results generated by the request)  Presenting web content (render HTML, CSS, JS)  Capable of executing applications within the same context as the document on view (Flash) 19
  20. 20. Layout Engines Software component that displays the formatted content on the screen combining:  Marked up content (such as HTML, XML, image files, etc.)  Formatting information (such as CSS, XSL, etc.) It "paints" on the content area of a window, which is displayed on a monitor or a printer Typicallyembedded in web browsers, e-mail clients, on-line help systems or other applications that require the displaying (and editing) of web content 20
  21. 21. Layout Engines and Web Browsers Trident-based  Internet Explorer, Netscape, Maxthon, etc. Gecko-based  Firefox, Netscape, SeaMonkey, etc. WebKit-based  Chrome, Safari, Maxthon, etc. Presto-based  Opera 21
  22. 22. User Agent Strings Identify web browsers and their version Can have some additional information like layout engine, users operating system, etc. Example: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:7.0.1) Gecko/20100101 Firefox/7.0.1  Web browser: Firefox 7.0.1  Rendering (layout) engine: Gecko/20100101  Operating system: 64-bit Windows 7  WOW64 = Windows-On-Windows 64-bit  Windows NT 6.1 = Windows 7
  23. 23. Hardware Servers
  24. 24. Hardware Servers Physical computer (a hardware system) dedicated to running one or more such services Servers are placed in collocation centers The server may be:  Database server  File server  Mail server  Print server  VPS servers 24
  25. 25. Web ServersApache, IIS, nginx, lighttpd, etc.
  26. 26. What Do the Web Servers Do? All physical servers have hardware The hardware is controlled by the operating system Web serversare software products that use the operating system to handle web requests These requests are redirected to other software products (ASP.NET, PHP, etc.), depending on the web server settings 26
  27. 27. Web Servers Market Share 2011 Apache  60.31% IIS (by Microsoft)  19.34% nginx (by Igor Sysoev)  7.65% GWS (by Google)  5.09% lighttpd  0.60% 27
  28. 28. Client-Server Architecture The Classical Client-Server Model 28
  29. 29. Client-Server Architecture The client-server model consists of:  Server – a single machine or cluster of machines that provides web applications (or services) to multiple clients  Examples:  Web server running PHP scripts or ASP.NET pages  IIS based Web server  WCF based service  Services in the cloud 29
  30. 30. Client-Server Architecture The client-server model consists of:  Clients –software applications that provide UI (front-end) to access the services at the server  Examples:  Web browsers  WPF applications  HTML5 applications  Silverlight applications  ASP.NET consuming services 30
  31. 31. The Client-Server Model Client Machine Mobile ClientServer Desktop Client 31
  32. 32. Client-Server Model – Examples Web server (Apache, IIS) – Web browser FTP server (ftpd) – FTP client (FileZilla) EMail server (qmail) – email client (Outlook) SQL Server – SQL Server Management Studio BitTorrent Tracker – Torrent client (μTorrent) DNS server (bind) – DNS client (resolver) DHCP server (wireless router firmware) – DHCP client (mobile phone /Android DHCP client/) SMB server (Windows) – SMB client (Windows) 32
  33. 33. 3-Tier / Multi-Tier ArchitecturesClassical Layered Structure of Software Systems
  34. 34. The 3-Tier Architecture The 3-tier architecture consists of the following tiers (layers):  Front-end (client layer)  Client software – provides the UI of the system  Middle tier (business layer)  Server software – provides the core system logic  Implements the business processes / services  Back-end (data layer)  Manages the data of the system (database / cloud) 34
  35. 35. The 3-Tier Architecture ModelData Tier Middle Tier Client Tier (Front-End)(Back-End) (Business Tier) Client Machine Mobile Client Database Business Logic Desktop Client 35
  36. 36. Typical Layers of the Middle Tier The middle tier usually has parts related to the front-end, business logic and back-end: Presentation Logic Implements the UI of the application (HTML5, Silverlight, WPF, …) Business Logic Implements the core processes / services of the application Data Access Logic Implements the data access functionality (usually ORM framework) 36
  37. 37. Multi-Tier Architecture HTML ASP.NET PHP WCF ORM Database 37
  38. 38. MVC (Model- View-Controller)What is MVC and How It Works?
  39. 39. Model-View-Controller (MVC) Model-View-Controller (MVC) architecture  Separates the business logic from application data and presentation Model  Keeps the application state (data) View  Displays the data to the user (shows UI) Controller  Handles the interaction with the user 39
  40. 40. MVC Architecture Blueprint 40
  41. 41. MVC-Based Frameworks .NET  ASP.NET MVC, MonoRail Java  JavaServer Faces (JSF), Struts, Spring Web MVC, Tapestry, JBoss Seam, Swing PHP  CakePHP, Symfony, Zend, Joomla, Yii, Mojavi Python  Django, Zope Application Server, TurboGears Ruby on Rails 41
  42. 42. MVC and Multi-Tier Architecture MVC does not replace the multi- Controllers Views tier architecture (Business Logic) (Presentation)  Both are usually used together Model (Data) Typical multi- tier architecture Data Access Logic can use MVC  To separate logic, data and presentation 42
  43. 43. Service-OrientedArchitecture (SOA)
  44. 44. What is a Service? In the real world a "service" is:  A piece of work performed by a service provider  Provides a client (consumer) some desired result by some input parameters  The requirements and the result are known  Easy to use  Always available  Has quality characteristics (price, execution time, constraints, etc.) 44
  45. 45. Service-Oriented Applications Service-oriented applications resemble the service-consumer model in the real world  Consist of service provider (server side) and service consumer (client part)  Typical examples are the RIA  Service providers provide some service  Service consumers access the services  Standard protocols are used like XML, JSON, SOAP, WSDL, RSS, HTTP, … 45
  46. 46. What is SOA? SOA (Service-Oriented Architecture) is a concept for development of software systems  Using reusable building blocks (components) called "services" Services in SOA are:  Autonomous  Stateless business functions  Accept requests and return responses  Use well-defined, standard interface 46
  47. 47. SOA Services Autonomous  Each service operates autonomously  Without any awareness that other services exist Stateless  Have no memory, do not remember state  Easy to scale Request-response model  Client asks, server returns an answer 47
  48. 48. SOA Services (2) Communication through standard protocols  XML, SOAP, JSON, RSS, ...  HTTP, FTP, SMTP, RPC, MSMQ, ... Not dependent on OS, platforms, programming languages Discoverable  Service registries 48
  49. 49. Web Technologies Basics курсове и уроци по програмиране, уеб дизайн – безплатно BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране – Телерик академия форум програмиране, форум уеб дизайн уроци по програмиране и уеб дизайн за ученици ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NET http://academy.telerik.com програмиране за деца – безплатни курсове и уроци ASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC безплатен SEO курс - оптимизация за търсачки алго академия – състезателно програмиране, състезаниякурсове и уроци по програмиране, книги – безплатно от Наков курс мобилни приложения с iPhone, Android, WP7, PhoneGap уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop Дончо Минков - сайт за програмиране free C# book, безплатна книга C#, книга Java, книга C# Николай Костов - блог за програмиране безплатен курс "Качествен програмен код" безплатен курс "Разработка на софтуер в cloud среда" C# курс, програмиране, безплатно
  50. 50. Free Trainings @ Telerik Academy “PHP & MySQL Web Design" course academy.telerik.com/.../php-school- academy-meeting Telerik Software Academy  academy.telerik.com Telerik Academy @ Facebook  facebook.com/TelerikAcademy Telerik Software Academy Forums  forums.academy.telerik.com