Building the Vecta Corp Employee Store Using ASP, ColdFusion, or PHP If you read the title of this section, chances are you're wondering why we're covering ASP, ColdFusion, and PHP in a single section. The answer to this question is simple; Dreamweaver's core functionality is so similar across the three server models that individual sections for each server-side technology aren't warranted. Instead, we'll build our dynamic web pages using the ASP server model, pointing out the small differences and additions for the other two server models along the way. In the coming sections, you'll learn to build the dynamic employee store web page using ASP, ColdFusion, or PHP. As the chapter unfolds you'll learn about the various Dreamweaver features that make working with database data a snap. Specifically, you'll learn about the following concepts: Recordsets Paging Dynamic text Region repeaters Showing specific regions (conditionals) By the end of this chapter, you'll have a fully functional employee store web page that pulls product information directly from a database and displays it for users to purchase. Let's get started. Creating the EmployeeStore Page The EmployeeStore page of the Vecta Corp intranet site is the heart of the Vecta Corp web application. After all, this is where Vecta Corp employees come to buy flare and tchotchkes (marketing lingo for lame and unusable stuff) to show off their Vecta Corp pride to co-workers, friends, and family. The idea is that employees will visit the page, and the page will pull information from the EmployeeStore table contained in the vectacorp database and present items to the users for purchase. The users can then click an item, add it to their carts, and complete their purchase using a convenient checkout button. All this functionality will be outlined in time. For now, let's review the basic structure of our vectacorp database, specifically, the EmployeeStore table. As Figure 24.18 indicates, we can expand the EmployeeStore table directly from the Databases panel (by clicking the small (+) icon) to reveal the field names and the data types associated with each field. Figure 24.18. The EmployeeStore table is the central source of data for the EmployeeStore web page. Table 24.1 outlines the fields in the database table, including the data types used by Dreamweaver. Table 24.1. Fields in the EmployeeStore Database Table Field Name Data Type Description ItemID Integer The unique identifier for each item in the EmployeeStore table. Whenever we make updates, modifications, or remove items from the EmployeeStore table, this value serves as a base point. ItemName WChar A generic name for each item in the table. ItemDescription WChar A marketing description about the item for sale. ImageURL WChar A path to the image in the Images directory of our defined site. Rather than physically storing the image in the database, we store the image on the file system and reference that image by storing the path in the database. This effectively reduces database file size at the expense of disk space. Cost Numeric A currency value that represents the cost of the item for sale. Quantity Integer A numeric value indicating how many of a specific item are left in stock. Now that you've seen the database structure, you are ready to begin extracting data from it. Let's build that functionality now. Creating a Recordset By now you may be curious about how data in your database can be extracted into your application. Sure, you've learned a lot about SQL and are familiar with the commands to retrieve the information, but now what? SQL alone does not provide enough flexibility to read from the database and write that data to the application; there's still a piece of the puzzle missing. That piece is the recordset. Recordsets act as an intermediary virtual table between the database and the application. You can write SQL commands to ask questions of the database (also known as a query), but the information retrieved is stored in a recordset. The programming logic iterates through the recordset and ultimately presents the data to the browser in a structured way. Figure 24.19 illustrates this point. Figure 24.19. The application makes a call to the database, which then returns data in the form of a recordset. [View full size image] Remember that the questions asked of the database are made in the form of queries, and queries are a process that usually involve SQL to structure how the question will be asked. After the question (query) has been asked, the data is returned into a virtual table or recordset. The recordset is then browsed through by the application logic and presented to the user in a structured HTML document. To demonstrate this point, you can use Dreamweaver to create a simple recordset that will query the EmployeeStore table. To create a recordset, follow these steps: 1. With the Application panel group open, switch to the Bindings tab and click the Add (+) button. Select Recordset (Query) from the list that appears when you click the Add (+) button. The Recordset dialog appears. 2. In the Name text box, type the name rsEmployeeStore. 3. Select the connVectaCorp option from the Connection drop-down menu. If the name of your connection does not appear in the drop-down menu, it means that you haven't yet defined the connection. Review the first part of this chapter for information on creating a connection. Selecting the connection option from the list reveals a set of tables in the Table drop-down list. These are the database tables that exist in the vectacorp database to which you've just connected. Note If you're using ColdFusion, make note of the User Name and Password text boxes. If your DSN requires authentication before connecting to the data source, enter those credentials here. 4. Pick the table in the Table menu for which you want to create a recordset. In our case, choose the EmployeeStore option. 5. You'll have the opportunity to choose all or selected fields from the database table. For the sake of demonstration, keep the All option button selected. 6. Optionally, you can filter and sort the data based on specific values. More on this later. For now, the configured Recordset dialog should resemble Figure 24.20. Figure 24.20. Fill out all the information in the Recordset dialog. 7. Click the Test button to see a sample of the results that will be returned. Figure 24.21 shows the returned recordset with all the data from the EmployeeStore table. Now that you know that the recordset works, click OK. Figure 24.21. The test results show the recordset with populated data. [View full size image] Note The ColdFusion model optionally supports connections using ColdFusion Components (CFCs). Although we will discuss CFCs in Chapter 30, "Introducing the Spry Framework for Ajax," for now, be aware that the option for connecting to a DSN using a CFC is made available by clicking the CFC Query button. 8. Click OK to close the Recordset dialog. As you'll see, the new Recordset is listed in the Bindings panel. Note that by selecting the Bindings tab and then expanding the recordset, you can view the field names contained within the recordset (more on this later). Creating an Advanced Recordset Simple recordsets can serve your needs if you are performing simple queries of all or certain fields in a single database table. But what if you wanted to perform joins and merge two tables into one recordset? Unfortunately, the simple method wouldn't do. Although creating advanced recordsets can become very complex, the trade-off is flexibility, scalability, and power. Rather than creating multiple recordsets in which you store each and every table, you can join two or more tables into one recordset based on a common value. Take the EmployeeStore and Orders tables as examples. Suppose that you were working in the Shipping and Receiving department and your job was to print out a list of all orders for a specific day. If that were the case, you would need to create a recordset that merged the EmployeeStore and Orders tables into one virtual table. Furthermore, you'd also need to include the Employees table because all orders are related not only by products in the EmployeeStore table, but also by the employee from the Employees table. This complex recordset can't be constructed using the Simple recordset view (the basic Recordset dialog). Instead, you'd have to use the Advanced view. To create a recordset using the Advanced view, follow these steps: 1. In the Bindings panel, choose the Recordset (Query) option from the Add (+) menu. The Recordset dialog opens. 2. Click the Advanced button. Figure 24.22 shows that the dialog is relatively similar in design to the Simple view, except that you can enter a SQL query manually rather than allowing Dreamweaver to create it for you. Figure 24.22. The Advanced Recordset dialog enables you to manually type the SQL code, allowing for greater flexibility. [View full size image] Tip The Advanced Recordset dialog also provides limited visual control over the fields you want to include in your query. The Database Items list contains the same tree node that the Databases panel outlines. From this list, you can choose specific tables and then click the SELECT, WHERE, or ORDER BY buttons to include the specific fields in the SQL statement in the SQL multiline text box. 3. If you remember the lengthy code structure for creating SQL joins, begin typing. If you are like most people and like to rely on programs to do the work for you, open the vectacorp.mdb file in Access and begin a new query in Design view. Alternatively, if you're relying on a SQL Server database, open Management Studio and begin a new View. If you're relying on a MySQL database, open MySQL Query Browser and begin a new query. 4. Add the Employees, Orders, and EmployeeStore tables to your query as shown in Figure 24.23. Figure 24.23. Add the Employees, Orders, and EmployeeStore tables to the Design view in Access. [View full size image] 5. Select the Employees.Name, Employees.BillingShippingAddress, Employees.BillingShippingCity, Employees.BillingShippingState, Employees.BillingShippingZip, Orders.Quantity, Orders.DatePurchased, EmployeeStore.ItemName, and EmployeeStore.Cost fields. Remember, we don't need to extract everything from the database tables. Instead, we want to pull only the data from the three tables that is relevant to the Shipping and Receiving department. Figure 24.24 shows the complete design. Figure 24.24. Select the fields from the tables that you want to include in your query. [View full size image] 6. To use the SQL code that was generated, select SQL View from the View menu. Figure 24.25 shows the SQL code that is generated. Figure 24.25. View the SQL code that Access generated by selecting View, SQL View. [View full size image] 7. Copy the SQL code, save the query as EmployeesOrders, and close Access. Don't forget to save the query. This step is crucial for the next section. 8. You are now free to paste the code into the SQL box in the Advanced Recordset dialog in Dreamweaver. Figure 24.26 shows the result. Figure 24.26. Paste the SQL code you created in Access into the SQL text box of the Advanced Recordset dialog. [View full size image] 9. Type the name rsOrders into the Name text box. 10. Select the connVectaCorp option from the Connection drop-down menu. 11. Click the Test button to test the results. As Figure 24.27 demonstrates, a Test grid is presented with a few prepopulated orders. You'll also notice that all the fields are combined into one virtual table resulting from the three original tables. Figure 24.27. Combine the contents of three tables into one recordset by using joins. [View full size image] 12. Click OK to close Text SQL Statement window. 13. Click OK to close the Recordset dialog. After you close the Recordset dialog, notice that the new recordset is listed in the Bindings panel. Creating a Recordset from a View In the preceding sections, you saw how to create both simple and advanced recordsets. The Simple Recordset dialog allowed you to select a single table and work with the fields in that table in your recordset. The Advanced Recordset dialog allowed you to paste in SQL statements created in Access's Query Designer (Views in SQL Server's Management Studio, or MySQL Query Browser) to join two or more tables and work with the data from multiple tables in your recordset. Recall that you saved the query you created in Access as EmployeesOrders. Look at the saved query in Access; it might resemble Figure 24.28. Figure 24.28. The query is saved as EmployeesOrders in Access. Rather than opening Access every time we need to use that query and then copying the SQL statement and pasting it into the Advanced Recordset dialog, we can use that query in Dreamweaver as is. To use the saved query in Dreamweaver, follow these steps: 1. Open the Advanced Recordset dialog by double-clicking the rsOrders recordset in the Bindings panel. This action launches the Recordset dialog in the Advanced view. 2. Select the entire SQL query and delete it from the SQL multiline text box. 3. From the Database Items list box, expand the Views selection tree. Notice that the EmployeesOrders view (the query you saved in Access) is shown. 4. Choose the EmployeesOrders view and click Select. The SQL statement should resemble the one in Figure 24.29. Figure 24.29. Choose the query from the Views selection tree. [View full size image] [...]... defined as an application within IIS, which at this point it's not Second, Dreamweaver uses a precompiled assembly called DreamweaverCtrls.dll for implementing features such as Datasets For our page to run under ASP.NET, the DreamweaverCtrls.dll file must be deployed into a Bin folder in the root of our application At this point, the DreamweaverCtrls.dll file hasn't been deployed, so let's do it now: 1... ASP.NET If you're reading this section, it's safe to say that you're either curious about learning how to develop NET applications in Dreamweaver or you're simply broadening your knowledge of the extensive functionality available in Dreamweaver When I first starting using Dreamweaver UltraDev years back, I was amazed at the simplicity between the program and the various server models that existed at the... retrieval models in ASP, ColdFusion, or PHP, you are familiar with the recordset The recordset acts as a virtual table to store information retrieved from the database In Dreamweaver, ASP.NET Datasets are similar to recordsets Note Dreamweaver uses Datasets as the storage mechanism for your data when working with ASP.NET It's important to note that, unlike a recordset in ASP, which represents only one... and universal term is view SQL Server 2005 Express Edition and Dreamweaver refer to them as views 5 Click the Test button to see the result of querying the view/query Click OK to close the Test SQL Statement dialog Click OK to close the Recordset dialog and save the new recordset Whether you are creating simple or advanced recordsets in Dreamweaver or using a saved query to create your recordsets, be... They keep clicking Next but nothing happens The problem is that the users have reached the end of the recordset and they cannot go any further However, the user has no way of knowing that To fix this, Dreamweaver provides functionality in the form of a group of Show Region behaviors For example, we can create a region that contains text alerting the users that they have reached the end of the recordset... from the recordset into your application Working with Dynamic Elements Now that you've been able to extract data from your data source, your next step is to structure it within your application somehow Dreamweaver' s Server Behaviors and Bindings panels provide the capabilities you need to get started producing dynamic elements centralized within the database but revealed by the application Dynamic Text... the time When I first started beta testing Visual Studio and ASP.NET in 2000, I wondered whether Macromedia would ever include the power of Datasets, DataGrids, and DataLists into its newest version of Dreamweaver and if they did, how they would go about doing it As it turns out, they answered my questions by incorporating the easy-to-use functionality of the ASP, ColdFusion, and PHP server models with... this will be a review What this section covers differently, however, is an overview of the power exposed via Datasets, DataLists, DataGrids, and the ASP.NET application development capabilities using Dreamweaver Specifically, this section covers the following topics: Datasets Paging Dynamic text (object binding) Region repeaters Showing specific regions (conditionals) DataGrids DataLists Creating a... another record Size constraints— By paging through a recordset, screen real estate is gained The records are loaded in a certain area of the page rather than all records showing continuously down the page Dreamweaver' s pagination behaviors are located in the Add (+) menu in the Server Behaviors panel and include the following behaviors: Move to First Record— Returns the user to the first set of records... Recordset from a View," earlier in this chapter Working with Dynamic Elements Now that you have a Dataset clearly defined, your next step is to get the information out of the Dataset and into your application Dreamweaver' s Server Behavior and Binding panels provide the functionality you need to get started producing dynamic elements that are centralized within the database but exposed by the application Let's . and pasting it into the Advanced Recordset dialog, we can use that query in Dreamweaver as is. To use the saved query in Dreamweaver, follow these steps: 1. Open the Advanced Recordset dialog by. page using ASP, ColdFusion, or PHP. As the chapter unfolds you'll learn about the various Dreamweaver features that make working with database data a snap. Specifically, you'll learn. web page. Table 24.1 outlines the fields in the database table, including the data types used by Dreamweaver. Table 24.1. Fields in the EmployeeStore Database Table Field Name Data Type Description ItemID Integer The