3-tier

Architecture

Step by step Exercises

Hans-Petter Halvorsen, M.Sc.

Software Architecture

2-Tier

3-Tier: A way to structure your code

into logical parts. Different devices or
software modules can share the same
code.

Web
Services

3-Tier
Architecture
Good Software!

Web Services: A standard

way to get data over a
network/Internet using
standard Web protocols
(HTTP, etc.)

ClientServer

APIs

n-Tier

API: Application Programming

Interface. Different devices or software
modules can share the same code.
Code once, use it many times

The database-centric style. Typically,

the clients communicate directly with
the database.

A three-tier style, in which clients

do not connect directly to the
database.
Web Services, etc.

Note! The different layers can be on the

same computer (Logic Layers) or on different
Computers in a network (Physical Layers)

3-tier/layer Architecture
Presentation Tier
PL

Business Logic Tier

BL
Logic Tier

Data Access Tier

Data
Source

DAL

Data Tier - DL

Why 3-Tier (N-Tier Architecture?)

Flexible applications
Reusable code

Code once, use many times

Modularized

You need only to change part of the code

You can deploy only one part
You can Test only one part
Multiple Developers

Different parts (Tiers) can be stored on different

computers
Different Platforms and Languages can be used
etc.
5

http://en.wikipedia.org/wiki/Multitier_architecture

3-tier/layer Architecture
Presentation Tier
This is the topmost level of the application.
The presentation tier displays information related to such services as browsing
merchandise, purchasing and shopping cart contents.
It communicates with other tiers by which it puts out the results to the
browser/client tier and all other tiers in the network.
In simple terms it is a layer which users can access directly such as a web page,
or an operating systems GUI
Application tier (business logic, logic tier, data access tier, or middle tier)
The logical tier is pulled out from the presentation tier and, as its own layer.
It controls an applications functionality by performing detailed processing.
Data tier
This tier consists of database servers. Here information is stored and retrieved.
This tier keeps data neutral and independent from application servers or
business logic.
Giving data its own tier also improves scalability and performance.
http://en.wikipedia.org/wiki/Multitier_architecture

3-tier Architecture

Presentation Tier

Presentation Tier

Presentation Tier

Business Logic Tier

Logic Tier
Data Access Tier

Stored Procedures
Database

Data Tier

3-tier Architecture

Presentation Tier

Presentation Tier

Presentation Tier

Business Logic Tier

Different Devices can share

the same Business and Data
Access Code

The different Tiers can be

physical or logical

Logic Tier
Data Access Tier

Stored Procedures
Database

Data Tier

3-tier + WebService Architecture - Example

Server-side

Client-side

Server(s)

Web
Server

Presentation
Tier

Web
Services

Business/Data
Logic Tier
Stored
Procedures

Data
Source

Data
Tier

3-tier + WebService Architecture - Example

Team Foundation Server

Installed on one or more

Windows Servers in your LAN
or in the Cloud

Web
Server

Web
Services

Business/Dat
a Logic Tier
Stored
Procedures

Data
Source

Data
Tier

Team Foundation Server

TFS Cient
Presentation
Tier

3-tier Architecture Scenarios

Client
Client

Client

Internet

Presentation Layer

Firewall

Presentation Layer

Presentation Layer

Client
Client

Web Service

Presentation Layer

Server

Presentation Layer

Presentation Layer

Local Network (LAN)

Stored
Database Procedures

Web
Server
Server
Business Logic

Data Access Logic

Exercises
1. Create Data Tier (Database)
2. Create Logic Tier (Database Communication Logic)
Create Presentation Tier (User Interface Logic):
3. WebApp: Using ASP.NET Web Forms (WS normally not needed)
4. Desktop App: Using WinForms
A. Without Web Services (We assume the App will be used
only in the LAN and that we have direct access to the
Database)
B. With Web Services (We assume the App should be used
on Internet outside the Firewall without direct DB access)

Android, iOS, Windows

8/Windows Phone,
etc.
Mobile
Presentation Tier
App Presentation Tier
Desktop App
Seperate Presentation Tier
Internet
Presentation Tiers for each Device App

Web App
Firewall

WinForms

API

Presentation Tier

Clients

API
API
Database
Server

Web Server

Web Service

ASP.NET Web Forms

Devices can share the same
Business/Logic Tier and
APIs

Client

Client

Client

Client

Local
Network

API
Business Tier

Logic Tier

Data Access Tier

e.g., ADO, ADO.NET

Database

Stored Procedures
Views
Tables

Data Tier

3-tier
Architecture
Scenarios
Note! The different Tiers
can be on the same
Computer (Logic Layers) or
on different Computers in a
network (Physical Layers)

