Web Systems Technologies Chapter 1 Introduction to Dynamic

Web Systems & Technologies Chapter 1 – Introduction to Dynamic Web Content 1

Introduction § Course Objective • Learn to create dynamic websites and applications § Technologies • HTML • PHP • My. SQL • Java. Script • CSS § Textbook • Learning PHP, My. SQL & Java. Script with j. Query, CSS & HTML 5 4 th Edition by Robin Nixon 2

HTTP and HTML § HTTP is a communication standard that governs the requests and responses that take place between the browser and the web server. § HTML is the standard markup language for documents designed to be displayed in a web browser. § Server accepts a request from the client and attempts to reply to it in a meaningful way. • i. e. sending the requested web page. § Client is the computer which generates the request for service. • Term is also applied to the web browser. § There can be several other devices between client and server: • Routers, Proxies, Gateways, and so on. • They ensure that requests and responses are correctly transferred between client and server. 3

Request/Response Procedure 1. Web browser asks the web server to send it a web page. 2. Web server sends back the page. 3. Browser then takes care of displaying the page. 4

The basic client/server request/response sequence 1. 2. 3. 4. 5. 6. 7. You enter http: //server. com into your browser’s address bar. Your browser looks up the IP address for server. com. Your browser issues a request for the home page at server. com. The request crosses the Internet and arrives at the server. com web server. The web server, having received the request, looks for the web page on its disk. The web page is retrieved by the server and returned to the browser. Your browser displays the web page. Domain Name Service - Every machine connected to the internet has an IP address. Usually access web servers by name. 5

A dynamic client/server request/response sequence 4. The web server, having received the request, fetches the home page from its hard disk. 5. The web server notices that homepage incorporates PHP scripting and passes the page to the PHP interpreter. 7. The PHP interpreter executes the PHP code. 8. Some of the PHP contains My. SQL statements, which the PHP interpreter now passes to the My. SQL database engine. 9. The My. SQL database returns the results of the statements to the PHP interpreter. 10. The PHP interpreter returns the results of the executed PHP code, along with the results from the My. SQL database, to the web server. 11. The web server returns the page to the requesting client, which displays it. 6

PHP § PHP is used to embed dynamic activity in web pages. § Pages with. php extension have access to the scripting language. § PHP integrates seamlessly with HTML markup. § PHP gives unlimited control over the web server. • Modify HTML on the fly • Process payments • Connect to a database 7

PHP - Example <? php echo " Today is ". date("l"). ". "; ? > Here's the latest news. § The opening <? php tells the web server to allow the PHP program to interpret all the following code up to the ? > tag. § Everything outside these tags is sent to the client as direct HTML. § The built-in date function within PHP tags displays the current day of the week according to the server’s system time. § Output: Today is Wednesday. Here's the latest news. 8

My. SQL § In the early days of the Web, many sites used text files to store data such as usernames and passwords. § Text files are hard to manage • corruption from multiple simultaneous accesses • difficult to merge files and perform complex searches § Solution is to use relational databases with structured querying language. § My. SQL is open source, free to use, robust and fast database management system. • Database is a collection of two dimentional tables which holds data 9

SQL - Example Table USERS First. Name Last. Name Email INSERT INTO users VALUES('Smith', 'John', 'jsmith@mysite. com'); First. Name Smith Last. Name John Email jsmith@mysite. com 10

SQL - Example § Let’s assume that you have an email address for a user and need to look up that person’s name. To do this, you could issue a My. SQL query such as the following: SELECT firstname, lastname FROM users WHERE email='jsmith@mysite. com'; § My. SQL will then return Smith, John and any other pairs of names that may be associated with that email address in the database. 11

Java. Script § Java. Script was developed to offer dynamic control over the various elements within an HTML document. § It provides a means for dynamic user interaction such as checking email address validity in input forms. § Today mostly Java. Script is being used for Ajax (process of accessing the web server in the background). 12

Java. Script - Example <script type="text/javascript"> document. write("Today is " + Date() ); </script> § Web browser interprets everything within the script tags as Java. Script, which writes the text Today is to the current document along with the output from Java. Script Date function. § Output: Today is Wed Jan 22 2020 03: 35: 45 13

CSS § CSS separates web sites content (HTML) from it’s style. § CSS is an extension to basic HTML that allows you to style any HTML element. • Change its dimensions, colors, borders, spacing, and so on. • Add animated transitions. 14

CSS - Example <style> p { text-align: justify; font-family: Helvetica; } </style> These rules will change the default text alignment of the tag so that paragraphs contained in it will be fully justified and will use the Helvetica font. 15

