Web Programming

1Introduction
ASP.NET is a framework for creating web sites, apps and services with HTML, CSS and
JavaScript.
1.1 Visual Studio
Microsoft Visual Studio is an integrated development environment (IDE) from Microsoft. It can be
used to develop console and graphical user interface applications along with Windows Forms
applications, web sites, web applications, and web services in both native code together with
managed code for all platforms supported by Microsoft Windows, Windows Phone, Windows CE,
.NET Framework, .NET Compact Framework and Microsoft Silverlight.
Below we see the integrated development environment (IDE) in Visual Studio:

New projects are created from the “New Project” window:

C#
C# is pronounced “see sharp”. C# is an object-oriented programming language and part of the
.NET family from Microsoft. C# is very similar to C++ and Java. C# is developed by Microsoft and
works only on the Windows platform.
. NET Framework
The .NET Framework (pronounced “dot net”) is a software framework that runs primarily on
Microsoft Windows. It includes a large library and supports several programming languages which
allow language interoperability (each language can use code written in other languages). The .NET
library is available to all the programming languages that .NET supports. Programs written for the
.NET Framework execute in a software environment, known as the Common Language Runtime
(CLR), an application virtual machine that provides important services such as security, memory
management, and exception handling.
The class library and the CLR together constitute the .NET Framework.

Object-Oriented Programming (OOP)

Object-oriented programming (OOP) is a programming language model organized around "objects"
rather than "actions" and data rather than logic. Historically, a program has been viewed as a
logical procedure that takes input data, processes it, and produces output data.

The first step in OOP is to identify all the objects you want to manipulate and how they relate to
each other, an exercise often known as data modeling. Once you've identified an object, you
generalize it as a class of objects and define the kind of data it contains and any logic sequences
that can manipulate it. Each distinct logic sequence is known as a method. A real instance of a class
is called an “object” or an “instance of a class”. The object or class instance is what you run in the
computer. Its methods provide computer instructions and
the class object characteristics provide relevant data. You communicate with objects - and
they communicate with each other.

Important features with OOP are:

• Classes and Objects

• Inheritance
• Polymorphism
• Encapsulation

Simula was the first object-oriented programming language. Simula was developed in the
1960s by Kristen Nygaard from Norway.
Java, Python, C++, Visual Basic .NET and C# are popular OOP languages today.
Since Simula-type objects are reimplemented in C++, Java and C# the influence of Simula is often
understated. The creator of C++ (1979), Bjarne Stroustrup (from Denmark), has acknowledged
that Simula was the greatest influence on him to develop C++.

Visual Studio
Introduction

Home page of Visual Studio: http://www.microsoft.com/visualstudio

There exist different versions of Visual Studio, such as Visual Studio Express (free),
Visual Studio Professional, Visual Studio Premium and Visual Studio Ultimate.
Getting Started
Integrated Development Environment (IDE)

The Visual Studio product family shares a single integrated development environment (IDE) that is
composed of several elements: the Menu bar, Standard toolbar, various tool windows docked or auto-
hidden on the left, bottom, and right sides, as well as the editor space. The tool windows, menus, and
toolbars available depend on the type of project or file you are working in.
Below we see the Visual Studio IDE (Integrated Development Environment):

New Project
The first thing you do when you want to create a new application is to create a new project.

This can be done from the Start Page:

Or from the File menu:

Then the “New Project” window appears:
In this window you will select an appropriate template based on what kind of application you
Want to create, and a name and location for your project and solution

The most common applications are:

• Windows Form Application

• Console Application
• WPF Application
• ASP.NET Web Application
• Silverlight Application

Solution Explorer
Solutions and projects contain items that represent the references, data connections, folders, and
files that you need to create your application. A solution container can contain multiple projects and
a project container typically contains multiple items.
Toolbox
The Toolbox contains all the necessary controls, etc. you need to create your user interface. See Figure
below.

The Toolbox contains all the controls, etc. we can use

in our user interface.
In order to use them in our user interface, we just drag
and drop them to the “Form”, as shown below:
 Code Editor:

Properties window
Each control we have on our user interface has lots of Properties we can set. This is done in the Properties
window:
Build and Debug Tools
In Visual Studio we have lots of Build and Debugging Tools.
Build menu:
Below we see the Build menu:

The most used tool is “Build Solution” (Shortcut Key: F6).

Debug menu:
Below we see the Debug menu:

The most used tool is “Start Debugging” (Shortcut Key: F5).

INTRODUCTION TO WEB PROGRAMMING

Introduction
Today most of the applications focus on the Internet, where the applications can be viewed in a standard
Web Browser. Static Web pages are based on HTML and CSS. In order to create more advanced
applications, we need more powerful tools.
A useful web site for learning more about web development: http://www.w3schools.com
Important frameworks and tools for creating dynamic web pages:
• ASP.NET
• AJAX/ ASP.NET AJAX
• JavaScript
• Silverlight

These frameworks and tools will be explained below.

Web Browser
The purpose of a web browser is to read HTML documents and compose them into visual or audible
web pages. The browser does not display the HTML tags, but uses the tags to interpret the content
of the page.

Today we have the following major Web Browsers:

• Internet Explorer (by Microsoft)

• Firefox (by Mozilla)
• Chrome (by Google)
• Safari (by Apple)
• Opera (by Opera from Norway)

HTML
HTML, which stands for HyperText Markup Language, is the predominant markup language
for web pages. HTML is the basic building-blocks of webpages.
HTML is written in the form of HTML elements consisting of tags, enclosed in angle brackets (like
<html>), within the web page content. HTML tags normally come in pairs like <h1> and
</h1>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called
opening tags and closing tags). In between these tags web designers can add text, tables, images,
etc.
 Below we see a simple a HTML web page:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

