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

  • 5,131 views
Uploaded on

Basic concepts about Web Design, Web Sites and Web Applications …

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)

More in: Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,131
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
75
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Web Technologies Basics Part 1 - ConceptsNikolay KostovTechnical Trainerhttp://nikolay.itTelerik Software Academyacademy.telerik.com
  • 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. Web Sites andWeb Applications
  • 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. 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. 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. Web 1.0, 2.0, 3.0
  • 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. Web 1.0 9
  • 10. Web 2.0 10
  • 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. Web 2.0 12
  • 13. Web 3.0
  • 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. 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. 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. Web 3.0 Mobility  Everything  Web sites  Information  Services  Everywhere  You only need your phone or tablet  All the time 17
  • 18. Web Browsers and Layout Engines 18
  • 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. 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. 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. 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. Hardware Servers
  • 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. Web ServersApache, IIS, nginx, lighttpd, etc.
  • 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. 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. Client-Server Architecture The Classical Client-Server Model 28
  • 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. 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. The Client-Server Model Client Machine Mobile ClientServer Desktop Client 31
  • 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. 3-Tier / Multi-Tier ArchitecturesClassical Layered Structure of Software Systems
  • 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. 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. 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. Multi-Tier Architecture HTML ASP.NET PHP WCF ORM Database 37
  • 38. MVC (Model- View-Controller)What is MVC and How It Works?
  • 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. MVC Architecture Blueprint 40
  • 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. 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. Service-OrientedArchitecture (SOA)
  • 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. 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. 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. 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. 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. 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. 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