Course : Diploma in Information Technology

Module Code : Unit_11

Module : Final Project

Practical 11.1 (20 Hours)

1 Introduction
ABC Cooperation

ABC Cooperation is a company which is working in the Food and Beverage industry. Currently
the management is looking forward to computerizing their employee details in order to simplify
the organization operations. Therefore, they have decided to implement a system to manage
employee details.
The proposed system must have to be secured with a proper login and once user logged into
the system, they must be capable of viewing, entering, deleting and managing employee details.

Guidelines
• You need to create a software solution for ABC Cooperation using visual studio.
• Use C# Programming language.
• Follow the structure given in this document. Design given forms and apply value
additions for it according to your requirement.
• Software will contain two forms. Additional forms and features will get additional
marks. (Login form and one Registration form are compulsory)
• Please follow the given instructions before you start the project.
• Design the software system according to the given instructions.
• Use appropriate fonts, colors, and images for Frontend (GUI design) of your software.
• Proposed Software system must have a database and it should be properly
connected to the system. (Database should be designed using SQL Server Management
Studio)
• Databases must contain minimum two tables.
 2 Start with Visual Studio

First, you should install the Microsoft Visual Studio to work with Visual C# language.
Therefore, it is recommended you to download and install the Microsoft Visual Studio 2012.

Figure 1 - Visual Studio Logo

Once you successfully installed the software, please follow the below steps to start your project.

1. Go to Start Menu and Open Visual Studio 2012.

Figure 2 - Start Visual Studio 2012

2. After visual studio starts, click the File Menu, and select Project from the list which is
under New category.

Figure 3 - Visual Studio Start New Project I

All rights reserved © ESOFT Metro Campus 1

 3. Then select Windows Form Application from the list which is under Visual C#, Give
Project Name, Give Save Location and click OK.

Figure 4 - Visual Studio Start New Project II

All rights reserved © ESOFT Metro Campus 2

 Visual Studio 2012 Interface

Solution Explorer

Form
Property Window
Toolbox

Figure 5 - Visual Studio 2012 Interface

What you could find in this Visual Studio 2012 Interface.

1. Form: This is where all the elements will be placed such as text boxes, buttons etc.

2. Toolbox: Using toolbox you can select elements that necessary in your form design.
Important element in toolbox is listed in below. (You can add elements to your form by
dragging or double clicking on the item as well.)

• TextBox - Get user input.

• Lable - Display information to the user.
• Button - Perform an action.
• Combobox - Select single option from given many options.
• CheckBox - Select multiple options from given many options.
• DateTimePicker - Select particular date and time.
• GroupBox - Arrange items accordingly.
• PictureBox - Use pictures.

3. Solution Explorer: Solution explorer is listing the project files related to the project
and it includes forms, classes etc.

4. Properties Window: Property window is also important when making changes to the
Form, Button, Textbox or any other element. It includes properties such as,

• Name - Unique name to identify element individually.

• Back Color - Select background color.
• Font - Select font, font style and font size.
• Forecolor - Change font color.
• Size - Change element size.
• Text - Text to display for users.

All rights reserved © ESOFT Metro Campus 3

 3 ABC Cooperation Software Design
Login form design

In here, we are going to design our employee management system which basically contains
two different forms. We are starting with the Login Form Design. Once you open the project
you will be able to design the form according to given structure.

Picture Box

Group Box

Label Text Box

Button

Figure 6 - Login form design

Above form consists of following components:

• One Picture Box
• One Group Box
• Three Labels
✓ Skills International
✓ Username
✓ Password
• Two Text Boxes
✓ Username
✓ Password
• Three Buttons
✓ Clear
✓ Login
✓ Exit

As the first step, you should design the above login form by using the Toolbox and its
components. You can see the elements that are used while designing this form and you are free
to you use any element that are listed and change the properties of each object with suitable
values.

All rights reserved © ESOFT Metro Campus 4

 2. Once you are done with designing the login form, you must add a new form to the project
and therefore you should follow the below steps.

1. First, Right click on the project name from the list which is under Solution Explorer.
Then go to Add and select Windows Form.

Figure 7 - Add a new form to the project I

2. Then you can set a Name and click Add.

Figure 8 - Add a new form to the project II

All rights reserved © ESOFT Metro Campus 5

 Registration form design

Then you can start the designing process of the second form which is known as the
Registration Form by referring the following design.

Linked Label Label

Label Combo Box

Date Time Picker

Radio Button

Button

Figure 9 - Registration form design

All rights reserved © ESOFT Metro Campus 6

 Above form consists of following components:
