https://www.halvorsen.

blog

3-tier Architecture
Step by step Exercises

Hans-Petter Halvorsen
 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. Client-
Server

Web
3-Tier
Services
Architecture
Good Software!
We
n-Tier

bA
PI
Web Services: A standard way to get data
over a network/Internet using standard
Web protocols (HTTP, etc.)

APIs 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. 3
 3-tier/layer Architecture
Note! The different layers can be Presentation Tier PL
on the same computer (Logic
Layers) or on different Computers
in a network (Physical Layers)
Business Logic Tier BL

Logic Tier

Data Access Tier DAL

Data Data Tier - DL

Source

4
 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 6
 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 application’s 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.

7
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

Data Tier
Database
 3-tier Architecture

Presentation Tier Presentation Tier Presentation Tier

Business Logic Tier

Logic Tier
Different Devices can share
the same Business and Data
Data Access Tier
Access Code

Stored Procedures
The different Tiers can be
physical or logical Data Tier
Database
3-tier + WebService Architecture - Example

Server-side Client-side
Server(s)

Web Web Presentation

Server Services Tier

Business/Data
Logic Tier

Stored
Procedures

Data Data
Source Tier
3-tier + WebService Architecture - Example
Team Foundation Server
Installed on one or more
Windows Servers in your LAN
or in the Cloud

TFS Cient
Web Web Presentation
Server Services Tier

Team Foundation Server

Business/Dat
a Logic Tier

Stored
Procedures

Data Data
Source Tier
3-tier Architecture Scenarios Client
Client

Client
Internet
Presentation Layer Presentation Layer
Presentation Layer
Firewall
Client

Client
Web Service

Presentation Layer Presentation Layer Presentation Layer

Web
Server Server
Server
Local Network (LAN)
Business Logic

Stored
Database Procedures 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)
 Client
Android, iOS, Windows

Client

Client
Client WinForms 8/Windows Phone,
etc.
Presentation Tier
Mobile
Desktop App App Presentation Tier
Web App Seperate Presentation Tier
Presentation Tiers for each Device App Internet
Firewall
API Web Server Local
Presentation Tier
Web Service Network
ASP.NET Web Forms
Devices can share the same API
Business/Logic Tier and
APIs Business Tier
Logic Tier
3-tier
Clients
API Data Access Tier Architecture
API e.g., ADO, ADO.NET Scenarios

Database Data Tier Note! The different Tiers

Database can be on the same
Server
Computer (Logic Layers) or
Stored Procedures on different Computers in a
network (Physical Layers)
Tables Views
 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
3. Stored Procedures in this order

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

Data Tier
Tables

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 WinForms Windows Store App

Presentation Tier Presentation Tier Presentation Tier

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

Data Tier
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 System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

using System.Data; Since we are using the DataSet Class

using Tuc.School.LogicTier; 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
{ ConnectionString is
public partial class Form1 : Form 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
University of South-Eastern Norway
www.usn.no

E-mail: [email protected]
Web: https://www.halvorsen.blog