Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence
Brief Course Overview An introduction to Web development Server-side Scripting Web Servers PHP Client-side Scripting HTML & CSS JavaScript & AJAX Bringing it all together 2
1. Introduction to Web Development
Introduction There are more than 2 billion Internet users world wide that s approximately 30% of the Earth s population 1 In use today: There are more than a billion general-purpose computers Billions more embedded computers are used in cell phones, smartphones, tablet computers, home appliances, automobiles and more many of these devices are connected to the Internet creating an Internet of Things (IoT) 1 www.internetworldstats.com/stats.htm 4
Introduction According to Cisco Internet Business Solutions Group 2 : 12.5 billion Internet-enabled devices in 2010 Predicted to reach 25 billion by 2015 Predicted to reach 50 billion by 2020 All these statistics show the importance of developing Web pages and applications Most important, Web pages and applications must be portable that run across an enormous range of Internet-enabled devices 2 www.cisco.com/web/about/ac79/docs/innov/iot_ibsg_0411final.pdf 5
What is Web Development? Web Development refers to developing Web pages and applications for the Internet (the World Wide Web) or an intranet (a private network) It ranges from developing static pages of plain text to the most complex web-based internet applications, electronic businesses, and social network services Tasks in Web Development involve (but not limited to): Web design Web content development Client-side/Server-side scripting 6
What is Web Development? Amongst Web professionals, the term Web Development usually refers to the non-design aspects of building web sites: writing markup and coding In this course, we will mainly focus on Client-side and Server-side scripting aspects of Web Development 7
World Wide Web (WWW) The World Wide Web allows computer users to: Execute web-based applications Locate and view multimedia-based documents on almost any subject over the Internet In 1989, Tim Berners-Lee of CERN (the European Organization for Nuclear Research) began to develop a technology for sharing information via hyperlinked text documents Berners-Lee called his invention the HyperText Markup Language (HTML) a markup language to specify the content and structure of web pages 8
World Wide Web (WWW) He also wrote communication protocols to form the backbone of his new information system, which he called the World Wide Web In particular, Berners-Lee wrote the HyperText Transfer Protocol (HTTP) a communications protocol used to send information over the web The Uniform Resource Locator (URL) specifies the address (i.e. the location) of the web page displayed in the browser window Each web page is associated with a unique URL which usually begins with http:// 9
World Wide Web (WWW) HyperText Transfer Protocol Secure (HTTPS) is the standard for transferring encrypted data on the web HTTPS combines HTTP with the Secure Sockets Layer (SSL) and the more recent Transport Layer Security (TLS) cryptographic schemes for securing communications and identification information over the web Although there are many benefits of using HTTPS, it might suffer some performance issues because encryption and decryption consume significant computer processing resources 10
Web Basics A web page is nothing more than an HTML document (with the extension.html or.htm) that describes to a web browser the document s content and structure HTML documents normally contain hyperlinks which when clicked, load a specified web document Both images and text may be hyperlinked Often hyperlinked text appears underlined and in a different colour from regular text in a web page 11
Web Basics Originally employed as a publishing tool for scientific research, hyperlinks are widely used to reference sources, or sites that have more information on a particular topic The paths created by hyperlinking create the effect of the web also known as the Web of Documents When the user clicks a hyperlink, a web server locates the requested web page and sends it to the user s web browser 12
Web Basics Uniform Resource Identifiers (URIs) identify resources on the Internet Resources can be Web content, software programs etc. URIs that start with http:// are called URLs (Uniform Resource Locators) Common URLs refer to files, directories or serverside code that performs tasks such as database lookups, Internet searches and business-application processing 13
Web Basics A URL contains information that directs a browser to the resource that the user wishes to access Web servers make such resources available to web clients Popular web servers include Apache s HTTP server and Microsoft s Internet Information Services (IIS) Let s examine the components of the URL: http://www.um.edu.mt/ict/ics 14
Web Basics http:// indicates that the HyperText Transfer Protocol (HTTP) should be used to obtain the resource www.um.edu.mt is the server s fully qualified hostname i.e. the name of the web-server computer on which the resource resides This computer is known as the host because it houses and maintains resources The hostname www.um.edu.mt is translated into an IP (Internet Protocol) address a numerical value that uniquely identifies the server on the internet 15
Web Basics An Internet Domain Name System (DNS) server maintains a database of hostnames and their corresponding IP addresses and performs the translations automatically The remainder of the URL /ict/ics specifies the resource s location Making a Request and Receiving a Response: Given a web page URL, a web browser uses HTTP to request the web page found at that address 16
Web Basics The web browser sends an HTTP request to the server using GET, an HTTP method 17
Web Basics The web server responds to the request 18
Web Basics The Request/Response Procedure: 19
Web Basics Server s Response: The server first sends a line of text that indicates the HTTP version, followed by a numeric code and a phrase describing the status of the transaction HTTP/1.1 200 OK indicates success HTTP/1.1 404 Not found indicates the web server could not locate the requested resource Next, the server sends one or more HTTP headers, which provide additional information about the data that will be sent Content-type: text/html indicates that the server is sending a text document 20
Web Basics Server s Response (contd.): The information provided in this header specifies the Multipurpose Internet Mail Extensions (MIME) type of the content is transmitting to the browser The MIME standard specifies the data formats which programs can use to interpret data correctly The header is followed by a blank line, which indicates to the client that the server is finished sending HTTP headers Finally, the server sends the contents of the requested document 21
Web Basics HTTP GET and POST Requests: Two most common HTTP request types (request methods): get and post! GET: A get request typically gets (or retrieves) information from a server. Examples: HTML document, an image or search results POST: A post request typically posts (or sends) data to a server. Example: to send form data or documents to a server 22
Web Basics Client-Side Caching: Browsers often cache (save on disk) recently viewed web pages for quick reloading If there are no changes between the version stored in the cache and the current version on the web, this speeds up your browsing experience since the browser loads the document from the cache Browsers typically do not cache the server s response to a post request because the next post might not return the same result! 23
Multitier Application Architecture Web-based applications are often multitier applications (sometimes referred to as n-tier applications) that divide functionality into separate tiers Although tiers can be located on the same computer, the tiers of web-based applications often reside on separate computers 24
Multitier Application Three-tier architecture: Architecture 25
Multitier Application Architecture Three-tier architecture: Bottom tier: also called the data tier or information tier maintains the application s data Typically stores data in a relational database management system (RDBMS) Middle tier: implements the business logic, controller logic and presentation logic The middle tier acts as an intermediary between data in the information tier and the application s clients The controller logic processes client requests and retrieves data from the database 26
Multitier Application Architecture Three-tier architecture (contd.): The presentation logic then processes data from the information tier and presents the content to the client The business logic enforces business rules and ensures that data is reliable before the application updates a database or presents data to users Business rules dictate how clients access data and how applications process data Example: in a product catalogue web-application, a business rule might ensure that all product quantities remain positive 27
Multitier Application Architecture Three-tier architecture (contd.): Top tier: the top tier, or client tier, is the application s user interface which gather input and displays output Examples of user interfaces: web browser or a mobile device 28
Client-Side Scripting versus Server-Side Scripting Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e. in the browser on the user s device) Server-Side scripting involves programming applications that reside and run on the server that respond to requests from client-side web browsers, such as searching the Internet, checking your bankaccount balance, ordering a book from Amazon, bidding on an ebay auction etc. 29
Client-Side Scripting versus Server-Side Scripting Client-side scripting can be used: Validate user input Interact with the browser Enhance web pages Add client/server communication between a browser and a web server Client-side scripting does have limitations such as browser dependency the browser or scripting host must support the scripting language and capabilities 30
Client-Side Scripting versus Server-Side Scripting Client-side scripts are restricted from accessing the local hardware and file system (for security reasons) Client-side scripts can be viewed by the client by using the browser s source-viewing capability Sensitive information, such as passwords or other personally identifiable data should not be on the client All client-side data validation should be mirrored on the server 31
Client-Side Scripting versus Server-Side Scripting Placing certain operations on the client can open web applications to security issues Server-side scripting languages have a wider range of programmatic capabilities than their client-side equivalents Server-side scripts also have access to server-side software that extends server functionalities Server-side scripts cannot be viewed by the clients, unlike client-side scripts 32
Types of Programming Languages High-level languages were developed in which single statements could be written to accomplish substantial tasks High-level languages allow you to write instructions that look almost like everyday English and contain commonly used mathematical expressions Translator programs called compilers convert highlevel language programs into machine language Machine language consists of numbers (ultimately reduced to 1s and 0s) that are understandable by computers and cumbersome for humans 33
Types of Programming Languages The process of compiling a large high-level language program into machine language can take considerable amount of computer time Interpreter programs were developed to execute high-level language programs directly, although more slowly than compiled programs Interpreters have an advantage over compilers in Internet scripting An interpreted program can begin executing as soon as it s downloaded to the client s machine, without needing to be compiled before it can execute On the downside, interpreted scripts generally run slower than compiled code 34
Types of Programming Languages In this course, we will be looking at several key scripting languages which are processed by interpreters 35
Client-Side Technologies We will be looking at client-side technologies used to develop web pages and applications that are run on the client (i.e. in the browser on the user s device) Some client-side technologies: HyperText Markup Language (HTML) A markup language designed to specify the content and structure of web pages (also called Web documents) HTML enables you to create content that will render appropriately across the range of devices connected to the Internet 36
Client-Side Technologies HyperText Markup Language (HTML) contd.: A stricter version of HTML, called XHTML (extensible Hypertext Markup Language), was developed to make HTML more extensible and increase interoperability with other data formats by using XML However, in 2009 W3C 3 acknowledged that HTML5 would be the sole next-generation HTML standard, including both XML and non-xml serialisations Cascading Style Sheets (CSS) Specify the presentation or styling, of elements on a web page (eg: fonts, spacing, sizes, colours, positioning) 3 World Wide Web Consortium (W3C) 37
Client-Side Technologies Cascading Style Sheets (CSS) contd.: CSS was designed to style portable web pages independently of their content and structure Separating page styling from page content and structure, you can easily change the look and feel of the pages on an entire website or a portion of a website, by simply swapping out one style sheet for another CSS3 is the current version 38
Client-Side Technologies JavaScript JavaScript is an interpreted programming language that helps you build dynamic web pages (pages that can be modified on the fly in response to events, such as user input, time changes etc.) and computer applications JavaScript is a portable scripting language and can run in web browsers across a wide range of devices JavaScript enables the developer to do client-side programming of Web applications JavaScript is unrelated with Java and has very different semantics (although JavaScript copies many names and naming conventions from Java) 39
Client-Side Technologies AJAX An acronym for Asynchronous JavaScript and XML A group of interrelated Web development techniques used on the client-side to create asynchronous web applications With AJAX, Web applications can send data to and retrieve data from a server in the background without interfering with the display and behaviour of the existing page Data can be retrieved using the XMLHttpRequest object 40
Server-Side Technologies We will be looking at server-side technologies used to develop applications that respond requests from client-side web browsers Some server-side technologies: PHP: Hypertext Preprocessor An object-oriented, open source scripting language supported by a community of users and developers It is used by numerous websites including Wikipedia and Facebook It is platform independent implementations exist for all major UNIX, Linux, Mac and Windows operating systems 41
Server-Side Technologies PHP: Hypertext Preprocessor (contd.): PHP supports many databases including MySQL Two other popular languages similar in concept to PHP are Pearl and Python 42
Next Lecture We will start off with Server-Side Scripting We will look at: Different types of Web Servers Configuring PHP and Apache HTTP Server The PHP programming language 43