• Four Group Boxes
✓ Employee Registration
✓ Basic Details
✓ Contact Details
✓ Department Details
• Thirteen Labels
✓ Manage Employee
✓ Employee No
✓ First Name
✓ Last Name
✓ Date of Birth
✓ Gender
✓ Address
✓ Email
✓ Mobile Phone
✓ Home Phone
✓ Department Name
✓ Designation
✓ Employee Type
• Nine Text Boxes
✓ First Name
✓ Last Name
✓ Address (Multiline)
✓ Email
✓ Mobile Phone
✓ Home Phone
✓ Department Name
✓ Designation
✓ Employee Type
• Four Buttons
✓ Register
✓ Update
✓ Clear
✓ Delete
• Two Link Labels
✓ Logout
✓ Exit
• Two Radio Buttons
✓ Male
✓ Female
• One Date Time Picker
✓ Date of Birth
• One Combo Box
✓ Reg No

All rights reserved © ESOFT Metro Campus 7

 4 Start with Microsoft SQL Server Management

In order to start creating your database, you must have installed Microsoft SQL Server
Management Studio to your device.

Figure 10 - Microsoft SQL Server Management Logo

Once you successfully installed the software please follow the below steps to start your
database.

1. Go to Start Menu and Open Microsoft SQL Server Management Studio.

Figure 11 - Start Microsoft SQL Server Management Studio

All rights reserved © ESOFT Metro Campus 8

 2. Once you select the application it will start the application interface and from there,
you should enter the Server Type, Sever Name and Authentication. Once you are
done with this click Connect. (You can keep the values as it is unless you need to
change them)

Figure 12 - Connect with MS SQL Server

3. Once you successfully logged in to your server you will redirect into the following
interface.

Object Explorer

Figure 13 - MS SQL Server Management Studio Interface

All rights reserved © ESOFT Metro Campus 9

 5 ABC Cooperation Database Design

As you are moving on the database part, you should create an appropriate database in order to
store all the relevant data. Therefore, you should follow the below mentioned steps,

1. Go to Object Explorer right click on Database. Then it will pop up a menu and select
New Database on that menu.

Figure 14 - ABC Corporation Database Design I

2. After this process, a new window will open and enter the appropriate database name
into Database Name field and click OK. (In this case I have given the name as “ems”)

Figure 15 - ABC Corporation Database Design II

All rights reserved © ESOFT Metro Campus 10

 3. Once you have successfully performed the above step your database will be added to
the database list, and you can view it by expanding the Database which is listed under
the Object Explorer.

Figure 16 - ABC Corporation Database Design III

All rights reserved © ESOFT Metro Campus 11

 Login table design

Then we have to start creating the necessary database tables. In order to do this, you should
expand your database by using the “+” mark right in front of your database and follow below
steps.
1. Then you can right click on the Table option select Table which is listed under the
New option.

Figure 17 - Employee table design I

2. It will redirect you into a new window where you will be able to enter the table structure
by including Colum Names, Data Types and NULL data availability.

Figure 18 - Employee table design II

All rights reserved © ESOFT Metro Campus 12

 3. Start entering the following details into the form. (Please refer Table 1 for table
structure)

Figure 19 - Login table design

Field Name Datatype Allow NULL

uid int No
username nvarchar(50) No
password nvarchar(50) No
Table 1 - Login table structure

4. Then right click on the uid and select as Primary Key.

Figure 20 - Set primary key for login table

All rights reserved © ESOFT Metro Campus 13

 5. Once you are done with that, click on the Save Button which is placed on the top option
bar and give appropriate Table Name. Finally click OK. (In this case I have given the
table name as “login”)

Figure 21 - Save login table

6. Then you can close the table editor with the following button.

Figure 22 - Close the table editor

7. Then you can see the created table columns and other relevant details by expanding
Table option and expanding the table name that you intended to view.

All rights reserved © ESOFT Metro Campus 14

 Employee table design

Then we will start to create another table which is for the employee details. In here, you can
also follow the above steps repeatedly.
1. Then you can right click on the Table option select Table which is listed under the
New option.

Figure 23 - Employee table design I

2. It will redirect you into a new window where you will be able to enter the table structure
by including Colum Names, Data Types and NULL data availability.

Figure 24 - Employee table design II

All rights reserved © ESOFT Metro Campus 15

 3. Start entering the following details into the form. (Please refer Table 2 for table
structure)

Figure 25 - Employee table design

Field Name Datatype Allow NULL

empNo int No
firstName nvarchar(50) No
lastName nvarchar(50) No
dateOfBirth dateime No
gender nvarchar(50) No
address nvarchar(50) No
email nvarchar(50) No
mobilePhone int No
homePhone int No
departmentName nvarchar(50) No
designation nvarchar(50) No
employeeType nvarchar(50) No
Table 2 - Employee table structure

4. Then right click on the empNo and select as Primary Key.

