Tutorial - Database-driven web pages
Table of Contents
1. Introduction
2. Set Up
3. Copying your Access Database
4. Using a GridView to display and edit data
5. Using a FormView to enter new records
6. Exercises
1. Introduction
Using database-driven (also called dynamic) web pages greatly simplifies the inserting, updating, and deleting of information from
a web page. Any reasonable eBusiness web site uses database-driven pages to display data for things such as product catalogs, online
shopping carts, customer details, event details, announcements, and news items.
Microsoft Expression Web provides some of the simplest tools I have seen to create database-driven web pages using almost any database
management system (MS Access, MS SQL Server, Oracle, and many others).
Normal HTML is not sufficient to connect to and display data from a database. Another language, called a server-side scripting language,
is required to create dynamic web pages. We will be using ASP.NET 2 to create dynamic web pages. The other popular language for creating
dynamic pages is php.
There are four main steps to remember:
- Place a copy of your MS Access database into the App_Data folder and upload it.
- Create an ASP.NET (.aspx) page.
- Use an ASP.NET control such as a GridView or FormView to display, insert, edit, or
delete data.
- Create a connection to the relevant table or query in the database.
2. Set Up
- If you are not using your own computer, create a website using the instructions from the first web development tutorial.
- Everyone needs to check that their files are synchronized with their remote site.
3. Copying your Access Database
1. Save PacificRestaurant_Complete.zip to your computer and expand the file.
2. Open the database in Access 2007 and convert the database to an Access 2003 database (Office Button --> Save As -->
Access 2002-2003).
3. Save the database as PacificRestaurant.mdb into the App_Data folder in your website.
4. Check that you saved the database in the correct location by making sure that it appears in the App_Data folder in the Folder List
(you need to click on View --> Refresh).
5. Make sure that you copy the database into the App_Data folder to the Remote Web Site.
4. Using a GridView to display and edit data
A GridView is a database-driven table of data. We are going to display a list of dishes items from the tbl_dish table.
1. Create a new ASP.NET (aspx) page and save it as menudb.aspx. Click on File --> New --> ASPX.
2. IMPORTANT: All content must go inside the form box.
3. Attach the standard.css style sheet (See the CSS tutorial).
4. In code view, copy the following code and paste it inside the <form> </form> tags.
<div id="page">
<div id="header">Pacific Restaurant - This Month's Menu</div>
<div id="menu"><a href="index.htm">Home</a> | <a href="menu.htm">Menu</a> | Location | Testimonials</div>
<div id="main"></div>
<div id="footer" class="style1">© Pacific Restaurant 2007</div>
</div>
5. Your code must look like this:
6. In design view, in the main div, drag a GridView control from the toolbox. Its under
ASP.NET Controls --> Data --> GridView. If you can't see the Toolbox, click on Task Panes --> Toolbox.
7. Click on the GridView and then the small arrow in the top right corner to display Common GridView Tasks.
8. From the Choose Data Source drop down list, select New Data Source...
9. Select Access Database and then click OK.
10. Click the Browse... button and find your PacificRestaurant.mdb Access Database by clicking on the
App_Data folder. Click OK. Click Next.
11. From the Name drop down list, select the tbl_Dish table. Check the star under Columns
to return all fields from the tbl_Dish table.
12. Click the Advanced... button
13. Check the Generate INSERT, UPDATE, and DELETE statements checkbox. Click OK. Click Next.
Click Finish.
14. In the GridView tasks window, check the following checkboxes: Enable Paging, Enable Sorting, and Enable
Editing.
15. In the GridView Tasks window, select Auto Format and choose your preferred color scheme.
16. Create a link from index.htm to menudb.aspx
17. Save your pages and upload all changed pages to the website (menudb.aspx and PacificRestaurant.mdb).
18. Test your page in your web browser, including the Edit button and column sorting.
19. In the Common GridView Tasks window, select Edit Columns and edit the column headings by changing
the HeaderText for each field.
5. Using a FormView to enter new records
A FormView control is used to create a web form for adding or editing records in a database. Many of these steps are exactly the same
as creating the GridView above.
1. Create a new ASPX page and save it as newdishdb.aspx. Insert the code from step 4, above. Replace the
text menu with Add new dishes
2. Attach the standard.css style sheet.
3. In the main div, drag a FormView control from the toolbox.
4. In FormView Tasks, from the Choose Data Source drop down list, select New Data Source...
5. Select Access Database and then click OK.
6. Click the Browse... button and find your pacific3.mdb Access Database by clicking on the App_Data
folder. Click OK. Click Next.
7. From the Name drop down list, select the menu table. Check the star under Columns to
return all fields from the tbl_dish table.
8. Click the Advanced... button
9. Check the Generate INSERT, UPDATE, and DELETE statements checkbox. Click OK. Click Next.
Click Finish.
10. Click on the FormView. In the Tag Properties Pane, find the DefaultMode
property. Select Insert from the drop down list.
11. Save and upload all changed files.
12. Test your page by inserting a new menu item and then viewing it on your first page - menuDB.aspx.
13. Advanced Users [optional]: You can edit the FormView by selecting Edit Templates from FormView Tasks.
1. Review the Video Tutorial: FormView with drop down list.
2. Create a drop down list in your FormView to select menu categories.
3. Create a new page that displays customer data in a gridview.
4. Create a new page that allows you to add new menu categories.
5. Check your database to see where the new data is saved.