Website Development & Management

PHP Fundamentals

CIT 3353 -- Fall 2006www.clt.astate.edu/jseydel/mis3353

Instructor: John Seydel, Ph.D.

Student ObjectivesUpon completion of this class meeting, you should:

Be able to discuss the concepts involved in writing PHP scripts that

Collect data sent by an HTML form Assign values to local variables based upon form data Perform simple calculations Display data and calculation results back to a web page

Have resolved questions regarding the WAMP installation

Summarize the markup needed to create web forms with commonly used controls

Textbox Checkbox Radio button Drop-down list Submit button

PHP Script BasicsVariable naming Requirements Conventions

Assignment statements Literals

Numeric Text

VariablesGetting form data from global arraysDisplaying valuesBasic calculationsControl structures (basic selection)

Review: PHP Platform Installation

Installing MySQLInstalling/configuring ApacheInstalling/configuring PHP

Note: these instructions are intended to augment, not replace the textbook’s instructions

Some More Details on HTML Forms

Main element is <form> Attributes:

id (for object references in scripts) action (where the form processor is) method (usually post but sometimes get)

Should be only one per page (for our purposes) All controls must be within <form> ... </form>

Form controls input (many types) select button (we won’t be using this, probably) textarea

Note the importance of the value attribute for these controls Forms represent one of the major objects in the DOMRecall: processors can be either server-side or client-sideAny questions . . . ?

Summary of Today’s Objectives

Resolve questions regarding the WAMP installation

Develop ability to write a simple PHP-based form processor that Collects data sent by an HTML form Assigns values to local variables based upon

form data Performs simple calculations Displays data and calculation results back

to a web page

If Time Permits . . . Demonstration: web pages are HTML files and are thus independent of the editors used and the means used to upload/download them

Capture CoB web page students.htm This is a DreamWeaver page

Edit in NotePad Use FrontPage to upload back to CoB site

Questions Troubles encountered when installing WAMP? Why don’t we meet in the lab? Other . . . ?

Using phpinfo() to view form data

Appendix

The Installation Process: MySQL

Generally follows procedure given in Meloni textbookDownload mysql-4.0.24-win.zip from course Handouts page (or from MySQL.com) into Downloads directoryUncompress into a default temporary directory and then open that directoryDouble-click on SETUP.EXE and accept all defaults as the installation wizard runsTest the installation

Run c:\mysql\bin\winmysqladmin.exe Provide a username and password you’ll remember

(generally, these won’t be used again, ever) Note the stoplight now on taskbar at bottom right MySQL’s database server now starts upon bootup

For now, go no further (i.e., not beyond p. 8)

The Installation Process: Apache

Again, ensure that IIS is stoppedAlso follows procedure given in Meloni textbook but with some variations; assumes you’ll be installing PHP right awayDownload apache_2.0.54-win32-x86-no_ssl.msi from course Handouts page (or from Apache.org) into Downloads directoryDouble-click on apache_2.0.54-win32-x86-no_ssl.msi

Accept defaults as the installation wizard runs Don’t worry for now about Server Information panel

Verify the installation Note the feather icon near the right end of the taskbar Point browser to http://127.0.0.1 (output displayed on p. 29

should appear)

Modify the configuration . . .

Modifications to ApacheEdit the configuration file:

c:\Program Files\Apache Group\Apache2\conf\httpd.conf

Specify server settings: Find ServerAdmin statement and set the argument

to your email address Find ServerName statement and set the argument

to your IP address or to 127.0.0.1

Two more changes: Add to the end of the LoadModule section

LoadModule php5_module c:/php/php5apache2.dll Add to the end of the AddType section

AddType application/x-httpd-php .phtml .php

Do not restart Apache until after installing PHP

The Installation Process: PHPVaries somewhat from procedure given in Meloni textbookDownload php-5.0.4-Win32.zip from course Handouts page (or from PHP.net) into Downloads directoryUncompress into a permanent directory (c:\php) and then open that directoryConfigure PHP (see next slide)Restart Apache Click on taskbar icon (feather) Then Apache2 | Restart

Configuring PHPMake changes to files

Copy c:\php\php.ini-dist to c:\WINDOWS Rename c:\WINDOWS\php.ini-dist to c:\WINDOWS\

php.ini Edit c:\WINDOWS\php.ini

Open in NotePad Find and uncomment (remove “;”)

extension=php_mysql.dll Find and set error reporting configuration

error_reporting = E_ALL & ~E_NOTICE display_errors = On

Setup for email (example) SMTP = smail.astate.edu sendmail_from = JoJo.Beans@smail.astate.edu

Save and close the file Copy c:\php\php5ts.dll to c:\WINDOWS\system Copy c:\php\ext\php_mysql.dll to c:\WINDOWS\system Copy c:\mysql\bin\libmysql.dll to c:\WINDOWS\system

Restart Apache

Browser/Server Interaction

The HTML Document Object Model

WindowWindow

NavigatorNavigator DocumentDocument HistoryHistory

AnchorAnchor FormFormImageImage LinkLink

InputInput TextareaTextarea SelectSelectButtonButton

Text Radio Checkbox Submit Reset Password

Location

OptionOption

Browser objects: objects that provide access to the browser

Input Elements

Empty element with many controls (per the type attribute) One line text box (text) Check boxes (checkbox) Option buttons (radio) Submit/reset button (submit or reset)

Other common attributes name (always specify) size (also maxlength, but not same) value

Text Boxes

Format: <input type=“text” ... />Simplest type of inputDisadvantage: can’t control what’s typed except through Using maxlength JavaScript validation is better

Fonts: Can’t be controlled, except with style sheets Size differs across browsers

Check Boxes

Format: <input type=“checkbox”... />Each box has a different name and set of attributesNotes about attributes Value submitted for value attribute

If checked then whatever value is specified Else “”

The checked attribute is binary (0 or 1)

Don’t confuse with option buttons

Option Buttons

Format: <input type=“radio” ... />Must define an option group That is, multiple controls all with same name Each control within group has different value

Only one of any group can be checked at a timeWhen form is submitted, only the value of the checked control will be sentLike multiple choice question: Option button ~ “mark the best answer” Check box ~ “mark all that apply”

Select (“Combo” or “List”) Box

Involves two elements <select> (main element; container) <option> (contained in select element)

Main select attributes name size Event handlers (e.g., onChange)

Primary option attributes value selected

Buttons, Buttons, Everywhere

Three kinds of buttons (not including reset) <input /> element (empty element)

Server-side processing: <input type=“submit” ... /> Client-side processing: <input type=“button” ... />

<button> element: contains inline & block elements Client-side processing only Allows control over display (images, font, etc.) Format:

<button>. . . content . . .

</button>

A note on client-side processing Button requires the onClick attribute Invokes the JavaScript function specified

The value Attribute

Can be preassigned to a control Shows up in text controls and on buttons With other controls, values are hidden and

are assigned to variables associated with controls

When form is processed, value is whatever is entered into control If text box or text area, then text string Otherwise it’s a preassigned value

Check boxes Buttons: submit, reset, option, button Select (combo) boxes

Names to Use for ControlsUse conventions from programming languages: Java, C++, Visual BasicTypically

First 3 characters lowercase and type of control Uppercase only when words joined (intercap)

Control Type Prefix Example

Textbox txt txtFirstName

Text Area txt txtFeedback

Checkbox chk chkRetirement

Option Button opt optClass

Dropdown List lst lstWeekDay

Submit Button cmd cmdCalculatePay