Parkland College > Fine & Applied Arts > Graphic Design | Web Design >
Student Links > GDS 215 > Exercise #5

GDS 215 WEB DESIGN III
Exercise #5: PHP Entry Forms
Instructor: Paul Young

Objective

To learn Dreamweaver's dynamic page functions and database tools by recreating these form pages.

Procedure

prepping for the exercise

1. download starter files, move to upload folder
2. new site "e5-chaamps"
3. examine downloaded files
4. dupe "entry.html", rename "entry.php", open renamed file
5. examine database tables (chaamps2, list2):
   http://65.61.219.1/MyAdmin/indexsite.php
   user: paulananda2
   pw: _______________

making the CSS style sheet

1. examine file structure
2. add new CSS style (define in new style sheet file)
3. redefine <p>: 11/14 verdana
4. redefine <a>: decoration none, font color=#FF0066
5. new style "a:hover" (css selector): underline, font color=#FF0066
6. new style ".head" (class): font color=#FF0066
7. new style ".lite" (class): font color=#6E7B5B
8. dupe <p>, rename ".small" (class): 9px
9. dupe <p>, rename ".textbox" (class): border 1px, color=#6E7B5B
10. dupe <p>, rename ".button" (class): font color=white; background color=#6E7B5B; border=2px solid, color=#6E7B5B
11. dupe <p>, rename ".ID" (class): 18px, font color=white
12. apply styles, preview

setting up the server

1. edit site "e5-chaamps"
2. remote and testing server ("jsmith-chaamps" doesn't exist yet):
   host: ftp.electric-pictures.com
   dir: public_html/jsmith-chaamps
   login: gds215student
   pw: _______________
   testing server URL prefix:
   http://gds215student.electric-pictures.com/jsmith-chaamps/
3. window > databases: + connection (this is site specific)
   name: ep
   mysql server: 127.0.0.1
   user: paulananda2
   pw: _______________
   database: electric-pictures_com_-_db
4. upload files including "Connections" folder (for testing)

finishing the form

1. label each form field with logical name (i.e. "EntryType")
2. window > bindings: + record set (query) (this is file specific)
   connection: chaamps, table: list2
3. type of entry: list values: add "select one" (initially selected), "professional", "student"
4. category: bind to dynamic source: add "select one" (initially selected), value=value, label=categeory
5. change "submit" button to "proofread"
6. select form: post "proofread.php"
7. save, upload (cmd+shift+U), preview (F12)

inserting fields in "proofread.php"

1. dupe "proofread.html", rename "proofread.php"
2. link CSS style sheet, apply
3. window > bindings: + form variable "EntryType" (must match field names in "entry.php"); insert, test
4. repeat with other form variables
5. insert hidden field "EntryType", bind to form field (this connects the form field to the hidden field); repeat
6. window > bindings: + record set (query) (this is file specific)
   connection: chaamps
   table: chaamps2
7. EDIT button: add behavior "call javascript": "javascript:history.go(-1)"
8. select <form>: add server behavior "insert record", fill out form (inserts hidden field into database)
9. test

finish "print.php"

1. duplicate "print.html", rename "print.php"
2. link CSS style sheet, apply
3. window > bindings: + record set (query) (this is file specific)
   connection: chaamps
   table: chaamps2
   sort: ID (descending)
4. insert record bindings
5. insert hidden field "recordID", bind to "ID"
6. PRINT button: add behavior "call javascript": onClick="window.print()"
7. ADDITIONAL ENTRY button action=submit form; select <form>: action=entry2.php
8. NEW ENTRY button: add behavior "go to URL": entry.php
9. DONE button: add behavior "call javascript": "Javascript:onClick=self.close()"

revise "entry2.php"

1. open "entry.php", add "validate form" behavior to "proofread" button
2. save, save as "entry2.php"
3. revise, save, test
4. make links to your work from your projects page
5. test on a PC

Schedule

See Calendar.

______________________________

Last updated: 3/14/04 • Webmaster: Paul Young

Student
Exhibition

Influential
Designers

Internet
Resources

Tips, Tricks
& Handouts

Student
Links