KEMENTERIAN PELAJARAN MALAYSIA

Self Access Learning Module

ICT Literacy for Secondary School

Programme

PUSAT PERKEMBANGAN KURIKULUM KEMENTERIAN PELAJARAN MALAYSIA

ICTL For Secondary School --Visual Basic Express Module

MODULE 1

INTRODUCTION TO PROGRAMMING

Curriculum Development Centre Ministry of Education Malaysia

ICTL For Secondary School --Visual Basic Express Module

1.

Name of Module

: Introduction to programming

2.

Learning Outcomes

: The students should be able to :-

a. Define programming ; and b. State the main steps in programme development.

3.

Knowledge and Skills

a. Definition of programme ; and b. Programming language.

4.

Module Summary

: At the end of the module, student should be

able to :-

a. Understand the definition of programming language. b. Understand the phases of Program Development.

ICTL For Secondary School --Visual Basic Express Module

Introduction to programming
1. What is programming? Programming refers to the act of instructing the computer to do something for us with the help of programming language.

2. What is a programming language? A Programming Language is a set of rules that provides a way of telling the computer what operation to perform (according to Capron and Johnson,2004)

3. What programming languages are available? Before looking at a specific programming language, we need to know the levels of programming languages. Language is said to be lower or higher depending on how close they are to the language the computer itself uses or to the language people use (more English-likehigh). These programming languages are generally divided into five levels or generations :a. b. c. d. e. Machine Language Assembly Language High-Level Language Very High-Level Language Natural Language

The following are the descriptions of each level of programming language :Level of language Machine Language Descriptions Ultimately the computer understands only binary number-strings of 0s and 1s. Programs that are written in these 0s and 1s represent the on and off electrical states of computer. All other languages must be translated into machine language before executing instructions. This programming language is considered very low level. This language use mnemonic codes, abbreviations that are easy to remember such as : A for add, C for compare, MP for multiply and so on.

Assembly Language

ICTL For Secondary School --Visual Basic Express Module

High-Level Language

For this language, programmers no longer need to have detailed knowledge of computer hardware to produce a programme. This language is closer to human language compare to the machine language.

Very High-Level Language

Often known as fourth generation language(4 GLs). This programming language is an improvement of high-level language.

This programming language is also called the fifth generation language. This language is similar to the natural spoken or written English Language. The natural language translates human instructions into code that the computer can understand and execute.

Natural Language

4. Examples of Programming Languages. Examples of programming languages are :a. BASIC b. COBOL c. PASCAL d. C e. FORTRAN f. VISUAL BASIC

g. C++ h. JAVA

ICTL For Secondary School --Visual Basic Express Module

Lets look at samples of each interface for the programming languages :a) Example of C programming taken from (http://encyclopedia.laborlawtalk.com/wiki/images/thumb/5/5c/500px-Qbasic.png time) 11.20/16.6.2006.

b) Example of Visual Basic taken from (www.dmst.aueb.gr/dds/etech/swdev/env.gif) 11.20/16.6.2006

ICTL For Secondary School --Visual Basic Express Module

c) Example of Pascal taken from (http://www.freedownloaddevelopment.com/delphi/pascal-look.html) time11.20/16.6.2006.

d) Example of C programming taken from (http://www.originlab.com/www/products/images/origin_c_code_492px.gif) 11.30/16.6.2006

ICTL For Secondary School --Visual Basic Express Module

e) Example of Fortran programming taken from (http://homepage.cs.uri.edu/faculty/wolfe/book/Readings/Reading13.htm) 11:30/16.6.2006

ICTL For Secondary School --Visual Basic Express Module

f)