Visual Studio Projects

Solution with all Projects
(Logic Tier, Web Service,
Desktop App, Web App,
Mobile App)

Solution with Projects

used by Web App
(Logic Tier, Web App)

15

Data Tier
We are going to create the Database / Data Layer/Tier,
including:
1. Tables
2. Views
Note! Install them
in this order
3. Stored Procedures
4. Triggers
5. Script for some Dummy Data
Download Zip Files with Tables, Views, Stored Procedures
and Triggerse in order to create the Data Tier in SQL Server
(The ZIP File is located on the same place as this File)
16

Data Tier
Triggers
Stored Procedures
Views
Tables

Data Tier

SQL Server

17

Database Tables

18

Execute the different

Scripts inside SQL Server
Management Studio

19

You are finished with the Exercise

20

Create Logic Tier

ASP.NET Web Forms
Presentation Tier

Windows Store App

WinForms

Presentation Tier

Presentation Tier

Logic Tier

Data Tier

Purpose:
All the Apps should/could
share the same Logic Tier
To make your Apps easier
to maintain and extend
etc.

Database
21

Create an Empty (Blank) Solution in Visual Studio

22

Add Project for Logic Tier (Data Access)

Select a Class Library Project

LogicTier
23

Add a New Class to the

Project (StudentData.cs)

StudentData.cs

24

Create the Code, e.g., like this (StudentData.cs):

Create your own Namespace

A View that collects data

from several tables

Improvements: Use Try... Catch ...

25

You should test the SQL Query in the SQL Server

Management Studio first

26

Code (StudentData.cs):
using System.Data.SqlClient;
using System.Data.SqlTypes;
using System.Data;
namespace Tuc.School.LogicTier
{
public class StudentData
{
public DataSet GetStudentDB(string connectionString)
{
string selectSQL = "select StudentName, StudentNumber, SchoolName, ClassName,
Grade from StudentData order by StudentName";

// Define the ADO.NET objects.

SqlConnection con = new SqlConnection(connectionString);
SqlDataAdapter da = new SqlDataAdapter(selectSQL, con);
DataSet ds = new DataSet();
da.Fill(ds);
return ds;
}
}
}

27

Create a proper name for the Assembly (.dll File)

Right-click on the Project in the Solution Explorer and select Properties

Then Build your

Project (hopefully
with no errors)

This will be the Assembly for your

Logic Tier, that can be imported
and used in other projects.
Create once use it many times!!
28

You are finished with the Exercise

29

Presentation Layer
Web App: ASP.NET WebForms
We will create a WebForm like this where the data comes from our Logic Tier

30

Add Project for Presentation Tier

(ASP.NET WebForm)

31

Add a New Class (Student.cs)

32

Add Code (Student.cs)

Note! This is our Logic Tier

Add a Reference to the Assembly in the Logic Tier

33

Code for Student.cs

using
using
using
using

System;
System.Collections.Generic;
System.Linq;
System.Web;

using System.Data;
using Tuc.School.LogicTier;

Since we are using the DataSet Class

Our Logic Tier

namespace Tuc.School.WebApp
{
public class Student
{
public DataSet GetStudent(string connectionString)
{
StudentData studentData = new StudentData();

Get Dat from our

Logic Tier

return studentData.GetStudentDB(connectionString);
}
}
}

34

Add a New WebForm (StudentInformation.aspx)

35

Create WebForm Page (StudentInformation.aspx)

GridView (Drag & Drop from Toolbox or create

code in .aspx file)
36

HTML /ASPX Code (StudentInformation.aspx)

<%@ Page Language="C#"

AutoEventWireup="true" CodeBehind="StudentInformation.aspx.cs" Inherits="WebApp.StudentInformation"

%>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Student Information</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Student Information</h1>
</div>
<asp:GridView ID="gridStudentData" runat="server">
</asp:GridView>
</form>
</body>
</html>
37

Code behind for the Web Form (StudentInformation.aspx.cs)

using System.Web.Configuration;
using Tuc.School.WebApp;

Note!

namespace WebApp
{
public partial class StudentInformation : System.Web.UI.Page
{

Web.Config

private string connectionString =

WebConfigurationManager.ConnectionStrings["SCHOOLConnectionString"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
FillStudentGrid();
}
}
private void FillStudentGrid()
{
DataSet ds = new DataSet();
Student studentList = new Student();
ds = studentList.GetStudent(connectionString);
gridStudentData.DataSource = ds;
gridStudentData.DataBind();
}
}
}

38

Store the ConnectionString for your Database in Web.Config

