CSCI 116 Introduction to Web Development and PHP

CSCI 116CSCI 116

Introduction to Introduction to Web DevelopmentWeb Development

and PHPand PHP

ObjectivesObjectives

Understand Web developmentUnderstand Web development Learn/review HTMLLearn/review HTML Create your first PHP scriptCreate your first PHP script

22

WWW – Basic TermsWWW – Basic Terms

Web page Web page • A document (file) on the WebA document (file) on the Web

URLURL• Uniform Resource Locator Uniform Resource Locator • A unique address that identifies a Web page A unique address that identifies a Web page • Example: http://mysite.com/index.htmExample: http://mysite.com/index.htm

A Web site A Web site • A collection of related Web pages and filesA collection of related Web pages and files

33

Web Browsers and ServersWeb Browsers and Servers

Web browser Web browser • A program used to display a Web pageA program used to display a Web page• Interprets HTML codeInterprets HTML code• Internet Explorer, Mozilla Firefox, Google Internet Explorer, Mozilla Firefox, Google

ChromeChrome Web server Web server

• A computer that delivers Web pagesA computer that delivers Web pages• ApacheApache• Microsoft Internet Information Services (IIS)Microsoft Internet Information Services (IIS)

44

HTML DocumentsHTML Documents

Web pages are created using Hypertext Web pages are created using Hypertext Markup Language (HTML)Markup Language (HTML)• Defines what and how elements appear in a Defines what and how elements appear in a

Web browserWeb browser• Uses Uses tags tags to format text and insert elementsto format text and insert elements

Tags are enclosed in brackets (< >) Tags are enclosed in brackets (< >) Each opening tag ( < ) has a closing tag ( /> )Each opening tag ( < ) has a closing tag ( /> )

55

<p>This text will appear as bold.</p><p>This text will appear as bold.</p>

Opening tag

Element

Closing tag

Writing Well-Formed DocumentsWriting Well-Formed Documents

XHTML documents must…XHTML documents must…• Include a <!DOCTYPE> declaration Include a <!DOCTYPE> declaration • Include <html>, <head>, and <body> Include <html>, <head>, and <body>

elementselements• Use <html> as the root elementUse <html> as the root element• Place attribute values in quotation marksPlace attribute values in quotation marks• Properly nest all elements Properly nest all elements

77

Sample HTML FileSample HTML File<!DOCTYPE html><html>

<head><title>Toner Cartridge Sales</title>

</head>

<body><h1>Toner Cartridge Sales</h1>

<hr><h2>Lexmark Toner Cartridges</h2><img src="lexmark_logo.gif" ><p><strong>Model #: </strong>LEX 1382100</p><p><strong>Compatibility: </strong>Optra 4049/3112</p><p><strong>Price: </strong>$189.99</p><p><strong>Model #: </strong>LEX 1380520</p><p><strong>Compatibility: </strong>Lexmark 4019/4028</p><p><strong>Price: </strong>$209.00</p> </body>

</html>

88

Sample HTML FileSample HTML File

99

Creating an HTML DocumentCreating an HTML Document

HTML editors HTML editors • Graphical EditorsGraphical Editors

Dreamweaver Dreamweaver Microsoft ExpressionMicrosoft Expression SeaMonkeySeaMonkey

• Text-based editorsText-based editors KomodoKomodo Notepad++Notepad++ UltraEditUltraEdit

Web Communication ProtocolsWeb Communication Protocols

http://www.highline.edu/home/inquire.htmhttp://www.highline.edu/home/inquire.htm

Protocol Domain name Directory FilenameProtocol Domain name Directory Filename

1111

Domain identifierDomain identifier

Publishing Your Web SitePublishing Your Web Site

Web hosting refers to the publication Web hosting refers to the publication of a Web site for public accessof a Web site for public access

Any computer may be a Web serverAny computer may be a Web server• Consider speed, size, and security issuesConsider speed, size, and security issues

