 |
 |
|
|
|
Parkland
College > CSIT
Dept > Digital Media > CIS 152 >
Calendar > Lesson 11
CIS 152 WEB DESIGN I
Lesson 11: Introduction to PHP and Server Technology
Instructor: Paul
Young
|
| |
Objectives
|
|
To be introduced to Dreamweaver's PHP capabilities by constructing a form system similar to this
site.
|
| |
Discussion
|
|
When content needs to change dynamically on a web site, one usually connects a database to a web site. The simplest database is a table containing data. However, databases can get very complex as multiple tables are connected to each other. Microsoft Access and Filemaker Pro are examples of desktop database applications. Cold Fusion, ASP and PHP are examples of web-based database applications ("server technology"). Web-based applications are installed on the web server, and do not run on your personal computer. Therefore dynamic web pages must be published before they can be tested.
In this lesson, we will be using PHP and MySQL. PHP is popular because it is an open source application (like Unix). Our web hosting service (Network Solutions) has PHP installed and our database administrator has already created a database on the server called "hte." We can access this database through an interface called phpMyAdmin (see article).
Dreamweaver has extensive tools to help write basic PHP and MySQL code. Additional code can be downloaded as extensions from Adobe Exchange. However, most database-driven sites have custom functions coded by hand. Working with databases and MySQL code requires extreme precision, attention to detail, and extensive testing.
|
| |
Procedure
|
|
Overview: Create a new table in an existing database. Set up Dreamweaver to access the database table. Create a form and connect it to the table. Pull data from the table into a "view" page. Add CSS styles.
Creating a database "table" with phpMyAdmin
- browse to http://205.178.146.23/
- login: hte; pw: •••••••
- go to "databases", choose database "hte"
- add new table with your name
- add 10 fields (columns): lastName, firstName, email, web, tel1, tel2, keywords, approved, approved_by, sex (all type=varchar, length=255 or 20, null)
- add 4 more fields: birthdate (date, null), age (int, null), time (timestamp, current, not null), id (int, not null, auto_increment, key)
- adjust int length
- insert new record (row): add your own info (keyword=favorite movies; skip: approved, approved_by, age, time, id)
- export: CSV for excel, put fields in first row=yes, save as file
- empty: then import CSV file back into table
Setting up a testing server in Dreamweaver
- launch Dreamweaver
- edit > preferences: category=accessibility, do not show form labels
- go to site "jsmith_upload", connect
- create new remote/local folders "lesson11_php"
- define a new site (site > new site): name=lesson11,
local root folder=cis152/upload/lesson11_php
- category: remote info
- ftp host: 205.178.145.65
- host dir: staging/jsmith/lesson11_php
- login: hte%00f2727
- password: •••••••
- category: testing server
- server tchnology: PHP
- ftp host: 205.178.145.65
- host dir: staging/jsmith/lesson11_php
- login: hte%00f2727
- password: •••••••
- URL prefix: http://00f2727.netsolhost.com/staging/jsmith/lesson11_php/
Creating a form
- file > new: basic HTML page "confirm.html"
- copy text from this page (note links)
- save, upload file
- file > new: dynamic page, PHP
- file > save as "form.php"
- insert > form > form
- insert > table (into form area): 10 rows, 3 columns, vertical=top, cell padding=5, others=0
- copy & paste this text into table
- insert > form > text field (no label, char width=20, char max=255, adjust as needed)
- change TextField <input name> to match database columns
- insert > form > radio group, change checked values to "Male", "Female"
- insert > form > button: submit, reset
- save, file > preview in browser (F12)
Linking the form to the database
- window > databases
- add a connection (+):
connection name: jsmith (use same name as table)
MySQL server:
205.178.146.23
user name: hte
password:
•••••••
database: hte (select)
- upload "Connections" folder (important!)
- window > server behaviors
- add behavior "insert record" (+):
submit values from: form1
connection: jsmith (use same name as table)
insert table: jsmith
after inserting, go to: confirm.html
- file > preview in browser (F12)
- enter data
- browse to http://205.178.146.23/
- examine new record (row)
Pulling data from the database
- file > new: dynamic page, PHP
- file > save as "view.php"
- copy text from this page (note links)
- window > bindings
- add recordset "jsmith" (use same name as table)
- insert appropriate dynamic fields to replace static text
- save, file > preview in browser (F12)
- window > server behaviors
- add server behaviors (+) display record count > display total records
- insert > HTML > horizontal rule
- select region to repeat
- add server behaviors (+) repeat region
- save, file > preview in browser (F12)
Making CSS styles
- open "form.php"
- window > CSS: add new styles (+)
- new CSS style (link to "form.css"): redefine tag <p>: font=verdana, size=11, line height=18
- new CSS style: redefine tag <td>: font=verdana, size=11, line height=18
- new CSS style: redefine tag <body>: category=box: top bottom margin=20, left right margins=50
- new CSS style: class ".form": font=verdana, size=12, line height=18
- apply style to form fields
- save, file > preview in browser (F12)
- finish the HTML file (see lesson 10)
- new CSS style: class ".gray": color=gray
- link "form.css" to other pages, apply styles
Formatting and linking
- link web address and email to "#" (temporary)
- get more server behaviors (goes to Adobe Exchange)
- search exchanges for "php date" (in Dreamweaver Exchange)
- download and install "PHP Format Date"
- embed cursor at insert location
- go to insert tab "php_date" (click icon): value="#" (temporary), location=no
- view > code: replace "#" with appropriate dynamic fields
- modify date codes (optional)
- save, file > preview in browser (F12)
- grading: publish and make links from your personal web site to this lesson
|
|
|