Example of C++ programming taken from (http://www.codecutter.net/tools/quincy/QscreenDump.gif)11:30/16.6.2006

g) Example of Java programming taken from (http://ssrlibrary.ca/~megatron/images/screenshots/eclipse.png)11:30/16.6.2006

ICTL For Secondary School --Visual Basic Express Module

The Program Development Life Cycle

When we want to produce a program, we need to go through a few phases. There are five main phases in program development;

PHASE 1 Problem Analysis

PHASE 5 Documenting The Programme

PHASE 2 Program Design

PHASE 4 Testing and Debugging

PHASE 3 Coding The problem

Lets look at the descriptions of each main phase in program development: 1. Problem Analysis What is problem analysis? You need to identify the problem before developing a program. Lets imagine that you are a programmer. As a programmer, you are contacted because your services are needed. You meet with users from the client organization to analyze the problem, or you meet with a systems analyst who outlines the project. Specifically, the task of defining the problem consists of identifying what it is you know (input-given data), and what it is you want to obtain (output-the result). Eventually, you produce a written agreement that, among other things, specifies the kind of input, processing, and output required. This is not a simple process.

ICTL For Secondary School --Visual Basic Express Module

2. Program Design In this phase, you will do the following tasks : Plan the solution to the problem (think about how will you solve the problem) Choose the interface (think about how will your program look like)

3. Coding So now you are ready to write the code of the program that you have planned. You need to express your solution in a programming language. The normal process you will go through is to translate the logic from the flowchart or pseudocode-or some other tool-to a programming language. The following are examples of both tools: a) Example of a flow chart

10

ICTL For Secondary School --Visual Basic Express Module

b) Example of pseudo code (that reflects the flowchart shown)

sum = 0 count = 1 REPEAT IF count is even THEN sum = sum + count count = count + 1 UNTIL count > 20 DISPLAY sum

As we have already noted, a programming language is a set of rules that provides a way of instructing the computer what operations to perform. There are many programming languages: BASIC, COBOL, Pascal, FORTRAN, and C are some examples. You may find yourself working with one or more of these. However in this module, we will either produce a program using Microsoft VB-express or Just BASIC v1.01. Although programming languages operate grammatically, somewhat like the English language, they are much more precise. To get your program to work, you have to follow exactly the rules-the syntax-of the language you are using. Of course, using the language correctly is no guarantee that your program will work, any more than speaking grammatically correct English means you know what you are talking about. The point is that correct use of the language is the required first step. Then your coded program must be keyed, probably using a terminal or personal computer, in a form the computer can understand. One more note here: Programmers usually use a text editor, which is somewhat like a word processing program, to create a file that contains the program. However, as a beginner, you will probably want to write your program code on paper first.

4. Testing and Debugging The fourth phase is to test and debug your program. Why do you need to test? The imperfections of the world are still with us, so most programmers get used to the idea that their newly written programs probably have a few errors. This is a bit discouraging at first, since programmers tend to be precise, careful, detail-oriented people who take pride in their work. Still, there are many opportunities to introduce mistakes into programs, and you, just as those who have gone before you, will probably find several of them.

11

ICTL For Secondary School --Visual Basic Express Module

Why debug? You need to debug to improve your program. Debug is a term used extensively in programming. Debugging means detecting, locating, and correcting bugs (mistakes), usually done by running the program. These bugs are logic errors, such as telling a computer to repeat an operation but not telling it how to stop repeating. In this phase you run the program using test data that you devise. You must plan the test data carefully to make sure you test every part of the program. How do you debug? You can carry out debugging by running the program. The following are examples of debugging for Visual Basic Express and Just BASIC. a) debugging button in Visual Basic Express

12

ICTL For Secondary School --Visual Basic Express Module

b) debugging button in Just BASIC v1.01

5. Documentation Documentation is important when programming. Documenting is an ongoing, necessary process, although, as many programmers are, you may be eager to pursue more exciting computer-centered activities. What is documentation? Documentation is a written detailed description of the programming cycle and specific facts about the program. Typical program documentation materials include the origin and nature of the problem, a brief narrative description of the program, logic tools such as flowcharts and pseudocode, data-record descriptions, program listings, and testing results. Comments in the program itself are also considered an essential part of documentation. Many programmers document as they code. In a broader sense, program documentation can be part of the documentation for an entire system. The wise programmer continues to document the program throughout its design, development, and testing. Documentation is needed to supplement human memory and to help organize program planning. Also, documentation is critical to communicate with others who have an interest in the program, especially other programmers who may be part of a programming team. Written documentation is needed in computer industry so that those who come after you can make any necessary modifications in the program or track down any errors that you missed.

