Laboratory 1 – Week 1

An Introduction to Visual Studio and Notepad ++

1.1 Introduction to Visual Studio

This is a short session to familiarize working with the Visual studio programming and
development environment. You can use Visual Studio to create many kinds of applications, from
simple store apps and games for mobile clients, to large, complex systems that power
enterprises and data centers as well as to familiarize working with the Notepad++. You can use
Notepad++ to create different webpages, from simple webpage to huge website for big enterprises.
Notepad++ supports several languages. Running on the MS Windows environment. Here we are going
to work with HTML in this course.

1.2 Preliminaries
Visual Studio by default provides support for C#, C and C++, JavaScript, F#, and Visual Basic. Here
we are going to work with C++.
Make sure you have access to your home directory. Visual Studio should create a place for all of
your workspaces in c:\documents\visual studio\Projects. Check that in this case.

1.3 Starting and Ending Visual Studio

You can find out which edition of Visual Studio is right for you at Visual Studio Editions.
You can install Visual Studio 2015 by downloading it from Visual Studio Downloads. If you need to know
more about the installation process, see Installing Visual Studio 2015.
Note that any version you download from the Visual Studio website might be slightly different to the
versions that we are running on the department machines, but all of the concepts should be the same.
On the department machines, Visual Studio can be found through the following menus:
Start Button-All Apps – Visual Studio
This program works similar to any other software product, i.e. you open up the program, and you then
either create a new program or load an existing program.
When you have finished, you exit Visual Studio by selecting File-Exit.
1.4 Visual Studio IDE

When you create an app in Visual Studio, you first create a project. It will looks like below.

The components of the Visual Studio IDE that we will be working with are as follows:
a) Solution Explorer window for navigating in the project files.
b) Code Editor window for editing source code manually.
c) Error List window for displaying information about a specific error message.

Now you’ll create a Windows console application.

To create a console app

1. On the menu bar, choose File, New, and Project.

 2. In the Visual C++ category, choose the Win32 Console Application template, and then name the project
GreetingsConsoleApp.

3. When the Win32 Application Wizard appears, choose the Finish button.

The GreetingsConsoleApp project and solution, with the basic files for a Win32 console app, are created and
automatically loaded into Solution Explorer. The GreetingsConsoleApp.cpp file is opened in the code editor.
The following items appear in Solution Explorer:
Figure 4: Project items

Next, you'll add code to display the word "Hello" in the console window.

To display “Hello” in the console window

1. In the GreetingsConsoleApp.cpp file, enter a blank line before the line return 0; and then enter the
following code:
2. cout << "Hello\n";

A red squiggly line appears under cout. An error message appears if you point to it.

gu

The error message also appears in the Error List window. You can display the window by, on the menu
bar, choosing View, Error List.

cout is included in the <iostream> header file.

3. To include the iostream header, enter the following code after #include "stdafx.h":
4. #include <iostream>
5. using namespace std;
 You probably noticed that a box appeared as you entered code, providing suggestions for the characters
that you entered. This box is part of C++ IntelliSense, which provides coding prompts, including listing
class or interface members and parameter information. You can also use code snippets, which are pre-
defined blocks of code. For more information, see Using IntelliSense and Code Snippets.

The red squiggly line under cout disappears when you fix the error.

6. Save the changes to the file.

You can debug GreetingsConsoleApp to see whether the word "Hello" appears in the console window.

To debug the application

 Start the debugger by choosing Debug from menu bar, and Start Debugging
 The debugger starts and runs the code. The console window (a separate window that looks like a command
prompt) appears for a few seconds but closes quickly when the debugger stops running. To see the text,
you need to set a breakpoint to stop program execution.

To add a breakpoint

1. Add a breakpoint from the menu bar at the line return 0;. You can also just click in the left margin to set
a breakpoint.

A red circle appears next to the line of code in the far left margin of the editor window.

2. Choose the F5 key to start debugging.

The debugger starts, and a console window appears showing the word Hello.

3. Press SHIFT + F5 to stop debugging.

 The components of this simple program are as follows:

stdafx.h is a file, that describes both standard system and project specific include files that are used
frequently but hardly ever change.

iostream is a header file in C++ standard library for providing basic input and output services.

using namespace std is used to replace std:: in each sentence Without using namespace std;
when you write for example cout <<; you'd have to put std::cout <<;.

main a section where any code within it will be executed when we run our program. The Code needs to be placed
within the braces that follow the definition of main.

Program Statements. Every program statement must end in a semi-colon ";".

1.5 Starting and Ending Notepad++

 Make sure you have access to a certain directory to save your projects in.
 You can find which edition of Notepad++ is right for you and can download Notepad++
from Notepad++ editions.
 On your machine, Notepad++ can be found through the following menus:
Start Button-All Apps – Notepad++
 This program works similar to any other software product, i.e. you open up the program, and
you then either create a new page or load an existing page.
 When you have finished, you exit Notepad++ by selecting File-Exit.
 The components of the Notepad++ that we will be working with are as follows:
d) Text editor window for writing and editing source code manually.
e) Run menu for running the code on the browser.
f) File menu for saving the webpage with an extension filename.htm or filename.html

How to create a simple webpage?

a. Open Notepad ++ text editor and type the following:

<html>
<head>
<meta charset="UTF-8">
<title>My First Webpage</title>
</head>
<body>
<p> This is my first homepage. <b>This text is bold</b> </p>
</body>
</html>

b. Save the file as mypage.html

Output in web browser:
1.6 Exercises

1.6.1 The following is a short list of tasks aimed at demonstrating some of the features of Visual
Studio and C++.
A. Change the text from "Hello" to something else. Run the program to see the results. Remove the semi-colon ";"
from the program. Try running it again and Remove \n from the program. Try running it again as well, what
happens?

B. Write a C++ program to print your Name, Age, and Faculty each in different line. Add \n after writing
your name. Run the program to see the results. Remove the << after cout Keyword. Try running it againas
well, What happens?

C. Write C++ statements to display on the screen the following pattern,

*************
*************
**Good Luck**
*********
*****
***

1.6.2 Design a webpage that outputs a Paragraph, that contains Personal Information about you
as the following, your Name, Age, Faculty and Level, They Must be in Bold.

Hint: your Output show be like this Name: XYZ, Age: 20, Faculty: Computer Science, Level: 3.