10

Technical Vocational
Education (TVE)
COMPUTER PROGRAMMING
Quarter 2 – Module 1
Starting a New Project
TVE 10 – ICT (Programming in Visual Studio 2010)
Alternative Delivery Mode
Quarter 2 – Module 1: Starting a New Project
First Edition, 2020

Republic Act 8293, section 176 states that: No copyright shall subsist in any work of the
Government of the Philippines. However, prior approval of the government agency or office
wherein the work is created shall be necessary for exploitation of such work for profit. Such
agency or office may, among other things, impose as a condition the payment of royalties.

Borrowed materials (i.e., songs, stories, poems, pictures, photos, brand names, trademarks, etc.)
included in this module are owned by their respective copyright holders. Every effort has been
exerted to locate and seek permission to use these materials from their respective copyright
owners. The publisher and authors do not represent nor claim ownership over them.

Published by the Department of Education - Schools Division Office of Makati City

OIC-Schools Division Superintendent: Carleen S. Sedilla CESE
OIC-Assistant Schools Division Superintendent: Jay F. Macasieb, DEM, CESE

Development Team of the Module

Writer: Arlene A. Purisima

Editor: Jean Tumaneng

Reviewer: Celedonia T. Teneza EdD

Layout Artist: Mayumi P. Realosa EdD

Management Team:
Neil Vincent C. Sandoval
Education Program Supervisor, LRMS

Celedonia T. Teneza EdD

Education Program Supervisor, EPP/TLE/TVL

Printed in the Philippines by the Schools Division Office of Makati City

Through the Support of the City Government of Makati (Local School Board)

Department of Education – Schools Division Office of Makati City

Office Address: Gov. Noble St., Brgy. Guadalupe Nuevo

City of Makati, Metropolitan Manila, Philippines 1212
Telefax: (632) 8882-5861 / 8882-5862
E-mail Address: [email protected]

ii
 What I Need to Know

Hello, Grade 10 Learners! This module is designed to help you fully understand the
process of creating your first user interface using Visual Basic 2010. Feel free to explore
each part and accomplish each activity at your own pace.

This module is here to guide you through this lesson. In case you were not able
to follow and understand some instances, you can always go back to that part.

This module is divided into two (2) lessons namely:

Lesson 1:
a) Create a new project
b) Define user interface
c) Use button, label box and textbox
d) Change Properties
Lesson 2:
e) Writing the code
f) Save and Run the Program
g) Debug

After going through this module, you are expected to:

1. Define user interface and give its types
2. Define form
3. Add textbox, label box and button;
4. Design the form using Properties window;
5. Code the program;
6. Save the program; and
7. Run the program
8. Debug the program

What I Know

Choose the letter of the best answer. Write the chosen letter on a separate sheet of
paper.
1. Which of the following control is used to accept and display editable text?
a. Graphic c. Picture
b. Label d. Text
2. Which of the following form property is used to indicate the background color of
the form?
a. Background Color c. Form Color
b. Background Image d. Form Background Color
3. Which of the following control is used when you want to display text used for
labeling other controls and output?
a. Clock c. Textbox
b. Label d. Timer
4. Which of the following is the system by which the user interacts with the
computer?

1
 a. Form c. Work Area
b. Layout d. User Interface

5. Which of the following property is used to indicate the text that will appear in
the button?
a. Caption c. Name
b. Format d. Text

Lesson

1 Creating a New Project

What’s In

Let us have a recap on our last module on Form Controls, Properties and other
concepts. Answer the guide questions.
1. What is a control?
2. Name at least 5 controls and give their functions
3. How do we name controls?

What’s New

ACTIVITY 1: Can you name the following sites?

1. ____________________ 2. _____________________ 3. ________________________

Bet you are smiling because you easily identified those sites. The picture above
are the user interface of the products or services you visited. Do you know that a good
user interface is one reason you keep coming back to the page?

2
 Today, as you create your first program in Visual Basic, you will learn how to
create a user interface using Visual Basic. This will be the start of a long but fun coding
in VB. Enjoy the process!

What is It

Start a New Project

1. On the Menu bar, click File and click New Project
2. A new Project window will appear
3. Select Windows Froms Application
4. Click ok

User Interface Defined

According to Merriam dictionary, user interface is a software that is designed to
allow a computer user to interact with the operating system of a machine or system
such as by selecting presented options or entering text commands. It contains a set
of components that allow the computer to communicate. It is also used by the
computer as a means of getting input from the user and showing the output of a
process resulting from a set of choices and actions that the user has made.
Types of User Interface
1. Graphical user interface (GUI) – is a type of user interface that uses graphics to
represent the input and output of the program.
2. Command line interface – a type of user interface that relies on textual input and
output. The entire display screen shows only characters, no images, and the input
is performed entirely with a keyboard or scanner.
3. Touch user interface – is a graphical user interface that uses touchpad or
touchscreen display as a combined input and output device
Form Defined
Designing the interface begins with a form. The form is the object that
primarily represents the program interface. It is used as a container of controls.
Common Form Properties

• Backcolor - Sets the form background color.

