iLab Overview
Scenario/Summary
Suppose you are a black belt in the Kyoshi Karate School and you would like to create a management application with the following capabilities:
1. display a list of all members;
2. permit the user to sort on any column, edit individual rows, and delete rows;
3. add new entries to the members table; and
4. find a member by letting the user enter a partial last name.
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.)
You will create a searchable member database application. A ComboBox control will present a list of first and last names. When the user selects a name, a DataGridView control will fill with member information.
Grading Rubric
The criteria used for grading your iLab are as follows.
Task
Points
Create New Application and Set Main Form Properties 5 points
Add All User Controls 5 points
Test File (Screenshot) 5 points
Create New Form and Connect to Database 10 points
Create Add Member form, Add All Event Handlers and Code 10 points
Create All Buttons 5 points
Create SQL Query 10 points
Total 50 points
Required Software
Visual Studio 2012
Use a personal copy or access the software at https://lab.devry.edu.
Lab Steps
Step 1:Create New Application
Create a new Windows application named Karate School Manager (see below). You will also need to download the project database from Doc Sharing entitled KarateDatabase.zip. Unzip this file to a convenient location. You will later add it to your project.
Step 2: Rename Startup Form
Change the name of the startup form to MainForm.vb.
Step 3: Set Properties of Main Form
Open MainForm and set the following properties.
Size = 530, 275;
Text = Karate School Manager;
StartPosition = CenterScreen;
MaximizeBox = False;
FormBorderStyle = FixedSingle
Step 4: Insert Panel Control
Insert a Panel control on the form and set its Size property to 390, 115. Insert another Panel control inside the first one and set its Size property to approximately 360, 80. Set the BorderStyle property of both panels to Fixed3D.
Step 5: Insert Label Control
Insert a Label control inside the smaller panel and set its Text property to Kyoshi Karate School.
Step 6: Add Another Label Control
Add another label control near the bottom of the form and set its Text property to Management System 1.0.
Step 7: Add MenuStrip Control
Add a MenuStrip control to the form (make sure you have clicked the form, or the menu strip may be added to your panel) and insert the following menu items.
&File
&Exit
&Membership
&List All
&Find Member
&Add New Member
&Payments
&All
&One Member
Step 8: Add File | Exit Code
Double-click the File | Exit menu item and insert the following code into its Click event handler.
Me.Close()
Step 9: Test File | Exit Menu Item
Save the project and run the application. Verify that the form closes when you click the File | Exit menu item. Notice that the objects on the form have been centered (look under the Format menu for centering controls) and the text bolded and increased in size to be more readable. Maybe you will want to jazz it up a little more? Notice that the program is running with the File pull-down menu opened. The code window is in the background.
Step 10: Open Project
Open the Karate School Manager project, if it is not already open.
Step 11: Add AllMembers Form
Go to the PROJECT | New Item pull-down menu and add a new form named AllMembersForm.vb to the project. Set its MinimizeBox and MaximizeBox properties to False. Set its Text property to All Members.
Step 12: Create Membership|ListAll Menu Item
In MainForm, create a Click handler for the Membership / List All menu item and insert the following code.
AllMembersForm.ShowDialog()
Step 13: Add Data Source
Now you will create and connect a database. Go to the View pull-down menu and select Other Windows - Data Sources or press Shift+Alt+D.
You’ll then see the Data Sources window. Click the Add New Data Source button.
Select Database and then Next.
Select Dataset and then Next.
Select the New Connection button.
Browse to wherever you downloaded your Karate data file and press OK.
It will then return to the Choose Your Data Connection window. Click Next.
It may ask you if you want to move the file. You can click No.
Let it save the connection string for you, then click Next.
Now check the Members table to add it to your dataset, which you should then name KarateDataSet.
You’ll now see the DataSource added.
You can close the Data Sources window at this time, or you can minimize it, leave it, drag and drop it onto another menu, or even drag and drop it onto another screen on your computer.
Step 14: Add DataGridView Control
Place a DataGridView control on the AllMembersForm and name it dgvMembers. Anchor the grid to all four sides of the form. Set the following property values: BackGroundColor = Control, BorderStyle = None, Row-HeadersVisible = False.
Step 15: Select Data Source
Make sure you click the Data Grid one time to select it. A tiny arrow should appear in the upper right-hand corner. Click this arrow to expose the DataGridView Tasks menu.
Choose the Karate DataSet as your Data Source.
Check the Enable Editing and Enable Deleting check boxes only. If the grid’s column headings do not appear, edit the grid’s Columns property and use the arrow buttons next to the column names list to adjust the column order.
Step 16: Edit Column Properties
1. Edit the Columns property from the Tasks menu.
2. Select the Date_Joined column.
3. Select DefaultCellStyle (you may have to scroll up).
4. Click the “…” to change the style.
The CellStyle Builder will appear. Enter d into the Format property. This will format the date as a “short” date such as 3/7/2017. You can now exit the menus by clicking OK twice.
At this point, you will want to widen the size of the All Members form and the dgvMembers Data Grid to fit the data (see #1 below). Also note that by adding the data source, Visual Basic has added the proper ADO.NET objects to the project (see #2 below).
Step 17: Add Close MenuItem
Add a MenuStrip control to the form. Add a File menu item, with one subitem: Close. In the Close item’s Click handler, insert the Me.Close() statement.
Step 18: Test Membership|ListAll Menu Item
Save the project and run the application. From the startup form menu, select Membership / List All. You should see a list of members.
Step 19: Create AddMember Form
Add a new form to the project named AddMemberForm.vb. Set its Text property to Add New Member. Set the following property values: MaximizeBox = False; MinimizeBox = False; FormBorderStyle = FixedDialog.
Step 20: Add Click Event Handler
In MainForm, locate the Membership / Add New Member menu item; double-click the item and insert the following statement in its Click event handler.
AddMemberForm.ShowDialog()
Be sure to search for and read about the differences between using the Show() method and the ShowDialog() method.
STEP 21: Setup KarateDataSet
In the Data Sources window, locate the Members table under the KarateDataSet entry. Using the dropdown arrow to its right, select Details from the list.
Step 22: Create Data-Bound Fields
Drag the Members table onto the form. Visual Studio should automatically create data-bound fields and a ToolStrip named MembersBindingNavigator. Set the Format property of the DateTimePicker control to Short.
Step 23: Remove Members Binding Navigator
Delete the MembersBindingNavigator component from the form’s component tray. Open the form’s code window and delete the MembersBindingNavigatorSaveItem_Click method.
Step 24: Add Code for AddNew Event
Replace the code in the form’s Load event handler with a statement that calls the following.
AddNew.MembersBindingSource.AddNew()
The statement clears the form’s input fields and waits for the user to enter data for a new member.
Step 25: Add MenuStrip to Form
Add a MenuStrip control to the form. Add a File menu item with one subitem: Close. In the event handler for the first item, insert a Me.Close() statement.
Step 26: Create FormClosing Event
Create a FormClosing event handler (see screenshot below).
Insert the following statement.
MembersBindingSource.CancelEdit()
This statement cancels any edit operation that might be in progress. The user might have opened the form, begun to fill in the fields, changed his or her mind, and decided to close the form.
Step 27: Configure DateTimePicker control
Rename the DateTimePicker control to dtpDate. Add the following line to the form’s Load event handler.
dtpDate.Value = Today
This line is necessary to ensure that the date value will be saved in the database even if the user does not explicitly select a date.
Step 28: Create Add Button
Add a button to the form named btnUpdate. Set its Text property to Update. Create a handler for the button. It calls EndEdit to complete the add new row operation. Then it calls Update to save the DataSet modifications to the actual database. Finally, it closes the form as follows.
Try
MembersBindingSource.EndEdit()
MembersTableAdapter.Update(KarateDataSet.Members)
Me.Close()
Catch ex As Exception
MessageBox.Show(ex.Message, "Error")
End Try
Notice that it uses a Try Catch statement to capture any errors occurring when trying to add to the database. Read about Try Catch statements if you have questions about how they work.
Step 29: Test Add New Member
Save the project and run the application. Click the Membership / Add New Member menu selection and add a new member. Choose a member ID that does not appear when you list all members. If you’re not sure, display a list of all members first.
Step 30: Create FindMember Form
Add a new form to the project named FindMemberForm.vb. Set its properties as follows: Text = Find Member by Last Name; MaximizeBox = False; MinimizeBox = False; StartPosition = CenterScreen; FormBorderStyle = FixedDialog.
Step 31: Add Code to Find Member Menu Item
In MainForm, double-click the Membership / Find Member menu item and insert the following code in its event handler.
FindMemberForm.ShowDialog()
Step 32: Create Close SubMenu
Open FindMemberForm in Design view, add a MenuStrip control to the form, and create a File submenu with one selection: Close. In its Click event handler, insert the Me.Close() statement.
Step 33: Add LastName Label Control
Add a Label control, a TextBox named txtLastName, and a Button named btnGo to the form.
Step 34: Configure MembersTableAdapter
Open the KarateDataSet.xsd file by double-clicking it in the Solution Explorer. Right-click the MembersTableAdapter, select Add, and then select Query.
Select Use SQL Statement as the command type.
Select the “SELECT which returns rows” query type.
Insert the following SQL query.
SELECT ID, Last_Name, First_Name, Phone, Date_Joined
FROM Members
WHERE (Last_Name LIKE @name + '%')
After creating the SQL query, click the Next button.
In Choose Methods, select only the Fill a DataTable option and name the method FindMember.
Click Next and then Finish. You can now close the KarateDataSet.xsd file. Be sure to save it when you close it.
Step 35: Configure DataGridView
Place a DataGridView control on the form and name it dgvMembers. Set its properties as follows: BackGroundColor = Control; BorderStyle = None; Anchor = Bottom, Left, Right; RowHeadersVisible = False.
Step 36: Setup Data Source
Using the smart tag in the grid’s upper right corner, set its data source to the Members table of KarateDataSet. Disable adding, editing, and deleting of rows.
Step 37: Set Up FindMember Event
Next, you will add a call to the Fill method in the event handler for the button that activates the search. Double-click the Go button and insert the following code in its event handler.
' Perform a wildcard search for the last name.
Me.MembersTableAdapter.FindMember(KarateDataSet.Members, txtLastName.Text)
Normally, the Fill method has only one parameter: the DataSet’s table. But here you pass a second parameter, which is the value to be assigned to the query parameter.
Step 38: Configure Accept Button Property
Select the form with the mouse and set the Form’s AcceptButton property to btnGo. This will allow the user to press the Enter key when activating the search.
Step 39: Clean up Load Event
Remove any statements that might be inside the form’s Load event handler. (You don’t want the grid to fill with data until a member name has been entered.)
Step 40: Test Find Member
Save the project and run the application. From the startup form, click Membership / Find Member from the menu. When the Find Member form appears, enter a partial last name, such as C or Ch, and click the Go button.
Step 41: Turn It In
Zip up your entire project and the database. Submit it to the course Dropbox for Week 4. We will continue working on this project during Week 5.
Top