<?xml version="1.0" encoding="utf-8"?>
<!-For more information on how to configure your ASP.NET application, please visit
http://go.microsoft.com/fwlink/?LinkId=169433
-->

<configuration>
<connectionStrings>
<add name="SCHOOLConnectionString" connectionString="Data Source=macwin8;Initial
Catalog=SCHOOL;Persist Security Info=True;User ID=sa;Password=xxxxxx"
providerName="System.Data.SqlClient" />
</connectionStrings>
<system.web>
<compilation debug="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" />
</system.web>
</configuration>

Then you can easly switch Databsse without changing the Code!!

39

Test your Web App

Note! We have used a View in order to get data from several tables
40

Additional
Exercise:

Update GridView with New

Data from Database
Goto New WebForm
in order to Add another
Student

41

You are finished with the Exercise

42

Presentation Layer
Desktop App: WinForms
Part A: Without Web Services (we assume the App will be used only in the local LAN (or
local on the same computer where the database is located) and that we have direct access
to the Database)

Label

DataGridView

43

Add a WinForm Project

44

Add a New Class (StudentWinForm.cs)

45

Add Code in Class

Add a Reference to the

Assembly in the Logic Tier

46

Code for Class StudentWinForm.cs

using System.Data;

Since we are using the DataSet Class

using Tuc.School.LogicTier;

Reference to our Logic Tier

namespace Tuc.School.WinFormApp
{
class StudentWinForm
{
public DataSet GetStudent(string connectionString)
{
StudentData studentData = new StudentData();
return studentData.GetStudentDB(connectionString);
}
}
}

Our Database Method in our Logic Tier

47

Create Form

Label

DataGridView

48

Create Form Code

49

WinForm Code
using System.Configuration;
using Tuc.School.WinFormApp;

Note!

namespace WinFormApp
{
public partial class Form1 : Form
{

ConnectionString is
stored in App.config

private string connectionString =

ConfigurationManager.ConnectionStrings["SCHOOLConnectionString"].ConnectionString;
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
FillStudentGrid();
}
private void FillStudentGrid()
{
DataSet ds = new DataSet();
StudentWinForm studentList = new StudentWinForm();
ds = studentList.GetStudent(connectionString);
dataGridViewStudentInformation.DataSource = ds.Tables[0];
}
}
}

50

Note! Add System.Configuration Reference

51

Create DB ConnectionString in App.config

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<startup>
<supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.5" />
</startup>
<connectionStrings>
<add name="SCHOOLConnectionString" connectionString="Data Source=macwin8;Initial Catalog=SCHOOL;Persist Security
Info=True;User ID=sa;Password=xxxxxx"
providerName="System.Data.SqlClient" />
</connectionStrings>
</configuration>

52

Test it

It works!!!

53

You are finished with the Exercise

54

Presentation Layer
Desktop App: WinForms
Part B: Using Web Services (we assume the The App should be used on Internet outside
the Firewall)

Label

DataGridView

55

Step 1: Create Web Service

SchoolWS

Create an ASP.NET Project:

SchoolWS.asmx
Add Web Service:
56

Web Service Code

Database ConnectionString
is located in Web.config

Web Service Method

57

Database ConnectionString is located in Web.config

58

Test Web Service

Click to Test the Web Service

Method we created

It Works!!

59

Deploy/Publish Web Service to IIS

Copy Web Service Files (Project) to default IIS Directory: C:\inetpub\wwwroot

60

61

Test if WS working:

http://localhost/SchoolWS

62

Step 2: Use Web Service in WinForm

Create New WinForm Project:

WinFormAppWSClient
63

Add Web Service Reference

Our Web Service Methods

64

Create GUI

Label

DataGridView

Create Code

66

WinForm Code
using System.Windows.Forms;

namespace WinFormAppWSClient
{
public partial class FormWSClient : Form
{
public FormWSClient()
{
InitializeComponent();
}
private void FormWSClient_Load(object sender, EventArgs e)
{
FillStudentGrid();
}
private void FillStudentGrid()
{

Call the Web Service method

DataSet ds = new DataSet();

SchoolWSReference.SchoolWSSoapClient schoolWs = new
SchoolWSReference.SchoolWSSoapClient();
ds = schoolWs.GetStudent();
dataGridViewStudentInformation.DataSource = ds.Tables[0];
}
}

Fill GridView
67

Test it:

It works!!!

68

You are finished with the Exercise

69

Hans-Petter Halvorsen, M.Sc.

University College of Southeast Norway
www.usn.no
E-mail: hans.p.halvorsen@hit.no
Blog: http://home.hit.no/~hansha/