CPSC 481: CREATIVE INQUIRY TO WSBF J. Yates Monteith, Fall 2013.

62
CPSC 481: CREATIVE INQUIRY TO WSBF J. Yates Monteith, Fall 2013

Transcript of CPSC 481: CREATIVE INQUIRY TO WSBF J. Yates Monteith, Fall 2013.

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

Google

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

Google

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

Google

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

Google

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

Google

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

Google

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

Google

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

Google

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

Google

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

Google

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

Google

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

Google

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

Google

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