• BorderStyle - determines the style of the form's border and the appearance of
the form
• Font - This property specifies font type, style, size
• Height- This is the height of the Form in pixels.
• Name - This is the actual name of the form.
• Text - The text, which will appear at the title bar of the form

Things like buttons, textboxes, and labels are all things that you can add to your
Forms. They are known as controls and are kept in the Toolbox for ease of use.

Add Controls in the form

To add controls into the form, click and drag the control to the form. Another
way is to double click the control and it will be automatically be displayed in the form.

3
Changing the properties
All the Visual Basic Objects can be moved, resized or customized by setting their
properties. A property is a value or characteristic held by a Visual Basic object, such
as Text or Fore Color.
You can change the properties of an object by typing or selecting the values
from the Properties window.

Lesson
Create, Run and Save the Project
2
Writing a Code:
A Visual Basic Statement has a format of: objectname. property=value
Where:
objectname refers to the object assigned name in the project
property- refers to the associated property to be edited or changed in an object
value – is the assigned value for the corresponding property.

Example:
Form1.backcolor=vbBlue
lbldisplay.text = “Hello students”

Running the Project

There are several ways to run the program:
1. Click F5 from the keyboard
Or
2. Click the click the green play button in the toolbar
Or
3. In the debug menu, click start debugging

Saving the Project

1. On the Menu Bar, click File and click SAVE ALL
2. The Save Propject Dialog Box will appear
3. Type the filename and click Browse to select the location where you would your
file to be placed.
4. The Create directory for solution should remain checked under the name of your
project along with the subfolders and files that get automatically created in the
Visual Basic environment
5. Click Save

Debugging
Debugging is the process of finding the errors in the code and removing these
errors from the code. Program errors come in three forms: syntax, logic and runtime
errors.
1. syntax errors – refers to a character or string incorrectly placed in a command or
instruction that causes a failure in execution

4
2. logic error – are those errors that prevent your program from doing what you
expected it to do

3. runtime error - a problem that is encountered when a program is being executed

What’s More

Activity 2:

Design a form with one label box and two buttons

5
Activity 3:
From activity 2, set the properties of the form following the table below:

OBJECT PROPERTY VALUE

FORM1 Name frmexample
Text My First Activity
Backcolor Any color of your choice
Label1 Name lbloutput
Autosize False
Font Book Old Style
Font Style Bold
Size 14
ForeColor Any color of your choice
Text Empty
Button1 Name btndisplay
Text DISPLAY
Button2 Name bntexit
Text EXIT

Note: Add a code in Button 1 – “Hello Grade 10 students!”

Button 2 – the program will close/exit

What I Have Learned

Identify the following terms. Write yur answers on the space provided.

___________ 1. The meaning of the acronym GUI

___________ 2. A control used for inputting text
___________ 3. The prefix used in labeling button
___________ 4. The control that the user can click to invoke an action
___________ 5. The system wherein the user can interact with the computer
___________ 6. The keyboard command to RUN the project
___________ 7. To save the project you need to select this to save project and form
___________ 8. Start debugging is under what menu?
___________ 9. The process of finding and checking or errors
___________ 10. This property specifies font type, style, size

What I Can Do

Activity 4: Create a form that will produce the interface below. Select the appropriate
control to produce the same output/appearance. Be creative and add colors to your
form.

Criteria:
Presentation: 50%
Content: 50%

6
 Sample Output:

Note: In a long bond paper, draw the user interface and create a table for changing
the properties of the objects used.

Assessment

Choose the letter of the best answer. Write the chosen letter on a separate sheet of
paper.
1. What term refers to the object assigned name in the project?
a. Data c. Objectname
b. Property d. Value
2. Which of the following refers to a character or string incorrectly placed in a
command or instruction that causes a failure in execution?
a. debug c. logic error
b. error d. syntax error

3. What window is used to assignor change the properties of a particular object?

a. form window c. solution explorer window
b. properties window d. toolbox window

4. Which of the following refers to the type of user interface that uses graphics to
represent the input and output of the program?
a. IDE c. OOP
b. GUI d. RAD
5. What term refers to the assigned value for the corresponding property?
a. Information c. Object
b. Labelname d. Value

6. What control is used to add event to an object?

a. Button c. Radio button
b. Label d. Textbox
7. Which of the following property is used to indicate the text that will appear in the
button?
a. Caption c. Name
b. Label d. Text

7
8. Which of the following is the system by which the user interacts with the
computer?
a. Form c. Work Area
b. Layout d. User Interface
9. What is the correct format of writing a visual basic statement?
a. Objectname.property=value c. input.process=output
b. Data.property.value d. objectname+properties=value
10. Which of the following form property is used to indicate the background color of
the form?
a. Background Color c. Form Color
b. Background Image d. Form Background Color

11. What type of error does the illustration show?

a. Logic error c. Runtime error

b. Syntax error d. Windows error
12. Which of the following control is used to accept and display editable text?
a. Graphic c. Picture
b. Label d. Text
a.
13. What is the keyboard command in running your program?
a. ALT + S c. F5
b. CTRL+S d. F10
14. What is the object that primarily represents the program interface? It is used
as a container of controls.
a. Data c. Label
b. Form d. Text
15. What property is used to change the name the title bar of the form?
a. Caption c. Text
b. Label d. Title