13

ICTL For Secondary School --Visual Basic Express Module

MODULE 2

PROGRAMMING VISUAL BASIC 2005 EXPRESS EDITION ( DEVELOPMENT 1 )

Curriculum Development Centre Ministry of Education Malaysia

14

ICTL For Secondary School --Visual Basic Express Module

1. Name of module

: Programming Visual Basic 2005 Express Edition (Development 1).

2. Learning Outcomes

: The students should be able to :a. State the features of the programming tools. b. Identify the visual development environment of programming tool : Toolbar Toolbox c. Create object using toolbox : Label Button Textbox Picture box

3. Knowledge and Skills

: Definition of programme and programming language.

4. Module Summary

: At the end of the module, students should be able to develop a simple programme.

15

ICTL For Secondary School --Visual Basic Express Module

Microsoft Visual Basic Express 2005

1. What is Microsoft Visual Basic Express 2005? Visual Basic Express is a programming language for the Windows Operating System. You can create various applications for your school or for your daily activities. Though simple, it is powerful. That is why Visual Basic Express is widely used in business, training and entertainment. 2. Why use Microsoft Visual Basic Express 2005? Other reasons for using Microsoft Visual Basic Express 2005 are :

Free download Created standalone Window programmes are royalty free. Full tutorial and various examples of programmes are provided online. Large online community. Uses Graphical User Interface (GUI). Uses drag and drop interface designer. Interactive development environment. Easy to carry out debugging.

3. What will you produce using Microsoft Visual Basic Express 2005? It is hoped that at the end of this lesson, you will be able to produce a simple programme that consists of your biodata. In your programme you will learn how to create a programme that has your photo, your particulars and how to create a user log in that uses password. In doing so, you will experience using simple coding in Microsoft Visual Basic Express 2005.

Getting started with Microsoft Visual Basic Express 2005

1. Click Start Program Microsoft Visual Basic 2005 Express Edition Visual Basic 2005 Express will be displayed

16

ICTL For Secondary School --Visual Basic Express Module

Visual Basic 2005 Express window will be displayed

2. To create new project, select File New Project Window Form Screen will be displayed

17

ICTL For Secondary School --Visual Basic Express Module

3. In Visual Studio installed templates select Windows Application

4. Then, name your project - Example : MyBiodata. Then click OK.

18

ICTL For Secondary School --Visual Basic Express Module

5. Form1 (shown below) developing form appears where you can draw your application.

6. Click ToolBox on the left side of the screen and all the control will be displayed. Then Click All Windows Forms

19

ICTL For Secondary School --Visual Basic Express Module

7. In the Toolbox, click

(windows position) to uncheck AutoHide.

(Windows Position)

Now click at the Autohide to uncheck it.

20

ICTL For Secondary School --Visual Basic Express Module

8. Click TextBox

9. Drag and drop the TextBox at the position as shown below ( Form1).

TextBox

21

ICTL For Secondary School --Visual Basic Express Module

10. To resize Textbox , click and drag the TextBox as shown below.

(resize)

(move )

11. Create another three TextBox by repeating step 8 and 9. 12. Click Label in order to create four new labels.

Label

22

ICTL For Secondary School --Visual Basic Express Module

13. Your form should now look like this.

14. Click at the PictureBox.

PictureBox

23

ICTL For Secondary School --Visual Basic Express Module

15. Drag and drop it in the position as shown below.

The Position of Picture Box

16. Click the Button in order to create one button.

Button

24

ICTL For Secondary School --Visual Basic Express Module

17. Now your form should look like this.

18. Click File from the menu bar and select Save al to save your project. (Name : MyBiodata). Then, click Save in Save Project popup box.

25

ICTL For Secondary School --Visual Basic Express Module

19. From the Windows Properties, set properties for the Form, TextBox, Label, PictureBox and Button. Then, rename them according to the table below.

Windows Properties

Controls

CONTROL BOX Form1 Label1 Label2 Label3 Label4 TextBox1 TextBox2 TextBox3 TextBox4 Button1 PictureBox1

