week 5 open session

Week 5 Open SessionWeek 5 Open Session

Welcome.  We will start promptly at 9. 

PHP stepping stonesPHP stepping stones

• Create a valid form (HTML 5 core)Create a valid form (HTML 5 core)– Two form fieldsSubmit button– Submit button

• Get the form data to display on a second page ( l PHP N b)(a‐la PHP Noob)– Using $_POST[ ] 

Simple Form exampleSimple Form example

PHP Sprout – Data SetupPHP Sprout  Data Setup 

• PHP MyAdminPHP MyAdmin– Create a databaseCreate a user account– Create a user account

– Create a table with two fieldsC t SQL t i t d t– Create SQL to insert data

– Create SQL to read the contents of the table

PHP Sprout – Reading the DataPHP Sprout  Reading the Data

• START with a basic HTML template fileSTART with a basic HTML template file• In PHP connect to the databaseC h bl• Connect to the table

• Read data from the table

Example – connect to databaseExample  connect to database

PHP Sprout – Insert form dataPHP Sprout  Insert form data

• Start with your PHP Noob – style fileStart with your PHP Noob style file• Create a variable to hold the $_POST data

i di l h i bl d• Test to insure you can display the variable data• Run the static SQL insert statement – verify that the data is inserted

• Replace the static portions with the variablep p• Verify the data insert

Example – insert form data

PHP Sprout – final stepsPHP Sprout  final steps

• Sanitize the input ‐Sanitize the input mysql_real_escape_string()

• Add input validation a good place for• Add input validation – a good place for jQuery!Add h fi ld h f• Add other fields or other extra features

• Use PHP includes for the header and footer sections.include()

Example ‐ extrasExample  extrasSanitize user input 

h kto prevent hacks

Use PHP include function to pull in boiler plate d tcode common to 

all pages.

Anatomy of a WordPress Theme

http://yoast.com/wordpress‐theme‐anatomy/

WordPress TemplatingWordPress Templating

• ON YOUR WordPress SiteON YOUR WordPress Site• Start with a template you like 

ll i d i d i• Install it on your WordPress site and activate • Browse the main page and save as an HTML file to your local computer

WordPress – with the local HTML copyWordPress with the local HTML copy

• Identify the folder with the style css pageIdentify the folder with the style.css page.  • Create images folder in there to hold any CSS image referencesimage references

• Edit that CSS file to re‐skin the site to your ifi i d h ispecifications – update the comment section 

at the head of the file! (see next slide)• Make a screen shot of the final version and save it as a PNG file – screenshot.png

Style.cssEdit thiEdit this section at the top of the file.  The Theme Name must match the folder name used on yourused on your web server to hold the files.

WordPress Templates ‐ 2WordPress Templates  2

• Make a copy of the selected template folder inMake a copy of the selected template folder in wp_content

• Rename the folder to match what you listed inRename the folder to match what you listed in the comments head of your new style.css

• Upload the new style.css and linked imagesUpload the new style.css and linked images folder to overwrite the existing one in the copied template

• Copy screenshot.png into that same folder, overwriting the existing copy

Wordpress foldersWordpress folders

Copy your chosen th ‘t l t ’theme ‘template’ folder.  Rename the folder something like ‘test‐theme’.  Use that same name in the style.css header file used

Copied twentyelevenand saved as test‐theme

header file used for the theme.

WordPress – structure changeWordPress structure change

• Activate your test themeActivate your test theme• Finally you must make a structure change

k i di i h i i• Look into edits in the content appearing in head.php, sidebar.php or footer.php .