The Apache Web Server § Apache HTTP Server is an open-source and free web server software. • ~30% marketshare. • Free even for commercial use. • Reliable, stable software. • Community developed and frequently updated. • Cross-platform (works on both Unix and Windows servers). 16

HTML § What is HTML? • Hyper Text Markup Language • Standard markup language for web pages. § HTML is a fairly simple language made up of elements. § When applied to pieces of text HTML elements can: 1. Give them different meaning in a document. (is it a paragraph? is it a bulleted list? is it part of a table? ) 2. Structure a document into logical sections. (does it have a header? three columns of content? a navigation menu? ) 3. Embed content Add images, audio and videos 17

HTML § HTML elements are the building blocks of HTML pages. § HTML elements are represented by tags. § Browsers use HTML tags to determine how to display the content of the page. § Browsers do not display the HTML tags. § HTML code is stored in a simple text file with. html filename extension. § Static web pages are easily designed with only HTML. 18

HTML Tags § HTML tags are element names surrounded by angle brackets: <tagname>content goes here. . . </tagname> § HTML tags normally come in pairs. § The first tag in a pair is the start tag and the second tag is the end tag. § The end tag is written like the start tag, but with a forward slash inserted before the tag name. § Are there any other type of tags? 19

Example <!DOCTYPE html> <head> <title>Page Title</title> </head> <body> <h 1>This is Heading</h 1> This is paragraph </body> </html> 20

HTML Page Structure 21

<!DOCTYPE> Declaration § Represents the document type. § Tells the web browser about the version of HTML. § Helps browsers to display web pages correctly. § Must only appear once at the top of the page. § It is not an HTML tag. § It is not case sensitive. § Example <!DOCTYPE> declaration for HTML 5: <!DOCTYPE html> 22

HTML Documents § All HTML documents must start with a document type declaration: <!DOCTYPE html>. § The HTML document itself begins with <html> and ends with </html>. § The visible part of the HTML document is between <body> and </body>. 23

HTML Elements § An HTML element usually consists of a start tag and end tag, with the content inserted in between: <tagname>Content goes here. . . </tagname> § HTML elements can be nested (elements can contain elements). § All HTML documents consist of nested HTML elements. 24

HTML Attributes § Attributes provide additional information about HTML elements. § All HTML elements can have attributes. § Attributes provide additional information about an element. § Attributes are always specified in the start tag. § Attributes usually come in name/value pairs like: name="value" 25

HTML Attributes § href Attribute • HTML links are defined with the <a> tag. • The link address is specified in the href attribute: <a href="https: //www. w 3 schools. com">This is a link</a> § src Attribute • HTML images are defined with the <img> tag. • The filename of the image source is specified in the src attribute: <img src="img_1. jpg"> 26

HTML Attributes § alt Attribute • The alt attribute specifies an alternative text (can be read), when an image cannot be displayed. <img src="img_mouse. jpg" alt=“Logitech wireless mouse"> § style Attribute • The style attribute is used to specify the styling of an element, like color, font, size etc. I am a paragraph 27

HTML Attributes § title Attribute • The value of the title attribute will be displayed as a tooltip when you mouse over the element. This is a paragraph. 28

HTML Headings § HTML headings are defined with the <h 1> to <h 6> tags. § <h 1> defines the most important heading, <h 6> defines the least important heading. § Each HTML heading has a default size. § The size for any heading can be specified with the style attribute, using the font-size property: <h 1 style="font-size: 60 px; ">Heading 1</h 1> 29

HTML Horizontal Rules § The <hr> element represents a thematic break between paragraph-level elements. § It is used to separate content. § Presented as a horizontal rule. <h 1>This is heading 1</h 1> This is some text. <hr> <h 2>This is heading 2</h 2> This is some other text. <hr> 30

HTML Paragraphs § HTML paragraphs are defined with the tag: This is a paragraph. This is another paragraph. § HTML Line Breaks • The HTML element defines a line break. • Use if you want a line break (a new line) without starting a new paragraph: This is a paragraph with line breaks. 31

HTML Paragraphs § In HTML, spaces and new lines are ignored. § The Poem Problem: Line of poem. Line two of poem. Line three of poem. 32

HTML Paragraphs § The HTML <pre> element defines preformatted text. § The text inside a <pre> element is displayed in a fixed-width font and it preserves both spaces and line breaks: <pre> Line of poem. Line two of poem. Line three of poem. </pre> 33