CONTROL Text Name Text Text Text Text Name Name Name Name Multiline Name Text Image

DEFAULT Form1 Form1 Label1 Label2 Label3 Label4 TextBox1 TextBox2 TextBox3 TextBox4 False Button1 Button1 (none)

RENAME MyBiodata frmBiodata Name Sex ICNum Address txtName txtSex txtICNum txtAdd True btnExit Exit Refer page 27

26

ICTL For Secondary School --Visual Basic Express Module

20. To browse image (for PictureBox1) in Properties, click browse button.

Select resource (browse button)

21. Select Resource window will be displayed.

22. Select Local resource then click Import button.

27

ICTL For Secondary School --Visual Basic Express Module

23. Now, choose an image from sample pictures folder (eg : water lilies). Click Open then click OK.

24. In order to place the water lilies picture in the picture box, you need to click (Picturebox Tasks) and change the size mode to StrecthImage

Click here to StrecthImage

28

ICTL For Secondary School --Visual Basic Express Module

25. Next, set properties for the Form MyBiodata :CONTROL BOX frmBiodata txtName txtSex txtICNum txtAdd Text Text Text Text CONTROL Backcolour INFORMATION browse colour (choose colour) CHOO KENG FOOK MALE 951031-10-1668 55, JALAN UBI, 42100 KLANG

26. Your form should now look like this and to view the coding, double click the Exit Button to enter code mode.

29

ICTL For Secondary School --Visual Basic Express Module

27. In the Exit button code mode, type Application.Exit() as shown below.

28. To Run the programme, click at the menu bar or press (F5) and the window below will be displayed.

29. Press Exit button to end your application

30

ICTL For Secondary School --Visual Basic Express Module

30. To add a new window form : On the right frame, right click at MyBiodata project. Choose Add and click Windows Form.

Click here

31. Now, your windows form will look like this. Choose the Windows Form templates and name the form (eg : frmLogin). Then, click Add.

31

ICTL For Secondary School --Visual Basic Express Module

32. Your form will be displayed as shown below

33. Create two TextBox, two Label, one PictureBox and two Button.as shown below.

32

ICTL For Secondary School --Visual Basic Express Module

34. Set properties of the Form, two TextBox, two Labels, one PictureBox and one Button CONTROL BOX frmLogin Label1 Label2 TextBox1 TextBox2 Button1 Button2 PictureBox1 CONTROL Text Name Backcolour Text Text Name Name Passwordchar MaxLength Name Text Name Text Image DEFAULT frmLogin frmLogin browse colour (choose colour) Label1 Label2 TextBox1 TextBox2 32767 Button1 Button1 Button2 Button2 browse image RENAME

Name Password txtName txtPw * 6 btnCancel CANCEL btnOK OK Refer page 27

35. Your form should now look like this

33

ICTL For Secondary School --Visual Basic Express Module

36. To view the coding, double click the Cancel Button and type Me.Close() in the code mode.

37. Next, click on tab frmLogin.vb (Design). Then, click OK.

frmLogin.vb

34

ICTL For Secondary School --Visual Basic Express Module

38. To view the coding, double click the OK Button and type the content in the box. If txtName.Text = "CHOO" And txtPw.Text = "123" Then frmBiodata.Show() Me.Hide() Else MessageBox.Show("Incorrect username or password, please try again") End if

39. On the Menu Bar, click Project and choose MyBiodata Properties.

35

ICTL For Secondary School --Visual Basic Express Module

40. MyBiodata Properties form will be displayed. Go to Startup form then click drop down menu and choose frmLogin.

41. To save the application, click Save all

42. To run program, click will be displayed.

at the menu bar or press (F5) and frmLogin window

43. To test the program, type name CHOO and type Password 123. Then click OK.

CONGRATULATIONS !!! YOU HAVE CREATED A PROGRAMME !!!

36

ICTL For Secondary School --Visual Basic Express Module

MODULE 3

PROGRAMMING VISUAL BASIC 2005 EXPRESS EDITION (DEVELOPMENT 2)

