Managing Large Projects
Do not be overwhelmed by the size of our lab project this week. Take it a step at a time and test your web application after each step. Use the Q&A discussion forum to get help if you are stuck. Be sure to read the lecture before starting the lab. The lecture gives an overview of how the application works and some background on the objects and tools used in the lab.

Deliverables
NOTE
Submit your assignment to the Dropbox, located at the top of this page. For instructions on how to use the Dropbox, read these step-by-step instructions.
(See the Syllabus section “Due Dates for Assignments & Exams” for due dates.)
A zip archive of the ASP.NET Web Application directory. It should contain the following files in addition to your database and dataset files:

– pgCheckOut.aspx **
– pgCheckOut.aspx.cs **
– pgConfirm.aspx
– pgConfirm.aspx.cs
– Web460Store.master
– Web460Store.master.cs
– clsDataLayer.cs **
The files with ** are the ones that should have been modified for this lab.
Required Software
Visual Studio 2012
Set up the Visual Studio development environment and test the web server on your machine. More information on how you can get the most recent version of VS is found in Course Home.
Access the software at https://lab.devry.edu.
Microsoft Access
Lab Steps
STEP A: Create a New Web Site Project
1. Create a new Empty Web Site project.
2. Copy the six files from last week’s iLab into the folder for this new project. Be careful not to move the files. We want to work on a copy of last week’s lab and leave the original untouched. The website folder should have the following files:
o pgCheckOut.aspx
o pgCheckOut.aspx.cs
o pgConfirm.aspx
o pgConfirm.aspx.cs
o Web460Store.master
o Web460Store.master.cs
o web.config
o web.Debug.config ( optional: depends on the version of Visual Studio you are using)
3. Set pgCheckOut.aspx as the start page and test your application. It should perform just as it did last week.
STEP B: Add the ClearForm Functionality to pgCheckOut
Because we will be adding, retrieving, and updating customer information, we should give the user the ability to easily clear the form fields so that information from one customer is not mixed with that of another.
1. Add a private method to pgCheckOut.aspx.cs that examines each control on the page. If the control is a Textbox, DropDown list, or RadioButton, the control is cleared. If it is a panel or other container, the method calls itself recursively, passing the controls on that container so that they may be cleared.
1. Next, we add a click method that will be called by a form button. The form button cannot call the recursive method directly because click methods require a different set of parameters. Because of this, we need the private helper method ClearInputs. Add a button to pgCheckOut.aspx that calls the Clear Form click handler above. The button should have the name and ID btnClearForm and the text “Clear Form”. You can use the image in the Lab Summary section above for guidance on placing the button.
2. Test your work. You should be able to enter data in the form fields on the left and when the Clear Form button is clicked, all form fields should be cleared.
STEP C: Create a DataSet and Link it to Microsoft Access Database
These steps create and add a DataSet called dsAccounts to your project. Carefully read through these instructions as you step through the creation of the DataSet. If you cannot connect to the database when these steps are complete, delete the DataSet and recreate it from scratch to make sure all parts are initialized properly.
1. Download and copy the Microsoft Access database, Acounts.mdb, found in Doc Sharing to your website folder. Note that you can have the database at any location on your computer, but your code should be adjusted accordingly. It is best to have it in the top level of your website or in the App_Data folder. In Steps E, F, and G below, you will need to adjust your code to accurately reflect the path to where your database is stored.
If you are using the DeVry FTP site websol, you must place the database into the FPDB folder in your account top-level directory. It is recommended to use your local computer instead of thewebsol FTP server.
2. From the Solution Explorer pane, right click on the App_Code folder and select the Add New Itemmenu option. In the Add New Item dialog box, select DataSet and type the dsAccounts as the name of the DataSet. When prompted, allow Visual Studio to store the DataSet in the App_Code folder.

3. After creating dsAccounts, double-click TableAdapter in the Dataset Toolbox to configure the connection to the database using the TableAdapter Configuration wizard. The Dataset Toolbox panel is displayed by selecting dsAccounts.xsd in the Solution Explorer panel and then clicking the Toolboxlink in the main window. You may also select Toolbox from the View menu.
4. On the first window, click the New Connection button.

5. In the Choose Data Source window, select the file Microsoft Access Database and click Continue.

6. In the Add Connection window, click the Browse button and select the Microsoft Access database that you downloaded from Doc Sharing named Accounts.mdb.

7. Click Test Connection to ensure that Visual Studio can access and connect to the database.
8. Click OK, and then click Next on the TableAdapter Wizard. If you expand the connection string + symbol, you can view the connection string used to access the database. This should closely match what we will use in our application.

9. Click Next again to save the connection string to a file.
10. On the Wizard’s Choose a Command Type screen, select SQL Statements and then click Next.
11. We now enter the default SQL query for this DataSet connection. In the textbox on this screen, enter the following SQL SELECT statement whose result will be used to populate the DataSet:
SELECT * FROM tblCustomers

