| Now that we have installed MAMP, the next step is to create the database that will be displaying our dynamic records of data on our website. From the MAMP start page, click phpMyAdmin to go to the administration page for your MySQL databases. |
| this is what it should look like. |
|
| for this exercise, we are going to create a new database user to talk to the database. Other tutorials will explain why it is important NOT to access database records with the default (AKA root) user, but they will be more informative and I encourage you to read up about it. For now, click the “Privileges” link. |
| On the privileges page, click the add new user link |
|
|
This is the new user screen. Make sure to fill out all the appropriate info like so. The user name is used every time a connection is made (in this case, since we are running a database on our MAMP server, we can use “localhost” which is the name of the internal server that is running our PHP engine as well!).For the password, use “password” and confirm it in the field below.
|
|
|
Next, we’ll have to specify permissions for the user and give them the ability to do basic things in the database (i.e. add, delete, update records).Scroll down to the lower half of the new user screen to see a series of checkboxes.
For this exercise, we will cut some corners and just give them all permissions, so click the check all link to grant all permissions to the user
|
|
|
then click “go” to create your user.
|
|
|
After your new user has been created, you’ll see the web page refresh and show you the result in SQL code. Now you have a new user! Click on the home link (house button on the left) to go back to the main page.
|
|
| On the phpMyAdmin homepage, enter in “test” as the name of a new database, then click the create button. As soon as you create a new MySQL database, you will be able to see the name of it followed by a number in parentheses of how many tables are in the particular database. Click on the name of the database on the left to start creating a table. |
|
|
Create a new table called “tblCustomer” and add 4 fields to the table. Then click the “Go” button to create the table.
|
|
|
Here are the fields I used for this exercise, as well as their specific attributes.
- custID - INT (type); AUTO-INCREMENT (extra) ;PRIMARY KEY (use the key radio button)
- fname - VARCHAR(type); 50(length/values)
- lname - VARCHAR(type); 50(length/values)
- email - VARCHAR(type); 150(length/values)
|
|
|
After setting the fields’ properties for your table, click the “save” button to continue. After creating the table, you may see a confirmation screen that looks something like this.
|
|
|
Congratulations! You are ready to start adding records now. To go to the next step, click on tblCustomer hyperlink on the left, to see your table’s structure. Once you can see your table fields, look at the top of the web page to a series of administrative “tabbed” links. We are going to insert a record to the table next, so this means clicking on the “insert” link to go to the next page.
|
|
On the record insertion page, you will see two blocks of form fields. We will focus on the set a the top, so fill in some dummy information into all of the fields except for the custID field. The reason we don’t want to add anything to custID is because we set an attribute called “AUTO-INCREMENT” upon creating the fields, which basically keeps the custID counting without our doing anything. For now, just fill in the fname, lname and email fields and then make sure the “ignore” checkbox over the second block of fields is checked, then click go.
|
|
|
After creating a record, it will once again show you the SQL command confirmation screen, that looks something like above. If you would like to insert additional records for this exercise, you may have as many as you wish, just repeat the same steps on inserting to do so.
|
|
|
For this tutorial, I have added two more records for a total of 3 records in my tblCustomer (See pic to right for sample). Now that we’ve added a few customers to the database, we’re ready to get started in Dreamweaver in building the actual site!
|
|
|
As I mentioned before, I will be working with Dreamweaver CS3. No matter if you’re using the Dreamweaver MX, Dreamweaver 8 or Windows version, the elements should be the same with the panels and options. Go ahead and open the application now.
|
|
in order to build a new site in Dreamweaver, click on the site menu on the menu toolbar at the top and select “new site“.
|
|
This is the New Site Menu, or as I like to call it, the Site Definition Menu. Make sure the “basic” button or tab is pressed in, because it presents the site definition menu as a wizard or walk-through, for easy setup.
The first screen is asking you to name the site. I have named our site “My PHP Site” for this tutorial, which you may use if you’d like to.
|
|
|
The purpose behind naming your site is so Dreamweaver can differentiate between sites. The second field is asking for the URL for our website. Because we are working with a web server that we’ve installed on our own computers, we’ll skip this part, so leave it blank. Click the “next” button to move on to step 2 of the Site Definition Wizard.
|
|
In step two, we are asked if we want to use a server technology. We will select PHP and MySQL and click the “next” button.
|
|
|
In step 3, titled “Editing files” Dreamweaver would like to know how you intend to publish the files once they are saved to the site. Since we have installed our very own webserver (MAMP), our intention is to work on them entirely on our hard drive, so we will select the first option, “Edit and Test Locally“.
|
|
|
Further down this screen, it will ask where on your computer you will want to store your files, give it the following path.
MacintoshHD:Applications:MAMP:htdocs
|
|
|
This is what is called your document root, and is specific to your local computer. You are basically telling Dreamweaver which folder on your computer to save the files that you work on for this website. For some Mac users, your hard drive may not be called “Macintosh HD” so the correct path can be found by substituting the name of your HD at the beginning of the path, but dreamweaver should detect this anyways. For Windows users who are using WAMP, a similar example might look like this:
c:\wamp\www
After entering in a path correctly, click on the “next” button to continue the site definition wizard.
|
|
on the next step, titled “Testing Files”, confirm the url is
http://localhost/
then click “Test URL“.
UPDATED Jan. 24th, 2009:
After several people writing to me with errors at this point, I have discovered a gotcha with MAMP-in order to connect to localhost you will need to append the port number for mamp to the localhost URL, so the updated URL would look like this–
http://localhost:8888/
try the first one, and if it does not work, try the URL with port # and see if you get different results.
|
|
| By doing this step, you have confirmed that your computer is thinking like a webserver. Dreamweaver will save the files to your “document root” (that long filepath in the previous step) on your local side. On the other hand, if you were to open up a browser, and type in http://localhost/ it will show the pages that have been saved in the htdocs folder as if it were a web directory. Click on the “OK” button to acknowledge the confirmation, and then click “next” to go to the next step. |
|
|
when the wizard asks you if you would like to copy files to a different machine, select “no” and then click “next“.
|
|
|
This is the last step of the wizard, and it basically reads off all of the options you have selected in the wizard, so look it over carefully before continuing, and then click “done“.
|
|
|
When you click the “done” button, you will notice a pop-up menu saying something about updating the site cache.
|
|
|
After this menu finishes loading, you will see the files panel in a full screen window, listing your site folder and other website files.
|
|
| Next, click on this button, which is found in the upper right hand corner of the panel, to collapse it. |
|
|
We just finished defining the website and are ready to work “hands-on” with our database! After collapsing the files panel, let’s create a PHP page by going to the file menu in Dreamweaver,and then selecting “New“
|
|
| On the New Document Menu, select PHP as the page type, layout as none, and then click “create“ |
|
| When it loads the PHP page and shows you a blank document window, add some header text for presentation. I added “My Dynamic PHP Website“. |
|
| Next, go to the file menu and select “Save As“ |
|
| In the save as field, name the page whatever you would like. I have named mine “test.php“. It doesn’t really matter what the name of the page is, just that you save it as a php file, so check to make sure your extension is .php |
|
| Now that we have a test page ready, and a website that can talk to our MySQL database, we’re ready to get things rolling. If you are totally new to database webs, there are a couple of things that are standard procedure and creating a connection to the database is one of them. Recordsets are another, but we will get to those later. For now, we’ll create a connection, so lets go to the application panel. If you can’t find the panel, you will be able to select it from the window menu in the menu toolbar. |
|
this is what it looks like. There are a few tabs that are part of the application panel, we will be starting on the databases tab to create a connection. If you have defined the website correctly, you’ll notice a set of steps with check-marks next to them–the last step is intentionally left unchecked “Create a Connection”.
|
|
| We will create a new one by clicking on the “+” button underneath the databases tab and selecting “MySQL Connection“. |
|
|
In the MySQL connection menu, fill out the following information:
- Connection Name: connPHP
- MySQL server: localhost
- user name: user01
- password: “password“
|
|
|
Next, you will select the name of the database that you are connecting to. You may type it into the field if you happen to know the name of it, but it is easier to just click on the “select” button.
|
| Okay, this is what you should be seeing. Be careful, though–if any part of your testing or server environment was NOT set up correctly, you will get an error message at this step. The most common errors are that there is something wrong with a connection string, or that a MM_Connection or MM_String wasn’t found. Go back through your site definition wizard (Site->Manage Sites->Edit button) and make sure the website folder is configured to htdocs, and make sure your http://localhost/ path will test successfully. |
|
| If you are seeing this menu, select your test database, and click the “test” button to test the connection. Then click on “OK” to close the window. |
|
|
In using Dreamweaver to make dynamic web pages, the process can be summarized in 4 steps:
- Create a connection to the database (we just did it).
- Create a Recordset to hold the raw fields of data.
- Add the dynamic fields of data to the web page.
- Use Server Behaviors to show, hide or repeat specific data.
|
|
after you have successfully connected to the MySQL database, your Applications panel should look like the picture to the right. You are ready to start adding your dynamic data via recordset.
|
|
| Next, add a new recordset by selecting the bindings tab on the applications panel. |
|
| on the bindings tab, click on the “+” button and select “recordset(query)“ |
|
|
On the new recordset menu fill in the fields as follows:
- Name: rsData
- connection: connPHP
- table: tblCustomer
- columns: all
- filter: none
- sort: none
then click “ok” to save the recordset
|
|
| after the recordset has been completed, look at the applications panel. On the bindings tab, the recordset shows up as a cylinder, which can be expanded to show the dynamic fields as “lightning bolts”. We’ll use these in a moment to make the data show in our test PHP page. |
|
| This is the fun part–select the first dynamic field from your recordset, and in one motion, drag |
|
| and drop the field under the heading text “My Dynamic PHP Website” on your test.php page. It will not show your data just yet, but will replace the name of the field with something like “rsData.custID” with a turquoise back-color. Don’t worry, it won’t always look this way! |
|
| add the fname, lname and email fields the same way until your page looks like this. |
|
| there is a little button that looks like this on the document toolbar, to the left of a field for title. This is what’s called the “live data” button. Basically, it lets your preview what your web page looks like at application run-time (i.e. database application interacting with your HTML) inside of Dreamweaver. Click on it! |
|
|
If things are working correctly, you should be able to see the first 4 fields of the first database record show up on the page, instead of the turquoise placeholder text. If you get an error message, try to turn the “live data” button on and off a few times, and it it still doesn’t work, try the direct approach by typing in
http://localhost/test.php
in your web browser. Assuming MAMP is running, you should see your test page displaying just fine.
|
|
| Congratulations! You now have a dynamic web page! But this is only one record. If you want to list all the records in the database table customers, you’ve got to create a repeat region server behavior for the fields, as I will show you. |
| create a new paragraph (press enter after dynamic fields) and place a horizontal line under the live fields of data. This can be done by going to the Insert menu in Dreamweaver CS3, to HTML, to horizontal rule. Another way to do this is to switch to code view and on the line under the fields, type in the text “<hr>“ |
|
| After you have added the horizontal line-very carefully, select the dynamic fields and the horizontal line at the same time by dragging over them with your mouse (do NOT select the heading text, as we do NOT want to repeat it!). |
|
| After selecting the data you’ll want to repeat, go back to the applications panel and click on the server behaviors tab. |
|
| on the server behaviors tab, create a new server behavior by clicking on the “+” button and select “repeat region”. |
|
| on the repeat region menu, select the rsData recordset from the drop-down list, and select the radio button that says “all records“. We want to repeat the selected region on the page for the remainder of the recordset (or as long as there are still records in the database table). Click Ok. |
|
| After the repeat region behavior has been added, you’ll be able to see a gray tabbed box surrounding the region that you want to repeat on your test.php page. |
|
| And now for the finishing touch! Go back and click on the “live data” view button to show not only the first records, but all the records that are showing up in the tblCustomer(Assuming you added more than one record in the previous steps)! If you want to see the dynamic page in action, try opening up the phpAdmin interface as you did earlier and add a few new records to the tblCustomer. Then go back and “refresh” your test page. |
|
| If you want to make it look a little better, try organizing the fields in a table, and try to add a repeat region behavior to the entire row (remember to not include the table header!) and try to play with the design. This was just a simple tutorial on how to get started with PHP, MySQL and Dreamweaver on Mac OSX. In later tutorials, I’ll show you how to work with forms, logins, sessions and secure web pages. If you have any questions or comments, please feel free to leave them and I hope this has helped you! Have lots of fun making dynamic webs! |
Somebody wise once said to me, “The minute you make plans to do something important, be prepared to have them re-arranged by others.” Lennon said, 