View
216
Download
0
Category
Tags:
Preview:
Citation preview
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
Client/Server ArchitectureClient/Server Architecture
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/Server ArchitectureClient/Server Architecture
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
Recommended