Must register a unique domain nameMust register a unique domain name• Master database maintained by InterNICMaster database maintained by InterNIC• http://www.networksolutions.comhttp://www.networksolutions.com

Most ISPs offer Web hostingMost ISPs offer Web hosting

1212

Cascading Style SheetsCascading Style Sheets

W3C recommends using Cascading Style W3C recommends using Cascading Style Sheets to format Web pagesSheets to format Web pages

A single piece of CSS formatting A single piece of CSS formatting information is referred to as a information is referred to as a stylestyle• Example: Text alignmentExample: Text alignment

The term The term cascadingcascading refers to the ability refers to the ability for Web pages to use CSS information for Web pages to use CSS information from more than one sourcefrom more than one source

1313

Understanding Web DevelopmentUnderstanding Web Development

Web developmentWeb development refers to the design of refers to the design of software applications for a Web site software applications for a Web site • Also called Web programmingAlso called Web programming

Different from Different from Web designWeb design• The visual design and creation of Web pagesThe visual design and creation of Web pages

Different from Different from Web page authoringWeb page authoring• The creation and assembly of the The creation and assembly of the content content

that makes up a Web page.that makes up a Web page.

1414

Client/Server ArchitectureClient/Server Architecture Client (“front end”):Client (“front end”):

• Presents an interface to the userPresents an interface to the user• Gathers information from the user and submits it to Gathers information from the user and submits it to

a servera server• Receives, formats, and presents the results Receives, formats, and presents the results

returned from the server returned from the server Server (“back end”)Server (“back end”)

• Fulfills a request for information by managing the Fulfills a request for information by managing the request and serving the requested information to request and serving the requested information to the clientthe client

• May involve communication with a databaseMay involve communication with a database

1515

Client/Server ArchitectureClient/Server Architecture

1616

A two-tier system consists of a client and a serverA two-tier system consists of a client and a server


A three-tier, or multi-tier, system A three-tier, or multi-tier, system consists of three distinct pieces:consists of three distinct pieces:• Client tierClient tier

User-interface tier; A Web browser User-interface tier; A Web browser

• Processing tierProcessing tier Middle tierMiddle tier

• Data storage tierData storage tier The databaseThe database

1717


Client-Side ScriptingClient-Side Scripting

Client-side scripts are programs that Client-side scripts are programs that run on the client tier, in the browserrun on the client tier, in the browser

JavaScriptJavaScript• Allows the development of interactive Web Allows the development of interactive Web

pages and sitespages and sites Create applications such as games or calculatorsCreate applications such as games or calculators Change the contents of a Web page after a Change the contents of a Web page after a

browser has rendered itbrowser has rendered it Create visual effects such as animationCreate visual effects such as animation

• Used in most Web browsersUsed in most Web browsers

1919

Server-Side ScriptingServer-Side Scripting

Server-side scriptsServer-side scripts are executed on a are executed on a Web serverWeb server

Used to develop interactive Web sitesUsed to develop interactive Web sites Supports many types of databasesSupports many types of databases LanguagesLanguages

• ASP.NET (Microsoft)ASP.NET (Microsoft)• JSP (Java)JSP (Java)• Ruby on RailsRuby on Rails• PHPPHP

2020

Server-Side Scripting and PHPServer-Side Scripting and PHP

Use client-side scripting to handle user interface Use client-side scripting to handle user interface processing and light processing, such as processing and light processing, such as

validation; validation;

use server-side scripting for intensive use server-side scripting for intensive calculations and database access.calculations and database access.

2121

Creating Basic PHP ScriptsCreating Basic PHP Scripts

PHP is an embedded scripting languagesPHP is an embedded scripting languages • Code is embedded within a Web pageCode is embedded within a Web page• JavaScript is also embedded, but executes on the clientJavaScript is also embedded, but executes on the client

PHP code executes on the Web serverPHP code executes on the Web server• Server sends the page to the scripting engine for Server sends the page to the scripting engine for

processingprocessing• Server returns results of PHP script along with Server returns results of PHP script along with

