Dream Weaver MX + MySQL + PHP

8/8/2019 Dream Weaver MX + MySQL + PHP

1/25

Dreamweaver MX

+MySQL

+PHP

An Approach to WebEnabling Databases

Peter Connell


2/25

Training and Publications I.S. Services Page 2

Table of Contents

Elements.......................................................................................................................4The Database ..............................................................................................................5

Alf2 account and MySQL database......................................................................5

Creating Tables in MySQL ......................................................................................6Using SQLyog - Populating the MySQL database..............................................7The Web-Based Interface ....................................................................................11Site Definitions ........................................................................................................12Dreamweaver MX MySQL Connection.............................................................14Creating Pages in Dreamweaver ...........................................................................17Template ....................................................................................................................17Menu Page..................................................................................................................18

Form to Query Student Addresses ....................................................................18Exercises ...................................................................................................................23


3/25


Web Enabling Databases in TCD

The following is taken from the College Web Administration pages athttp://www.tcd.ie/Webadmin/Technical/other.html#database

Database Support Database support is available on the web server using PHP and MySql. Access databases may not be used directly but these, and any other ODBC compliant databases created in other applications, may be imported into MySql. Anyone wishing to create or use a database should first email [email protected] with a request for an initial database to be created and access permissions for the database to be assigned.

There are basically two steps in setting up a database on the web. The first

step is creating and populating your database and the second is providing a web interface so a user can access the database via a browser. These two functions are currently supported on the web server by, respectively;

1. MySQL MySQL allows us to create a database on the web server. Rather thantrying to use it directly on the server there's a free application calledMySQL Front which will run on your PC and while you can use toconnect to your database, and create tables, fields etc and manage your data. It will also allow you to import any ODBC compliant database (which would include MS Access). Further

information on MySQL Front, including download, can be found at http://www.anse.de/mysqlfront/

2. PHP PHP is a scripting language that you can embed in a web page to facilitate interaction with a database. Everyone's database is different, as are their requirements for interacting and manipulating their data, so these don't come as standard and you will probably need someone who can write php scripts to suit your needs.


4/25


ElementsThe steps outlined here assume that an MS Access database already exists andthat the task entails web-enabling this database. However, all the steps otherthan 5 and 6 are relevant to a scenario where a database is being developed

from scratch.

1. Database (MS Access, for example)2. ALF2 account 3. MySQL database + users + permissions (contact Helpdesk)4. Setup tables in MySQL database (using SQLyog, for example) 5. Export data from MS Access database 6. Import data to MySQL 7. Alternative to 5 & 6 use ODBC import

8.

Dreamweaver MX a) Define local and remote sites and testing serverb) Set up MySQL connection c) Test connection using Recordset d) Design form to query database e) Design Dynamic Page to display results f) Design query in Recordset g) Publish pages


5/25


The DatabaseOur starting point is a simple relational database in MS Access. The tables and therelationship between them is described below:

Alf2 account and MySQL database.

In order to publish web pages in TCD you will need an alf2 account as this machine hoststhe College web server. E-mail [email protected] to request an account.

MYSQL is an SQL Database Server. SQL stands for Structured Query Languageand isan industry standard across a range of databases such as Oracle, DB2 and MicrosoftSQL Server.

Strengths of MySQL Fast, reliable and easy to use Server of choice when used with the PHP language. PHP provides a very strong

support for MySQL, and due to its huge user base has been widely andthoroughly tested.

MySQL is open source. This means that you can have the sourcecode and arefree to change it according to your needs.

Large user base MySQL is free

A MySQL server can hold a number of databases, each one having a different set of

users and permissions associated with it. To initiate the process of having a MySQLdatabase set up on ALF2 e-mail the Helpdesk indicating the purpose of the database and


6/25


a list of College usernames indicating who can administer the database. IS Services willthen set up the database with an agreed name and the appropriate permissions. At thispoint the database will be empty essentially a shell to be populated with tables .

Creating Tables in MySQLAt this stage you will need to replicate in MySQL the structure of your MS Accessdatabase. There are two options here. You can use the command line interface on alf2or a Windows based utility such as MySQL-Front.

MySQL command line interfaceThis approach involved becoming familiar with MySQL commands which are quite similar toSQL. A MySQL manual available at