Curriculum Development Centre Ministry of Education Malaysia

37

ICTL For Secondary School --Visual Basic Express Module

1. Name of module:

Programming Visual Basic 2005 Express Edition (Development 2)

2. Learning Outcomes:

The students should be able to :a. Declare variables String Integer Double b. Write code for a simple programme.

3. Knowledge and Skills:

a. Definition of programme and programming language. b. Able to identify the visual development environment of programming tool. c. Able to create object using toolbox.

4. Module Summary:

At the end of the module, students should be able to develop a simple programme.

38

ICTL For Secondary School --Visual Basic Express Module

What is Variables in programming ?

Variables contain data that stores information. The value inside may change at any time during the course of a program. Examples of variables are integer, double and string. Integer Integer data type contains any whole number value that does not have any fractional part. (e.g : 2, 4, 10, 1123, 3461, 275) Double Any number value that may and could contain a fractional part. (e.g : 2.34, 10.54, 301.43, 8678.32) String Any value that contains a sequence of number or characters. (e.g : CHOO, SUSAN, RM100)

Declaring Variables
The keyword Dim is use to declare Variables. (Eg : Dim name as string, Dim balance as double, Dim days as integer)

Application of Variables in programming

1. Create new project, name Declaration of Variables. 2. Create 6 Labels, 4 Textbox, 3 Buttons and 1 Picture Box. Your form should look like this.

39

ICTL For Secondary School --Visual Basic Express Module

3. Change the properties of the Control Box based on the following table. CONTROL BOX CONTROL Name Text BackColor Name Text Name Text Name Text Name Text Name Text Name Text AutoSize Name Name Name Name ReadOnly Name Text Name Text Name Text Image DEFAULT Form 1 Text browse colour (Choose colour) Label1 Label1 Label2 Label2 Label3 Label3 Label4 Label4 Label5 Label5 Label6 Label6 True TextBox1 TextBox2 TextBox3 Textbox4 False Button1 Button1 Button2 Button2 Button3 Button3 browse image (Choose image) RENAME frmSaving My Savings

Form 1

Label 1 Label 2 Label 3 Label 4 Label 5 Label 6 TextBox1 TextBox2 TextBox3 TextBox4 Button 1 Button 2 Button 3 PictureBox1

lblTitle HOW MUCH CAN I SAVE ? lblName Name lblBalance Balance Per Day (RM) lblDays Days lblTotal Total (RM) lblNotice False txtName txtBalance txtDays txtTotal True btnCount COUNT btnReset RESET btnExit EXIT

4. Your form should look like this.

40

ICTL For Secondary School --Visual Basic Express Module

5. To save the application, click File and select Save all. 6. To view the coding, double click anywhere on the form. Public Class frmSaving Dim Name As String Dim Balance As Double Dim Days As Integer Dim Total As Double

Type the following syntax

Private Sub frmSaving_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load End Sub End Class 7. Click on the tab Form1.vb[Design]*.

Click here

8. Double click on COUNT button and type the following :Private Sub btnCount_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnCount.Click Name = (txtName.Text) Balance = Val(txtBalance.Text) Type the following syntax Days = Val(txtDays.Text) Total = Balance * Days txtTotal.Text = Total lblNotice.Text = Name & " your total saving for " & days & " days is RM " & total End Sub

41

ICTL For Secondary School --Visual Basic Express Module

9. Click on the Form1.vb[Design]* tab as in step 7. 10. Double click on RESET button and type the following. Private Sub btnReset_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnReset.Click txtName.Text = " " txtBalance.Text = " " txtDays.Text = " " txtTotal.Text = " " End Sub

Type the following syntax

11. Click on the Form1.vb[Design]* tab as in step 7. 12. Double click on EXIT button and type Me.Close() 13. To save the application, click File and select Save all 14. To Run program, click / (F5) and frmSaving window will be displayed.

42

ICTL For Secondary School --Visual Basic Express Module

15. To test the program, type :Name Balance Per Day (RM) Days and click COUNT. : Choo : 124.35 :3

CONGRATULATIONS !!! TASK ACCOMPLISHED !!!

43