Introduction to Server Side Programming

Introduction
Plain HTML is a very powerful tool to create web pages. Combine it with CSS and JavaScript, you
have everything at your hand to create stunning websites. A quick overview of this rather traditional web
development –

1. HTML – Hyper Text Markup Language. It’s the standard used to define various elements on
web. E.g. links, paragraphs, headings, headers, images etc. A website contains multiple
elements.

2. CSS – Cascading Style Sheets. Each element has a style attribute which can specify styles of
the element such as font-size, color, font-family etc. combine such styles, you get a class. E.g.
you can create a style class which has style properties like “font-size:18px;color:red” . You can
store such classes in a file. This file is nothing but a cascading style sheet. The purpose of this
is to store common styles in a separate page, so that you can use them repeatedly in various
places in your site. This sort of architecture enables you to change styles across all the
locations very efficiently.

3. JavaScript – It allows client side programming of HTML elements. E.g. you can write a function
that will calculate sum of numbers in 2 input elements into the 3rd element. You can call this
function on a button’s click. The word client side here means that it is execute by the browser
to which the page is rendered. We will see more about what server side means at later stages
in this tutorial.

4. JQuery – It’s a framework based on JavaScript, it is ultimately translated to JavaScript. JQuery

gives you a lot of ready functions that you can use which can be complex to implement by
writing your own JavaScript. E.g. animation.

This tutorial assumes you have a basic knowledge about HTML, CSS, JavaScript. Also, a
comment on what this tutorial is not, it’s not a comprehensive guide to ASP.NET. It is aimed
at getting you up to the mark to start developing server side programs. It is a bit Connection
Loops Focused.

Server Side Programming

So let’s get to the core, what is server side programming? It so happens that, the static web
programming inherently limited. Let’s think on it for a bit. We know that, when your browser requests a
web page, the server responses with HTML content, your browser interprets it, and shows you the
output. So all those a, h1 tags are converted to actual visual displayable entities by your browser;
Server’s job is over the moment it sends you the HTML. So it is obvious that the HTML is not going to
change, so it cannot adapt, and change itself based on some input from user. Of course, there is
JavaScript using which you can tweak the HTML, (like change the color, animate, do some calculations
etc.), but then again JavaScript can only interact with what is there in the HTML page itself, it cannot
interact with outside entities. Consider a case of credit card validation. We cannot implement this with
static web page right? If we wanted to do it anyway, what we would need to send all the credit card
numbers and password in the HTML itself, so that JavaScript can iterate through it, and validate whether
the info you have entered is a valid credit card not. This is a huge architectural fault, but like it or not,
this is the architecture of web. Static, and stateless. And we want it to be that way, because it doesn’t
require server to keep an active connection to the client because it will slow down the performance, and
would limit number of clients the server can handle, and clients mostly tend to have slow internet
connections not suitable for having a continuous active connection. The proportion is something like
this. In 1 min, if a server can handle 10k static web requests, the same server can keep 100 active
connections at max. So you can see why we designed the HTTP protocol to be stateless. But we also
would like to solve our problem of validating the credit card info. Fortunately, this can be done with the
existing architecture, and that too very efficiently. Surprised right? read on …

Now we are going to arrive at what is server side programming. To explain it, let’s again take the
problem of designing a web page that validates credit card info entered by user. So we will be having a
HTML page which allows user to input credit card details. It has a button which validates the card info
and shows the result in a <h1> tag. Let’s call this page as cardValidator.html. Let’s not transfer the credit
card info to client via HTML in cardValidator.html. Instead, let the client make another HTTP request
(just like he did when he requested the cardValidator.html) and along with it provide the card info that
user has filled up in the cardValidator.html. Now normally, server would handle such request by fetching
a corresponding file on its disk and dumping its contents as the response to client (in case of
cardValidator.html, it will fetch the file cardValidator.html from its disk and return the HTML). In case of
this special additional web request however, we will have a special program with us written in c#, java
that can handle the incoming web request (as web requests are nothing but a message passed using
socket on port 80[http] or port 443[https] any language that can handle socket programming can be
used!). This program upon receipt of such request would search in the database of cards for the given
info and can construct the output in the HTML (that is just return the string containing HTML). Hence
ultimately the additional web request we made would return the HTML output having the <h1> tag
mentioning whether validation was a success or not. Now isn’t that genius? With the introduction of an
additional web request and a program to handle the requests, we have solved our problem! The
additional web request we made is called as post back.

