Also Available Powers friends of ED ADObE® LEARNING LIbRARY • Unlock the secrets of the CSS Styles panel to rapidly create attractive standards-compliant web pages. • Create dynamic, intuitive web pages with Spry Ajax widgets. tHe eSSentiAL GUiDe to • Harness the advantages of Spry and avoid its pitfalls. • Master all of Dreamweaver’s PHP server behaviors. • Generate XML feeds directly from a database. CD Sr i S f you’re tired of books that seem like a rehash of the Dreamweaver help files and want e a more serious, in-depth alternative, then look no further. want to get the best out of , A Dreamweaver CS3 and build dynamic, data-driven websites with Ajax, CSS, and PHP? then this is the book for you. A M After a general introduction to the main features of Dreamweaver CS3, including Adobe j bridge and Device Central, you’re taken on an in-depth exploration of three areas vital to A the creation of standards-compliant dynamic websites: w • Cascading style sheets (CSS) to control the look of your pages X • Spry, Adobe’s Ajax framework, for more dynamic user experiences e , • PHP, the open source server-side language, to send email and communicate with data sources A A this book explains everything in clear, everyday language. As long as you have an n v understanding of the basic principles of (X)HtML and CSS, you should be building D interactive websites in no time at all. e you’ll learn how to work efficiently with the CSS Styles panel and avoid littering your pages P r with meaningless classes, and will be guided through the maze of CSS style rules that play H an essential role in the new Spry Menu bar, accordion, tabbed and collapsible panels, and validation widgets. Detailed instructions show you how to set up a testing environment C for PHP and the MySQL database on both windows and Mac oS X. you’ll create a secure P script to send email from an online form and store the information in a database. want S more? this book also covers the principles of good database design and introduces you to 3 practical applications with XML, such as consuming a remote news feed and building an online photo gallery. LeverAGe tHe Power oF DreAMweAver’S CSS tooLS the author, who has written a series of successful books on PHP and Dreamweaver, pulls w to bUiLD AttrACtive, StAnDArDS-CoMPLiAnt webSiteS. no punches about the accessibility problems inherent in all Ajax frameworks but shows i you how to create sites that remain accessible and search-engine friendly while integrating t USe AnD CUStoMize DreAMweAver’S PHP FeAtUreS Spry into PHP pages. H to bUiLD SeArCHAbLe, DAtAbASe-Driven web APPLiCAtionS. CoMbine tHe StrenGtHS oF PHP AnD SPry, ADobe’S iMPLeMentAtion oF AjAX, to CreAte eXCitinG DynAMiC web eXPerienCeS. ISBN-13: 978-1-59059-859-7 SHELVING CATEGORY ISBN-10: 1-59059-859-8 1. DREAmwEAVER 54999 2. wEb DEVELOPmENT DAviD PowerS US $49.99 ForeworD by toM MUCk Mac/PC compatible www.friendsofed.com 9 781590 598597 this print for reference only—size & color not accurate spine = 1.472" 784 page count 8598FM.qxd 6/27/07 5:24 PM Page i The Essential Guide to Dreamweaver CS3 with CSS, Ajax, and PHP David Powers 8598FM.qxd 6/27/07 5:24 PM Page ii The Essential Guide to Dreamweaver CS3 with CSS, Ajax, and PHP Copyright © 2007 by David Powers All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. ISBN-13 (pbk): 978-1-59059-859-7 ISBN-10 (pbk): 1-59059-859-8 Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1 Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademarkowner, with no intention of infringement of the trademark. Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax 201-348-4505, e-mail [email protected],or visit www.springeronline.com. For information on translations, please contact Apress directly at 2855 Telegraph Avenue, Suite 600, Berkeley, CA 94705. Phone 510-549-5930, fax 510-549-5939, e-mail [email protected], or visit www.apress.com. The information in this book is distributed on an “as is” basis, without warranty.Although every precaution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work. The source code for this book is freely available to readers at www.friendsofed.comin the Downloadssection. Credits Lead Editor Assistant Production Director Chris Mills Kari Brooks-Copony Technical Reviewer Production Editor Tom Muck Kelly Winquist Editorial Board Compositor Steve Anglin, Ewan Buckingham, Dina Quan Gary Cornell, Jonathan Gennick, Jason Gilmore, Jonathan Hassell, Artist Chris Mills, Matthew Moodie, April Milne Jeffrey Pepper, Ben Renow-Clarke, Dominic Shakeshaft, Proofreader Matt Wade, Tom Welsh April Eddy Project Manager Indexer Tracy Brown Collins Julie Grady Copy Edit Manager Interior and Cover Designer Nicole Flores Kurt Krames Copy Editor Manufacturing Director Heather Lang Tom Debolski 8598FM.qxd 6/27/07 5:24 PM Page iii In memory of my sister, Nimbia November 21, 1941–April 24, 2007 8598FM.qxd 6/27/07 5:24 PM Page iv CONTENTS AT A GLANCE Foreword. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi About the Technical Reviewer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxii Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiii Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiv Chapter 1: Dreamweaver CS3—Your Creative Partner . . . . . . . . . . . . . 1 Chapter 2: Building Dynamic Sites with Ajax and PHP. . . . . . . . . . . . . 33 Chapter 3: Getting the Work Environment Ready. . . . . . . . . . . . . . . . 67 Chapter 4: Setting Up a PHP Site . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Chapter 5:Adding a Touch of Style . . . . . . . . . . . . . . . . . . . . . . . . . 135 Chapter 6: Creating a CSS Site Straight Out of the Box. . . . . . . . . . . 161 Chapter 7: Building Site Navigation with the Spry Menu Bar. . . . . . . 183 Chapter 8: Sprucing Up Content with Spry Widgets . . . . . . . . . . . . . 209 Chapter 9: Building Online Forms and Validating Input. . . . . . . . . . . 247 iv 8598FM.qxd 6/27/07 5:24 PM Page v Chapter 10: Introducing the Basics of PHP . . . . . . . . . . . . . . . . . . . . 295 Chapter 11: Using PHP to Process a Form. . . . . . . . . . . . . . . . . . . . . 325 Chapter 12: Working with PHP Includes and Templates . . . . . . . . . . 363 Chapter 13: Setting Up MySQL and phpMyAdmin. . . . . . . . . . . . . . . 401 Chapter 14: Storing Records in a Database. . . . . . . . . . . . . . . . . . . . 429 Chapter 15: Controlling Access to Your Site . . . . . . . . . . . . . . . . . . . 473 Chapter 16: Working with Multiple Tables . . . . . . . . . . . . . . . . . . . . 519 Chapter 17: Searching Records and Handling Dates . . . . . . . . . . . . . 571 Chapter 18: Using XSLT to Display Live News Feeds and XML . . . . . . 617 Chapter 19: Using Spry to Display XML. . . . . . . . . . . . . . . . . . . . . . . 653 Chapter 20: Getting the Best of Both Worlds with PHP and Spry. . . . 693 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 731 v 8598FM.qxd 6/27/07 5:24 PM Page vi CONTENTS Foreword. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi About the Technical Reviewer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxii Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiii Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiv Chapter 1: Dreamweaver CS3—Your Creative Partner . . . . . . . . . . . . . 1 Getting your bearings in Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Starting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Creating a new document. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Setting new document preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Exploring the workspace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Insert bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Document window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Organizing your workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Rearranging panels. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Saving and sharing customized workspace layouts . . . . . . . . . . . . . . . . . . 14 Accessing hidden files and folders in Windows . . . . . . . . . . . . . . . . . . . . 15 Displaying optional toolbars. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Temporarily hiding all panels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Organizing visual assets with Bridge. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Controlling thumbnails. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Adding metadata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Renaming files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Dragging and dropping files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 vi 8598FM.qxd 6/27/07 5:24 PM Page vii CONTENTS Creating standards-compliant web pages. . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Enhanced CSS support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Layers are dead . . . Welcome, AP elements . . . . . . . . . . . . . . . . . . . . . . 18 Seeing the impact of CSS changes in real time . . . . . . . . . . . . . . . . . . . . 20 Improved style sheet management. . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Using visual aids to understand your CSS structure. . . . . . . . . . . . . . . . . . 22 Checking for browser bugs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Checking what your page will look like on other media . . . . . . . . . . . . . . . 24 Understanding Dreamweaver’s approach to layout . . . . . . . . . . . . . . . . . . . . 25 Drawing absolutely positioned elements . . . . . . . . . . . . . . . . . . . . . . . 25 Layout Mode goes into exile. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Getting the best out of Code view . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Using the Coding toolbar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Setting Code view options. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Using code hints and auto completion. . . . . . . . . . . . . . . . . . . . . . . . . 30 Dynamic too . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Chapter 2: Building Dynamic Sites with Ajax and PHP. . . . . . . . . . . . . 33 Understanding how dynamic pages work. . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Making pages dynamic with client-side technology . . . . . . . . . . . . . . . . . . . . 35 Increasing user interactivity with server-side technology . . . . . . . . . . . . . . . . . 35 Why choose PHP?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Taking dynamic functionality a stage further with Ajax . . . . . . . . . . . . . . . . . . 38 Understanding the limitations of Ajax . . . . . . . . . . . . . . . . . . . . . . . . . 38 Dynamic terminology 101 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Using Dreamweaver behaviors and Spry effects . . . . . . . . . . . . . . . . . . . . . . . . 40 Accessing the Behaviors panel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Giving elements a unique identity. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Removing an id attribute. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Editing behavior and effect settings. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Removing behaviors and effects cleanly . . . . . . . . . . . . . . . . . . . . . . . . 50 Restoring a deleted behavior or effect. . . . . . . . . . . . . . . . . . . . . . . . . 50 Exploring Spry effects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Appear/Fade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Blind . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Grow/Shrink. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Highlight. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Shake . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Slide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Squish . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Creating a wrapper <div> for the Slide effect . . . . . . . . . . . . . . . . . . . . . . . 56 Applying multiple events to a trigger element. . . . . . . . . . . . . . . . . . . . . . . 58 Handling dynamic data with Spry and PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Comparing how Spry and PHP handle data sets . . . . . . . . . . . . . . . . . . . . . . 59 Building PHP sites with Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 vii 8598FM.qxd 6/27/07 5:24 PM Page viii CONTENTS Comparing different versions of files . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Setting up the File Compare feature . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Using File Compare. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Comparing two local files in the same site. . . . . . . . . . . . . . . . . . . . . . . 63 Comparing two local files in different sites . . . . . . . . . . . . . . . . . . . . . . 63 Comparing local and remote files. . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Meet Mark of the Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 The next step. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Chapter 3: Getting the Work Environment Ready. . . . . . . . . . . . . . . . 67 Deciding where to test your pages. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Checking that your remote server supports PHP. . . . . . . . . . . . . . . . . . . . . . 69 Creating a local testing server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Choosing which versions to install. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Choosing individual installation or an all-in-one package. . . . . . . . . . . . . . . . . 71 Setting up on Windows. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Getting Windows to display file name extensions. . . . . . . . . . . . . . . . . . . 72 Choosing the right web server. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Downloading the software. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Preparing for installation on Windows Vista. . . . . . . . . . . . . . . . . . . . . . 73 Turning off User Account Control temporarily on Vista . . . . . . . . . . . . . . . 74 Before you begin . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Checking that port 80 is free . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Installing Apache on Windows. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Running the Apache Monitor on Vista . . . . . . . . . . . . . . . . . . . . . . . . . 78 Starting and stopping Apache on Windows . . . . . . . . . . . . . . . . . . . . . . 79 Changing startup preferences or disabling Apache . . . . . . . . . . . . . . . . . . 79 Installing PHP on Windows. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Testing your PHP installation (Windows XP and Vista) . . . . . . . . . . . . . . . . 82 Changing the default Apache port . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 Changing the default IIS port . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Setting up on Mac OS X . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Starting and stopping Apache on Mac OS X. . . . . . . . . . . . . . . . . . . . . . 86 Upgrading PHP on Mac OS X . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 Checking your PHP configuration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Understanding the output of phpinfo(). . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Checking the location of php.ini . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Checking PHP Core settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Checking installed extensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 Checking supported $_SERVER variables. . . . . . . . . . . . . . . . . . . . . . . . 96 Editing php.ini. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Accessing php.ini on Mac OS X . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Configuring PHP to display errors. . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Enabling PHP extensions on Windows . . . . . . . . . . . . . . . . . . . . . . . . . 98 Enabling file uploads and sessions (Windows installer). . . . . . . . . . . . . . . . 99 viii 8598FM.qxd 6/27/07 5:24 PM Page ix CONTENTS Overriding settings on your remote server. . . . . . . . . . . . . . . . . . . . . . . . . 99 Suppressing error messages. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Overriding default settings with ini_set(). . . . . . . . . . . . . . . . . . . . . . . . 99 Using .htaccess to change default settings . . . . . . . . . . . . . . . . . . . . . . 100 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Chapter 4: Setting Up a PHP Site . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Deciding where to locate your sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Understanding document- and root-relative links . . . . . . . . . . . . . . . . . . . . 104 Document-relative links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Root-relative links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Keeping everything together in the server root . . . . . . . . . . . . . . . . . . . . . 106 Working with virtual hosts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Finding the server root . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Moving the Apache server root on Windows. . . . . . . . . . . . . . . . . . . . . . . 107 Setting a default file for Apache on Windows . . . . . . . . . . . . . . . . . . . . . . 108 Adding a default PHP file to IIS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 Creating virtual hosts on Apache. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Registering virtual hosts on Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Registering virtual hosts on Mac OS X. . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Registering virtual directories on IIS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Defining a PHP site in Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Opening the Site Definition dialog box . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Telling Dreamweaver where to find local files . . . . . . . . . . . . . . . . . . . . . . 117 Telling Dreamweaver how to access your remote server . . . . . . . . . . . . . . . . 119 Defining the testing server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 Selecting options for local testing. . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Selecting options for remote testing . . . . . . . . . . . . . . . . . . . . . . . . . 123 Setting up other site options. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 Setting up for Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 Saving the site definition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Testing your PHP site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Troubleshooting. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 Setting options for Preview in Browser . . . . . . . . . . . . . . . . . . . . . . . . . . 129 Managing Dreamweaver sites. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 Now let’s get on with it . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 Chapter 5: Adding a Touch of Style . . . . . . . . . . . . . . . . . . . . . . . . . 135 Avoiding bad habits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 Stay away from the Property inspector for fonts. . . . . . . . . . . . . . . . . . . . . 137 Creating simple CSS for beginners. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 Introducing the CSS Styles panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 Opening the CSS Styles panel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 Viewing All and Current modes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 ix