12. Click Finish to exit the TableAdapter wizard.
STEP D: Create the clsDataLayer Class to Represent Our Application’s Data Layer
1. Right-click on the project name in the Solution Explorer pane and select Add. From the submenu, select New Item. From the Add Dialog Box, add a Class called clsDataLayer.
The code file (clsDataLayer.cs) will automatically be placed in the App_Code folder in your website directory.
2. Add a data field to our class that represents the database connection and adjust the constructor to initialize it.
Be sure to place this code in the correct location in the class file. Verify that your code does not have any syntax errors before continuing.
STEP E: Implement the FindCustomer Functionality
Editing Multiple Files
This step, Step F, and Step G require you to add code to three different files. Carefully follow the directions to ensure that you add code to the correct files. Test your code after each step before moving to the next. You may want to make a copy of the following files before starting this step so that if you make a significant error, you can return to this point:
• clsDataLayer.cs
• pgCheckOut.aspx.cs
• pgCheckOut.aspx
1. In the clsDataLayer class, create a method, called FindCustomer, that accepts LastName as a parameter. This method finds the all occurrences of customers with LastName in the database and places the results in the DataSet object mystoreDataSet, which is an instance of our dsAccountsDataSet.
You can add the following code to the class clsDataLayer. Be sure to replace the lines in the code below that read “Add your comments here with your own comments explaining what the code does.

1. When adding this database code to clsDataLayer, do not forget to add the two Using directives in C# that must be placed at the start of your code that ensure that the compiler has the definition of theData and OleDataAdapter objects necessary for the data layer. (Your challenge is to research and discover what they are.)
2. In pgCheckOut.aspx.cs, create the click method that calls the Data Layer method FindCustomer. This click method is invoked when the user clicks the Find Last Name button we add next. The following method calls FindCustomer and then fills the form fields with results from the Data Set.
Be sure that the tempPath variable accurately reflects the path to where you have saved the Access database Accounts.mdb.
1. Add a button to pgCheckOut.aspx that calls btnFindLastName_Click for its click event. The button should have the name and ID btnFindLastName and the text Find Last Name. You can use the image in the Lab Summary section above for guidance on placing the button.
2. In Step F, when we update customer information, we must ensure that we update the correct customer. To do this, we use a field that uniquely identifies each row or customer in the table: theCustomerID field. We need to add this to pgCheckOut.aspx.
o Add two labels to pgCheckOut.aspx with the names and IDs, lblCustID and customerID.
o The text for lblCustID should be “Customer ID:”.
o The text for the label customerID can be left blank as the application will fill in that text.
3. Test your work. You should be able to enter a name in the Last Name field on the form and when the Find Last Name button is clicked, other form fields should be filled in with data on that customer. If the customer is not found, the appropriate message should be displayed to the user. The Access database comes with data already entered on four customers for testing: Smith, Doe, Rice, and Sue.
STEP F: Implement UpdateCustomer Functionality
1. In the clsDataLayer class, create a method called UpdateCustomer that accepts the customer’s name and address as parameters. This method finds the customer whose CustomerID field matches the parameter customerID and updates the field values to match the arguments sent when it was called.
You can add the following code to the class clsDataLayer. Be sure to replace the lines in the code below that read “Add your comments here with your own comments explaining what the code does.
In pgCheckOut.aspx.cs, create the click method that calls the Data Layer method UpdateCustomer. This click method is invoked when the user clicks the Update Customer button we add next. The following method calls UpdateCustomer, passing the form field values as arguments.
Be sure that the tempPath variable accurately reflects the path to where you have saved the Access database Accounts.mdb.
1. Add a button to pgCheckOut.aspx that calls btnUpdateCustomer_Click for its click event. The button should have the name and ID btnUpdateCustomer and the text Update Customer. You can use the image in the Lab Summary section above for guidance on placing the button.
2. Test your work. You should be able to enter a name in the Last Name field on the form and when theFind Last Name button is clicked, other form fields should be filled in with data on that customer. If the customer is not found, the appropriate message should be displayed to the user.
Once a customer has been retrieved (found) in the database, you can update the customer’s information and click the Update Customer button. If the application is working correctly, the updated information on the customer will be retrieved from the database the next time you find the customer.
STEP G: Implement InsertCustomer Functionality
1. In the clsDataLayer class, create a method called InsertCustomer that accepts the customer’s name and address as parameters. This method creates a new customer in the database with the data passed as arguments to the method.
You can add the following code to the class clsDataLayer. Be sure to replace the lines in the code below that read Add your comments here with your own comments explaining what the code does.
In pgCheckOut.aspx.cs, create the click method that calls the Data Layer methodInsertCustomer. This click method is invoked when the user clicks the Add Customer button we add next. The following method calls AddCustomer, passing the form field values as arguments, and then clears the form to await information the user enters on the next customer.
Be sure that the tempPath variable accurately reflects the path to where you have saved the Access database Accounts.mdb.
1. Add a button to pgCheckOut.aspx that calls btnAddCustomer_Click for its click event. The button should have the name and ID btnAddCustomer and the text Add Customer. You can use the image in the Lab Summary section above for guidance on placing the button.
2. Test your work
You should be able to enter a customer’s name and address in the appropriate fields on the form and when the
Add Customer
button is clicked, a record should be added to the database for the customer. You should be able to view the record directly in the database or by finding the customer using the
Find Last Name
functionality of the application.
STEP H: Test and Finalize the Lab
1. Save your work!
2. Test it! Check the Clear, Find, Update ,and Add capabilities.Until you add more of your own, the last names in the database that you can search for in this lab are Smith, Doe, Rice, and Sue.
3. Make changes as appropriate until it works.
4. Remember to add comments for each step being performed.
5. Please zip and submit the entire web project folder to the assignment Dropbox.