Wrox’s ASP.NET 2.0 Visual Web Develope 2005 Express Edition Starter Kit phần 4 pps

Figure 3-7: The Table Designer showing the MenuItems and Orders tables The first column, named MenuItemID, is selected in the MenuItems table and the properties for this column are shown in the lower section of this window. This is the primary key of the table, as indicated by the key symbol in the column name grid at the top of the window. It is also an Identity (auto-number) column, and so the Identity Specification property value is Yes. The Identity Increment and Identity Seed properties, which you find by expanding the Identity Specification entry, are set to 1 (the default values), which means that as a row is added to this table the MenuItemID will be set automatically to the next available positive number. The Orders table displayed in the right-hand window also shows the data types for each column, and indicates that the OrderID column is in the primary key. In this table, there is a column named OrderDate that is specified as of type datetime, and two columns — DeliveryCharge and TotalValue —that will contain money (currency) values. 79 Building the PPQ Database 06_588079 ch03.qxd 11/29/05 3:52 PM Page 79 These last three columns also have a default value set, which is inserted into the row if the user does not provide a value when creating a new row. The OrderDate column (selected in Figure 3-7) has the value (getdate()) for the Default Value or Binding property. This means that the SQL Server function named getdate will insert the current date into the column for a new row. The DeliveryCharge and TotalValue columns have a default value of zero set. The Query Window If you select Show Table Data from the context menu in the Database Explorer window (or select this option from the Data menu when a table is selected in the Database Explorer window), VWD opens the Query window and displays the contents of all the rows in that table. When building pages that display data, this is a good way to see what a table actually contains (see Figure 3-8). Figure 3-8: Viewing the data in a table from the Database Explorer window In fact, this is the same window as you saw in Chapter 1 when you experimented with creating a query to extract data from a database table. The three buttons at the top left of the main window switch the display so that it shows the Diagram pane (the tables from which the data is extracted), the Criteria pane (where the columns included in the query are specified and any filtering is applied), and the SQL pane (which displays the SQL statement used to extract the data). Try opening all these panes to see how VWD is able to display the contents of a database table (see Figure 3-9). 80 Chapter 3 06_588079 ch03.qxd 11/29/05 3:52 PM Page 80 Figure 3-9: The Query window with all the “panes” turned on and displayed Creating a New Database In the next section, you will build the remaining table required for the PPQ Web site, and then construct the relationships between this and the other tables already provided in the example database. If you were starting completely from scratch, you would first have to create a new database. For this, you would right-click the top-level entry in the Solution Explorer window (not the Database Explorer win- dow!) that shows the path to your Web site and select Add New Item from the context menu. In the Add new Item dialog that appears, select SQL Database and specify the name, then click Add. This opens the Database Explorer window for the new database, where you can add the tables and other objects you require. 81 Building the PPQ Database 06_588079 ch03.qxd 11/29/05 3:52 PM Page 81 Figure 3-10: Creating a new database in SQL Server Express Edition Creating the PPQ OrderItems Table This chapter devoted considerable space to discussing database design issues. It has also looked at how VWD supports database development. In this section, you will create the remaining table required by the PPQ Web site. The MenuItems, SizeAndPrice, and Orders tables are provided in the example database. The one missing table is the OrderItems table. 1. Open the Database Explorer window (press Ctrl-Alt-S if it is not visible) and right-click on the Tables entry. Select Add New Table from the context menu that appears (see Figure 3-11). Figure 3-11: Database Explorer window 2. This opens the Table Designer window (see Figure 3-12), ready for you to specify the columns for the new table. Type in the column name fkOrderID, and select the int data type from the drop-down list. Make sure that you clear the Allow Nulls checkbox as well. 82 Chapter 3 06_588079 ch03.qxd 11/29/05 3:52 PM Page 82 Figure 3-12: Table Designer window The prefix fk is the accepted way to indicate that this column contains a foreign key. When the rows in two tables are related through key values within specific columns of the tables, the value of the pri- mary key in the parent table row is used in the child table rows that match that parent row. These values in the child table are the foreign keys, and so the column is generally referred to as a foreign key column. 3. Now continue by defining the remaining columns for the OrderItems table. These are: Column Name Data Type Allow Nulls fkMenuItemID int no ItemSize varchar(50) no ItemName varchar(50) yes Quantity int no LineValue money no You should see the result shown in Figure 3-13. Figure 3 -13: OrderItems data 4. Now you can set the specific properties of the columns in the new table. Select the Quantity column, and in the Column Properties section at the bottom of the Table Designer window find the entry for Default Value or Binding. This is the value for this column in new rows where no specific value is provided when the row is created. Type the value 1 for this property, as shown in Figure 3-14. Then select the LineValue column, and set the Default Value or Binding property value to zero. 83 Building the PPQ Database 06_588079 ch03.qxd 11/29/05 3:52 PM Page 83 Figure 3-14: Default Value or Binding property 5. The next step is to specify the primary key for the new table. You will recall from the earlier discussion of the database design that this table requires the first three columns to produce a unique value suitable for the primary key. Click on the square gray row selector button at the extreme left of the first column, ( fkOrderID) and hold the Shift key down while clicking on the row selector for the third column ( ItemSize) so that the top three columns in the list are selected. Then click the Set Primary Key button on the toolbar (as shown in Figure 3-15), or right-click and select Set Primary Key from the context menu. Alternatively, you can select the Set Primary Key option from the main Table Designer menu. Whichever method you choose, a key symbol appears on the rows to indicate that, together, they form the primary key for this table. 84 Chapter 3 06_588079 ch03.qxd 11/29/05 3:52 PM Page 84 Figure 3-15: Selecting the Set Primary Key button 6. The primary key will automatically ensure that rows will appear in the order of the values in the three columns that form the primary key, unless you specify otherwise in a query. However, sometimes it is useful to create indexes on other columns to speed up processing of queries. For example, if you intend to execute many queries against this table that use the value in the ItemName column, you might want to create an index on it. To do this, right-click anywhere inside the Table Designer window and select Indexes/Keys from the context menu (as shown in Figure 3-16), or select Indexes/Keys from the main Table Designer menu. Figure 3-16: Selecting Indexes/Keys from the context menu 85 Building the PPQ Database 06_588079 ch03.qxd 11/29/05 3:52 PM Page 85 7. This opens the Indexes/Keys dialog, which shows the index named PK_Table1 that was cre- ated automatically when the primary key was set on the table. Click the Add button at the bot- tom of the Indexes/Keys dialog to create a new index named IX_Table1. Make sure that this new index is selected and go to the Columns property in the right-hand window. The first col- umn in the table is selected by default, so click the “three dots” ( ) button to open the Index Columns dialog and select the ItemName column. The default sort order is Ascending, as shown in Figure 3-17, which is what you want. You can change this if you want items indexed in reverse order (for example, with a column containing dates or monetary values). Figure 3-17: Ascending sort order 8. Click OK to close the Index Columns dialog and go back to the Indexes/Keys dialog (see Fig- ure 3-18). Notice the Is Unique property of the new index. Because multiple rows in the table can contain the same value for ItemName (the name of the item ordered), and can also contain NULL values (because you did not turn this off in the column designer window), the values will not be unique, and so the index cannot be unique either. The Is Unique property must be No. For a primary key column, however, or any other column where you specify only unique values can exist, you could create a unique index. 86 Chapter 3 06_588079 ch03.qxd 11/29/05 3:52 PM Page 86 Figure 3-18: Indexes/Keys dialog An index can be created over multiple columns if required. In the Index Columns dialog, you just add more columns to the grid in the same way as you add columns to the table in the Table Designer win- dow. Click in the empty row below the last Column Name and another drop-down list appears allowing you to select the other columns that will be part of the index. If you go to the Indexes/Keys dialog and select the PK_OrderItems index, you will see the three columns that form this index in the Columns property of the index. You can create as many indexes as you like on a table, but each one has an effect on performance when you add or remove rows in the table. Therefore, you should only create indexes that you will use regularly in queries or when extracting data. 9. Now you can save the new table definition by clicking the Save button on the main toolbar, or by selecting Save Table1 or Save All from the File menu. A dialog appears asking for the name of the new table. Enter OrderItems and click OK. The new table appears in the Data Explorer window (see Figure 3-19). Figure 3-19: New table in Data Explorer window 87 Building the PPQ Database 06_588079 ch03.qxd 11/29/05 3:52 PM Page 87 Defining Relationships between Tables You have now completed the tables for the PPQ database, but there is still the task of defining the constraints that implement the relationships between these tables. Just because you created a primary key and a foreign key column in your tables does not mean that SQL Server will respect this. It will freely allow you to add rows to the child table where the foreign key value does not match any parent row primary key, and remove parent rows where there are existing matching child rows. Both of these situations will cause the data to be inconsistent, because orphan rows (that is, child rows with no matching parent row) will exist. Constraints prevent this happening by checking for the presence of matching primary key and foreign key values in the rows before allowing new child rows to be added or parent rows to be deleted. In doing so, they help to maintain referential integrity of the data. In VWD, you create constraints by specifying the relationships between tables — using either the Table Designer or a database diagram. The easier way is to use a database diagram, but before exploring this in more detail, the following section shows briefly how it is done in the Table Designer. Defining Relationships in the Table Designer With a table open in the Table Designer, you can right-click on the Designer window and select Relationships to open the Foreign Key Relationships dialog. This shows any constraints and relation- ships defined for the selected table. Click Add to a new relationship then select the Tables and Columns Specification property in the right-hand window of this dialog and click the three dots ( ) button to open the Tables and Columns dialog (see Figure 3-20). Figure 3-20: Setting the Tables and Columns Specification for a table relationship 88 Chapter 3 06_588079 ch03.qxd 11/29/05 3:52 PM Page 88 [...]... useful data-driven pages 106 4 Accessing and Displaying Data In the previous chapters, you have glimpsed some of the power of Visual Web Developer (VWD) and ASP.NET 2.0 Using just drag-and-drop techniques, and the VWD wizards, you have built the initial parts of the example PPQ Web site without writing any code, and without having to know anything other than the basics of HTML and Web page design Yet, the... are comment delimiters in a stored procedure) and can be ignored for now Make sure you change the name of the stored procedure in the first line to dbo.usp_GetAllMenuItems, as shown in Figure 3 -44 Figure 3 -44 : Changing the name of the stored procedure The prefix dbo for the stored procedure name indicates that the owner of the stored procedure (within the database) is the built-in default system user... each of these, and how they are used in VWD to power your Web pages In summary, the topics of this chapter were: ❑ Designing the PPQ database ❑ Using VWD to create and modify a database ❑ Building a page to extract data from related tables In Chapter 4, you will see a lot more ways to display data using the controls available in VWD and ASP.NET 2.0 You will also see how to create nested data output,... and pressing Ctrl-C (see Figure 3 -42 ) Figure 3 -42 : Copying the custom SQL statement to the clipboard 2 102 Now click Cancel to close the Configure Data Source Wizard, go to the Database Explorer window, right-click the Stored Procedures entry, and select Add New Stored Procedure from the context menu that appears (see Figure 3 -43 ) Building the PPQ Database Figure 3 -43 : Selecting Add New Stored Procedures... end of Chapter 3, which display the pizzas and drinks available from the PPQ Web site Chapter 4 Data Source and Data Display Controls In Chapter 1, you saw how VWD and ASP.NET can automatically create a page that displays rows from a database, and allow you to select, edit, and delete the rows in the database table Figure 4- 1 shows this page as you last saw it at the end of Chapter 2 You created it... the database itself 103 Chapter 3 4 Save the new stored procedure and close the stored procedure window Then, in the Configure Data Source Wizard, change the settings in the “Define Custom Statements or Stored Procedures” page to specify “Stored procedure:” as the source of the data, and select the new stored procedure in the drop-down list (see Figure 3 -45 ) Figure 3 -45 : Selecting the new stored procedure... configured (see Figure 3 -40 ) You can also use the Auto Format option to change the appearance of the GridView control Figure 3 -40 : GridView Tasks pane 100 Building the PPQ Database 13 Now press the F5 key, or click the Run icon on the main VWD toolbar, and you will see the rows that are returned by the custom SQL statement you created displayed in the GridView control (see Figure 3 -41 ) This proves that... 3-29) Figure 3-29: Selecting Configure Data Source 94 Building the PPQ Database 2 This starts the Configure Data Source Wizard In the first page, select the existing connection string (see Figure 3-30) This connection string was automatically created and added to the project when you carried out the examples in Chapter 1 It is actually stored in the Web config file for the application Figure 3-30: Selecting... integrity To create the relationship you need for this query, click on the MenuItemID column in the MenuItems table, and drag it onto the fkMenuItems column in the SizeAndPrice table (see Figure 3- 34) Figure 3- 34: Dragging the MenuItemID column 7 You will see the relationship between the two tables appear in the Query Builder window Select all the columns in the two tables except for the two “* (All Columns)”... of the stored procedure Using a View Instead of a Table or Stored Procedure Another approach to exposing data from more than one table as a single rowset for display using the controls in VWD and ASP.NET 2.0 is through a database view You create a view in much the same way as you do a stored procedure Right-click the entry named Views in the Database Explorer window and select Add New View from the . select Add New Diagram (see Figure 3 -23 ). Figure 3 -23 : Selecting database diagrams in the Database Explorer 90 Chapter 3 06 _58 807 9 ch03.qxd 11 /29 /05 3: 52 PM Page 90 2. The Database Diagram window opens,. select Configure Data Source (see Figure 3 -29 ). Figure 3 -29 : Selecting Configure Data Source 94 Chapter 3 06 _58 807 9 ch03.qxd 11 /29 /05 3: 52 PM Page 94 2. This starts the Configure Data Source Wizard dialog, click OK to create the new relationship (see Figure 3 -27 ). 92 Chapter 3 06 _58 807 9 ch03.qxd 11 /29 /05 3: 52 PM Page 92 Figure 3 -27 : Automatically selecting the correct tables and columns 6.