Just to summarize, we have tweaked the architecture in following way –

1. We would no longer serve web request just by fetching up the respective file and dumping it.
The web server would have a program associated with each web request. That program will
generate the response for the web request. It may just dump the static file, or it may have some
business logic (like credit card validation) but the important point here is to have a program
associated with each web request that will decide how to handle that web request.
 2. We have added a capability on the HTML page to create another web request called as post
back.
3. In our problem, when user clicks the verify button, we will invoke another web request and that
web request would return us if the card is valid or not.

This is the crux of server side programming – postbacks and program to handle web requests.

As we talked about, the backend program can be in any language that supports socket programming. It
can be in java, or c#, or even c++ !

*the word program now onwards will always refer to this “special” program that is used to handle web
request. There are several frameworks that eases the efforts required to write these programs.

About Frameworks and web servers

A framework gives us a platform on top of which we can build our programs.

ASP.NET is a framework that let us write the programs in C#, VB. C# is a very powerful language which is
tightly integrated with windows. It runs on top of .NET framework. It can connect to almost all the
databases, have a huge support from Microsoft, and third parties. Hence you can easily get libraries for
generating PDFs, Excel files, sending emails, and what not. This kind of support is not available with
other options such as php, node.js etc.

JSP is a framework that lets us write the program in Java.

PHP is another such framework, does programming in language PHP itself.

Node.js lets us write the program in javascript.

We will be focusing on ASP.NET for the rest of the tutorial.

An important point to mention here is, this architecture by which we achieved dynamism, inherently
needs a server to host the webpages. If you have observed, each web request is processed by a program
on the web server. So you can’t just open the cardValidator.html file on your browser and expect it
work, the system needs to have a web server (which is a normal computer program such as IIS or tomcat
running on the physical server) that can map the web request to the handling program.

Also another point to stress here is, any of server side technology, asp.net, php etc. is not a replacement
to HTML, but its rather a complementary addition. All the server side technologies still work on the
stateless, static HTML protocol. And that is what genius about the whole thing here, we have used to the
same stateless, static protocol that has proven to be very efficient and fast, to build something that is
state aware and dynamic!
Hands On: First ASP.NET Website

A dynamic web site is called as a web app.

Make sure you choose visual C# as programming language and not VB. Give a suitable path to
the website. We will be using the same website throughout all the tutorial.
For our first page in the webapp, Let’s minimize the problem of credit card validation into string
validation. We would regard any string having an odd numbered length as valid, and invalid otherwise.

A web page in an webapp is called as web form. If you followed previous steps, your solution will be like
this –

TrainingWebsite is the webapp / site it contains no web forms so far. There is only 1 file named
web.config. We will see the details of this file later on. For now, just remember it contains the
configuration related aspects of the website.

Now, let’s add a new web form to this site.

Let’s take a look at the solution now –

The newly added web form is there, it contains 2 components,

1. Default.aspx file. It contains UI

2. Default.aspx.cs file. It’s the c# code file, it’s the program that will handle the web request.

After adding the input tag and the code to validate the string the two files have following content –
Default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" runat="server" id="stringToValidate"/> <br />

<asp:Button ID="Button1" runat="server" Text="Validate" OnClick="Button1_Click"

/>
<h1 id="result" runat="server"></h1>

</div>
</form>
</body>
</html>

Defaul.aspx.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{

protected void Button1_Click(object sender, EventArgs e)

{
string res = "In Valid";
if (stringToValidate.Value.Length%2 == 1)
{
res = "Valid";
}
result.InnerHtml = res;
}
}
Let’s try to understand what is all that. And try to relate this to the concepts that we developed while
solving the credit card validation problem

