dreamweaver tutorials on php by yomiprof

VIEWS: 14 PAGES: 9

									Building your first dynamic website – Part 1:
Setting up your site and database connection
Irina Dumitrascu
This is Part 1 in a three-part tutorial series. In this tutorial series, you will learn how to use Dreamweaver CS4 to create a
dynamic (or data-driven) website. You'll learn how to retrieve data from a database and display it on web pages. You'll
also use Dreamweaver to create a form that enables visitors to provide feedback (or comments about a product or idea)
and then saves their comments in a database.
In this part, you learn the difference between static and dynamic websites, how to set up and define a PHP site in
Dreamweaver, and how to set up a MySQL database and user account and connect to your database.



Requirements

To complete this tutorial you'll need to install the following software and files:
Dreamweaver CS4
Try (www.adobe.com/go/devcenter_dw_try/) Buy (www.adobe.com/go/devcenter_dw_buy/)

Sample files:
feedback_php.zip (www.adobe.comhttp://download.macromedia.com/pub/developer/feedback_php.zip) (ZIP, 42K)

Prerequisite knowledge
You should be familiar with the Dreamweaver workspace and the basics of building a static website as explained in
Creating your first website in Dreamweaver (www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html) .



Review your task

The website you'll create consists of:

    A page that provides a form for leaving comments and displays the comments already left by others.
    An administrative section for managing the comments. This section can be accessed only by the site's administrators
    and consists of the following pages:
         A login page that allows administrators to authenticate
         A page for administrating feedback
         A page for deleting feedback items
         A page for changing the status of feedback items


Figure 1 shows the main page of the finished site, including the feedback form and two comments left by site visitors.
Figure 1. This is the main page of the dynamic sample website that you'll create in this tutorial.
Note: The design is derived from dreamy (www.adobe.comhttp://www.oswd.org/design/preview/id/3459) .



Compare static v. dynamic sites

Building a website requires familiarity with specific concepts, as well as software products and tools. This section provides
a brief overview of these requirements, so you gain a better understanding of the difference between building a static
versus a dynamic website.
A static site displays the same information to all users, whenever they access it. Consider a site that makes a book
available via the Internet. The site's content is the same for all users at all times: each page of the book, with links to the
next and the previous page.
What would happen if the site owners decided to allow users to add comments on each page? The site would become
dynamic: over time its contents would change as users added comments. If the site became very popular, the owners
might decide to add another feature that enabled moderators to reject inappropriate comments. In this case, the site would
work one way when accessed by a regular user and another way when accessed by a moderator.
A key difference between a static website and a dynamic website is the source of the information that is displayed by the
site.
site.
Static websites
All the content data for a static website is contained in the files that correspond to the pages of the site. These files store
data in a special format, HTML.
Returning to the example of static website displaying the pages of a book, each page of the book would be stored as
HTML in a separate file with the .html extension. In order to change the contents of a book page, you would have to
edit the corresponding HTML file (using a text editor or HTML editor such as Dreamweaver CS4).
To run a static website you need a web server, which is a software application that:

        Receives requests for displaying a web page
        Reads the corresponding file
        Sends the contents of the file back to the computer that made the request (see Figure 2).




        Figure 2. A typical setup for static websites


Examples of common web servers include Apache (www.adobe.comhttp://httpd.apache.org/) and Microsoft Internet
Information Services (IIS (www.adobe.comhttp://www.microsoft.com/iis) ).
Dynamic websites
In contrast, dynamic sites must be able to display information that changes over time or varies depending on the user who
accesses it. For this reason dynamic sites use a software program that acts as a data repository, usually a database
system. Information can be added to or retrieved from this repository dynamically.
Furthermore, dynamic sites must be able to integrate the static parts of a site—for example, the book contents in the
book website—with the dynamic ones, for example, comments. This mix of static and dynamic information is realized, in
addition to using a web server, by:

        Writing the pages in a scripting or tag-based language, that mixes the static part (HTML) with instructions for
        processing dynamic data.
        Running software on the server that interprets the instructions in dynamic pages and executes them to retrieve
        information (data) from the database, add information to the database, or modify it. This software is commonly known
        as an application server.


The scripting or tag-based language that you'll use must be compatible with the application server that you choose.
Popular combinations include:

        ColdFusion, which uses ColdFusion Markup Language (CFML)
        Active Server Pages (ASP (www.adobe.comhttp://www.asp.net/) ), which uses VBScript and JavaScript
        PHP (www.adobe.comhttp://www.php.net/) , which uses the PHP scripting language


Note: In this context, PHP has two meanings: It is used to describe a scripting language and an application server that
supports that language.
Therefore, in addition to a web server, the following software is required in order to run a dynamic site (see Figure 3):

    Database server: Software that manages the database. Some commonly used database servers for the web are
    MySQL (www.adobe.comhttp://www.mysql.com/) , Oracle (www.adobe.comhttp://www.oracle.com/) , and SQL Server
    (www.adobe.comhttp://en.wikipedia.org/wiki/Microsoft_SQL_Server) .
    Application server: Examples of application servers are ColdFusion (www.adobe.com/products/coldfusion/) , IIS
    (which acts as a web server and an application server), and the PHP (www.adobe.comhttp://www.asp.net/) application
    server.




Figure 3. A typical setup for dynamic websites
In the following sections, you will accomplish these tasks:

   1. Set up the development environment, including the installation of software needed to run the dynamic website.
   2. Create the website and pages in Dreamweaver. In this step you will also set options in Dreamweaver to specify the
      scripting language in which dynamic pages are written, where to store the files, and so on.
   3. Create a database and configure Dreamweaver to use it.
   4. Create the dynamic pages that make up the site.



Set up your PHP development environment

To begin work, you need to create an environment in which you can easily develop and test your dynamic website. This
means installing the necessary software: a web server, a database system, and an application server.
When setting up a development environment, you can choose from several web, database, and application servers. They
all differ in price, functionality, and availability on various operating systems.
For this tutorial, you will use the following combination:

    Web server: Apache
    Database server: MySQL Community Server
    Application server: PHP


These servers have been adopted widely and are proven to work together seamlessly, and you can download them for
free. What's more, you can get them packaged in a one-in-all solution—XAMPP
(www.adobe.comhttp://www.apachefriends.org/en/xampp-windows.html) for Windows or MAMP
(www.adobe.comhttp://www.mamp.info/en/index.php) for Mac OS X—which makes it easy for you to install Apache and
MySQL and set up your PHP development environment in Dreamweaver.
Note: If you want to use other combinations of server software (such as the IIS web, the Microsoft Access database, and
the ColdFusion application servers), the techniques presented in this tutorial still apply.
Set up your PHP development environment
Refer to the following pages in the Setting up a PHP development environment for Dreamweaver tutorial to install the
Apache web server and MySQL database and then test your PHP installation:

    To install XAMPP on Windows, follow the instructions in Set up PHP for Windows
    (www.adobe.com/devnet/dreamweaver/articles/setting_up_php_02.html#install_xampp) .
    To install MAMP on Mac OS X, follow the instructions in Set up PHP for Mac OS X
    (www.adobe.com/devnet/dreamweaver/articles/setting_up_php_03.html#install_mamp) .


Note: Adobe does not provide technical support for third-party products such as XAMPP and MAMP referenced in this
article.
After setting up your PHP development environment, return to this tutorial to set up your workspace and define a PHP site
in Dreamweaver.
Set up your workspace
For this tutorial, I assume that you are somewhat familiar with the Dreamweaver workspace. If necessary, you can watch
the video Introducing Dreamweaver CS4 (www.adobe.comhttp://tv.adobe.com/#vi+f1592v1769) (6:36) to refresh your
memory and familiarize yourself with the tools you need to complete this tutorial.
Dreamweaver CS4 includes a workspace configurator, which lets you choose the workspace that you want to use. Each
workspace has a predefined layout of the main work area and the helper panels to facilitate quick completion of certain
kinds of tasks. For this tutorial, you will want to work in the classic workspace, which features panels that provide easy
access to the tools and files you'll need.
To get started:

   1. Launch Dreamweaver if you haven't done so already.
   2. Choose Window > Workspace Layout > Classic. This will arrange the panels in the window; for the moment they
      are disabled (grayed out) but will become functional after you create a PHP site for Dreamweaver as instructed in
      the next section.
   3. Familiarize yourself with the location of the following panels and toolbar:
           The Databases, Bindings, and Server Behaviors panels. You will be using these panels throughout the tutorial.
           The Properties inspector (at the bottom)
           The Files panel (that lists the folders and files in your application folder).
           The Insert toolbar, which is located below the main menu bar (see Figure 4).




Figure 4. The Classic workspace Insert toolbar



Define a PHP site

In Dreamweaver, a site is a group of settings that are important for a web project. These settings specify, for example,
where your project files are located on your computer (the working folder) and the URL address of the web server to be
used to test the project on your computer (the testing server). It's common practice to store project files in a folder inside
the root of the testing server, which is what you'll do in this tutorial.
This section shows you how to:
  1. Install the projects files.
  2. Specify your working folder.
  3. Specify your testing server.


Install the projects files
If you haven't done so already, download and extract the contents of the feedback_php.zip file that accompanies this
tutorial. You will want to move the contents of the ZIP archive to your testing server's document root. If you installed
XAMPP and MAMP, the document root is::

    On Windows: C:\xampp\htdocs
    On Mac OS X: Applications:MAMP:htdocs


The ZIP file contains a folder named Feedback, which contains the folders data and images and the file style.css.
Move the Feedback and its contents to your testing server's document root. You should end up with the following folder
structure:

    On Windows: C:\xampp\htdocs\Feedback
    On Mac OS X: Applications:MAMP:htdocs:Feedback


Specify your working folder
To specify your working folder:

  1. In Dreamweaver, select Site > New Site. This opens the Site Definition dialog box. If the Basic tab is showing, click
     the Advanced tab.
  2. Enter Feedback in the Site Name text box. The site name identifies the project in Dreamweaver.
  3. Click the folder icon next to the Local Root Folder text box to and browse to the Feedback folder that you created in
     your testing server's document root:
          On Windows: C:\xampp\htdocs\Feedback
          On Mac OS X: Applications:MAMP:htdocs:Feedback

  4. In the HTTP address text box enter http://localhost/Feedback.
  5. Select the Links relative to Document options. This is the most reliable setting for a PHP site. Selecting the Links
     relative to Site root option can cause problems with PHP include files on some servers.
  6. Leave the Site Definition dialog box open. You will specify your testing server next.


Specify a testing server for Dreamweaver
To specify a testing server:

  1. In the Site Definition dialog box, click Testing Server in the Category list on the left. (Note: If you can't see the
     Testing Server item, verify that the Advanced tab is selected in the Site Definition dialog box.) The Testing Server
     screen appears.
  2. Select PHP MySQL from the Server Model pop-up menu.
  3. Select Local/Network from the Access pop-up menu.
  4. Dreamweaver displays the local root folder you specified in the Local Info category in Step 3 in the previous
     section. Leave the folder unchanged.
  5. In the URL Prefix text box, you must enter the URL you would enter in a web browser to request a page in your
     web application. For the names used so far in this tutorial, the URL Prefix is: http://localhost/Feedback/.
  6. Click OK to define the site and dismiss the Site Definition dialog box.
  7. Click Done to dismiss the Manage Sites dialog box.


The next step is to create a MySQL database and user account.
Set up a MySQL database and user account

MySQL is not a single database, but a database management system. You create individual databases within MySQL.
The superuser, root, has complete control over all databases, so it's necessary to set up user accounts with restricted
privileges to prevent unauthorized users from gaining access to other people's data.
In this section, you'll use the MySQL front end, phpMyAdmin (which is installed with XAMPP and MAMP) to complete the
following tasks:

  1. Create a new database and import data.
  2. Create a MySQL user account.
  3. Connect to the database.


Create a new database and import data
To perform this task:

  1. Verify that your web server and the MySQL server are running.
  2. Enter http://localhost/phpmyadmin/ into your browser's address bar and load the page.
      If you installed XAMPP in Windows, enter root as the user name, and then your MySQL root password when
      prompted.
      You should see a phpMyAdmin welcome screen similar to the one shown in Figure 5.




      Figure 5. The phpMyAdmin main screen
      Note: The default list of databases shown in the menu on the left of the screen is slightly different in XAMPP and
      MAMP, but this is not important.

  3. Enter feedback in the text box labeled Create new database, and then click the Create button.
      Note: You can ignore the Collation drop-down menu. Collation determines the sort order of records. The default
      setting is fine for English.

  4. When phpMyAdmin reports that the database has been created, click the Import tab at the top of the page.
  5. In the File to import section, click the Browse button alongside the Location of the text file text box; navigate to the
     Feedback folder on your computer (Windows: C:\xampp\htdocs\Feedback, Mac OS X:
     Applications/MAMP/htdocs/Feedback), select the data folder, and then the file feedback.sql.
      Applications/MAMP/htdocs/Feedback), select the data folder, and then the file feedback.sql.
  6. Click the Go button at the bottom of the page. This creates the structure for the database used in this tutorial and
     adds initial data.
  7. Leave phpMyAdmin open, as you will continue using it in the next section.


Create a MySQL user account
The root superuser should be used only for administrative tasks inside phpMyAdmin, because it has the power to wipe out
all the data. Once data has been deleted, you cannot restore it. There is no equivalent of the Windows Recycle Bin or
Mac Trash in MySQL. So, the next task is to create a MySQL user account with restricted privileges.
Follow these steps to create an account that has access only to the feedback database:

  1. Click the icon that looks like a little house at the top left of the phpMyAdmin screen to return to the original
     welcome screen (shown earlier in Figure 4).
  2. Click the Privileges link in the menu.
  3. Click Add a new user (roughly halfway down the page).
  4. In the User name text box, enter feedback_user.
  5. From the Host drop-down menu, select Local. This enters localhost in the text box alongside, restricting the user to
     your local test environment.
  6. Type a password in the Password field, and retype it in the field immediately below.
  7. Leave the rest of the page unchanged, and click the Go button at the bottom of the page.
  8. The next screen confirms that the new user has been added. The Global privileges section, shown on the screen,
     allows giving privileges on all databases. For the purposes of this tutorial, you're going to limit the user to the
     feedback database, so scroll down to the Database-specific privileges section.
  9. Select the database name from the drop-down menu, as shown in Figure 6.




      Figure 6. Limiting a MySQL user account to a specific database

 10. This opens a page where you can set the user's privileges for the selected database. For a web application, only
     the first four privileges are normally required: SELECT, INSERT, UPDATE, and DELETE. Select them and then
     click the Go button.


You now have a MySQL user account ready to access the feedback database. In the next section, you'll learn how to
create a MySQL connection in Dreamweaver.
Connect to the sample database
This section describes how to create a connection in Dreamweaver to the sample feedback database.

  1. In Dreamweaver, locate the Files panel; in the Local Files section expand the Site item and double-click index.php.
  2. In the Databases panel (accessible on the right side of the screen or from Window > Databases), click the Plus (+)
     button on the panel and select MySQL Connection from the pop-up menu.
         The MySQL Connection dialog box appears.

    3. Enter feedback_db as the connection name.
    4. In the MySQL Server field, enter localhost.
    5. In the User name field, enter feedback_user.
    6. Type the password you chose for the feedback_user account in the Password field.
    7. In the Database field, enter feedback.
    8. Click Test.
         Dreamweaver attempts to connect to the database.
         Note: If the connection fails, do the following:
                Double-check the server name, user name, and password.
                Check the settings for the folder Dreamweaver uses to process dynamic pages; see Specify a testing server for
                Dreamweaver (www.adobe.com/devnet/dreamweaver/articles/setting_up_php_05.html#testing_server) earlier in
                this tutorial for more details.
                Make sure the web server and MySQL server are both running.
                Temporarily disable any firewall or security program. If the connection works, you need to configure the security
                program to permit communication between Dreamweaver and MySQL.

    9. Click OK. The new connection appears in the Databases panel.
  10. Select File > Save to save your changes.


Congratulations! Your PHP work environment and site is now set up and you are ready to begin creating the actual pages
for your first dynamic site.



Where to go from here

In this part of the tutorial, I've introduced the basic concepts behind dynamic websites, and discussed the software and
tools that you'll need to design, develop, and run data-driven websites. You've also seen how to set up your development
environment in Dreamweaver in preparation for creating your first dynamic website.
In Part 2 (www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt2.html) , you'll learn how to create the site's
functionality in Dreamweaver.



About the author

Irina Dumitrascu (www.adobe.comhttp://www.linkedin.com/in/irinadumitrascu) is a software developer. She loves
programming and creating high-quality web applications. Her favorite off-computer activities are traveling, reading, and
getting involved in ecology projects.




Copyright © 2010 Adobe Systems Incorporated. All rights reserved (www.adobe.com/go/gftray_all_rights_reserved) .



                                                                                                                   (www.adobe.com/go/gftray

								
To top