HTML/XHTML elements to the clientHTML/XHTML elements to the client PHP code is PHP code is nevernever sent to a client’s Web browser sent to a client’s Web browser

A Web page containing A Web page containing any any PHP code must have PHP code must have a .php extensiona .php extension

2222

Creating PHP Code BlocksCreating PHP Code Blocks

Code declaration blocksCode declaration blocks are blocks are blocks of PHP code within a Web pageof PHP code within a Web page

To declare a PHP block:To declare a PHP block:• Standard PHP script delimitersStandard PHP script delimiters

<?php<?phpstatements;statements;

?>?>

2424

FunctionsFunctions

AA functionfunction refers to a procedure that refers to a procedure that performs a specific taskperforms a specific task

To execute a function, you must call it from To execute a function, you must call it from somewhere in the scriptsomewhere in the script• Function name is always followed by parenthesesFunction name is always followed by parentheses• Parentheses contain any data the function needsParentheses contain any data the function needs• Example: Example:

<?php<?phpecho round(1.567, 2);echo round(1.567, 2);

?>?>

2525

Displaying Script ResultsDisplaying Script Results

To return to the client the results of To return to the client the results of processing that occurs within a PHP code processing that occurs within a PHP code block, use block, use echo()echo() or or print()print()

A text string, is text contained within A text string, is text contained within double or single quotation marksdouble or single quotation marks

2626

print ‘Hello world’;print ‘Hello world’;

echo ‘Hello world’;echo ‘Hello world’;

print “Hello world”;print “Hello world”;

print “Hello ” . “world!”;print “Hello ” . “world!”;

Creating Multiple Code Creating Multiple Code Declaration BlocksDeclaration Blocks

You can have multiple PHP blocks within a You can have multiple PHP blocks within a pagepage

<body><body><h1>Multiple Script Sections</h1><h1>Multiple Script Sections</h1><h2>First Script Section</h2><h2>First Script Section</h2><?php <?php

echo “<p>Output from the first script section.</p>”;echo “<p>Output from the first script section.</p>”;?>?><h2>Second Script Section</h2><h2>Second Script Section</h2><?php <?php

echo “<p>Output from the second script section.</p>”;echo “<p>Output from the second script section.</p>”;?>?></body></body>

2727

Creating Multiple Code Creating Multiple Code Declaration BlocksDeclaration Blocks

PHP code declaration blocks execute on PHP code declaration blocks execute on server before Web page is sent to clientserver before Web page is sent to client

<body><body><h1>Multiple Script Sections</h1><h1>Multiple Script Sections</h1><h2>First Script Section</h2><h2>First Script Section</h2><p>Output from the first script section.</p><p>Output from the first script section.</p><h2>Second Script Section</h2><h2>Second Script Section</h2><p>Output from the second script section.</p><p>Output from the second script section.</p></body></body></html></html>

2828

2929

Adding Comments to a PHP ScriptAdding Comments to a PHP Script

CommentsComments are nonprinting lines placed are nonprinting lines placed in code such as: in code such as: • The name of the scriptThe name of the script• Your name and the program creation date Your name and the program creation date • Explanation of codeExplanation of code

Line commentsLine comments comment a line comment a line• Add Add //// before the text before the text

Block commentsBlock comments comment multiple lines comment multiple lines• Add Add /*/* to the first line of code to the first line of code• And And */*/ after the last character in the code after the last character in the code

3030

Adding Comments to a PHP ScriptAdding Comments to a PHP Script

<?php<?php/*/*

This line is part of the block comment.This line is part of the block comment.This line is also part of the block comment.This line is also part of the block comment.

*/*/

echo “<h1>Comments Example</h1>”; // a headerecho “<h1>Comments Example</h1>”; // a header// This line comment takes up an entire line.// This line comment takes up an entire line.# This is another way of creating a line comment.# This is another way of creating a line comment./* This is another way of creating /* This is another way of creating

a block comment. */a block comment. */?>?>

3131