http://ftp.heanet.ie/mirrors/www.mysql.com/Downloads/Manual/manual.pdf

First login to to alf2 and then type:

mysql hwww.tcd.ieu username p

(substituting your username).

Type your database password when prompted. The type use followed by thename of the database.

alf2.tcd.ie> mysql -h www.tcd.ie -u pconnell -pEnter password:Welcome to the MySQL monitor. Commands end with ; or \g.Your MySQL connection id is 4962 to server version: 3.23.49

Type 'help;' or '\h' for help. Type '\c' to clear the buffer.

mysql> use dwdb_course;

As in SQL use the CREATE TABLE command to set up a table.

An alternative interface to the MySQL database is to use a desktop application such asMySQL-Front or SQLyog available at http://www.webyog.com/sqlyog/download.html -.You can download these applications and install them on your PC.

An alternative to these desktop interface to MySQL is phpMyAdmin which is a webbased application that has the same functionality. Details about this application can befound at http://www.phpwizard.net/projects/phpMyAdmin/ and this should be available

in TCD in the near future.


7/25


Using SQLyog - Populating the MySQL database

Once installed you set up a connection between a desktop client and the database asfollows:

1. Set up an ODBC connection to your database. This is done via an ODBCadministration tool on your PC generally accessible via the Control Panel. You canchoose to password protect this connection.

Launch SQLyog and prepare to import the tables:

This invokes the SQLyog wizard, taking you through the steps involved in importing thetables:


8/25


Step 1

Step 2


9/25


Step 3

Step 4


10/25


At this point you can choose to alter the default formats and attributes for the tablesby click on the in the Transform column. Data types, primary keys and indexes can beset as shown below:

Data can be viewed by right clicking on the relevant table and choose View Data. Thestructure of a table can be altered by choosing Alter Table Structure .


11/25


Your database has now been transferred from MS Access to MySQL and resides on thedatabase server.

The Web-Based Interface

PHP is one of a range of server-side technologies that support the development ofdynamic web pages. It is a scripting language that developed from CGI, its free and runon a wide range of platforms. For our purposes the important development is thatDreamweaver MX provides PHP support, or, to put in another way, Dreamweaver MXgenerates PHP code in a visual environment.

One of the key features of all versions of Dreamweaver is that it is extensible. Using acombination of HTML forms and JavaScript routines it is possible to develop a type ofmacro called a behaviour. Behavious allow you to add additional functionality to yourpage in a visual way, without having to worry about the underlying code. Before thelaunch of Dreamweaver MX a companion application called UltraDev was required to useserver behaviours. This functionality was integrated into Dreamweaver with the releaseof MX.


12/25


Site DefinitionsThe first step in Dreamweaver is to define local and remote sites. Before launchDreamweaver create a folder in your Personal Filestorage called Student Records. . Onthe server side, log in to alf2 and set up a public_html directory as follows:

cd $HOMEmkdir public_htmlThe necessary directory permissions should be set with the followingcommands:

chmod o+x $HOMEchmod o+rx $HOME/public_html

There are two graphics files we will need when building this site. To get follow thesesteps:

click on the Start button and then Network Shortcuts choose Get Folders from this sub-menu this will display a whole series of folders belonging to College staff. locate the folder called isstrain and open it. within this pconnell folder open the folder Dreamweaver and Databases. Open this folder and copy the two files in it to the Student Records folder in

your Personal Filestorage.

Next, launch Dreamweaver MX. Choose New Site from the Site menu. Click on the

Advanced tab to exit the Site Wizard. For Local Site choose the folder in your PersonalFilestorage, for Remote site choose your public_html directory on alf2. For testingserver type in the details as below, substituting your username for pconnell.


13/25



14/25


Dreamweaver MX MySQL Connection

To point your pages at the MySQL database you must set up a connection, followingthese steps:

1. Choose New from the File menu2. Choose Dynamic Page and PHP as shown below

3. Click on Databases as shown below, then the + tab and then MySQLConnection

4. Define the connection as shown below, substituting your username for pconnell


15/25


At this stage you should be able to view your MySQL database from Dreamweaver. Clickon the + beside the name of your database and then on the + beside tables. You shouldsee the following:

You can test the connection by setting up a query:

1.

Click on the Bindings tab and then choose Recordset. The following should be displayed:


16/25


2.