Figure 26 - Set primary key for employee table

All rights reserved © ESOFT Metro Campus 16

 5. Once you are done with that, click on the Save Button which is placed on the top option
bar and give appropriate Table Name. Finally click OK. (In this case I have given the
table name as “employee”)

s
Figure 27 - Save table

6. Then you can close the table editor with following button.

Figure 28 - Close the table editor

7. Then you can see the created table columns and other relevant details by expanding
Table option and expanding the table name that you intended to view.

All rights reserved © ESOFT Metro Campus 17

 Connect MS SQL Database with MS Visual Studio

When connecting Microsoft SQL Server database with Microsoft Visual Studio, you have to
get the server explorer in the Microsoft Visual Studio.
1. Therefore, first get the Microsoft Visual Studio and select the Server Explorer which
listed under the View Menu.

Figure 29 - Connect MS SQL database with MS Visual Studio I

2. Then it will open up a new side bar and right click on the Data Connections and select
Add Connection.

Figure 30 - Connect MS SQL database with MS Visual Studio II

All rights reserved © ESOFT Metro Campus 18

 3. Then you will prompt with a new window and select Microsoft SQL Server from the
list and click Continue.

Figure 31 - Connect MS SQL database with MS Visual Studio III

4. Afterward, you have to enter the server details such as Server Name (Can be found in
the MS SQL Server Management Studio), Database Name (Which you have already
created) and click OK.

Figure 32 - Connect MS SQL database with MS Visual Studio IV

All rights reserved © ESOFT Metro Campus 19

 5. Once you are successfully done with the above steps you will be able to see the database
list under the solution explorer and all the related properties such as Connection String
which is in your property window. Now you are ready to go with your coding part.

Figure 33 - Connect MS SQL database with MS Visual Studio V

All rights reserved © ESOFT Metro Campus 20

 6 ABC Cooperation Software Coding
Login form coding

In here, we are going to start the coding part of our employee management system. First of all,
we will start with the login form.

Figure 34 - Login form coding

Therefore, we are starting with the coding of buttons that we have used in this design. In order
to get the coding view, you can either right click on the form and select View Code or you
can just Double click on the objects (Buttons, Linked labels, Combo box and etc.) to move to
the coding view.
a. System using files: Right click on the form and select View Code to get the coding
view and add the following line.

Figure 35 - Login form system using files

All rights reserved © ESOFT Metro Campus 21

 b. Create database connection: Put the below highlighted line after the constructer
method.

Figure 36 - Create database connection

c. Clear button: Go to design view and double click on the clear button to add following
code.

Figure 37 - Clear button

d. Login Button: Go to design view and double click on the login button to add following
code.

Figure 38 - Login button

e. Exit Buton: Go to design view and double click on the exit linked label to add
following code.

Figure 39 - Exit linked label

All rights reserved © ESOFT Metro Campus 22

 Registration form coding

Then we can move on to the Employee Management Form in order to do the necessary coding
with the buttons, linked labels and the other components.

Figure 40 - Registration form coding

All rights reserved © ESOFT Metro Campus 23

 Therefore, we are starting with coding of buttons that we have used in this design. In order to
get the coding view, you can either right click on the form and select View Code or you can
just Double click on the objects (Buttons, Linked labels, Combo box and etc.) to move to the
coding view.
a. System using files: Right click on the form and select View Code to get the coding
view and add the following line.

Figure 41 - Manage form system using files

b. Create database connection: Put the below highlighted line after the constructer
method.

Figure 42 - Create database connection

c. Register button: Go to design view and double click on the register button to add
following code.

Figure 43 - Register button

All rights reserved © ESOFT Metro Campus 24

 d. Update button: Go to design view and double click on the update button to add
following code.

Figure 44 - Update button

e. Clear button: Go to design view and double click on the clear button to add the
following code.

Figure 45 - Clear button

All rights reserved © ESOFT Metro Campus 25

 f. Delete button: Go to design view and double click on the delete button to add the
following code.

Figure 46 - Delete button

g. Logout linked label: Go to design view and double click on the logout linked label to
add the following code.

Figure 47 - Logout linked label

h. Exit linked label: Go to design view and double click on the exit linked label to add
the following code.

Figure 48 - Exit linked label

All rights reserved © ESOFT Metro Campus 26

 Moreover, we can view an employee detail by selecting the particular employee number from
the given Combo Box. Therefore, this process has been proceeding with two different stages.

a. Registration form load: Go to design view and double click on the form to add
following code.

Figure 49 - Load the Combo Box with employee numbers

b. Combo box: Go to design view and double click on the Employee No. Combo box to
add the following code.

Figure 50 - View Employee Details

All rights reserved © ESOFT Metro Campus 27