CSS
Web browsers can also refer to Cascading Style Sheets (CSS) to define the appearance and
layout of text and other material.
The W3C, maintainer of both the HTML and the CSS standards

JavaScript
JavaScript is an object-oriented scripting language basically used to create dynamic web pages.
JavaScript is primarily used in the form of client-side JavaScript, implemented as part of a web
browser in order to provide enhanced user interfaces and dynamic websites.

Below we see a simple a HTML web page with JavaScript:

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p>Click the button to display the date.</p>
<p id="demo"></p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
document.getElementById("demo").innerHTML = Date();

</script>
</body>
</html>

ASP.NET
ASP.NET is a web application framework developed by Microsoft to allow programmers to
build dynamic web sites, web applications and web services.

ASP.NET is part of the Visual Studio package.

It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor to
Microsoft's Active Server Pages (ASP) technology. ASP.NET is built on the Common Language Runtime
(CLR), allowing programmers to write ASP.NET code using any supported .NET language, such as C#
and VB.NET.
ASP.NET web pages or webpage, known officially as Web Forms], are the main building block
for application development. Web forms are contained in files with an “.aspx” extension.
AJAX/ ASP.NET AJAX
AJAX is an acronym for Asynchronous JavaScript and XML. AJAX is a group of interrelated web
development methods used on the client-side to create interactive web applications. With Ajax, web
applications can send data to, and retrieve data from, a server asynchronously (in the background)
without interfering with the display and behavior of the existing page.
ASP.NET AJAX is a set of extensions to ASP.NET developed by Microsoft for implementing AJAX
functionality.

Silverlight
Microsoft Silverlight is an application framework for writing and running browser plug-ins or other rich
internet applications, with features and purposes similar to those of Adobe Flash. The run-time
environment for Silverlight is available as a plug-in for most web browsers. Silverlight is also one of the
two application development platforms for Windows Phone 7/8.
The latest version is Silverlight 5.0
Silverlight is based on WPF, so in Silverlight applications, user interfaces are declared in Extensible
Application Markup Language (XAML) and programmed using a subset of the .NET
Framework.

Introduction to ASP.NET
Introduction
ASP.NET is a web application framework developed by Microsoft to allow programmers to
build dynamic web sites, web applications and web services.
ASP.NET is a framework fro creating web sites, apps and services with HTML, CSS and JavaScript.
Web Site: http://www.asp.net
ASP.NET supports different approaches for making web sites or web pages.
• ASP.NET Web Pages uses a single page model that mixes code and HTML markup.
• ASP.NET SPA (Single Page Application)
• ASP.NET Web Forms uses controls and an event-model for component-based
development.
• ASP.NET MVC (Model View Controller) values separation of concerns and enables
easier test-driven development.
You can mix and match these techniques within one application depending on your needs.
New Web Project Dialog:
Select Project Name, Loction and Solution Name.

Next, seelct the template you want to use.

ASP.NET Web Pages

In ASP.NET Web Pages you include server code directly into the HTML syntax, similar to PHP
and Classic ASP.

ASP.NET Web Pages uses Singe Page Model (The server-side code is mixed in between the HTML).
It uses the the Razor syntax (.cshtml files)
A tool called Microsoft WebMatrix is optimized for this development model, but you can
also use Visual Studio if you want to.
ASP.NET SPA
SPA – Single Page Application

ASP.NET WEB FORMS

The main focus in this tutorial will be ASP.NET Web Forms.

Hello World Example

When you are finished, your Web App should look something like this:

When you enter your Name in the TextBox and click the OK Button, the program should
respond with a greetings.
Seelct Create New Project:
You have lots of choices here – but we just want to create a very simple Web Form App.

Create New Web Form:

WinForm1.aspx Page: Used to create the GUI/HMI

 Hello world Example – GUI:

WebForm1.aspx.cs:

Running the Application (F5):

Congratulations, you have created your first ASP.NET Web Forms applicatio
INTERNET INFORMATION SERVICES (IIS)
Web Server
The term web server can refer to either the hardware (the computer) or the software (the computer
application) that helps to deliver web content that can be accessed through the Internet. The most
common use of web servers is to host websites, but there are other uses such as gaming, data storage
or running enterprise applications.
• IIS - Internet Information Services, Microsoft Windows
• Apache Web Server, Open Source, Cross-platform: UNIX, Linux, OS X, Windows, ...
• Nginx (pronounced "engine x") - Has become very popular latly
• GWS (Google Web Server)
• etc.

ADO.NET
ADO.NET (ActiveX Data Object for .NET) is a set of computer software components that programmers
can use to access data and data services. It is a part of the base class library that is included with the
Microsoft .NET Framework. It is commonly used by programmers to access and modify data stored in
relational database systems, though it can also access data in non-relational sources.

Example
This time: Create everything from scratch using C# code and ADO.NET. Fill a “DropDownList” with
Book Names from the Database Print the Author Name based on
the selected BookName on the screen, see below.

Your .aspx page should look something like this:

Your .aspx.cs page should look something like this:

The Pageload() method is executed when the Web Page is loaded. In this simple example we put all
the code into the Event Handler for the DropDownList. The code could be improved by creating a
separate Class where you put this code into a Metho
The FillBookList method is as follows:

The code could be improved by creating a separate Class where you create this Method.
All kind og configuration should be stored in the Web.config file, including Database
Connection Strings, etc.

WEB SERVICES
In order to share data between devices over Internet, Web Services is the solution. In ASP.NET
there are several alternatives for creating such Web Services.

See the Tutorial “Web Services with Examples” for more details.
Visual Studio and ASP.NET has powerful features for creating Web Services:
• ASMX Web Service (Traditional Web Wervice using SOAP)
• ASP.NET Web API (The modern Web Service using REST, Web 2.0)