Select your connection from the dropdown list. Then choose a table from theTable dropdown list. Click Test to display data from all columns in the selectedtable.


17/25


Creating Pages in Dreamweaver

We are now going to set up four different types of page in Dreamweaver

a template, a basic page which will act as a menu to different queries of our database, a form to query the database and a dynamic page (PHP) to display the results.

Template

a. Design the page shown below. To set the background choose Page

Properties from the Modify menu and set tcd_bg1 as the background forthe page.b. Insert a 5 x 3 table and merge cells so that the layout corresponds to

that shown below. Insert the College crest in the top left corner andtype in the heading.

c. To create an Editable Region in the template, click in the large cell underStudent Records Query. Choose Insert from the Windows menu andclick on the Templates tab and then on the Editable Regions button:

Set the vertical alignment on this cell to Top.


18/25


d. Save as a template by choosing Save As Template from the File menu.Name the template SRecords.

Menu Page

This is a straightforward web page that will provide links to three separate forms depending on which query is required.

a. Choose New from the file menu and save the file as index.html. To apply theSRecords template choose Templates from the Modify menu and then chooseApply Template to Page. Pick the SRecords template and click OK

b. Delete Editable and insert a 1 x 3 table in this cell.c. Type in the text as shown below. Link the Student Address text to

query_address.html and link Student Examination Results to query_results.html.Link All Students to show_all.php.

Form to Query Student Addresses

a. Create a new file and apply the SRecords template.b. Choose Form from the Insert menu to insert a form into the Editable Region.c. Within this area insert a 3x 3 table.

d.

In the top right cell of this table insert a text field by choosing Insert ->Form Objects -> Text field


19/25


e. In the properties inspector give this text field the name SName.

f. Insert two form buttons as shown above. Change the label on the Submitbutton to Search and change the action on the second button to Reset.

g. Finally, we need to specify what action is to be taken when the Search

button is clicked. To do this we need to go to Code View. Scroll towards thetop of the code and point where the form is defined type inshow_address.php as below:


20/25


This is specifying that this form will call a page called show_address.php when Search isclicked.The third type of page we need to set up is a dynamic or PHP page which will display theresults of the query.

1. Choose New from the File menu. This time choose Dynamic Page as the

category and PHP as the type. Apply the SRecords template to this page.Save the page as show_address.php.

2. We next have to set up the Recordset which defines the query associatedwith this file. Click on Server Behaviours and then on the + to display theRecordset. You then build the Recordset as shown below. The code

WHERE StudentRec.Surname LIKE %$SName%

must be typed in. The variable $SName is passed from the query_addressform. This condition specifies that records corresponding to any surnamelike that passed from the form


21/25


3. show_address.php now has to be designed to display the results of the query.Insert a 2 x 7 table in the Editable Region as below. Then click on theBindings tab and expand the Recordset so that the field names in theStudentRec table are displayed.

4. drag the field names to the appropriate locations in the table to achieve theformat below


22/25


In order that multiple records can be displayed select the area of the pagefrom Student Number down to the horizontal line below Recordset1.Country.Click on Server Behaviours and then on the + sign. Select Repeat Region asbelow:

View the code for this page. Dreamweaver has generated PHP code toimplement the query. Note in particular the following parts of the code:


23/25


Exercises1. Create a form that will query the students annual examination results based

on the student number. The form should be set up using the SRecordstemplate and conform to the following layout:

2. The parameter passed from this form should be called SNumber and the

action should be defined as show_results.php.3. Save this file as query_results.html.4. Create a PHP file, again using the SRecords template. It should conform to

the following format:


24/25


5. The Recordset needs to be defined as follows:

where the full code reads

SELECT StudentRec.StudentNo, StudentRec.FirstName,StudentRec.Surname, Course_year.AnnualExam, Courses.CourseName FROMStudentRec, Course_year, Courses WHERECourses.Course_No=Course_year.Course_no AND


25/25

StudentRec.StudentNo=Course_year.StudentNo and StudentRec.StudentNo= '$SNumber'

6. Save this file as show_results.php. Publish these two files and check thatthey work.

7. Finally, create a file called show_students.php with the following format:

This consists of a 1 x 3 table which is, in turn, defined as a Repeat Region. When savedpublish the file to complete the third of the menu items.

Documents

Dream Weaver MX + MySQL + PHP