Dreamweaver MX 2004 phần 6 pptx

4306c15.qxd 3/18/04 8:33 PM Page 331 CHAPTER 15 Community Building with Interactive Site Features Interactive site features can involve your visitors and help to create a virtual online community. In previous chapters in this section, the focus has been on interacting with your site visitors via behaviors and navigation objects, and obtaining input from visi- tors from HTML forms and form-processing scripts. You can also allow your visitors to send input that’s published on the site using features such as guestbooks or discussion boards. This lets visitors interact with each other and view each other’s input, and helps to build a sense of community. You can also interact with your users by creating a blog where they can read your postings regarding news related to the site or other topics of interest. Although Dreamweaver doesn’t directly support these kinds of community-building fea- tures, you can certainly add these features to your Dreamweaver sites and use Dreamweaver to customize the look and feel of the pages you create. In this chapter, you’ll find resources for adding user input to your pages via guestbooks, discussion boards, chats, and blogs. ■ Creating community ■ Adding a guestbook ■ Using discussion boards ■ Hosting a chat ■ Creating a blog 4306c15.qxd 3/18/04 8:33 PM Page 332 332 ■ chapter 15: Community Building with Interactive Site Features Creating Community on the Web The first step in building an online community is that familiar but often overlooked first step of designing and creating a website: know your audience. What is the purpose of your site? Who’s likely to visit your site, and why? Are they likely to return for additional information and interaction? Do users have the opportunity to interact with you and send you comments and questions? Are your users likely to bene- fit from having an opportunity to share information with each other online? There are many ways to create community on your site, from simple to complex. An easy first step is to create links with related sites, and ask for links back to your site. This helps create a larger community of visitors interested in a particular topic or product, and increases the traffic to all the linked sites. Link popularity, or the number of links to and from your site, is also used as a ranking criteria by search engines such as Google. (For more information on search engines, see Chapter 26, “Controlling Access to the Site.”) Adding a Guestbook A guestbook provides a way for site visitors to leave messages, and to read messages from previous visitors. Visitors can’t directly respond to each other’s messages in a guestbook, though—that requires a discussion board, as discussed in the following section, “Using a Discussion Board.” Many ISPs and Web Hosting services offer free guestbook scripts, or you can use your favorite search engine and do a search for free guestbooks. The following sites offer a multitude of free scripts of all types, including guestbook scripts: • Matt’s Script Archive ( www.scriptarchive.com/) • BigNoseBird.com ( http://bignosebird.com) • CGI Resource Index ( www.cgi-resources.com) Guestbook scripts are generally CGI scripts written in Perl. If you are an experienced Perl programmer, you can probably write your own guest- book script. If not, though, you can adapt a prewritten script for your site. Although Dreamweaver does not include support for Perl, you can open and edit Perl scripts in Dreamweaver. The first step is to find out the requirements for your script by reading its documenta- tion, then check with your server administrator, ISP, or Web Hosting service to see if it sup- ports those requirements. Since most CGI scripts are written in Perl, your server needs to 4306c15.qxd 3/18/04 8:33 PM Page 333 adding a guestbook ■ 333 have a compatible version of Perl installed. You’ll need to know the path to the Perl inter- preter (generally it’s /usr/bin/perl or something similar) and the location of the cgi-bin. For more information on using and editing CGI scripts, see Chapter 14. A very easy script to adapt is available at http://bignosebird.com/carchive/bnbbook.shtml. This script is freeware, and can be freely used and adapted as long as you include the notice at the top of the script that identifies the source of the script. You can view a working example at http://bignosebird.com/guestbook.html. You can modify the appearance of this page as well as the function of the script. The Chapter 15 folder on the book CD includes a modified guestbook page that uses this script ( guestbook.html), shown in Figure 15.1. Let’s take a closer look at how to adapt the script: 1. Download the script from http://bignosebird.com/carchive/bnbbook.shtml. 2. Unzip the file. There are three files included: bnbbook.cgi, README.txt, and gbook.html. 3. README.txt contains the full directions for adapting the script, but we will review the major steps here. 4. Open bnbbook.cgi in Dreamweaver. Figure 15.1 Our modification of guestbook.html 4306c15.qxd 3/18/04 8:33 PM Page 334 334 ■ chapter 15: Community Building with Interactive Site Features 5. Go to line 46 : $HTML=”YES”; If you want to block users from using HTML tags in their input, change this from YES to NO. 6. Change line 51: $GUESTBOOK=”/home/www/gbook.html”; Specify the full path to the guestbook file (gbook.html) on your server. This path is specific to the server, so you may need to contact your ISP or hosting service to find out details of the path. 7. Go to line 56 and enter the absolute URL to the guestbook file. This redirects the user back to the guestbook page after they submit their entry. $GUESTBOOK_URL=”http://df132domain.com/gbook.html”; 8. Change line 73: $MY_EMAIL=”me\@dfdfdomain.com”; Enter your e-mail address here. Be sure to include a \ before the @. 9. Go to line 106: $VALID_DOMAIN=”dfdfdomain.com”; Enter your domain name. Okay, you’ve now changed all the significant script parameters (for more options, see the README.txt file). Now, let’s change the response page and the guestbook format. 10. Go to Line 113 and adapt the thank you message for the response page. This is the message that displays after the user clicks the Submit button. You can change any- thing between these two lines: $THANK_YOU=<<__END_OF_THANK_YOU__; and END_OF_THANK_YOU but be sure not to delete either of these two lines. 11. Go to line 142. You can change the display of the user’s post by modifying your code in between these two lines: $PAGE_ENTRY=<<__END_OF_PAGE_ENTRY__; and __END_OF_PAGE_ENTRY__ 12. Save the changes you made to bnbbook.cgi . 4306c15.qxd 3/18/04 8:33 PM Page 335 using discussion boards ■ 335 13. Open gbook.html and modify the page display as desired. You can also add a link to a style sheet (see guestbook.css in the Chapter 15 folder on the CD). 14. Upload bnbbook.cgi and gbook.html to your server. The bnbbook.cgi file should be uploaded to the cgi-bin. Set file permissions of 755 for bnbbook.cgi and 644 for gbook.html. (For more details on setting file permissions, see Chapter 14.) You should now have a functional guestbook on your site. Test it out by opening the guest page online and making an entry. If it does not work as expected, see the trouble- shooting tips in the README.txt file or contact your server administrator, ISP, or Web Hosting service. This script instantly posts a user’s message to your page. Although this script lets you include filters for words you don’t want to allow in posts, you may want to use a guestbook script that lets you review visitors’ entries before they’re posted on your page. Using Discussion Boards You have even more options if you want to include a discussion board (also known as discus- sion lists or bulletin boards). A discussion board usually includes threaded postings, so that users can respond to each other’s entries. All responses to one topic are grouped together as discussion threads. Generally, you can view all the responses in chronological order, and archives are often available of previous threads. A discussion board can be open to all visitors, or you can limit participation to registered members. Many discussion boards include a mod- erator, or administrator, who reviews entries before they are posted to the board. Free discussion board scripts are available from the sources mentioned in the previous section, or may be available from your ISP or Web Hosting service. You can set up a dis- cussion board on your own site or on another site—for example, Yahoo Groups. To see an example, see Figure 15.2 or visit the Yahoo discussion group for this book at http:// groups.yahoo.com/group/dreamweaversavvy/. You’ll need to create a free Yahoo user ID and password to join a discussion group or to create a discussion group of your own. To create a Yahoo discussion group, go to http://groups.yahoo.com/start and follow the instructions. If you use ColdFusion, there are several free discussion board extensions available for download on the Macromedia Exchange site at www.macromedia.com/cfusion/exchange/ index.cfm, or just click the Dreamweaver Exchange link on the Dreamweaver start page. Go to the ColdFusion section of the Macromedia Exchange, and search for discussion boards. For additional information on using ColdFusion, see Chapter 20, “Working with ColdFusion,” and for more details on using extensions, see Chapter 32, “Customizing and Extending Dreamweaver.” 4306c15.qxd 3/18/04 8:33 PM Page 336 336 ■ chapter 15: Community Building with Interactive Site Features Figure 15.2 The Dreamweaver Savvy discussion at Yahoo Groups Hosting a Chat If you want to give your visitors the opportunity to interact with each other in real time or if you want to be available to answer questions—for example, to provide real-time cus- tomer service—you can include a chat room on your site. A chat is an instant messaging service, or instantaneous e-mail interaction, so it’s more like having an actual conversa- tion than a threaded discussion. The conversation in a chat is not limited to two partici- pants; several people (up to the limit for your chat room) can interact at the same time. A chat display can be just a scrolling display of text, or it can include a more graphic display with graphic characters, props, and text balloons, such as the chat rooms available at www.thepalace.com. Newer chat rooms offer voice and video services as well as text dis- play. Apple’s iChat AV ( www.apple.com/ichat/) offers video conferencing over any broad- band connection. Many Hosting Services offer free chat room services for their clients, or you can find many free chat services as well as chat scripts online. See the collection of free Perl scripts named Ralf’s Chat at www.2createawebsite.com/enhance/create-chat-room.html or the free Java applet chat at www.freejavachat.com/. Commercial chat software, such as DigiChat 4306c15.qxd 3/18/04 8:33 PM Page 337 creating a blog ■ 337 (www.digichat.com) is also available, and offers increased security, privacy features, and other enhanced chat features. You can offer a public chat room, or you can create a private chat, with participants limited to members and/or invited guests. If you choose to host a chat room on your own site, consider the load on your web server and how many participants you can support at one time. You will probably want to use a chat hosting service if you are planning on an active chat room with a large number of participants. A list of free and commercial chat services is available at http://cgi.resourceindex.com/ Remotely_Hosted/Chat/. Creating a Blog Blogs, or web logs, first came on the Web scene around 1998. Originally, blogs consisted of web pages with dated entries containing a combination of links, news, commentary, and personal observations. These blogs served to highlight and filter web content that might otherwise go unnoticed by the majority of Web users, and offered brief descriptions and commentary in addition to links to the actual content. This original type of blog is still widely used; for an example, see Macromedia’s John Dowdell’s blog, “News for MX Devel- opers,” at www.markme.com/jd/, Eric Meyer’s “Thoughts from Eric” at www.meyerweb.com/, and Jeffrey Zeldman’s “Daily Report” at www.zeldman.com/. Blog content can be syndicated through RSS (Rich Site Summary), an XML language for sharing news information. RSS files include static information about your site plus dynamic news entries that include a title, a URL, and a brief description of the linked con- tent. Your RSS files can be registered with an RSS aggregator and made available as RSS feeds. You can also download RSS feeds from other sites to display news items on your site. The news content is dynamically updated as new RSS feeds become available, so it’s always up to date. In August 1999, Blogger ( http://new.blogger.com/) introduced a free, web-based tool for quickly creating blogs. Blogger’s tool requires no skills in coding or web development, and was one of the tools that enabled rapid expansion and proliferation of blogs. Basically, Blogger and similar software enable you to type in a block of text, which is added to a tem- plate to create a new file, which is then uploaded to a server. Although Blogger was not the only version of web log tool available, it quickly became the most popular blog tool. In part because it is so easy to use, a new form of blog became popular—the short journal form of blog, such as Jason Sutter’s blog at http://jason.similarselection.org/index.php. Blogger provides a web-based application that is hosted on Blogger’s server, and frees the user from maintenance and configuration issues. 4306c15.qxd 3/18/04 8:33 PM Page 338 338 ■ chapter 15: Community Building with Interactive Site Features You can also choose a more customizable blog tool such as Greymatter (http://noah- grey.com/greysoft/) or Moveable Type (http://www.movabletype.org/). These tools both offer a set of customizable CGI scripts that you upload to your server, and give you more control over the display and features of your blog. Radio Userland 8.0.1 ( http://radio.userland.com/) is an easy-to-use, full-featured tool for creating blogs, syndicating, aggregating, and displaying news content. Radio Userland software is installed on your own computer, rather than being a web-based application, and allows you to work locally until you’re ready to upload your blog files. Radio Userland includes a newsreader that lets you subscribe to any RSS feeds you choose, checks for updates every hour, and displays your news updates in a single page for quick scanning. For additional information on blog, see the following websites: • “The Weblog Tool Roundup” http://hotwired.lycos.com/webmonkey/02/18/ index3a.html • “weblogs: a history and perspective” http://www.rebeccablood.net/essays/weblog_ history.html • “Introduction to RSS” http://www.webreference.com/authoring/languages/xml/rss/ intro/index.html Hands On: Create Your Own Blog with Blogger Blogger is free, easy to use, and a great tool for creating your first blog. If you’re an experi- enced blogger, skip this tutorial and move on to building web applications in Chapter 16, “Building Web Applications.” Your blog can be a filtered combination of links and commentary, a personal journal, or anything you want it to be! Blogs make web publishing available to anyone who has a connection to the Internet. 1. Start by opening http://new.blogger.com/ in the browser of your choice. Click the button labeled “Start Now” in the section at the top of the page titled “Create Your Own Blog!”. 2. The “Create a Blogger Account” page displays. Fill out the form with your username, first name, last name, e-mail address, and a password to register as a Blogger user. Review the Terms of Service agreement, and click the check box if you agree. Then click the “Sign Up” button at the bottom of the page to complete your Blogger registration. 3. Click on the button labeled “Create a New Blog” on the right side of the Blogger home page. The first page of the Create a New Blog form displays. 4. Step 1: Provide a title and description for your blog, and choose public or private (public means it may appear in the Blogger directory). 4306c15.qxd 3/18/04 8:33 PM Page 339 from community to web application development ■ 339 5. Step 2: Select free hosting (with ad) at Blogspot.com or choose to FTP your blog file to your server. 6. Step 3: If you chose free hosting, enter a name for your page on this third page. If you chose FTP, enter your FTP parameters on this page. 7. Step 4: Choose a template for the presentation of your blog page. You can change this choice at any time, and can also use your own style template. 8. The Create New Post window of the Publishing tab opens. Enter your blog text in the box, and then click the button at the bottom of the window to Preview your blog. Edit the text as needed in this window. 9. Click on the Publish Status window in the Publishing tab. Click the button at the bot- tom of the window to publish your blog. 10. Click on the Settings tab to change any of the settings from steps 1 through 3. Click on the Template tab to display the code in the selected template from step 4, or to choose a different template style. That’s it—your blog is now published online, and you have officially joined the ranks of bloggers worldwide! From Community to Web Application Development In this section, you have learned how to create a guestbook and a blog to add community- building interactivity to your site. In the next chapter, you can start to explore the back end of site construction—building web applications using Dreamweaver’s web develop- ment features and support for server technologies such as ASP, ASP.NET, ColdFusion, JSP, and PHP. [...]... Chapter 30, “Going Live or Delivering the Site.” Table 16. 1 Operating System and Installed Web Server 3 46 ■ chapter 16: Building Web Applications Figure 16. 2 Setting a testing server folder on a local web server Though ASP sites can be developed on any version of IIS, ASP.NET sites require IIS 5 running on Windows 2000 or XP Pro systems, or IIS 6 running on Windows 2003 You can still develop ASP.NET... software (formerly known as Chili!Soft ASP) ASP.NET uses IIS with the NET framework The ColdFusion model ColdFusion sites run on the ColdFusion MX application server using the ColdFusion scripting language Studio MX 2004 includes the developer edition of ColdFusion MX 6. 1 Server (for Windows only) The JSP Model JSP stands for Java Server Pages In order to use Java Server pages, you need an application server... customers an incentive to return to your site Be sure to include links to new items, seasonal sales, and inventory clearances in a prominent place on your home page processing transactions ■ 363 Figure 17 .6 Dreamweaver MX 2004 provides predesigned layouts you can use to cre­ ate a sales catalog Don’t be reluctant to sprinkle words like New! or Sale! liberally around your home page or other parts of your site... applica­ tions in Dreamweaver ■ Building and testing web applications ■ Working with a local or remote web server ■ Choosing a server technology ■ Working with an application server ■ Setting up the site in Dreamweaver 344 ■ chapter 16: Building Web Applications Designing and Testing Web Applications The difference between developing web applications and developing static sites in Dreamweaver starts... technologies and show you how to use Dreamweaver for any of these tasks In general, the choice of a server technology is not based on what any particular tech­ nology can do Rather, it’s a choice based on what programming languages, if any, you are already familiar with and what operating system you are working with Our personal choice? If you are using Dreamweaver MX 2004 for web application development,... duplicate on your website Start up Dreamweaver and follow these steps to do the copying 1 Open the file that has the color you want to duplicate This file can be in a program other than Dreamweaver 2 Click the color box in Dreamweaver s Property inspector The color picker appears, and the mouse arrow turns into the eyedropper 3 Hold down the mouse button when you move from the Dreamweaver window to the window... them as you go Choosing a Server Technology To build a web application, you have to decide what type of server technology you want to use, and then choose the application server it will run on Dreamweaver MX and MX 2004 support a broad range of server models, from Microsoft’s web services framework (.NET), through Macromedia’s own ColdFusion server, to open source frameworks based on Java or Apache/PHP... application development, we recommend ColdFusion for a server technology CFML (Cold Fusion Markup Language) is tag-based and easy to use, and a free developer edition of the ColdFusion MX 6. 1 Server is included with Studio MX (or can be downloaded for free at www.macromedia.com/cfusion/tdrc/index.cfm?product=coldfusion—the free trial version becomes the developer edition after 30 days) Macromedia’s extensive... com/netframework/ downloads/v1.0/default aspx IIS 6 and NET framework ASP.NET 1.1 Free http://msdn.microsoft com/library/default.as p?url=/downloads/list/ netdevframework.asp (IIS 6 comes with Windows Server 2003) ColdFusion MX ColdFusion MX Free Developer version www.macromedia.com/ cfusion/tdrc/index.cfm? product=coldfusion JRun JSP Free Developer version www.macromedia.com/ cfusion/tdrc/index.cfm? product=jrun... run PHP on their built-in Apache server, www entropy.ch/software/ macosx/php/) setting up your web application as a dreamweaver site ■ 349 Setting Up Your Web Application as a Dreamweaver Site Once you’ve got the infrastructure in place, setting up your dynamic site or web applica­ tion in Dreamweaver is no more complicated than it is for setting up an ordinary static site full of HTML pages Defining . Chapter 30, “Going Live or Delivering the Site.” 4306c 16. qxd 3/22/04 11:43 PM Page 3 46 3 46 ■ chapter 16: Building Web Applications Figure 16. 2 Setting a testing server folder on a local web. “Customizing and Extending Dreamweaver. ” 4306c15.qxd 3/18/04 8:33 PM Page 3 36 3 36 ■ chapter 15: Community Building with Interactive Site Features Figure 15.2 The Dreamweaver Savvy discussion. ColdFusion sites run on the ColdFusion MX application server using the ColdFusion scripting language. Studio MX 2004 includes the developer edition of ColdFusion MX 6. 1 Server (for Windows only). The