Dreamweaver 3.5 PHP & Dreamweaver Short Course Notes Explore more information on the IT Learning Pods Web site: http://css.ait.iastate.edu/ By Joe Struss Sept. 20, 2010 Copyright 2010 by Creative Services / ITS Permission to reproduce all or part of this document for noncommercial purposes is granted, provided the author and Iowa State University are given credit. To copy otherwise requires specific permission. The author s contact information is available at the IT Learning Pods web site.
Using PHP PHP is used with Dreamweaver to make dynamic web pages- that is to make web pages on the fly. PHP pages are assembled when they are requested which allows the designer to create parts of a page in separate files and then use PHP to put all the parts together when the page is produced. PHP requires some extra work to setup and makes it more difficult to get a full view of your document when you are creating it- so why would you want to do this? People use PHP because you can change one element of a page that is in a file and have it immediately propagate across an entire web site. If you need to make a change in the header file then you just make that change and since the page are put together when requested- your updated header section is immediately available for all pages that use that header. Pretty slickespecially for sites that occasionally do change parts of their standard pages a lot or for sites where different people are assigned to different parts of a page. PHP with Dreamweaver CS4 is a lot easier to use so we are going to take the Dreamweaver 3 class and do it again but this time use PHP instead of creating template pages. So for today s class, we will once again be creating an html layout using layers for the Mystique coffee shop. The layout will consist of 4 separate PHP pages with layers: one banner layer/page that runs along the top, one narrow layer/page on the side that contains navigation links, one large content layer/page next to the navigation links and a footer layer/page that runs along the bottom. Here s the comp for today s class- it should look familiar to you. 2
Adding assets to the project Before we begin with this project, we need to bring in some site assets that have been provided by the client. Copy the site assets from the following location to your Desktop: http://css.ait.iastate.edu/dreamweaver/data3/ Right-click or Ctrl-click the Sites.zip file at this location and select Save Target As or Save Link As from the options list then save the file to your Desktop. Next extract the archive and move the Sites folder from the archive to your Desktop. Creating the Remote Site The Homepage server at Iowa State can do most PHP commands. Normally, you should setup a testing server on your local computer to use PHP but that is difficult to do in a lab environment so we are going to setup today s class to use just the Homepage server and the resources within Dreamweaver CS4. Later in the References area, we will go over how to add a testing server on your own machine so that you can use all the parts of dynamic page creation including both PHP and mysql. Setting up a remote site on the ISU Homepage Server The ISU Homepage server is a remote site that can be used by any student, faculty or staff member at Iowa State but you could also use any standard commercial site as well. You basically need to login to your remote site, establish a Web (WWW) folder and put a folder within your Web folder (Coffee) that you can publish to within Dreamweaver. Your remote site may also have you establish that your Web site will be using PHP/MySQL. Using Acropolis to create a Web Folder The easiest way to create a Web folder on the Homepage server is to login to Acropolis. So open a Web browser and go to the following URL: http://asw.iastate.edu/ Next enter your ISU NetID and password then click on the LOGIN button. 3
If you have never created a Web (WWW) folder for your ISU Netid: 1. Click on Manage Net-ID 2. Click on View/Edit your personal Web Page Settings. 3. Click on Register Web Page then click on the Register button. 4. Click on the Homepage link near the top which is within the ASW> User > Homepage > Register bookmarks. 5. Click on Create Default Web Page. 6. Click on the ASW link near the top which is within the ASW > User bookmarks. Once you have a Web (WWW) folder or if you already had one, you just need to create a Coffee folder inside the Web folder; so do the following: 1. Click on Manage Files. You will be taken to the ISU Webfile area which you can also get to at http://webfile.iastate.edu. 2. Double-Click the WWW directory listing near the bottom to open that directory (folder). The files within your WWW (Web) directory will appear on a new screen. 3. Click the Create A New Folder button on the left side of your screen underneath the Folder Properties area. 4. Enter the name Coffee in the box provided then click on the Create button 5. You should now see a Coffee Directory/Folder within your WWW directory listing. Since that s all we need to do, click the Logout button to leave ISU Webfile and the Logout button again to leave Acropolis. 4
Creating a New Site 1. Before starting up Dreamweaver at Iowa State our FTP needs to be Kerberos-ized. To do this, just run Fetch and KFTP on a Macintosh or Leash32 and KFTPD on a Windows system. This may be done automatically when you login. 2. Startup Dreamweaver, switch to Classic View and choose Site Manage Sites. Then click NEW Site. The Site Definition dialog box appears. 3. If the dialog box is showing the Basic tab, click Advanced. We are actually going to be cheating a little bit in today s class and not using a PHP Testing server so we need the Advanced setup. 4. Click to Local Info- for Site name: enter Coffee; for Local root folder: Choose the Mystique folder with the Site folder on your Desktop; for Default Images Folder: Choose the Img folder with the Site/Mystique folder on your desktop; and for HTTP address: enter http://netid.public.iastate.edu/coffee/. 5. Click to Testing Server- for Server Model choose PHP MySQL and for Access choose None. Dreamweaver can fake certain PHP commands locally if we give it the general server information. 5
6. Click to Remote Info- for FTP host: use isua4.iastate.edu, for Host directory: use WWW/Coffee/ and enter your NetId and Password for Login and Password. Click Use passive FTP and Use firewall. Additionally click on the Firewall Settings button and for Firewall Host: enter 127.0.0.1. Next for Firewall Port: enter 2021 (for a Mac) or 21 (for Windows) and click OK. Finally Click the Test button. 7. If the connection gets established then we re in great shape and ready to upload and download files. Click Next and Done to finish. Now, you are ready to create the PHP version of the Mystique Café and Coffee House Web site. About PHP Creating Dynamic pages in Dreamweaver means that you have to work at least a little bit within the HTML code area of Dreamweaver. Don t let this worry you to much, the commands that we are working with today are very easy to spot as are mostly simply PHP/HTML style commands. Pull down under File to New and Create a new Blank / HTML page. In the title area of the page, name the page Mystique Cafe. Next save this new page to your Mystique folder and name it index.php. 6
Inserting PHP Code Once you ve declared a page to have a suffix of PHP, you should notice that you now have a new PHP tab on the Insert toolbar. Click on the PHP tab and switch to Code View or Split View within your document. Within code view, put your cursor between the <body> and </body> HTML tags and press <return> a couple of times. Our index.php page when it is selected will bring in four other page parts via the PHP command include. Click the PHP include button and type in top.php. Remember to include the double-quotes on each side. We haven t created this page yet but when the index.php page is selected then the top.php file will be included as part of this page. 7
Include three other page sections: links.php, homecontents.php and foot.php. Notice that the PHP commands or tags start with <?php and end with?> while normal HTML commands or tags start with < or </ and end with >. Click back to Design view and Save your page. Notice how it says along the top of the page tab that the Source Code of this page is coming from four other separate files. We will now create the other four parts to this page as separate files. 8
Creating the parts Pull down under File to New and Create a new Blank / HTML page. Save the page and name it top.php. Select the Layout mode from within the Insert toolbar. Next Select the Draw AP Div Tool and draw a wide and thin banner layer at the top part of the page. Next click the upper righthand corner of the layer and alter it s properties to be: 600 pixels Wide, 90 pixels in Height, 50 pixels from the Left edge and 50 pixels from the Top. This corresponds to the W, H, L and T property boxes for a layer. You can also move a layer around on the screen once you select it by using the Arrow keys or using the shift key with the arrow keys.. Also change the name of the Layer referred to as the CSS-P Element to banner and the Bg Color to grey. 9
Save the page and then click to Code view. Since this will not be a complete page but only part of another page, we need to remove some HTML code so that it is not duplicated within index.php. Remove everything above the <style type=``text/css > tag, everything between the </style> and <div id=``banner ></div> tags, plus everything after that tag. So we are stripping the full page HTML elements out of that page which no longer allows it to stand by itself. Once you are done, you can go ahead and Save the Page. Now go back to the index.php page and click on the Live View button. The Live View button allows you to see the page as though it was uploaded to the Server. This is very handy when dealing with PHP especially if you don t have a testing server installed. When you click on the Live View button, you will be asked to setup a testing server- click No to that inquiry. After that, Dreamweaver will ask if you would like Dreamweaver to pretend to be your local server- click Yes to that question and Dreamweaver will show you what your finished index.php page would look like now if you uploaded it to your remote server. 10
Pull down under File to New and Create a new Blank / HTML page. Save the page and name it links.php. Select the Layout mode from the Insert toolbar. Next Select the Draw AP Div Tool and draw a long and tall links layer on the left side of the page. Next click the upper righthand corner of the layer and alter it s properties to be: 120 pixels Wide, 360 pixels in Height, 50 pixels from the Left edge and 140 pixels from the Top. Name the layer links and give it a blue background color. 11
Once you are done, save the file then switch to design view and strip the Page HTML elements out of that file. Save the file again then switch back to index.php and click on the Live View button to see how you are doing. Pull down under File to New and Create a new Blank / HTML page. Save the page and name it homecontents.php. Select the Layout mode from the Insert toolbar. Next Select the Draw AP Div Tool and draw a long and wide contents layer near the middle of the page. Next click the upper righthand corner of the layer and alter it s properties to be: 480 pixels Wide, 360 pixels in Height, 170 pixels from the Left edge and 140 pixels from the Top. Name the layer contents and give it a green background color. Once you are done, save the file then switch to design view and strip the Page HTML elements out of that file. Save the file again then switch back to index.php and click on the Live View button to see how you are doing. Pull down under File to New and Create one more new Blank / HTML page. Save the page and name it foot.php. Select the Layout mode from the Insert toolbar. Next Select the Draw AP Div Tool and draw a long and wide contents layer near the middle of the page. Next click the upper 12
righthand corner of the layer and alter it s properties to be: 600 pixels Wide, 130 pixels in Height, 50 pixels from the Left edge and 410 pixels from the Top. Name the layer footer and give it a yellow background color. Once you are done, save the file then switch to design view and strip the Page HTML elements out of that file. Save the file again then switch back to index.php and click on the Live View button to see how it all ended up. Adding in a CSS Style sheet Now we are ready to add a CSS style sheet to the main index.php page. A separate Cascading Style Sheet (CSS) style is used to make a series of web pages all look in a similar fashion. The concept is very simple. You create a separate style sheet that connects to all of your web pages and informs the page what the paragraphs, links, background colors etc. are suppose to look like. Let s add a CSS style sheet to this web page. First- pull down under File and Save your page. Next click outside the layers area to select the background <BODY> part of the page. To attach a CSS style sheet to a web page, simply go to the CSS Styles Window (Window CSS Styles) and click on the Attach Style Sheet button. 13
Now we haven t created a style sheet yet but don t worry. Dreamweaver comes with a good set of sample style sheets that you can alter. Click the sample style sheets link then select the Full Design: Arial, Blue /Green /Grey style sheet and click OK. The style sheet will immediately be added to your be page and you should notice some changes regarding the links we just added. The style sheet itself has been copied and place into a CSS folder within your local site files for alteration. Altering the CSS Style Sheet Let s alter the CSS style sheet and add in the Display option that we used in the previous class for the.navlink. So go back to the CSS Style window, click the All Button and click open the Level3_1.css file then click on the.navlink item. The options/properties for the.navlink style will appear below. Make sure the A-Z button is clicked below the Properties for the.navlink area. Scroll down the properties for.navlink until you get to the display property. 14
Select the box next to the display property and use the scroller to choose the display property block. See if you can change the background color of.navlink to a light grey. See if you can also alter the background page color and add a centering rule. You can add a new rule to an existing open css style sheet and selected CSS style sheet by just clicking on the New CSS rule button within the CSS aera. Dreamweaver may prompt you to save your style file since you ve altered it. The style file ends with the suffix.css and is now attached to this particular page. You can use these same styles in any of your other.php files as well by just attaching the same style sheet which you can do in the HTML Properties area under Class. Adding Contents to a Page Adding contents to a layer within a PHP page is easy. You simply open up the file and click inside the layer and add to it- just like a table. In fact, to get centering exactly correct you can put tables inside of a layer. Go ahead 15
and click open the top.php file and click inside the banner layer. Next pull down under Insert to Image Objects then over to Image Placeholder. Name the placeholder BannerEx then click OK. Click and drag the anchor points on the Image Placeholder to fill up the whole layer. An image placeholder is used if you don t have an image ready to place into a banner or footer area for your site. It reserves the spot for an eventual image. If you click on the Image Placeholder and look in the Properties area, you will see a Create button there. If you click the Create button, Dreamweaver will take you to Fireworks and open up a canvas area of the exact size of your placeholder and then return you to Dreamweaver when you are finished creating the image. We don t actually need an image placeholder here as a banner has already been created. So click on the Image Placeholder then click the folder next to Src and choose the file topper.png within the Img folder or delete the image placeholder then go under Insert and pull down to Image then choose the file topper.png in the Img folder and click on OK. This is the exact type of process you would use for adding contents to a table. Open up the foot.php file and click inside the footer layer. Let s add a Flash swf file here. Pull down under Insert to Media then over to SWF. Choose the file footerplus.swf within the Flash folder and click OK. Next fill out the Title of the Flash object (enter a name for this flash object) then click on OK. You can check out the Flash file by clicking the Play/Stop button in the Properties area. You can also center the Flash file by clicking next to the Flash file and creating a New Class-based CSS rule named centering. Have the centering rule under the Block category alter the Text- Align option to center. 16
Save you page and click on OK if Dreamweaver asks to bring in some supporting files. Change the background color for this layer to grey, save foot.php and preview it with the Live View button inside of index.php. Next let s add in some links. Adding a few virtual links Open the links.php file and click inside the links layer and add in the following: Home About Local Put exactly one space between the words. Now select just the word Home and create a link to the file: index.php. Next select just the word About and create a link to the non-existent file about.php. Simply type the name about.php into the Link Properties box. This file doesn t exist yet but it will very soon. This is known as making a virtual link since the file in question doesn t exist as of yet and you are just making future plans to connect to that file. Finally select just the word Local and create a link to the non-existent file local.php. Again type the name local.php into the Link Properites box. 17
Let s add some real style to this link. Click under Class and attach the local style sheet Level3_1.css. Next Highlight just the Home link and in the Class area choose the style Navlink. Do the same thing for the About link and the Local link within the link layer. Save you page and click on OK if Dreamweaver asks to bring in some supporting files. Change the background color for this layer to grey, save links.php and preview it with the Live View button inside of index.php. Next let s clean up the index.php page. Tidying Up the Base Web Page When you do a Live View while viewing index.php, you might notice that the layers don t exactly line up. Go to each of the files for the problem sections in question and select the layers by clicking in the righthand corner of the layer and line them into place by using the arrow keys. Also go into the Properties area for each layer and set the background color to be the light grey from the banner. Save and Live View the index.php page. 18
Let s add just one more thing to the top.php page and then we will be ready to make the rest of the pages of the web site. The top banner could use a surprise link. Open top.php and select the Mystique Bookstore png image in the banner layer. Next pull down under Window Behaviors. There should be a lot of behavior options there. Pull down under the plus sign until you reach the Open Browser Window option. In the Open Browser Window box put in a link in the URL to display: area to http://www.badfortune.com/ then click OK. Next Save your page. Live View won t show behaviors so you will have to upload your web site to see your result at http://netid.public.iastate.edu/coffee/index.php. Mysterious things are now happening on this page. 19
Creating the rest of the PHP Pages Since our site is in pieces. We will need to duplicate the index.php and alter it as well as duplicating the homecontents.php file for each page of our web site. Select the index.php page in the Site files area. Right or Ctrl/Click the file then pull down under Edit Duplicate. Rename the file about.php. Do this two more times creating the files local.php and base.php. Next select the homecontents.php file. Right or Ctrl/Click the file then pull down under Edit Duplicate. Rename the file aboutcontents.php. Do this two more times creating the files localcontents.php and basecontents.php. Now open the about.php file and change the homecontents.php include to be aboutcontents.php. You might also change the page title while you are there. Do the same thing for local.php and base.php and have their include files point to localcontents.php and basecontents.php. Alter the page titles as well. Upload your files to the web site and all the links should now work. 20
Adding content to the other Web pages Now that we have our three web pages, all we need to do is to alter the content layer on the three site pages and we will be finished. Open the file called backstory.txt within the Text Folder. Next pull down under Edit Select All then pull down under Edit Copy. Close the backstory.txt file then Open the aboutcontents.php file and click in the contents layer. Let s put the text into a table so that it has margins and can be easily centered. Pull down under Insert Table and create a 400 pixel wide table with 3 Rows and 1 Column. Select inside the middle row then pull down under Edit Paste and paste in the contents from the backstory.txt file into the center of the table. Add the Level3_1.css style sheet to the page and then try adding a Class both to the header and to the text of the story. You can always alter a Class or add a new class to get the look that you want for a specific area. Center the table, Save the file, Open about.php and Live View the results. 21
Adding a Little Video Open the file localcontents.php. Into the contents layer of this file, we are going to put a flash video file to add a little more excitement and interest to the page. But first we are going to put in some text to describe the video. Select inside the contents layer and enter: The Mystique Bookstore and Coffee Shoppe is right next to the Memorial Union: Attach the Level3_1.css style sheet to the page then select a Class for this text. Also press a <return> after the text and return the Class option to None. Let s add a table to the local.html file to allow more control over where the video will be located. Using you table skills, pull down under Insert Table and put in a 400 pixel wide table that is 1 Row/ 1 Column in dimension then click the <table>-tag and center the table in that layer. Next click into the table then pull down under Insert Media FLV. Click the browse button and select the file mu.flv within the Flash folder and click OK. Next click the Detect Size button and finally click on OK. The video will be added to the table. Select the video and try altering it s skin in the Properties area. Center the table, Save the file, Open local.php and Live View the results. 22
See if your centering Class is still around and center the video. Select the video itself & try setting a different skin for the video. For more info on Flash Video files, see the IT Learning Pods Flash IV class. Now go back to the homecontents.php page and click in the contents layer. Let s add some Fireworks html here. Pull down under Insert Images Objects Fireworks HTML then click the Browse button and in the Store folder choose the file store.html. Click Open and OK then Save and Preview your results. The special rollovers were created with Fireworks. Fireworks is great for quick interactive web site effects or for creating simple to extravagant dropdown menus for a site. For more information on Fireworks, check out the IT Learning Pods Fireworks series of classes. Save the file, Open index.php and Live View the results. If you want you can upload the files to the web site and then view your results from there. A Last Minute Change The big advantage of a PHP web site is that if one of the normally nonchanging area actually needs a change. You can simply change that area and have it immediately propagate to the entire web site. Let s say we want to add a Drive-In link to the links on the left side. On a template side, we would have to go to each and every page to make that change. On our PHP web site, we just open the links.php file, make the change, save and upload that file. Once you do that, all the pages on our web site update to add the new link. It is as easy as that. 23
References We have barely scratched the surface of what one can do with dynamic pages and PHP. For more PHP information, try going to the official PHP web site: http://www.php.net Another easy PHP command to try is setting a variable in the head of your page like: <?php $pagetitle= Mystique Café?> and then using that variable within the page like <title> <?php echo $pagetitle?> </title> or <h1> Welcome to the <?php echo $pagetitle?> </h1>. Testing Server: Most of the time when you want to work with PHP you will also want to work with a background mysql database as well which greatly increases what you can do with PHP. This means setting up a testing server which also allows one to use the Preview button again to preview your files. The easiest way to add a testing server to your computer is to download WAMP or MAMP. WAMP (Windows) and MAMP (Macintosh) are a packaged Apache Web Server / PHP / MySQL set of applications all rolled into one installation. Download WAMP from: http://www.wampserver.com/en/ Download MAMP from: http://www.mamp.info/en/index.html For MAMP, after installation, you will want to click to Preferences/Ports and click on the Set to default Apache and MySQL ports button. Within Dreamweaver, the Testing Server is normally set to: Server Model: PHP MySQL, Access: Local/Network Then set the testing server folder: For MAMP: Mac:Applications:MAMP:htdocs:Coffee: with URL Prefix of: http://localhost/coffee/ For WAMP: C:\wamp\www\Coffee\ with URL Prefix of: http://localhost/coffee/ After setup, when you use the Preview button- Dreamweaver will ask for permission to copy your file(s) to the Testing Server area in order to preview your page. 24