The first file is the web form, it’s the file containing static HTML UI. It is equivalent to the
creditcardValidator.html file in our previous example. When user issues the request for default.aspx,
this file’s contents are converted to HTML and dumped to the client. You can write all the HTML tags
here. We have added a input tag and a h1 tag to include result in the page. See the asp.net button tag
in the page
<asp:Button ID="Button1" runat="server" Text="Validate" OnClick="Button1_Click" />

This is a asp.net control. An asp.net control can be very easily recognized. It has the “asp: “ as the
starting. Asp.net controls or simply controls are the only entities that can cause a post back. Do you
remember the 2nd modification we made to standard web architecture:

We have added a capability on the HTML page to create another web request called as post back.

This is our capability / mechanism to cause post back. This button when clicked generates a post back.
And it carries all the information in the elements on the page that have a valid id and a runat=”server”
attribute defined. This is why we have added a runat=”server” and id attribute to the input element.
Hence the post back generated by the button control will carry all the properties of stringToValidate
input element.

In general all such elements that you want to control form the program need to have a valid id and
runat=”server” attribute

as you can see, this file is very similar to normal HTML file, except for few changes.

Take a look <@page> directive at the top, it specifies the code language, and code file. i.e. the
program that should handle the web requests to this file.

Now let’s take a look at the .cs file. The include lines are there to include the standard namespaces of c#
and asp.net that provide us the platform to write our program. As mentioned earlier, this the program
that handles the request of default.aspx. The code file is inherited from System.Web.UI.Page

And has overridden a standard page_load function. The page_load function get’s called whenever the
client has requested the web page. By default it constructs the HTML output of the corresponding aspx
file, and returns to the client as the response to his request. If you want to do some additional things at
page load you can specify them in the function.

The .cs file has another function “Button1_Click”.

Now let’s analyze how everything works. To run the site, click on the site name and press ctrl + F5. You
will following –

Type in a string and click on validate

You will see something like this -

This is what was happening in the back

1. You requested default.aspx

2. The page load function of the program gets called, this is popularly called as page_load event
gets called. Page load compiles default.aspx into plain static HTML output
3. program returns the response to client.
4. The client (browser) interprets the HTML and shows the input and button and a blank h1 tag to
user.
5. User inputs a string, clicks the button
6. Button causes a post back, and along with post back, sends all the info on the stringToValidate
input tag, and also says the I have been clicked. since it’s a postback to the same page, steps 1
and 2 will happen. But since this time, it’s a postback and in it button is saying I have been
clicked. After the page load, button1_click gets called. And that function performs some
calculations to put a “valid” or “invalid” in the innerHTML property of h1 tag. And now the page,
along with the h1 with its innerHTML property set gets returned to client.
7. Since the whole page is getting returned and since this was a separate page request, if you
observe your browser closely you can actually see the page is sort of reloading.
8. Just to polish this thought, lets do a modification
 9. protected void Button1_Click(object sender, EventArgs e)
10. {
11. string res = "In Valid";
12. if (stringToValidate.Value.Length%2 == 1)
13. {
14. res = "Valid";
15. }
16. //result.InnerHtml = res;
17. Response.Clear();
18. Response.Write(res);
19. Response.End();
20. }

If you click on validate now, you will just see the “In Valid”. Go ahead have an inspect element to
validate it. There won’t be any input, h1 or button there, just plain text “In Valid”. This essentially
verifies the that all the steps that we lined out are actually happening including sending of a fresh
response after a post back.

Exercises –

Learn a bit about c#. particularly about following –

1. DataTable
http://www.dotnetperls.com/datatable
The link is aimed at windows forms based application, but the concepts are same. Take a look

2. Dictionary
http://www.dotnetperls.com/dictionary

Problem

 Create a web form to send email to an email ID. Following could be the fields
o Subject
o To
o Message
o Send Button
You will need to research on how to send email using c#. A hint – you will need to use using
System.Net.Mail namespace

We are going to use it in feedback system (the enquiry form) in almost everywhere.