CPSC 481: CREATIVE INQUIRY TO WSBF J. Yates Monteith, Fall 2013.
Post on 25-Dec-2015
219 Views
Preview:
Transcript
CPSC 481 CREATIVE INQUIRY TO WSBF
J Yates Monteith Fall 2013
Schedule
HTML and CSS PHP
HTML
Hypertext Markup Language Markup Language Does not execute any
computation ldquoMarks uprdquo text Decorates it Browser
reads markup and interprets it graphically Standardized and specified by the W3C
Marks up code specified between lttaggt and lttaggt
HTML History
Version 20 1996 by the IETF HTML Working Group
Version 32 January 1997 by the W3C
HTML 4 December 1997 by the W3C Added Cascading Style Sheets (CSS)
HTML 401 (What we use) December 1999
XHTML 10 January 2000
HTML 5 Working Draft published in January 2008 W3C Adds new elements and functionality
Structure of HTML Document HTML Section
Contains all HTML tags in the document Enclosed within the lthtmlgt hellip lthtmlgt tags
Head section Contains meta-information and information not
displayed within the body of the webpage Enclosed in the ltheadgt hellip ltheadgt tags
Body section Contains all markup code and text to be displayed
in the webpage Enclosed in the ltbodygt hellip ltbodygt tags
Structure
lthtmlgtltheadgthellipltheadgtltbodygthellipltbodygt
lthtmlgt
Tag Structure
lttagtypegt The tag determines what the markup is The tagtype is followed by a set of standard
attributes The standard attributes are followed by a
set of optional attributes
Head Section
Contains meta-data about page lttitlegt tags which specify the window title ltmetagt tags which describe the HTML
character set encoding of the document along with keywords
ltlinkgt tags which specify linking the document with the webpage in question Used for loading various files and style sheets
Body Section
Contains all the text of the webpage plus any imbedded Javascript PHP CSS etchellip
Paragraph tag ltpgt
Defines a paragraph Primarily used to add style to text (more
on this later) Optional Attributes None Standard Attributes
Class dir id lang style title xmllang
Linebreak ltbr gt
Introduces a single whitespace line break
Optional Attributes None Standard Attributes
Class id style title
Anchor tag ltagt
Creates a link to another document by using the href attribute
Creates a bookmark inside a document by using the name attribute
Optional Attributes Charset coords href hreflang name rel rev
shape target Standard Attributes
Accesskey class dir id lang style tabindex title xmllang
Example
lta href=ldquowwwgooglecomgtGoogleltagt Results in
Img tag
ltimggt Displays an image in an html page Required attributes
src which specifies where the image is located alt which specifies mouse-over text for the
image Optional Attributes
Ismap longdesc usemap vspace width Standard Attributes
Class dir id lang style title xmllang
Example
ltimg src=ldquoimagesimg1jpgrdquo alt=ldquoAn imagerdquo gt
Div
Defines a division or a section in an HTML section Groups block-elements to format them with
styles Optional Attributes
None Standard Attributes
Class dir id lang style title xmllang Used often for specifying where
elements go on a page and how they will be styled with CSS
Span
The ltspangt tag is used to group inline-elements in a document
Provides no visual effect by itself Provides a lsquohookrsquo which can be modified
or marked up via JavaScript etc Optional Attributes
Class dir id lang style title xmllang
Table
lttablegt hellip lttablegt encodes a table in HTML Can be an NxM Table that encodes and marks
up additional text Contains three tagged elements within it to
create the cells ltthgt ndash table header lttrgt - table row lttdgt - table cell
Tables are a great way to represent data Horrible way to format and organize an entire webpage
lttrgt
Encodes a row of a table Contains one ore more ltthgt or lttdgt elements
Optional Attributes Align char charoff valign
Standard Attributes Class dir id lang style title xmllang
ltthgt
Defines a header cell in a HTML table Text is bolded and centered by default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
lttdgt
Defines columns within a table Text is non-bolded and left-aligned by
default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
Example
lttablegt
lttrgt
ltthgtColumn 1ltthgt
ltthgtColumn 2ltthgt
lttrgt
lttrgt
lttdgtValue 1lttdgt
lttdgtValue 2lttdgt
lttrgt
lttablegt
Stylinghellip
So by default all of this stuff looks like crap Enter Cascading Style Sheets (CSS) CSS is used to format how things look in a
browser better than HTML was able to natively
Can be done 3 ways In-line as an attribute of a tag Defining an internal stylesheet of classes and
assigning classes to tags By defining a file with classes and including the
file and assigning the classes to the tags
External or Linked Style
Included within the head section of your document
Can include multiple styles but be careful not to have naming conflicts
ltheadgt ltlink rel=stylesheet type=textcss href=mystylecss gtltheadgt
Contents of mystylecsshr colorsiennap margin-left20pxbody background-imageurl(imagesback40gif)
Internal Stylesheets
Included in the Header section of your document
ltheadgt ltstyle type=textcssgt hr colorsienna p margin-left20px body background-imageurl(imagesback40gif) ltstylegtltheadgt
Inline
Specified for each HTML element under the style=ldquohelliprdquo attribute
ltp style=colorsiennamargin-left20pxgtThis is a paragraphltpgt
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Schedule
HTML and CSS PHP
HTML
Hypertext Markup Language Markup Language Does not execute any
computation ldquoMarks uprdquo text Decorates it Browser
reads markup and interprets it graphically Standardized and specified by the W3C
Marks up code specified between lttaggt and lttaggt
HTML History
Version 20 1996 by the IETF HTML Working Group
Version 32 January 1997 by the W3C
HTML 4 December 1997 by the W3C Added Cascading Style Sheets (CSS)
HTML 401 (What we use) December 1999
XHTML 10 January 2000
HTML 5 Working Draft published in January 2008 W3C Adds new elements and functionality
Structure of HTML Document HTML Section
Contains all HTML tags in the document Enclosed within the lthtmlgt hellip lthtmlgt tags
Head section Contains meta-information and information not
displayed within the body of the webpage Enclosed in the ltheadgt hellip ltheadgt tags
Body section Contains all markup code and text to be displayed
in the webpage Enclosed in the ltbodygt hellip ltbodygt tags
Structure
lthtmlgtltheadgthellipltheadgtltbodygthellipltbodygt
lthtmlgt
Tag Structure
lttagtypegt The tag determines what the markup is The tagtype is followed by a set of standard
attributes The standard attributes are followed by a
set of optional attributes
Head Section
Contains meta-data about page lttitlegt tags which specify the window title ltmetagt tags which describe the HTML
character set encoding of the document along with keywords
ltlinkgt tags which specify linking the document with the webpage in question Used for loading various files and style sheets
Body Section
Contains all the text of the webpage plus any imbedded Javascript PHP CSS etchellip
Paragraph tag ltpgt
Defines a paragraph Primarily used to add style to text (more
on this later) Optional Attributes None Standard Attributes
Class dir id lang style title xmllang
Linebreak ltbr gt
Introduces a single whitespace line break
Optional Attributes None Standard Attributes
Class id style title
Anchor tag ltagt
Creates a link to another document by using the href attribute
Creates a bookmark inside a document by using the name attribute
Optional Attributes Charset coords href hreflang name rel rev
shape target Standard Attributes
Accesskey class dir id lang style tabindex title xmllang
Example
lta href=ldquowwwgooglecomgtGoogleltagt Results in
Img tag
ltimggt Displays an image in an html page Required attributes
src which specifies where the image is located alt which specifies mouse-over text for the
image Optional Attributes
Ismap longdesc usemap vspace width Standard Attributes
Class dir id lang style title xmllang
Example
ltimg src=ldquoimagesimg1jpgrdquo alt=ldquoAn imagerdquo gt
Div
Defines a division or a section in an HTML section Groups block-elements to format them with
styles Optional Attributes
None Standard Attributes
Class dir id lang style title xmllang Used often for specifying where
elements go on a page and how they will be styled with CSS
Span
The ltspangt tag is used to group inline-elements in a document
Provides no visual effect by itself Provides a lsquohookrsquo which can be modified
or marked up via JavaScript etc Optional Attributes
Class dir id lang style title xmllang
Table
lttablegt hellip lttablegt encodes a table in HTML Can be an NxM Table that encodes and marks
up additional text Contains three tagged elements within it to
create the cells ltthgt ndash table header lttrgt - table row lttdgt - table cell
Tables are a great way to represent data Horrible way to format and organize an entire webpage
lttrgt
Encodes a row of a table Contains one ore more ltthgt or lttdgt elements
Optional Attributes Align char charoff valign
Standard Attributes Class dir id lang style title xmllang
ltthgt
Defines a header cell in a HTML table Text is bolded and centered by default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
lttdgt
Defines columns within a table Text is non-bolded and left-aligned by
default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
Example
lttablegt
lttrgt
ltthgtColumn 1ltthgt
ltthgtColumn 2ltthgt
lttrgt
lttrgt
lttdgtValue 1lttdgt
lttdgtValue 2lttdgt
lttrgt
lttablegt
Stylinghellip
So by default all of this stuff looks like crap Enter Cascading Style Sheets (CSS) CSS is used to format how things look in a
browser better than HTML was able to natively
Can be done 3 ways In-line as an attribute of a tag Defining an internal stylesheet of classes and
assigning classes to tags By defining a file with classes and including the
file and assigning the classes to the tags
External or Linked Style
Included within the head section of your document
Can include multiple styles but be careful not to have naming conflicts
ltheadgt ltlink rel=stylesheet type=textcss href=mystylecss gtltheadgt
Contents of mystylecsshr colorsiennap margin-left20pxbody background-imageurl(imagesback40gif)
Internal Stylesheets
Included in the Header section of your document
ltheadgt ltstyle type=textcssgt hr colorsienna p margin-left20px body background-imageurl(imagesback40gif) ltstylegtltheadgt
Inline
Specified for each HTML element under the style=ldquohelliprdquo attribute
ltp style=colorsiennamargin-left20pxgtThis is a paragraphltpgt
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
HTML
Hypertext Markup Language Markup Language Does not execute any
computation ldquoMarks uprdquo text Decorates it Browser
reads markup and interprets it graphically Standardized and specified by the W3C
Marks up code specified between lttaggt and lttaggt
HTML History
Version 20 1996 by the IETF HTML Working Group
Version 32 January 1997 by the W3C
HTML 4 December 1997 by the W3C Added Cascading Style Sheets (CSS)
HTML 401 (What we use) December 1999
XHTML 10 January 2000
HTML 5 Working Draft published in January 2008 W3C Adds new elements and functionality
Structure of HTML Document HTML Section
Contains all HTML tags in the document Enclosed within the lthtmlgt hellip lthtmlgt tags
Head section Contains meta-information and information not
displayed within the body of the webpage Enclosed in the ltheadgt hellip ltheadgt tags
Body section Contains all markup code and text to be displayed
in the webpage Enclosed in the ltbodygt hellip ltbodygt tags
Structure
lthtmlgtltheadgthellipltheadgtltbodygthellipltbodygt
lthtmlgt
Tag Structure
lttagtypegt The tag determines what the markup is The tagtype is followed by a set of standard
attributes The standard attributes are followed by a
set of optional attributes
Head Section
Contains meta-data about page lttitlegt tags which specify the window title ltmetagt tags which describe the HTML
character set encoding of the document along with keywords
ltlinkgt tags which specify linking the document with the webpage in question Used for loading various files and style sheets
Body Section
Contains all the text of the webpage plus any imbedded Javascript PHP CSS etchellip
Paragraph tag ltpgt
Defines a paragraph Primarily used to add style to text (more
on this later) Optional Attributes None Standard Attributes
Class dir id lang style title xmllang
Linebreak ltbr gt
Introduces a single whitespace line break
Optional Attributes None Standard Attributes
Class id style title
Anchor tag ltagt
Creates a link to another document by using the href attribute
Creates a bookmark inside a document by using the name attribute
Optional Attributes Charset coords href hreflang name rel rev
shape target Standard Attributes
Accesskey class dir id lang style tabindex title xmllang
Example
lta href=ldquowwwgooglecomgtGoogleltagt Results in
Img tag
ltimggt Displays an image in an html page Required attributes
src which specifies where the image is located alt which specifies mouse-over text for the
image Optional Attributes
Ismap longdesc usemap vspace width Standard Attributes
Class dir id lang style title xmllang
Example
ltimg src=ldquoimagesimg1jpgrdquo alt=ldquoAn imagerdquo gt
Div
Defines a division or a section in an HTML section Groups block-elements to format them with
styles Optional Attributes
None Standard Attributes
Class dir id lang style title xmllang Used often for specifying where
elements go on a page and how they will be styled with CSS
Span
The ltspangt tag is used to group inline-elements in a document
Provides no visual effect by itself Provides a lsquohookrsquo which can be modified
or marked up via JavaScript etc Optional Attributes
Class dir id lang style title xmllang
Table
lttablegt hellip lttablegt encodes a table in HTML Can be an NxM Table that encodes and marks
up additional text Contains three tagged elements within it to
create the cells ltthgt ndash table header lttrgt - table row lttdgt - table cell
Tables are a great way to represent data Horrible way to format and organize an entire webpage
lttrgt
Encodes a row of a table Contains one ore more ltthgt or lttdgt elements
Optional Attributes Align char charoff valign
Standard Attributes Class dir id lang style title xmllang
ltthgt
Defines a header cell in a HTML table Text is bolded and centered by default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
lttdgt
Defines columns within a table Text is non-bolded and left-aligned by
default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
Example
lttablegt
lttrgt
ltthgtColumn 1ltthgt
ltthgtColumn 2ltthgt
lttrgt
lttrgt
lttdgtValue 1lttdgt
lttdgtValue 2lttdgt
lttrgt
lttablegt
Stylinghellip
So by default all of this stuff looks like crap Enter Cascading Style Sheets (CSS) CSS is used to format how things look in a
browser better than HTML was able to natively
Can be done 3 ways In-line as an attribute of a tag Defining an internal stylesheet of classes and
assigning classes to tags By defining a file with classes and including the
file and assigning the classes to the tags
External or Linked Style
Included within the head section of your document
Can include multiple styles but be careful not to have naming conflicts
ltheadgt ltlink rel=stylesheet type=textcss href=mystylecss gtltheadgt
Contents of mystylecsshr colorsiennap margin-left20pxbody background-imageurl(imagesback40gif)
Internal Stylesheets
Included in the Header section of your document
ltheadgt ltstyle type=textcssgt hr colorsienna p margin-left20px body background-imageurl(imagesback40gif) ltstylegtltheadgt
Inline
Specified for each HTML element under the style=ldquohelliprdquo attribute
ltp style=colorsiennamargin-left20pxgtThis is a paragraphltpgt
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
HTML History
Version 20 1996 by the IETF HTML Working Group
Version 32 January 1997 by the W3C
HTML 4 December 1997 by the W3C Added Cascading Style Sheets (CSS)
HTML 401 (What we use) December 1999
XHTML 10 January 2000
HTML 5 Working Draft published in January 2008 W3C Adds new elements and functionality
Structure of HTML Document HTML Section
Contains all HTML tags in the document Enclosed within the lthtmlgt hellip lthtmlgt tags
Head section Contains meta-information and information not
displayed within the body of the webpage Enclosed in the ltheadgt hellip ltheadgt tags
Body section Contains all markup code and text to be displayed
in the webpage Enclosed in the ltbodygt hellip ltbodygt tags
Structure
lthtmlgtltheadgthellipltheadgtltbodygthellipltbodygt
lthtmlgt
Tag Structure
lttagtypegt The tag determines what the markup is The tagtype is followed by a set of standard
attributes The standard attributes are followed by a
set of optional attributes
Head Section
Contains meta-data about page lttitlegt tags which specify the window title ltmetagt tags which describe the HTML
character set encoding of the document along with keywords
ltlinkgt tags which specify linking the document with the webpage in question Used for loading various files and style sheets
Body Section
Contains all the text of the webpage plus any imbedded Javascript PHP CSS etchellip
Paragraph tag ltpgt
Defines a paragraph Primarily used to add style to text (more
on this later) Optional Attributes None Standard Attributes
Class dir id lang style title xmllang
Linebreak ltbr gt
Introduces a single whitespace line break
Optional Attributes None Standard Attributes
Class id style title
Anchor tag ltagt
Creates a link to another document by using the href attribute
Creates a bookmark inside a document by using the name attribute
Optional Attributes Charset coords href hreflang name rel rev
shape target Standard Attributes
Accesskey class dir id lang style tabindex title xmllang
Example
lta href=ldquowwwgooglecomgtGoogleltagt Results in
Img tag
ltimggt Displays an image in an html page Required attributes
src which specifies where the image is located alt which specifies mouse-over text for the
image Optional Attributes
Ismap longdesc usemap vspace width Standard Attributes
Class dir id lang style title xmllang
Example
ltimg src=ldquoimagesimg1jpgrdquo alt=ldquoAn imagerdquo gt
Div
Defines a division or a section in an HTML section Groups block-elements to format them with
styles Optional Attributes
None Standard Attributes
Class dir id lang style title xmllang Used often for specifying where
elements go on a page and how they will be styled with CSS
Span
The ltspangt tag is used to group inline-elements in a document
Provides no visual effect by itself Provides a lsquohookrsquo which can be modified
or marked up via JavaScript etc Optional Attributes
Class dir id lang style title xmllang
Table
lttablegt hellip lttablegt encodes a table in HTML Can be an NxM Table that encodes and marks
up additional text Contains three tagged elements within it to
create the cells ltthgt ndash table header lttrgt - table row lttdgt - table cell
Tables are a great way to represent data Horrible way to format and organize an entire webpage
lttrgt
Encodes a row of a table Contains one ore more ltthgt or lttdgt elements
Optional Attributes Align char charoff valign
Standard Attributes Class dir id lang style title xmllang
ltthgt
Defines a header cell in a HTML table Text is bolded and centered by default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
lttdgt
Defines columns within a table Text is non-bolded and left-aligned by
default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
Example
lttablegt
lttrgt
ltthgtColumn 1ltthgt
ltthgtColumn 2ltthgt
lttrgt
lttrgt
lttdgtValue 1lttdgt
lttdgtValue 2lttdgt
lttrgt
lttablegt
Stylinghellip
So by default all of this stuff looks like crap Enter Cascading Style Sheets (CSS) CSS is used to format how things look in a
browser better than HTML was able to natively
Can be done 3 ways In-line as an attribute of a tag Defining an internal stylesheet of classes and
assigning classes to tags By defining a file with classes and including the
file and assigning the classes to the tags
External or Linked Style
Included within the head section of your document
Can include multiple styles but be careful not to have naming conflicts
ltheadgt ltlink rel=stylesheet type=textcss href=mystylecss gtltheadgt
Contents of mystylecsshr colorsiennap margin-left20pxbody background-imageurl(imagesback40gif)
Internal Stylesheets
Included in the Header section of your document
ltheadgt ltstyle type=textcssgt hr colorsienna p margin-left20px body background-imageurl(imagesback40gif) ltstylegtltheadgt
Inline
Specified for each HTML element under the style=ldquohelliprdquo attribute
ltp style=colorsiennamargin-left20pxgtThis is a paragraphltpgt
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Structure of HTML Document HTML Section
Contains all HTML tags in the document Enclosed within the lthtmlgt hellip lthtmlgt tags
Head section Contains meta-information and information not
displayed within the body of the webpage Enclosed in the ltheadgt hellip ltheadgt tags
Body section Contains all markup code and text to be displayed
in the webpage Enclosed in the ltbodygt hellip ltbodygt tags
Structure
lthtmlgtltheadgthellipltheadgtltbodygthellipltbodygt
lthtmlgt
Tag Structure
lttagtypegt The tag determines what the markup is The tagtype is followed by a set of standard
attributes The standard attributes are followed by a
set of optional attributes
Head Section
Contains meta-data about page lttitlegt tags which specify the window title ltmetagt tags which describe the HTML
character set encoding of the document along with keywords
ltlinkgt tags which specify linking the document with the webpage in question Used for loading various files and style sheets
Body Section
Contains all the text of the webpage plus any imbedded Javascript PHP CSS etchellip
Paragraph tag ltpgt
Defines a paragraph Primarily used to add style to text (more
on this later) Optional Attributes None Standard Attributes
Class dir id lang style title xmllang
Linebreak ltbr gt
Introduces a single whitespace line break
Optional Attributes None Standard Attributes
Class id style title
Anchor tag ltagt
Creates a link to another document by using the href attribute
Creates a bookmark inside a document by using the name attribute
Optional Attributes Charset coords href hreflang name rel rev
shape target Standard Attributes
Accesskey class dir id lang style tabindex title xmllang
Example
lta href=ldquowwwgooglecomgtGoogleltagt Results in
Img tag
ltimggt Displays an image in an html page Required attributes
src which specifies where the image is located alt which specifies mouse-over text for the
image Optional Attributes
Ismap longdesc usemap vspace width Standard Attributes
Class dir id lang style title xmllang
Example
ltimg src=ldquoimagesimg1jpgrdquo alt=ldquoAn imagerdquo gt
Div
Defines a division or a section in an HTML section Groups block-elements to format them with
styles Optional Attributes
None Standard Attributes
Class dir id lang style title xmllang Used often for specifying where
elements go on a page and how they will be styled with CSS
Span
The ltspangt tag is used to group inline-elements in a document
Provides no visual effect by itself Provides a lsquohookrsquo which can be modified
or marked up via JavaScript etc Optional Attributes
Class dir id lang style title xmllang
Table
lttablegt hellip lttablegt encodes a table in HTML Can be an NxM Table that encodes and marks
up additional text Contains three tagged elements within it to
create the cells ltthgt ndash table header lttrgt - table row lttdgt - table cell
Tables are a great way to represent data Horrible way to format and organize an entire webpage
lttrgt
Encodes a row of a table Contains one ore more ltthgt or lttdgt elements
Optional Attributes Align char charoff valign
Standard Attributes Class dir id lang style title xmllang
ltthgt
Defines a header cell in a HTML table Text is bolded and centered by default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
lttdgt
Defines columns within a table Text is non-bolded and left-aligned by
default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
Example
lttablegt
lttrgt
ltthgtColumn 1ltthgt
ltthgtColumn 2ltthgt
lttrgt
lttrgt
lttdgtValue 1lttdgt
lttdgtValue 2lttdgt
lttrgt
lttablegt
Stylinghellip
So by default all of this stuff looks like crap Enter Cascading Style Sheets (CSS) CSS is used to format how things look in a
browser better than HTML was able to natively
Can be done 3 ways In-line as an attribute of a tag Defining an internal stylesheet of classes and
assigning classes to tags By defining a file with classes and including the
file and assigning the classes to the tags
External or Linked Style
Included within the head section of your document
Can include multiple styles but be careful not to have naming conflicts
ltheadgt ltlink rel=stylesheet type=textcss href=mystylecss gtltheadgt
Contents of mystylecsshr colorsiennap margin-left20pxbody background-imageurl(imagesback40gif)
Internal Stylesheets
Included in the Header section of your document
ltheadgt ltstyle type=textcssgt hr colorsienna p margin-left20px body background-imageurl(imagesback40gif) ltstylegtltheadgt
Inline
Specified for each HTML element under the style=ldquohelliprdquo attribute
ltp style=colorsiennamargin-left20pxgtThis is a paragraphltpgt
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Structure
lthtmlgtltheadgthellipltheadgtltbodygthellipltbodygt
lthtmlgt
Tag Structure
lttagtypegt The tag determines what the markup is The tagtype is followed by a set of standard
attributes The standard attributes are followed by a
set of optional attributes
Head Section
Contains meta-data about page lttitlegt tags which specify the window title ltmetagt tags which describe the HTML
character set encoding of the document along with keywords
ltlinkgt tags which specify linking the document with the webpage in question Used for loading various files and style sheets
Body Section
Contains all the text of the webpage plus any imbedded Javascript PHP CSS etchellip
Paragraph tag ltpgt
Defines a paragraph Primarily used to add style to text (more
on this later) Optional Attributes None Standard Attributes
Class dir id lang style title xmllang
Linebreak ltbr gt
Introduces a single whitespace line break
Optional Attributes None Standard Attributes
Class id style title
Anchor tag ltagt
Creates a link to another document by using the href attribute
Creates a bookmark inside a document by using the name attribute
Optional Attributes Charset coords href hreflang name rel rev
shape target Standard Attributes
Accesskey class dir id lang style tabindex title xmllang
Example
lta href=ldquowwwgooglecomgtGoogleltagt Results in
Img tag
ltimggt Displays an image in an html page Required attributes
src which specifies where the image is located alt which specifies mouse-over text for the
image Optional Attributes
Ismap longdesc usemap vspace width Standard Attributes
Class dir id lang style title xmllang
Example
ltimg src=ldquoimagesimg1jpgrdquo alt=ldquoAn imagerdquo gt
Div
Defines a division or a section in an HTML section Groups block-elements to format them with
styles Optional Attributes
None Standard Attributes
Class dir id lang style title xmllang Used often for specifying where
elements go on a page and how they will be styled with CSS
Span
The ltspangt tag is used to group inline-elements in a document
Provides no visual effect by itself Provides a lsquohookrsquo which can be modified
or marked up via JavaScript etc Optional Attributes
Class dir id lang style title xmllang
Table
lttablegt hellip lttablegt encodes a table in HTML Can be an NxM Table that encodes and marks
up additional text Contains three tagged elements within it to
create the cells ltthgt ndash table header lttrgt - table row lttdgt - table cell
Tables are a great way to represent data Horrible way to format and organize an entire webpage
lttrgt
Encodes a row of a table Contains one ore more ltthgt or lttdgt elements
Optional Attributes Align char charoff valign
Standard Attributes Class dir id lang style title xmllang
ltthgt
Defines a header cell in a HTML table Text is bolded and centered by default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
lttdgt
Defines columns within a table Text is non-bolded and left-aligned by
default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
Example
lttablegt
lttrgt
ltthgtColumn 1ltthgt
ltthgtColumn 2ltthgt
lttrgt
lttrgt
lttdgtValue 1lttdgt
lttdgtValue 2lttdgt
lttrgt
lttablegt
Stylinghellip
So by default all of this stuff looks like crap Enter Cascading Style Sheets (CSS) CSS is used to format how things look in a
browser better than HTML was able to natively
Can be done 3 ways In-line as an attribute of a tag Defining an internal stylesheet of classes and
assigning classes to tags By defining a file with classes and including the
file and assigning the classes to the tags
External or Linked Style
Included within the head section of your document
Can include multiple styles but be careful not to have naming conflicts
ltheadgt ltlink rel=stylesheet type=textcss href=mystylecss gtltheadgt
Contents of mystylecsshr colorsiennap margin-left20pxbody background-imageurl(imagesback40gif)
Internal Stylesheets
Included in the Header section of your document
ltheadgt ltstyle type=textcssgt hr colorsienna p margin-left20px body background-imageurl(imagesback40gif) ltstylegtltheadgt
Inline
Specified for each HTML element under the style=ldquohelliprdquo attribute
ltp style=colorsiennamargin-left20pxgtThis is a paragraphltpgt
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Tag Structure
lttagtypegt The tag determines what the markup is The tagtype is followed by a set of standard
attributes The standard attributes are followed by a
set of optional attributes
Head Section
Contains meta-data about page lttitlegt tags which specify the window title ltmetagt tags which describe the HTML
character set encoding of the document along with keywords
ltlinkgt tags which specify linking the document with the webpage in question Used for loading various files and style sheets
Body Section
Contains all the text of the webpage plus any imbedded Javascript PHP CSS etchellip
Paragraph tag ltpgt
Defines a paragraph Primarily used to add style to text (more
on this later) Optional Attributes None Standard Attributes
Class dir id lang style title xmllang
Linebreak ltbr gt
Introduces a single whitespace line break
Optional Attributes None Standard Attributes
Class id style title
Anchor tag ltagt
Creates a link to another document by using the href attribute
Creates a bookmark inside a document by using the name attribute
Optional Attributes Charset coords href hreflang name rel rev
shape target Standard Attributes
Accesskey class dir id lang style tabindex title xmllang
Example
lta href=ldquowwwgooglecomgtGoogleltagt Results in
Img tag
ltimggt Displays an image in an html page Required attributes
src which specifies where the image is located alt which specifies mouse-over text for the
image Optional Attributes
Ismap longdesc usemap vspace width Standard Attributes
Class dir id lang style title xmllang
Example
ltimg src=ldquoimagesimg1jpgrdquo alt=ldquoAn imagerdquo gt
Div
Defines a division or a section in an HTML section Groups block-elements to format them with
styles Optional Attributes
None Standard Attributes
Class dir id lang style title xmllang Used often for specifying where
elements go on a page and how they will be styled with CSS
Span
The ltspangt tag is used to group inline-elements in a document
Provides no visual effect by itself Provides a lsquohookrsquo which can be modified
or marked up via JavaScript etc Optional Attributes
Class dir id lang style title xmllang
Table
lttablegt hellip lttablegt encodes a table in HTML Can be an NxM Table that encodes and marks
up additional text Contains three tagged elements within it to
create the cells ltthgt ndash table header lttrgt - table row lttdgt - table cell
Tables are a great way to represent data Horrible way to format and organize an entire webpage
lttrgt
Encodes a row of a table Contains one ore more ltthgt or lttdgt elements
Optional Attributes Align char charoff valign
Standard Attributes Class dir id lang style title xmllang
ltthgt
Defines a header cell in a HTML table Text is bolded and centered by default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
lttdgt
Defines columns within a table Text is non-bolded and left-aligned by
default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
Example
lttablegt
lttrgt
ltthgtColumn 1ltthgt
ltthgtColumn 2ltthgt
lttrgt
lttrgt
lttdgtValue 1lttdgt
lttdgtValue 2lttdgt
lttrgt
lttablegt
Stylinghellip
So by default all of this stuff looks like crap Enter Cascading Style Sheets (CSS) CSS is used to format how things look in a
browser better than HTML was able to natively
Can be done 3 ways In-line as an attribute of a tag Defining an internal stylesheet of classes and
assigning classes to tags By defining a file with classes and including the
file and assigning the classes to the tags
External or Linked Style
Included within the head section of your document
Can include multiple styles but be careful not to have naming conflicts
ltheadgt ltlink rel=stylesheet type=textcss href=mystylecss gtltheadgt
Contents of mystylecsshr colorsiennap margin-left20pxbody background-imageurl(imagesback40gif)
Internal Stylesheets
Included in the Header section of your document
ltheadgt ltstyle type=textcssgt hr colorsienna p margin-left20px body background-imageurl(imagesback40gif) ltstylegtltheadgt
Inline
Specified for each HTML element under the style=ldquohelliprdquo attribute
ltp style=colorsiennamargin-left20pxgtThis is a paragraphltpgt
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Head Section
Contains meta-data about page lttitlegt tags which specify the window title ltmetagt tags which describe the HTML
character set encoding of the document along with keywords
ltlinkgt tags which specify linking the document with the webpage in question Used for loading various files and style sheets
Body Section
Contains all the text of the webpage plus any imbedded Javascript PHP CSS etchellip
Paragraph tag ltpgt
Defines a paragraph Primarily used to add style to text (more
on this later) Optional Attributes None Standard Attributes
Class dir id lang style title xmllang
Linebreak ltbr gt
Introduces a single whitespace line break
Optional Attributes None Standard Attributes
Class id style title
Anchor tag ltagt
Creates a link to another document by using the href attribute
Creates a bookmark inside a document by using the name attribute
Optional Attributes Charset coords href hreflang name rel rev
shape target Standard Attributes
Accesskey class dir id lang style tabindex title xmllang
Example
lta href=ldquowwwgooglecomgtGoogleltagt Results in
Img tag
ltimggt Displays an image in an html page Required attributes
src which specifies where the image is located alt which specifies mouse-over text for the
image Optional Attributes
Ismap longdesc usemap vspace width Standard Attributes
Class dir id lang style title xmllang
Example
ltimg src=ldquoimagesimg1jpgrdquo alt=ldquoAn imagerdquo gt
Div
Defines a division or a section in an HTML section Groups block-elements to format them with
styles Optional Attributes
None Standard Attributes
Class dir id lang style title xmllang Used often for specifying where
elements go on a page and how they will be styled with CSS
Span
The ltspangt tag is used to group inline-elements in a document
Provides no visual effect by itself Provides a lsquohookrsquo which can be modified
or marked up via JavaScript etc Optional Attributes
Class dir id lang style title xmllang
Table
lttablegt hellip lttablegt encodes a table in HTML Can be an NxM Table that encodes and marks
up additional text Contains three tagged elements within it to
create the cells ltthgt ndash table header lttrgt - table row lttdgt - table cell
Tables are a great way to represent data Horrible way to format and organize an entire webpage
lttrgt
Encodes a row of a table Contains one ore more ltthgt or lttdgt elements
Optional Attributes Align char charoff valign
Standard Attributes Class dir id lang style title xmllang
ltthgt
Defines a header cell in a HTML table Text is bolded and centered by default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
lttdgt
Defines columns within a table Text is non-bolded and left-aligned by
default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
Example
lttablegt
lttrgt
ltthgtColumn 1ltthgt
ltthgtColumn 2ltthgt
lttrgt
lttrgt
lttdgtValue 1lttdgt
lttdgtValue 2lttdgt
lttrgt
lttablegt
Stylinghellip
So by default all of this stuff looks like crap Enter Cascading Style Sheets (CSS) CSS is used to format how things look in a
browser better than HTML was able to natively
Can be done 3 ways In-line as an attribute of a tag Defining an internal stylesheet of classes and
assigning classes to tags By defining a file with classes and including the
file and assigning the classes to the tags
External or Linked Style
Included within the head section of your document
Can include multiple styles but be careful not to have naming conflicts
ltheadgt ltlink rel=stylesheet type=textcss href=mystylecss gtltheadgt
Contents of mystylecsshr colorsiennap margin-left20pxbody background-imageurl(imagesback40gif)
Internal Stylesheets
Included in the Header section of your document
ltheadgt ltstyle type=textcssgt hr colorsienna p margin-left20px body background-imageurl(imagesback40gif) ltstylegtltheadgt
Inline
Specified for each HTML element under the style=ldquohelliprdquo attribute
ltp style=colorsiennamargin-left20pxgtThis is a paragraphltpgt
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Body Section
Contains all the text of the webpage plus any imbedded Javascript PHP CSS etchellip
Paragraph tag ltpgt
Defines a paragraph Primarily used to add style to text (more
on this later) Optional Attributes None Standard Attributes
Class dir id lang style title xmllang
Linebreak ltbr gt
Introduces a single whitespace line break
Optional Attributes None Standard Attributes
Class id style title
Anchor tag ltagt
Creates a link to another document by using the href attribute
Creates a bookmark inside a document by using the name attribute
Optional Attributes Charset coords href hreflang name rel rev
shape target Standard Attributes
Accesskey class dir id lang style tabindex title xmllang
Example
lta href=ldquowwwgooglecomgtGoogleltagt Results in
Img tag
ltimggt Displays an image in an html page Required attributes
src which specifies where the image is located alt which specifies mouse-over text for the
image Optional Attributes
Ismap longdesc usemap vspace width Standard Attributes
Class dir id lang style title xmllang
Example
ltimg src=ldquoimagesimg1jpgrdquo alt=ldquoAn imagerdquo gt
Div
Defines a division or a section in an HTML section Groups block-elements to format them with
styles Optional Attributes
None Standard Attributes
Class dir id lang style title xmllang Used often for specifying where
elements go on a page and how they will be styled with CSS
Span
The ltspangt tag is used to group inline-elements in a document
Provides no visual effect by itself Provides a lsquohookrsquo which can be modified
or marked up via JavaScript etc Optional Attributes
Class dir id lang style title xmllang
Table
lttablegt hellip lttablegt encodes a table in HTML Can be an NxM Table that encodes and marks
up additional text Contains three tagged elements within it to
create the cells ltthgt ndash table header lttrgt - table row lttdgt - table cell
Tables are a great way to represent data Horrible way to format and organize an entire webpage
lttrgt
Encodes a row of a table Contains one ore more ltthgt or lttdgt elements
Optional Attributes Align char charoff valign
Standard Attributes Class dir id lang style title xmllang
ltthgt
Defines a header cell in a HTML table Text is bolded and centered by default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
lttdgt
Defines columns within a table Text is non-bolded and left-aligned by
default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
Example
lttablegt
lttrgt
ltthgtColumn 1ltthgt
ltthgtColumn 2ltthgt
lttrgt
lttrgt
lttdgtValue 1lttdgt
lttdgtValue 2lttdgt
lttrgt
lttablegt
Stylinghellip
So by default all of this stuff looks like crap Enter Cascading Style Sheets (CSS) CSS is used to format how things look in a
browser better than HTML was able to natively
Can be done 3 ways In-line as an attribute of a tag Defining an internal stylesheet of classes and
assigning classes to tags By defining a file with classes and including the
file and assigning the classes to the tags
External or Linked Style
Included within the head section of your document
Can include multiple styles but be careful not to have naming conflicts
ltheadgt ltlink rel=stylesheet type=textcss href=mystylecss gtltheadgt
Contents of mystylecsshr colorsiennap margin-left20pxbody background-imageurl(imagesback40gif)
Internal Stylesheets
Included in the Header section of your document
ltheadgt ltstyle type=textcssgt hr colorsienna p margin-left20px body background-imageurl(imagesback40gif) ltstylegtltheadgt
Inline
Specified for each HTML element under the style=ldquohelliprdquo attribute
ltp style=colorsiennamargin-left20pxgtThis is a paragraphltpgt
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Paragraph tag ltpgt
Defines a paragraph Primarily used to add style to text (more
on this later) Optional Attributes None Standard Attributes
Class dir id lang style title xmllang
Linebreak ltbr gt
Introduces a single whitespace line break
Optional Attributes None Standard Attributes
Class id style title
Anchor tag ltagt
Creates a link to another document by using the href attribute
Creates a bookmark inside a document by using the name attribute
Optional Attributes Charset coords href hreflang name rel rev
shape target Standard Attributes
Accesskey class dir id lang style tabindex title xmllang
Example
lta href=ldquowwwgooglecomgtGoogleltagt Results in
Img tag
ltimggt Displays an image in an html page Required attributes
src which specifies where the image is located alt which specifies mouse-over text for the
image Optional Attributes
Ismap longdesc usemap vspace width Standard Attributes
Class dir id lang style title xmllang
Example
ltimg src=ldquoimagesimg1jpgrdquo alt=ldquoAn imagerdquo gt
Div
Defines a division or a section in an HTML section Groups block-elements to format them with
styles Optional Attributes
None Standard Attributes
Class dir id lang style title xmllang Used often for specifying where
elements go on a page and how they will be styled with CSS
Span
The ltspangt tag is used to group inline-elements in a document
Provides no visual effect by itself Provides a lsquohookrsquo which can be modified
or marked up via JavaScript etc Optional Attributes
Class dir id lang style title xmllang
Table
lttablegt hellip lttablegt encodes a table in HTML Can be an NxM Table that encodes and marks
up additional text Contains three tagged elements within it to
create the cells ltthgt ndash table header lttrgt - table row lttdgt - table cell
Tables are a great way to represent data Horrible way to format and organize an entire webpage
lttrgt
Encodes a row of a table Contains one ore more ltthgt or lttdgt elements
Optional Attributes Align char charoff valign
Standard Attributes Class dir id lang style title xmllang
ltthgt
Defines a header cell in a HTML table Text is bolded and centered by default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
lttdgt
Defines columns within a table Text is non-bolded and left-aligned by
default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
Example
lttablegt
lttrgt
ltthgtColumn 1ltthgt
ltthgtColumn 2ltthgt
lttrgt
lttrgt
lttdgtValue 1lttdgt
lttdgtValue 2lttdgt
lttrgt
lttablegt
Stylinghellip
So by default all of this stuff looks like crap Enter Cascading Style Sheets (CSS) CSS is used to format how things look in a
browser better than HTML was able to natively
Can be done 3 ways In-line as an attribute of a tag Defining an internal stylesheet of classes and
assigning classes to tags By defining a file with classes and including the
file and assigning the classes to the tags
External or Linked Style
Included within the head section of your document
Can include multiple styles but be careful not to have naming conflicts
ltheadgt ltlink rel=stylesheet type=textcss href=mystylecss gtltheadgt
Contents of mystylecsshr colorsiennap margin-left20pxbody background-imageurl(imagesback40gif)
Internal Stylesheets
Included in the Header section of your document
ltheadgt ltstyle type=textcssgt hr colorsienna p margin-left20px body background-imageurl(imagesback40gif) ltstylegtltheadgt
Inline
Specified for each HTML element under the style=ldquohelliprdquo attribute
ltp style=colorsiennamargin-left20pxgtThis is a paragraphltpgt
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Linebreak ltbr gt
Introduces a single whitespace line break
Optional Attributes None Standard Attributes
Class id style title
Anchor tag ltagt
Creates a link to another document by using the href attribute
Creates a bookmark inside a document by using the name attribute
Optional Attributes Charset coords href hreflang name rel rev
shape target Standard Attributes
Accesskey class dir id lang style tabindex title xmllang
Example
lta href=ldquowwwgooglecomgtGoogleltagt Results in
Img tag
ltimggt Displays an image in an html page Required attributes
src which specifies where the image is located alt which specifies mouse-over text for the
image Optional Attributes
Ismap longdesc usemap vspace width Standard Attributes
Class dir id lang style title xmllang
Example
ltimg src=ldquoimagesimg1jpgrdquo alt=ldquoAn imagerdquo gt
Div
Defines a division or a section in an HTML section Groups block-elements to format them with
styles Optional Attributes
None Standard Attributes
Class dir id lang style title xmllang Used often for specifying where
elements go on a page and how they will be styled with CSS
Span
The ltspangt tag is used to group inline-elements in a document
Provides no visual effect by itself Provides a lsquohookrsquo which can be modified
or marked up via JavaScript etc Optional Attributes
Class dir id lang style title xmllang
Table
lttablegt hellip lttablegt encodes a table in HTML Can be an NxM Table that encodes and marks
up additional text Contains three tagged elements within it to
create the cells ltthgt ndash table header lttrgt - table row lttdgt - table cell
Tables are a great way to represent data Horrible way to format and organize an entire webpage
lttrgt
Encodes a row of a table Contains one ore more ltthgt or lttdgt elements
Optional Attributes Align char charoff valign
Standard Attributes Class dir id lang style title xmllang
ltthgt
Defines a header cell in a HTML table Text is bolded and centered by default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
lttdgt
Defines columns within a table Text is non-bolded and left-aligned by
default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
Example
lttablegt
lttrgt
ltthgtColumn 1ltthgt
ltthgtColumn 2ltthgt
lttrgt
lttrgt
lttdgtValue 1lttdgt
lttdgtValue 2lttdgt
lttrgt
lttablegt
Stylinghellip
So by default all of this stuff looks like crap Enter Cascading Style Sheets (CSS) CSS is used to format how things look in a
browser better than HTML was able to natively
Can be done 3 ways In-line as an attribute of a tag Defining an internal stylesheet of classes and
assigning classes to tags By defining a file with classes and including the
file and assigning the classes to the tags
External or Linked Style
Included within the head section of your document
Can include multiple styles but be careful not to have naming conflicts
ltheadgt ltlink rel=stylesheet type=textcss href=mystylecss gtltheadgt
Contents of mystylecsshr colorsiennap margin-left20pxbody background-imageurl(imagesback40gif)
Internal Stylesheets
Included in the Header section of your document
ltheadgt ltstyle type=textcssgt hr colorsienna p margin-left20px body background-imageurl(imagesback40gif) ltstylegtltheadgt
Inline
Specified for each HTML element under the style=ldquohelliprdquo attribute
ltp style=colorsiennamargin-left20pxgtThis is a paragraphltpgt
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Anchor tag ltagt
Creates a link to another document by using the href attribute
Creates a bookmark inside a document by using the name attribute
Optional Attributes Charset coords href hreflang name rel rev
shape target Standard Attributes
Accesskey class dir id lang style tabindex title xmllang
Example
lta href=ldquowwwgooglecomgtGoogleltagt Results in
Img tag
ltimggt Displays an image in an html page Required attributes
src which specifies where the image is located alt which specifies mouse-over text for the
image Optional Attributes
Ismap longdesc usemap vspace width Standard Attributes
Class dir id lang style title xmllang
Example
ltimg src=ldquoimagesimg1jpgrdquo alt=ldquoAn imagerdquo gt
Div
Defines a division or a section in an HTML section Groups block-elements to format them with
styles Optional Attributes
None Standard Attributes
Class dir id lang style title xmllang Used often for specifying where
elements go on a page and how they will be styled with CSS
Span
The ltspangt tag is used to group inline-elements in a document
Provides no visual effect by itself Provides a lsquohookrsquo which can be modified
or marked up via JavaScript etc Optional Attributes
Class dir id lang style title xmllang
Table
lttablegt hellip lttablegt encodes a table in HTML Can be an NxM Table that encodes and marks
up additional text Contains three tagged elements within it to
create the cells ltthgt ndash table header lttrgt - table row lttdgt - table cell
Tables are a great way to represent data Horrible way to format and organize an entire webpage
lttrgt
Encodes a row of a table Contains one ore more ltthgt or lttdgt elements
Optional Attributes Align char charoff valign
Standard Attributes Class dir id lang style title xmllang
ltthgt
Defines a header cell in a HTML table Text is bolded and centered by default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
lttdgt
Defines columns within a table Text is non-bolded and left-aligned by
default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
Example
lttablegt
lttrgt
ltthgtColumn 1ltthgt
ltthgtColumn 2ltthgt
lttrgt
lttrgt
lttdgtValue 1lttdgt
lttdgtValue 2lttdgt
lttrgt
lttablegt
Stylinghellip
So by default all of this stuff looks like crap Enter Cascading Style Sheets (CSS) CSS is used to format how things look in a
browser better than HTML was able to natively
Can be done 3 ways In-line as an attribute of a tag Defining an internal stylesheet of classes and
assigning classes to tags By defining a file with classes and including the
file and assigning the classes to the tags
External or Linked Style
Included within the head section of your document
Can include multiple styles but be careful not to have naming conflicts
ltheadgt ltlink rel=stylesheet type=textcss href=mystylecss gtltheadgt
Contents of mystylecsshr colorsiennap margin-left20pxbody background-imageurl(imagesback40gif)
Internal Stylesheets
Included in the Header section of your document
ltheadgt ltstyle type=textcssgt hr colorsienna p margin-left20px body background-imageurl(imagesback40gif) ltstylegtltheadgt
Inline
Specified for each HTML element under the style=ldquohelliprdquo attribute
ltp style=colorsiennamargin-left20pxgtThis is a paragraphltpgt
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Example
lta href=ldquowwwgooglecomgtGoogleltagt Results in
Img tag
ltimggt Displays an image in an html page Required attributes
src which specifies where the image is located alt which specifies mouse-over text for the
image Optional Attributes
Ismap longdesc usemap vspace width Standard Attributes
Class dir id lang style title xmllang
Example
ltimg src=ldquoimagesimg1jpgrdquo alt=ldquoAn imagerdquo gt
Div
Defines a division or a section in an HTML section Groups block-elements to format them with
styles Optional Attributes
None Standard Attributes
Class dir id lang style title xmllang Used often for specifying where
elements go on a page and how they will be styled with CSS
Span
The ltspangt tag is used to group inline-elements in a document
Provides no visual effect by itself Provides a lsquohookrsquo which can be modified
or marked up via JavaScript etc Optional Attributes
Class dir id lang style title xmllang
Table
lttablegt hellip lttablegt encodes a table in HTML Can be an NxM Table that encodes and marks
up additional text Contains three tagged elements within it to
create the cells ltthgt ndash table header lttrgt - table row lttdgt - table cell
Tables are a great way to represent data Horrible way to format and organize an entire webpage
lttrgt
Encodes a row of a table Contains one ore more ltthgt or lttdgt elements
Optional Attributes Align char charoff valign
Standard Attributes Class dir id lang style title xmllang
ltthgt
Defines a header cell in a HTML table Text is bolded and centered by default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
lttdgt
Defines columns within a table Text is non-bolded and left-aligned by
default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
Example
lttablegt
lttrgt
ltthgtColumn 1ltthgt
ltthgtColumn 2ltthgt
lttrgt
lttrgt
lttdgtValue 1lttdgt
lttdgtValue 2lttdgt
lttrgt
lttablegt
Stylinghellip
So by default all of this stuff looks like crap Enter Cascading Style Sheets (CSS) CSS is used to format how things look in a
browser better than HTML was able to natively
Can be done 3 ways In-line as an attribute of a tag Defining an internal stylesheet of classes and
assigning classes to tags By defining a file with classes and including the
file and assigning the classes to the tags
External or Linked Style
Included within the head section of your document
Can include multiple styles but be careful not to have naming conflicts
ltheadgt ltlink rel=stylesheet type=textcss href=mystylecss gtltheadgt
Contents of mystylecsshr colorsiennap margin-left20pxbody background-imageurl(imagesback40gif)
Internal Stylesheets
Included in the Header section of your document
ltheadgt ltstyle type=textcssgt hr colorsienna p margin-left20px body background-imageurl(imagesback40gif) ltstylegtltheadgt
Inline
Specified for each HTML element under the style=ldquohelliprdquo attribute
ltp style=colorsiennamargin-left20pxgtThis is a paragraphltpgt
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Img tag
ltimggt Displays an image in an html page Required attributes
src which specifies where the image is located alt which specifies mouse-over text for the
image Optional Attributes
Ismap longdesc usemap vspace width Standard Attributes
Class dir id lang style title xmllang
Example
ltimg src=ldquoimagesimg1jpgrdquo alt=ldquoAn imagerdquo gt
Div
Defines a division or a section in an HTML section Groups block-elements to format them with
styles Optional Attributes
None Standard Attributes
Class dir id lang style title xmllang Used often for specifying where
elements go on a page and how they will be styled with CSS
Span
The ltspangt tag is used to group inline-elements in a document
Provides no visual effect by itself Provides a lsquohookrsquo which can be modified
or marked up via JavaScript etc Optional Attributes
Class dir id lang style title xmllang
Table
lttablegt hellip lttablegt encodes a table in HTML Can be an NxM Table that encodes and marks
up additional text Contains three tagged elements within it to
create the cells ltthgt ndash table header lttrgt - table row lttdgt - table cell
Tables are a great way to represent data Horrible way to format and organize an entire webpage
lttrgt
Encodes a row of a table Contains one ore more ltthgt or lttdgt elements
Optional Attributes Align char charoff valign
Standard Attributes Class dir id lang style title xmllang
ltthgt
Defines a header cell in a HTML table Text is bolded and centered by default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
lttdgt
Defines columns within a table Text is non-bolded and left-aligned by
default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
Example
lttablegt
lttrgt
ltthgtColumn 1ltthgt
ltthgtColumn 2ltthgt
lttrgt
lttrgt
lttdgtValue 1lttdgt
lttdgtValue 2lttdgt
lttrgt
lttablegt
Stylinghellip
So by default all of this stuff looks like crap Enter Cascading Style Sheets (CSS) CSS is used to format how things look in a
browser better than HTML was able to natively
Can be done 3 ways In-line as an attribute of a tag Defining an internal stylesheet of classes and
assigning classes to tags By defining a file with classes and including the
file and assigning the classes to the tags
External or Linked Style
Included within the head section of your document
Can include multiple styles but be careful not to have naming conflicts
ltheadgt ltlink rel=stylesheet type=textcss href=mystylecss gtltheadgt
Contents of mystylecsshr colorsiennap margin-left20pxbody background-imageurl(imagesback40gif)
Internal Stylesheets
Included in the Header section of your document
ltheadgt ltstyle type=textcssgt hr colorsienna p margin-left20px body background-imageurl(imagesback40gif) ltstylegtltheadgt
Inline
Specified for each HTML element under the style=ldquohelliprdquo attribute
ltp style=colorsiennamargin-left20pxgtThis is a paragraphltpgt
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Example
ltimg src=ldquoimagesimg1jpgrdquo alt=ldquoAn imagerdquo gt
Div
Defines a division or a section in an HTML section Groups block-elements to format them with
styles Optional Attributes
None Standard Attributes
Class dir id lang style title xmllang Used often for specifying where
elements go on a page and how they will be styled with CSS
Span
The ltspangt tag is used to group inline-elements in a document
Provides no visual effect by itself Provides a lsquohookrsquo which can be modified
or marked up via JavaScript etc Optional Attributes
Class dir id lang style title xmllang
Table
lttablegt hellip lttablegt encodes a table in HTML Can be an NxM Table that encodes and marks
up additional text Contains three tagged elements within it to
create the cells ltthgt ndash table header lttrgt - table row lttdgt - table cell
Tables are a great way to represent data Horrible way to format and organize an entire webpage
lttrgt
Encodes a row of a table Contains one ore more ltthgt or lttdgt elements
Optional Attributes Align char charoff valign
Standard Attributes Class dir id lang style title xmllang
ltthgt
Defines a header cell in a HTML table Text is bolded and centered by default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
lttdgt
Defines columns within a table Text is non-bolded and left-aligned by
default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
Example
lttablegt
lttrgt
ltthgtColumn 1ltthgt
ltthgtColumn 2ltthgt
lttrgt
lttrgt
lttdgtValue 1lttdgt
lttdgtValue 2lttdgt
lttrgt
lttablegt
Stylinghellip
So by default all of this stuff looks like crap Enter Cascading Style Sheets (CSS) CSS is used to format how things look in a
browser better than HTML was able to natively
Can be done 3 ways In-line as an attribute of a tag Defining an internal stylesheet of classes and
assigning classes to tags By defining a file with classes and including the
file and assigning the classes to the tags
External or Linked Style
Included within the head section of your document
Can include multiple styles but be careful not to have naming conflicts
ltheadgt ltlink rel=stylesheet type=textcss href=mystylecss gtltheadgt
Contents of mystylecsshr colorsiennap margin-left20pxbody background-imageurl(imagesback40gif)
Internal Stylesheets
Included in the Header section of your document
ltheadgt ltstyle type=textcssgt hr colorsienna p margin-left20px body background-imageurl(imagesback40gif) ltstylegtltheadgt
Inline
Specified for each HTML element under the style=ldquohelliprdquo attribute
ltp style=colorsiennamargin-left20pxgtThis is a paragraphltpgt
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Div
Defines a division or a section in an HTML section Groups block-elements to format them with
styles Optional Attributes
None Standard Attributes
Class dir id lang style title xmllang Used often for specifying where
elements go on a page and how they will be styled with CSS
Span
The ltspangt tag is used to group inline-elements in a document
Provides no visual effect by itself Provides a lsquohookrsquo which can be modified
or marked up via JavaScript etc Optional Attributes
Class dir id lang style title xmllang
Table
lttablegt hellip lttablegt encodes a table in HTML Can be an NxM Table that encodes and marks
up additional text Contains three tagged elements within it to
create the cells ltthgt ndash table header lttrgt - table row lttdgt - table cell
Tables are a great way to represent data Horrible way to format and organize an entire webpage
lttrgt
Encodes a row of a table Contains one ore more ltthgt or lttdgt elements
Optional Attributes Align char charoff valign
Standard Attributes Class dir id lang style title xmllang
ltthgt
Defines a header cell in a HTML table Text is bolded and centered by default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
lttdgt
Defines columns within a table Text is non-bolded and left-aligned by
default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
Example
lttablegt
lttrgt
ltthgtColumn 1ltthgt
ltthgtColumn 2ltthgt
lttrgt
lttrgt
lttdgtValue 1lttdgt
lttdgtValue 2lttdgt
lttrgt
lttablegt
Stylinghellip
So by default all of this stuff looks like crap Enter Cascading Style Sheets (CSS) CSS is used to format how things look in a
browser better than HTML was able to natively
Can be done 3 ways In-line as an attribute of a tag Defining an internal stylesheet of classes and
assigning classes to tags By defining a file with classes and including the
file and assigning the classes to the tags
External or Linked Style
Included within the head section of your document
Can include multiple styles but be careful not to have naming conflicts
ltheadgt ltlink rel=stylesheet type=textcss href=mystylecss gtltheadgt
Contents of mystylecsshr colorsiennap margin-left20pxbody background-imageurl(imagesback40gif)
Internal Stylesheets
Included in the Header section of your document
ltheadgt ltstyle type=textcssgt hr colorsienna p margin-left20px body background-imageurl(imagesback40gif) ltstylegtltheadgt
Inline
Specified for each HTML element under the style=ldquohelliprdquo attribute
ltp style=colorsiennamargin-left20pxgtThis is a paragraphltpgt
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Span
The ltspangt tag is used to group inline-elements in a document
Provides no visual effect by itself Provides a lsquohookrsquo which can be modified
or marked up via JavaScript etc Optional Attributes
Class dir id lang style title xmllang
Table
lttablegt hellip lttablegt encodes a table in HTML Can be an NxM Table that encodes and marks
up additional text Contains three tagged elements within it to
create the cells ltthgt ndash table header lttrgt - table row lttdgt - table cell
Tables are a great way to represent data Horrible way to format and organize an entire webpage
lttrgt
Encodes a row of a table Contains one ore more ltthgt or lttdgt elements
Optional Attributes Align char charoff valign
Standard Attributes Class dir id lang style title xmllang
ltthgt
Defines a header cell in a HTML table Text is bolded and centered by default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
lttdgt
Defines columns within a table Text is non-bolded and left-aligned by
default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
Example
lttablegt
lttrgt
ltthgtColumn 1ltthgt
ltthgtColumn 2ltthgt
lttrgt
lttrgt
lttdgtValue 1lttdgt
lttdgtValue 2lttdgt
lttrgt
lttablegt
Stylinghellip
So by default all of this stuff looks like crap Enter Cascading Style Sheets (CSS) CSS is used to format how things look in a
browser better than HTML was able to natively
Can be done 3 ways In-line as an attribute of a tag Defining an internal stylesheet of classes and
assigning classes to tags By defining a file with classes and including the
file and assigning the classes to the tags
External or Linked Style
Included within the head section of your document
Can include multiple styles but be careful not to have naming conflicts
ltheadgt ltlink rel=stylesheet type=textcss href=mystylecss gtltheadgt
Contents of mystylecsshr colorsiennap margin-left20pxbody background-imageurl(imagesback40gif)
Internal Stylesheets
Included in the Header section of your document
ltheadgt ltstyle type=textcssgt hr colorsienna p margin-left20px body background-imageurl(imagesback40gif) ltstylegtltheadgt
Inline
Specified for each HTML element under the style=ldquohelliprdquo attribute
ltp style=colorsiennamargin-left20pxgtThis is a paragraphltpgt
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Table
lttablegt hellip lttablegt encodes a table in HTML Can be an NxM Table that encodes and marks
up additional text Contains three tagged elements within it to
create the cells ltthgt ndash table header lttrgt - table row lttdgt - table cell
Tables are a great way to represent data Horrible way to format and organize an entire webpage
lttrgt
Encodes a row of a table Contains one ore more ltthgt or lttdgt elements
Optional Attributes Align char charoff valign
Standard Attributes Class dir id lang style title xmllang
ltthgt
Defines a header cell in a HTML table Text is bolded and centered by default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
lttdgt
Defines columns within a table Text is non-bolded and left-aligned by
default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
Example
lttablegt
lttrgt
ltthgtColumn 1ltthgt
ltthgtColumn 2ltthgt
lttrgt
lttrgt
lttdgtValue 1lttdgt
lttdgtValue 2lttdgt
lttrgt
lttablegt
Stylinghellip
So by default all of this stuff looks like crap Enter Cascading Style Sheets (CSS) CSS is used to format how things look in a
browser better than HTML was able to natively
Can be done 3 ways In-line as an attribute of a tag Defining an internal stylesheet of classes and
assigning classes to tags By defining a file with classes and including the
file and assigning the classes to the tags
External or Linked Style
Included within the head section of your document
Can include multiple styles but be careful not to have naming conflicts
ltheadgt ltlink rel=stylesheet type=textcss href=mystylecss gtltheadgt
Contents of mystylecsshr colorsiennap margin-left20pxbody background-imageurl(imagesback40gif)
Internal Stylesheets
Included in the Header section of your document
ltheadgt ltstyle type=textcssgt hr colorsienna p margin-left20px body background-imageurl(imagesback40gif) ltstylegtltheadgt
Inline
Specified for each HTML element under the style=ldquohelliprdquo attribute
ltp style=colorsiennamargin-left20pxgtThis is a paragraphltpgt
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
lttrgt
Encodes a row of a table Contains one ore more ltthgt or lttdgt elements
Optional Attributes Align char charoff valign
Standard Attributes Class dir id lang style title xmllang
ltthgt
Defines a header cell in a HTML table Text is bolded and centered by default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
lttdgt
Defines columns within a table Text is non-bolded and left-aligned by
default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
Example
lttablegt
lttrgt
ltthgtColumn 1ltthgt
ltthgtColumn 2ltthgt
lttrgt
lttrgt
lttdgtValue 1lttdgt
lttdgtValue 2lttdgt
lttrgt
lttablegt
Stylinghellip
So by default all of this stuff looks like crap Enter Cascading Style Sheets (CSS) CSS is used to format how things look in a
browser better than HTML was able to natively
Can be done 3 ways In-line as an attribute of a tag Defining an internal stylesheet of classes and
assigning classes to tags By defining a file with classes and including the
file and assigning the classes to the tags
External or Linked Style
Included within the head section of your document
Can include multiple styles but be careful not to have naming conflicts
ltheadgt ltlink rel=stylesheet type=textcss href=mystylecss gtltheadgt
Contents of mystylecsshr colorsiennap margin-left20pxbody background-imageurl(imagesback40gif)
Internal Stylesheets
Included in the Header section of your document
ltheadgt ltstyle type=textcssgt hr colorsienna p margin-left20px body background-imageurl(imagesback40gif) ltstylegtltheadgt
Inline
Specified for each HTML element under the style=ldquohelliprdquo attribute
ltp style=colorsiennamargin-left20pxgtThis is a paragraphltpgt
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
ltthgt
Defines a header cell in a HTML table Text is bolded and centered by default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
lttdgt
Defines columns within a table Text is non-bolded and left-aligned by
default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
Example
lttablegt
lttrgt
ltthgtColumn 1ltthgt
ltthgtColumn 2ltthgt
lttrgt
lttrgt
lttdgtValue 1lttdgt
lttdgtValue 2lttdgt
lttrgt
lttablegt
Stylinghellip
So by default all of this stuff looks like crap Enter Cascading Style Sheets (CSS) CSS is used to format how things look in a
browser better than HTML was able to natively
Can be done 3 ways In-line as an attribute of a tag Defining an internal stylesheet of classes and
assigning classes to tags By defining a file with classes and including the
file and assigning the classes to the tags
External or Linked Style
Included within the head section of your document
Can include multiple styles but be careful not to have naming conflicts
ltheadgt ltlink rel=stylesheet type=textcss href=mystylecss gtltheadgt
Contents of mystylecsshr colorsiennap margin-left20pxbody background-imageurl(imagesback40gif)
Internal Stylesheets
Included in the Header section of your document
ltheadgt ltstyle type=textcssgt hr colorsienna p margin-left20px body background-imageurl(imagesback40gif) ltstylegtltheadgt
Inline
Specified for each HTML element under the style=ldquohelliprdquo attribute
ltp style=colorsiennamargin-left20pxgtThis is a paragraphltpgt
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
lttdgt
Defines columns within a table Text is non-bolded and left-aligned by
default Optional Attributes
Abbr align axis char charoff colspan heigh weight rowspan
Example
lttablegt
lttrgt
ltthgtColumn 1ltthgt
ltthgtColumn 2ltthgt
lttrgt
lttrgt
lttdgtValue 1lttdgt
lttdgtValue 2lttdgt
lttrgt
lttablegt
Stylinghellip
So by default all of this stuff looks like crap Enter Cascading Style Sheets (CSS) CSS is used to format how things look in a
browser better than HTML was able to natively
Can be done 3 ways In-line as an attribute of a tag Defining an internal stylesheet of classes and
assigning classes to tags By defining a file with classes and including the
file and assigning the classes to the tags
External or Linked Style
Included within the head section of your document
Can include multiple styles but be careful not to have naming conflicts
ltheadgt ltlink rel=stylesheet type=textcss href=mystylecss gtltheadgt
Contents of mystylecsshr colorsiennap margin-left20pxbody background-imageurl(imagesback40gif)
Internal Stylesheets
Included in the Header section of your document
ltheadgt ltstyle type=textcssgt hr colorsienna p margin-left20px body background-imageurl(imagesback40gif) ltstylegtltheadgt
Inline
Specified for each HTML element under the style=ldquohelliprdquo attribute
ltp style=colorsiennamargin-left20pxgtThis is a paragraphltpgt
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Example
lttablegt
lttrgt
ltthgtColumn 1ltthgt
ltthgtColumn 2ltthgt
lttrgt
lttrgt
lttdgtValue 1lttdgt
lttdgtValue 2lttdgt
lttrgt
lttablegt
Stylinghellip
So by default all of this stuff looks like crap Enter Cascading Style Sheets (CSS) CSS is used to format how things look in a
browser better than HTML was able to natively
Can be done 3 ways In-line as an attribute of a tag Defining an internal stylesheet of classes and
assigning classes to tags By defining a file with classes and including the
file and assigning the classes to the tags
External or Linked Style
Included within the head section of your document
Can include multiple styles but be careful not to have naming conflicts
ltheadgt ltlink rel=stylesheet type=textcss href=mystylecss gtltheadgt
Contents of mystylecsshr colorsiennap margin-left20pxbody background-imageurl(imagesback40gif)
Internal Stylesheets
Included in the Header section of your document
ltheadgt ltstyle type=textcssgt hr colorsienna p margin-left20px body background-imageurl(imagesback40gif) ltstylegtltheadgt
Inline
Specified for each HTML element under the style=ldquohelliprdquo attribute
ltp style=colorsiennamargin-left20pxgtThis is a paragraphltpgt
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Stylinghellip
So by default all of this stuff looks like crap Enter Cascading Style Sheets (CSS) CSS is used to format how things look in a
browser better than HTML was able to natively
Can be done 3 ways In-line as an attribute of a tag Defining an internal stylesheet of classes and
assigning classes to tags By defining a file with classes and including the
file and assigning the classes to the tags
External or Linked Style
Included within the head section of your document
Can include multiple styles but be careful not to have naming conflicts
ltheadgt ltlink rel=stylesheet type=textcss href=mystylecss gtltheadgt
Contents of mystylecsshr colorsiennap margin-left20pxbody background-imageurl(imagesback40gif)
Internal Stylesheets
Included in the Header section of your document
ltheadgt ltstyle type=textcssgt hr colorsienna p margin-left20px body background-imageurl(imagesback40gif) ltstylegtltheadgt
Inline
Specified for each HTML element under the style=ldquohelliprdquo attribute
ltp style=colorsiennamargin-left20pxgtThis is a paragraphltpgt
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
External or Linked Style
Included within the head section of your document
Can include multiple styles but be careful not to have naming conflicts
ltheadgt ltlink rel=stylesheet type=textcss href=mystylecss gtltheadgt
Contents of mystylecsshr colorsiennap margin-left20pxbody background-imageurl(imagesback40gif)
Internal Stylesheets
Included in the Header section of your document
ltheadgt ltstyle type=textcssgt hr colorsienna p margin-left20px body background-imageurl(imagesback40gif) ltstylegtltheadgt
Inline
Specified for each HTML element under the style=ldquohelliprdquo attribute
ltp style=colorsiennamargin-left20pxgtThis is a paragraphltpgt
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Internal Stylesheets
Included in the Header section of your document
ltheadgt ltstyle type=textcssgt hr colorsienna p margin-left20px body background-imageurl(imagesback40gif) ltstylegtltheadgt
Inline
Specified for each HTML element under the style=ldquohelliprdquo attribute
ltp style=colorsiennamargin-left20pxgtThis is a paragraphltpgt
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Inline
Specified for each HTML element under the style=ldquohelliprdquo attribute
ltp style=colorsiennamargin-left20pxgtThis is a paragraphltpgt
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Types of Styles
Too many to talk about today http
wwww3schoolscomcsscss_textasp http
wwww3schoolscomcsscss_fontasp http
wwww3schoolscomcsscss_linkasp http
wwww3schoolscomcsscss_listasp http
wwww3schoolscomcsscss_tableasp http
wwww3schoolscomcsscss_backgroundasp
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
PHP Hypertext Processor
General Purpose Server-Side Scripting Language
Produces Dynamic Webpages for web-dev but can be used for other stuff
Currently at version 5
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Installation
Linux Install Apache2 MySQL PHP5 otherwise
known as [L](AMP) Windows
Get XAMPP Mac
Get MAMPP
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
How does it work
User goes to webpage Browser sends request for page with a
set of variables URL-Based Variables _GET Hidden variables _POST Hidden Global Variables _SESSION
The PHP daemon takes the variables execute the script in question generates some output and returns it to the browser
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
How do we do it
Files must be named php php files can be a little PHP and little
HTML a lot of HTML and a little PHP or a lot of PHP and a lot of HTML
All PHP code needs to be surrounded by the ltphpgt
These tags can occur as many times as we want and can contain as much or as little code as we want
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
How do we do it
We can produce ldquooutputrdquo by utilizing the echo command
lthtmlgtltbodygt
ltphp echo ldquoHello Worldrdquo
gtltbodygt
lthtmlgt
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Language Features
Declarative Functional Language We declare variables we declare functions
functions work on variables we evaluate the results Loosely Typed
We can declare variables on the fly and do not need to specify a type
We can switch types of variables through assignment without having to do any sort of casting-magic
Looks just like C Except with respect to Variables
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Comments
for single line commentsltphp Single line commentecho ldquoHello Worldrdquogt
for multi-line comments ltphp This is a multi-line comment echo ldquoHello Worldrdquogt
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Language Syntax
Every executable statement that does not begin a basic block requires a semicolon at the end of the statement Ex echo ldquoHello worldrdquo
Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) hellip for( hellip hellip hellip) hellip while ($x)
hellip etc
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Language Syntax Data Types Supports all the following data types
Integers Booleans Floating Points Strings Arrays Objects Resources Callbacks Callbacks
Can retype variables on the flyltphp
$x = 7$x = ldquoHello Yatesrdquoecho $x
gt
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Language Syntax Variables
To use a variable we follow the same naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_face
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Language Semantics Variables To use a variable we follow the same
naming conventions of C May begin with an underscore lowercase or
uppercase May contain numbers underscores
All variables are prepended with a $ As in $my_name or $your_fac
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Language Semantics Variable Scope
Scope Same Scoping rules as C applyltphp
$a = 1 Global Scopefunction test()
echo $a Local scopetest()
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
$a = 1$b = 2function test()
global $a $b$b = $a + b
test()echo $b
gt
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Language Semantics Variable Scope
Globals Similar to C with extra helpltphp
function test() static $a = 1echo $a$a++
test()test()
gt
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Operators
Same basic arithmetic operators + - ++ -- += -= = = unary
negation Same basic comparators
== === (type equality) = ltgt == (type equality) lt= gt= gt lt
Same basic logical operators || ampamp
Same bitwise operators amp | ^ (xor) ~ (not) ltlt gtgt
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Comparator Stuff
Because we are loosely typed we have rules for what happens when we compare differing types
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
String Operators
$a $b concatenates $b onto the end of $a
= accomplishes the compound operation
ltphp$a = ldquohellordquo$b = ldquoworldrdquo$c = $a $b$a = $b
gt
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Control Flow
If-else-if-else Just like C If(boolean condition)
hellipExecute basic block if boolean true
If(boolean) hellipExecute basic block if boolean trueelse hellip execute basic block if boolean false
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Control Flow
If-else-if-else Just like C If(boolean)
hellipExecute basic block if boolean trueelse if (boolean2) hellip execute basic block if boolean2 trueelse hellip execute basic block if boolean and boolean2 false
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Control Flow
Switch Just like C
Switch(variable) case value1
hellipbreak
case value2hellipbreak
case defaulthellipbreak
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Control Flow
Loops While do-while for foreach Just like C except for foreach
While(booleanCondition) Execute if condition is true prior to
entering basic blockContinue executing until condition is
false
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Control Flow
Do Execute onceEvaluate boolean condition and
execute subsequent times
while(booleancondition)
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Control Flow
for($var = 0 $var lt 23 $var++) Initialize $var to 0 at first iterationEvaluate boolean If true execute basic blockAt end of basic block execute loop progress metric
NB We can have multiple variable declarations boolean conditions and loop progress metrics separated by commas
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Control Flow
Only applies to arrays Iterates for the number of items in the array renaming each cell to the specified variable
foreach($people as $person) Execute setting $person =
people[i] where i=0hellipNumberOfPeople
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Functions
No explicit return types No explicit types on paramters Same naming conventions as C
[a-zA-Z_][a-zA-Z0-9_] Come of the formFunction ltfunction-namegt(param-list)
Executable code
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Functions
ltphpfunction printHelloWorld()
echo ldquoHelloWorldrdquofunction returnHelloWorld()
return ldquoHello WorldrdquoprintHelloWorld()echo returnHelloWorld()
gt
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Forms
Forms are HTML based and linked with a PHP file
lthtmlgt
ltbodygt
ltform action=foophp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Forms
ltform action=foophp method=postgt Action is the script that will be called
when the form is submitted Post is the parameter transmission
that will be used Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Forms
ltinput type=text name=username gt Type corresponds to the type of form
element Buttons Text Checkbox Radio Menus File
Select Name tells us what the transmitted
variable will be named for the Get or Post Request
Name is also used for any Client-Side scripting that might fill in the form or retrieve its data
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Forms
ltinput type=submit name=submit value=Submit me gt
Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Forms
Once the user hits submit the information is passed to PHP script
Variables can be retrieved two ways by the transmission mode Get the superglobal $_GET[key] associative
array contains the values encoded at the URL
Post the superglobal $_POST[key] associative array contains the values encoded at the URL
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Example formhtml and formphp
lthtmlgt
ltbodygt
ltform action=ldquoformphp method=postgt
Name ltinput type=text name=username gtltbr gt
Email ltinput type=text name=email gtltbr gt
ltinput type=submit name=submit value=Submit me gt
ltformgt
ltbodygt
lthtmlgt
lthtmlgt ltbodygt ltphp if(isset($_POST[lsquousernamersquo] || isset($_POST[lsquoemailrsquo]) echo ldquoYou didnrsquot input your form datardquo else $username = $_POST[lsquousernamersquo] $email = $_POST[lsquoemailrsquo] echo ldquoWelcome ldquo $username ldquo with email ldquo $email gt ltbodygtlthtmlgt
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Forms GET vs POST
Using _GET is exactly the same functionally as using _POST
What is the trade-off between using them GET shows the variables to the user via the URL
If we used Get the URL after clicking Submit would behttpformphpusername=whateverampemail=whatever
POST does not it keeps the variables hidden POST is inherently more secure because the user
cannot tamper with data via the URL POST is harder to debug because you have to test
whatrsquos in the _POST array to make sure itrsquos correct
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
Wrapping Up
This was really quick and really dirty Wersquoll talk about MySQL some other time but this is enough to get started
W3C has tons of tutorials to use on HTML and PHP httpwwww3schoolscomhtmlhtml_introasp httpwwww3schoolscomphpphp_introasp
The PHP reference is incredibly handy when writing PHP httpwwwphpnetmanualenlangrefphp httpwwwphpnetmanualenindexphp
- CPSC 481 Creative Inquiry to WSBF
- Schedule
- HTML
- HTML History
- Structure of HTML Document
- Structure
- Tag Structure
- Head Section
- Body Section
- Paragraph tag ltpgt
- Linebreak ltbr gt
- Anchor tag ltagt
- Example
- Img tag
- Example (2)
- Div
- Span
- Table
- lttrgt
- ltthgt
- lttdgt
- Example (3)
- Stylinghellip
- External or Linked Style
- Internal Stylesheets
- Inline
- Types of Styles
- PHP Hypertext Processor
- Installation
- How does it work
- How do we do it
- How do we do it (2)
- Language Features
- Comments
- Language Syntax
- Language Syntax Data Types
- Language Syntax Variables
- Language Semantics Variables
- Language Semantics Variable Scope
- Language Semantics Variable Scope (2)
- Language Semantics Variable Scope (3)
- Operators
- Comparator Stuff
- String Operators
- Control Flow
- Control Flow (2)
- Control Flow (3)
- Control Flow (4)
- Control Flow (5)
- Control Flow (6)
- Control Flow (7)
- Functions
- Functions (2)
- Forms
- Forms (2)
- Forms (3)
- Forms (4)
- Forms (5)
- Example formhtml and formphp
- Forms GET vs POST
- Forms GET vs POST (2)
- Wrapping Up
top related