Você está na página 1de 63

UNIVERSIDAD ESTATAL A DISTANCIA

PROGRAMA INGENIERIA INFORMATICA,


LICENCIATURA INGENIERIA INFORMATICA Y
DESARROLLO DE APLICACIONES WEB
ESCUELA DE CIENCAS EXACTAS Y NATURALES (ECEN)
SAN JOSE, COSTA RIA.

Programa Ingeniera Informtica


Escuela Ciencias Exactas y Naturales (ECEN)

Guia de Laboratorio Desarrollo en Capas


con Visual C# 6.0 y SQL Server 2014.
2016
Diseado por:
Mag. Enrique Gmez Jimnez
Encargado Programa Licenciatura Ingeniera
Informtica y Desarrollo de Aplicaciones Web.
Encargado Ctedra Desarrollo de Software.
Programa Ingeniera Informtica
ECEN.
Ingeniera Informtica, UNED. Guia de Taller Programacin en capas.

ndice de contenido
1. Introduccin...............................................................................................................................3
La solucin del laboratorio: sistema gestin universitaria..............................................................3
2. La Base de datos.........................................................................................................................4
Capa Entidades (CapaBE)..............................................................................................................8
Capa de Acceso a Datos (DAL: Data Access Layer)....................................................................14
Capa Lgica de Negocios (BL: Bussines Layer)..........................................................................19
WCF (Windows Communication Foundation).............................................................................22
UI (User Interface).......................................................................................................................29

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


1. Introduccin

La solucin del laboratorio: sistema gestin universitaria.

Esta gua describe los pasos para crear una solucin en Visual Studio .NET 2015,
mediante el lenguaje de programacin C#, versin 6. La solucin ser programada
bsicamente en capas, siendo las capas: entidades, acceso a datos, lgica de negocios y
lgica de presentacin.

Estas capas se relacionarn entre s de la forma que se muestra en la figura No. 1.

Figura No. 1. Modelo para para la programacin en capas.


Extrada desde https://saov.wordpress.com/2013/04/16/programacion-en-n-capas/

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


2. La Base de datos.

La base de datos que utilizaremos en este taller lo denominaremos ProIng. Las tablas a utilizar en
el taller se muestran en la figura No.2.

Figura No. 2. Tablas de la base de datos ProIng a utilizar.

Esta base de datos contendr procedimientos almacenados para la lgica de datos del proyecto.
Solo utilizaremos algunos de dichos procedimientos, cuyos scripts mostraremos en este mismo
documento. Dichos procedimientos almacenados se muestran en la figura No. 3.

Figura No. 3. Procedimientos almacenados en la base de datos ProIng a utilizar.

El script de la base de datos, con los objetos a utilizar en el taller se muestra en el listado No. 1.
Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
1 Create Database dbProIng
USE [dbProIng]
2 GO
3 CREATE TABLE [dbo].[centrosUniversitarios](
[CentroUniversitarioID] [char](2) NOT NULL,
4 [NombreCentro] [varchar](200) NOT NULL,
5 [Ubicacion] [varchar](400) NOT NULL,
CONSTRAINT [PK_centrosUniversitarios] PRIMARY KEY CLUSTERED
6 (
7 [CentroUniversitarioID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY =
8 OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
9 ) ON [PRIMARY]
GO
1 CREATE TABLE [dbo].[Estudiantes](
0 [Cedula] [char](12) NOT NULL,
[Nombre] [varchar](100) NOT NULL,
11 [Apellidos] [varchar](200) NOT NULL,
1 [TelCasa] [varchar](20) NOT NULL,
[TelCelular] [varchar](20) NULL,
2 [Email] [varchar](50) NOT NULL,
1 [Email2] [varchar](50) NULL,
[Direccion] [varchar](400) NULL,
3 [UniversidadID] [char](2) NOT NULL,
1 [CentroUniversitarioID] [char](2) NOT NULL,
[timestamp] [timestamp] NOT NULL,
4 CONSTRAINT [PK_Estudiantes] PRIMARY KEY CLUSTERED
1 (
[Cedula] ASC
5 )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY =
1 OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
6 GO
1 CREATE TABLE [dbo].[Profesores](
[ProfesorID] [char](12) NOT NULL,
7 [Nombre] [varchar](50) NOT NULL,
1 [Apellidos] [varchar](200) NOT NULL,
[Domicilio] [varchar](200) NOT NULL,
8 [Email] [varchar](50) NOT NULL,
1 [TelefonoCelular] [varchar](50) NOT NULL,
[TelefonoCasa] [varchar](50) NULL,
9 [TelefonoTrabajo] [varchar](50) NULL,
2 CONSTRAINT [PK_Profesores] PRIMARY KEY CLUSTERED
(
0 [ProfesorID] ASC
2 )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY =
OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
1 ) ON [PRIMARY]
2 GO
CREATE TABLE [dbo].[Universidades](
2 [UniversidadID] [char](2) NOT NULL,
2 [Nombre] [varchar](80) NOT NULL,
[NombreCorto] [varchar](20) NULL,
3 [URL] [varchar](80) NULL,
2 CONSTRAINT [PK_Universidades] PRIMARY KEY CLUSTERED
(
4 [UniversidadID] ASC
2 )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY =
OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
5 ) ON [PRIMARY]
2 GO

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


6
CREATE Procedure [dbo].[mostrarCentros]
2 AS
7 Select *From centrosUniversitarios
Order by NombreCentro
2 GO
8 CREATE PROCEDURE [dbo].[spActualizarEstudiante] (@pCedula char(12),
@pNombre varchar(100),
2 @pApellidos varchar(200),
9 @pTelcelular varchar(20),
@pTelCasa varchar(20),
3 @pEmail varchar(50),
0 @pEmail2 varchar(50),
@pDireccion varchar(400),
3 @pUniversidadID char(2),
1 @pCentroUniversitarioID char(2))
AS
3 Update Estudiantes set Nombre = @pNombre,
2 Apellidos = @pApellidos,
TelCelular =@pTelcelular,
3 TelCasa = @pTelCasa,
3 Email = @pEmail,
Email2 = @pEmail2,
3 Direccion = @pDireccion,
4 UniversidadID = @pUniversidadID,
CentroUniversitarioID = @pCentroUniversitarioID
3 Where Cedula = @pCedula
5 GO
CREATE PROCEDURE [dbo].[spConsultarEstudiante] (@pCedula char(12))
3 AS
6 Select *From Estudiantes Where Cedula = @pCedula
GO
3 CREATE PROCEDURE [dbo].[spEliminarEstudiante] (@pCedula char(12))
7 AS
Delete From Estudiantes Where Cedula = @pCedula
3 GO
8 CREATE PROCEDURE [dbo].[spInsertarEstudiante] (@pCedula char(12),
@pNombre varchar(100),
3 @pApellidos varchar(200),
9 @pTelcelular varchar(20),
@pTelCasa varchar(20),
4 @pEmail varchar(50),
0 @pEmail2 varchar(50),
@pDireccion varchar(400),
4 @pUniversidadID char(2),
1 @pCentroUniversitarioID char(2))
AS
4 Insert into Estudiantes(Cedula,Nombre,Apellidos,TelCelular,TelCasa,
2 Email,Email2,Direccion,UniversidadID,CentroUniversitarioID)
Values(@pCedula,@pNombre,@pApellidos,@pTelcelular,@pTelCasa,
4 @pEmail,@pEmail2,@pDireccion,@pUniversidadID,@pCentroUniversitarioID)
3 GO
CREATE PROCEDURE [dbo].[spListarEstudiantes] AS
4 Select *From Estudiantes
4 GO
CREATE PROCEDURE [dbo].[spListarUniversidades]
4 AS
5 SET NOCOUNT ON;
SELECT UniversidadID, Nombre, NombreCorto, URL FROM dbo.Universidades
4 GO
6
4
Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
7
4
8
4
9
5
0
5
1
5
2
5
3
5
4
5
5
5
6
5
7
5
8
5
9
6
0
6
1
6
2
6
3
6
4
6
5
6
6
6
7
6
Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
8
6
9
7
0
7
1
Listado No. 1: Script de la base de datos y sus objetos.

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


Capa I:
Entidades

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


Qu es la capa Entidades?
La capa entidades permitir crear los objetos requeridos para las capas de acceso a datos (DAL: Data Access Layer), l

Capa Entidades (CapaBE).


Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
1. Iniciemos con el proyecto, ingresando a Visual Studio .NET 2015. Una vez en la
herramienta seleccionamos la opcin New, Project, como se muestra en la figura No. 4.

Figura No. 4: Creando un nuevo proyecto Visual Studio.

2. Como proyecto seleccionemos una biblioteca de clases denominada CapaBE. La figura No.5
muestra la creacin de este tipo de proyecto.

Figura No. 5: Proyecto tipo Biblioteca de clase.


Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
3. Una vez creada la clase procedamos a eliminar la clase que se crea por defecto: class1. En su
defecto creamos una nueva clase que se llame Estudiante, tal como se muestra en la figura
No. 6.

Figura No. 6: Creacin de la clase Estudiante.

4. En la clase debemos escribir el cdigo fuente que se muestra en el listado No. 2.


1 using System;
using System.Collections.Generic;
2 using System.Linq;
3 using System.Runtime.Serialization;
using System.Text;
4 using System.Threading.Tasks;
5 namespace capaBE
{
6 [DataContract]
7 public class Estudiante
{
8 private string cedula;
9 private string nombre;
private string apellidos;
10 private string telCelular;
11 private string telCasa;
private string email;
12 private string email2;
13 private string direccion;
private string universidadID;
14 private string centroUniversitarioID;

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


15 public Estudiante (string cedula,
string nombre,
16 string apellidos,
17 string telCelular,
string telCasa,
18 string email,
19 string email2,
string direccion,
20 string universidadID,
21 string centroUniversitarioID)
{
22 this.cedula = cedula;
23 this.nombre = nombre;
this.apellidos = apellidos;
24 this.telCelular = telCelular;
25 this.telCasa = telCasa;
this.email = email;
26 this.direccion = direccion;
27 this.universidadID = universidadID;
this.centroUniversitarioID = centroUniversitarioID;
28 }
29 public Estudiante(){}
[DataMember]
30 public string Cedula
31 {
get {return cedula;}
32 set {cedula = value;}
33 }
[DataMember]
34 public string Nombre
35 {
get{return nombre;}
36 set{nombre = value;}
37 }
[DataMember]
38 public string Apellidos
39 {
get{return apellidos;}
40 set{apellidos = value;}
41 }
[DataMember]
42 public string TelCelular
43 {
get
44 {
45 return telCelular;
}
46
47 set
{
48 telCelular = value;
49 }
}
50 [DataMember]
51
public string TelCasa
52 {
53 get
{
54 return telCasa;
55 }
56 set
Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
57 {
telCasa = value;
58 }
59 }
[DataMember]
60
61 public string Email
{
62 get
63 {
return email;
64 }
65
set
66 {
67 email = value;
}
68 }
69 [DataMember]
70 public string Direcccion
71 {
get
72 {
73 return direccion;
74 }
75
set
76 {
77 direccion = value;
78 }
79 }
80 [DataMember]
81
82 public string UniversidadID
{
83 get
84 {
85 return universidadID;
86 }
87
88 set
89 {
universidadID = value;
90 }
91 }
92 [DataMember]
93
94 public string CentroUniversitarioID
95 {
96 get
{
97 return centroUniversitarioID;
98 }
99
10 set
0 {
10 centroUniversitarioID = value;
}
1
}
10 [DataMember]
2
10 public string Email2
Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
3 {
10 get
4 {
return email2;
10 }
5
10 set
6 {
10 email2 = value;
7 }
10 }
}
8 }
10
9
110
111
112
113
114
115
116
117
118
119
12
0
12
1
12
2
12
3
12
4
12
5
12
6
12
7
12
8
12
9
13
0
13
1
13
2
13
3
Listado No. 2: Cdigo de la entidad Estudiante.

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


5. Debemos asegurarnos que tenemos habilitada la referencia a System.Runtime.Serialization.
Si aparece error en la clase sobre las palabras reservadas [DataContract] y [DataMember]

debes crear la referencia, tal como se muestra en la figura No. 7.

Figura No. 7: agregando la referencia System.Runtime.Serialization.

Ya tenemos lista nuestra primera clase en la capa Entidades. Ahora procede a crear las otras
entidades: Profesores, Universidades y Centros Universitarios, considerando lo explicado hasta
ahora.
Tiempo: 25 a 30 minutos.

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


Capa II:
Acceso a
Datos

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


Capa acceso a datos.
Esta capa contiene los procedimientos requeridos para la gestin de los datos en la base de datos del proyecto. Contie

Capa de Acceso a Datos (DAL: Data Access Layer).


Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
1. Como segunda etapa ahora vamos a construir la lgica de acceso a datos. Lo primero que
haremos es crear un proyecto de biblioteca de clases que nos permita implementar la lgica
de acceso a datos. La denominaremos DAL. Una vez creado el proyecto, agregaremos dos
clases: una para establecer la conectividad y otra para gestionar la tabla Estudiantes. La clase
que nos permita conectarnos a la base de datos la llamaremos Conectividad, cuyo cdigo
fuente se muestra en el listado No. 3.
1 using System;
using System.Collections.Generic;
2 using System.Linq;
3 using System.Text;
using System.Data;
4 using System.Data.SqlClient;
5 using System.Threading.Tasks;
namespace DAL
6 {
7 public class Conectividad
{
8 public SqlConnection conectar()
9 {
string strConn = "Data Source=ENRIQUE-GOMEZ\\SQLEXPRESS;Initial
10 Catalog=dbProIng;Integrated Security=True";
11 SqlConnection conn = new SqlConnection(strConn);
try
12 {
13 if (conn.State.Equals(ConnectionState.Closed))
conn.Open();
14 else
15 conn. Close();
}
16 catch (Exception ex)
17 {
}
18 return conn;
19 }
}
20 }
21
22
23
24
Listado No. 3: Cdigo de clase Conectividad.

2. Una vez creada la clase Conectividad, la cual nos permitir conectarnos a la base de datos,
procedamos a crear una clase llamada Estudiante. Esta clase es la que permitir gestionar la
informacin de la tabla Estudiantes (insertar, modificar, eliminar, buscar y listar). El cdigo
se ve en el listado No. 4.

1 using System;
using System.Collections.Generic;
Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
2 using System.Linq;
using System.Text;
3 using System.Threading.Tasks;
4 using System.Data;
using System.Data.SqlClient;
5 namespace CapaDAL
6 {
public class Estudiante
7 {
8 public void insertarEstudiante(CapaBE.Estudiante estudiante)
{
9 Conectividad aux = new Conectividad();
10 SqlCommand cmd = new SqlCommand();
cmd.Connection = aux.conectar();
11 cmd.Parameters.Add(new SqlParameter("@Cedula", estudiante.Cedula));
12 cmd.Parameters.Add(new SqlParameter("@Nombre", estudiante.Nombre));
cmd.Parameters.Add(new SqlParameter("@Apellidos", estudiante.Apellidos));
13 cmd.Parameters.Add(new SqlParameter("@TelCasa", estudiante.Telcasa));
14 cmd.Parameters.Add(new SqlParameter("@TelCelular",
estudiante.Telcelular));
15 cmd.Parameters.Add(new SqlParameter("@TelTrabajo",
16 estudiante.Teltrabajo));
cmd.Parameters.Add(new SqlParameter("@Email", estudiante.Email));
17 cmd.Parameters.Add(new SqlParameter("@Email2", estudiante.Email2));
18 cmd.Parameters.Add(new SqlParameter("@Direccion",
estudiante.Direccion));
19 cmd.Parameters.Add(new SqlParameter("@UniversidadID",
20 estudiante.Universidadid));
cmd.Parameters.Add(new SqlParameter("@CentroUniversitarioID",
21 estudiante.Centrouniversitarioid));
22 cmd.CommandText = "InsertarEstudiante";
cmd.CommandType = CommandType.StoredProcedure;
23 cmd.ExecuteNonQuery();
24 aux.conectar();
}
25 public void actualizarEstudiante(CapaBE.Estudiante estudiante)
26 {
Conectividad aux = new Conectividad();
27 SqlCommand cmd = new SqlCommand();
28 cmd.Connection = aux.conectar();
cmd.Parameters.Add(new SqlParameter("@Cedula", estudiante.Cedula));
29 cmd.Parameters.Add(new SqlParameter("@Nombre", estudiante.Nombre));
30 cmd.Parameters.Add(new SqlParameter("@Apellidos", estudiante.Apellidos));
cmd.Parameters.Add(new SqlParameter("@TelCasa", estudiante.Telcasa));
31 cmd.Parameters.Add(new SqlParameter("@TelCelular",
32 estudiante.Telcelular));
cmd.Parameters.Add(new SqlParameter("@TelTrabajo",
33 estudiante.Teltrabajo));
34 cmd.Parameters.Add(new SqlParameter("@Email", estudiante.Email));
cmd.Parameters.Add(new SqlParameter("@Email2", estudiante.Email2));
35 cmd.Parameters.Add(new SqlParameter("@Direccion",
36 estudiante.Direccion));
cmd.Parameters.Add(new SqlParameter("@UniversidadID",
37 estudiante.Universidadid));
38 cmd.Parameters.Add(new SqlParameter("@CentroUniversitarioID",
estudiante.Centrouniversitarioid));
39 cmd.CommandText = "ActualizarEstudiante";
40 cmd.CommandType = CommandType.StoredProcedure;
cmd.ExecuteNonQuery();
41 aux.conectar();
42 }
public void eliminarEstudiante(string cedula)
43 {
Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
44 Conectividad aux = new Conectividad();
SqlCommand cmd = new SqlCommand();
45 cmd.Connection = aux.conectar();
46 cmd.Parameters.Add(new SqlParameter("@Cedula", cedula));
cmd.CommandText = "EliminarEstudiante";
47 cmd.CommandType = CommandType.StoredProcedure;
48 cmd.ExecuteNonQuery();
aux.conectar();
49 //vdi.2k16
50 }
public CapaBE.Estudiante buscarEstudiante(string cedula)
51 {
52 CapaBE.Estudiante estudiante = new CapaBE.Estudiante();
Conectividad aux = new Conectividad();
53 SqlCommand cmd = new SqlCommand();
54 cmd.Connection = aux.conectar();
cmd.Parameters.Add(new SqlParameter("@Cedula", cedula));
55 cmd.CommandText = "BuscarEstudiante";
56 cmd.CommandType = CommandType.StoredProcedure;
SqlDataReader dr = cmd.ExecuteReader();
57 if (dr.Read())
58 {
estudiante.Cedula = dr["Cedula"].ToString();
59 estudiante.Nombre = dr["Nombre"].ToString();
60 estudiante.Apellidos = dr["Apellidos"].ToString();
estudiante.Telcasa = dr["TelCasa"].ToString();
61 estudiante.Telcelular = dr["TelCelular"].ToString();
62 estudiante.Teltrabajo = dr["TelTrabajo"].ToString();
estudiante.Email = dr["Email"].ToString();
63 estudiante.Email2 = dr["Email2"].ToString();
64 estudiante.Direccion = dr["Direccion"].ToString();
estudiante.Universidadid = dr["UniversidadID"].ToString();
65 estudiante.Centrouniversitarioid =
66 dr["CentroUniversitarioID"].ToString();
}
67 else
68 {
estudiante = null;
69 }
70 aux.conectar();
return estudiante;
71 }
72 public List<CapaBE.Estudiante> listar()
{
73 Conectividad aux = new Conectividad();
74 SqlCommand cmd = new SqlCommand();
75 cmd.Connection = aux.conectar();
76 cmd.CommandText = "ListarEstudiantes";
77 cmd.CommandType = CommandType.StoredProcedure;
78 SqlDataReader dr = cmd.ExecuteReader();
79 List<CapaBE.Estudiante> lista = new List<CapaBE.Estudiante>();
80
while (dr.Read())
81 {
82 CapaBE.Estudiante estudiante = new CapaBE.Estudiante();
83 estudiante.Cedula = dr["Cedula"].ToString();
84 estudiante.Nombre = dr["Nombre"].ToString();
85 estudiante.Apellidos = dr["Apellidos"].ToString();
86 estudiante.Telcasa = dr["TelCasa"].ToString();
estudiante.Telcelular = dr["TelCelular"].ToString();
87
estudiante.Email = dr["Email"].ToString();
88 estudiante.Email2 = dr["Email2"].ToString();
89 estudiante.Direccion = dr["Direccion"].ToString();
Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
90 estudiante.Universidadid = dr["UniversidadID"].ToString();
91 estudiante.Centrouniversitarioid =
92 dr["CentroUniversitarioID"].ToString();
lista.Add(estudiante);
93 }
94 aux.conectar();
95 return lista;
96 }
97 }
98 }
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
Listado No. 4: Cdigo de la clase Estudiante, capa lgica de acceso a datos (DAL)

3. Si nos fijamos en la lnea 9 tenemos que la clase recibe un parmetro (public void
agregarEstudiante(capaBE.Estudiante estudiante): capaBE. Esto quiere decir que est
recibiendo un objeto Estudiante que proviene de la capa Entidades. En este caso requiere la
referencia a dicha clase, por lo que procedemos agregndola, tal como se muestra en la figura
No. 8.

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


Figura No. 8: agregando la referencia a la capa Entidades.
Ahora procede a crear las clases de acceso para la gestin de los datos de Profesores,
Universidades y Centros Universitarios, considerando lo explicado hasta ahora.
Tiempo: 25 a 30 minutos.

Compilemos el proyecto para que tengamos disponible la DLL.

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


Capa III:
Lgica de
negocios

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


Lgica de negocios.
La lgica de negocios implementa los mtodos donde se escriben las reglas de negocio, validaciones que involucran va

Capa Lgica de Negocios (BL: Bussines Layer).


Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
1. Ahora corresponde crear la biblioteca de clases, donde implementaremos la lgica de
negocios de la aplicacin. La biblioteca de clases que crearemos aqu la denominaremos BL.
Una vez creada debes crear la clase Estudiante, cuyo cdigo fuente se muestra en el listado
No. 5.
1 using System;
using System.Collections.Generic;
2 using System.Linq;
3 using System.Text;
using System.Threading.Tasks;
4
5 namespace CapaBL
{
6 public class Estudiante
7 {
public void insertarEstudiante(CapaBE.Estudiante estudiante)
8 {
9 CapaDAL.Estudiante objeto = new CapaDAL.Estudiante();
objeto.insertarEstudiante(estudiante);
10 }
11 public void actualizarEstudiante(CapaBE.Estudiante estudiante)
{
12 CapaDAL.Estudiante objeto = new CapaDAL.Estudiante();
13 objeto.actualizarEstudiante(estudiante);
}
14 public void eliminarEstudiante(string cedula)
15 {
CapaDAL.Estudiante objeto = new CapaDAL.Estudiante();
16 objeto.eliminarEstudiante(cedula);
17 }
public CapaBE.Estudiante buscarEstudiante(string cedula)
18 {
19 CapaDAL.Estudiante objeto = new CapaDAL.Estudiante();
return objeto.buscarEstudiante(cedula);
20 }
21 public List<CapaBE.Estudiante> listarEstudiantes()
{
22 CapaDAL.Estudiante objeto = new CapaDAL.Estudiante();
23 return objeto.listar();
}
24 }
25 }
26
27
28
29
30
Listado No. 5: Cdigo de la clase Estudiante, capa lgica de negocios (BL)

2. Debes incluir la referencia a las capas Entidad y DAL, tal como se muestra en la figura No.
9.

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


Figura No. 9: agregando las referencias a las capas Entidades y DAL.

Ahora procede a crear la lgica de negocios para Profesores, Universidades y Centros


Universitarios, considerando lo explicado hasta ahora.
Tiempo: 25 a 30 minutos.

Compilemos el proyecto para que tengamos disponible la DLL.

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


WCF (Windows
Communicatio
n Foundation)

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


WCF
Es un marco de trabajo para la creacin de aplicaciones orientadas a servicios.

WCF (Windows
Communication
Foundation).

1. Ahora utilizaremos
Windows
Communication
Foundation. Lo primero
que haremos es crear una
carpeta en el proyecto
denominada WCF, tal
como se muestra en la
figura No. 10.

Figura No. 10: Creando la


carpeta en el proyecto.

2. Una vez creada la


carpeta, procedamos a
incluir un nuevo
proyecto, de tipo WCF
Service Application de
nombre WCFEstudiante,
tal como se muestra en la
figura No. 11.

Figura No. 11: Creando


nuestro primer WCF
(WCFEstudiante).

3. Una vez creado el


aplicativo WCF
procedamos a eliminar
los archivos IService1.cs y Service1.svc. Vamos a crear nuestros propios servicios.

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


4. Procedamos agregando un servicio WCF de nombre estudiante, tal como se muestra en la
figura No. 12.

Figura No. 12: Agregando un servicio WCF a la app WCFEstudiante.


5. Observemos que una vez que pulsamos el botn Add se crean dos archivos: IEstudiante.cs y
Estudiante.svc. En el primer archivo solo se crea la interface del servicio y en el segundo la
implementacin del mismo. Seleccionemos el archivo de interface (IEstudiante.cs) y
escribamos el cdigo fuente que se muestra en el listado No. 6.

1 using System;
using System.Collections.Generic;
2 using System.Linq;
3 using System.Runtime.Serialization;
using System.ServiceModel;
4 using System.Text;
5 using CapaBE;
6 namespace WCFEstudiante
7 {
[ServiceContract]
8 public interface IEstudiante
9 {
[OperationContract]
10 void agregarEstudiante(CapaBE.Estudiante estudiante);
11 [OperationContract]
void actualizarEstudiante(CapaBE.Estudiante estudiante);
12 [OperationContract]
13 void eliminarEstudiante(string cedula);
[OperationContract]
14 CapaBE.Estudiante buscarEstudiante(string cedula);
15 [OperationContract]
List<CapaBE.Estudiante> listar();
Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
16 }
}
17
18
19
20
Listado No. 6: Cdigo de la interface IEstudiante.

6. Una vez establecido la interface del servicio, pasemos a codificar la implementacin del
mismo: Estudiante.svc. El cdigo respectivo se muestra en el listado No.7.

1 using System;
using System.Collections.Generic;
2 using System.Linq;
3 using System.Runtime.Serialization;
using System.ServiceModel;
4 using System.Text;
5 using CapaBE;
6 namespace WCFEstudiante
7 {
public class Estudiante : IEstudiante
8 {
9 public void actualizarEstudiante(CapaBE.Estudiante estudiante)
{
10 CapaBL.Estudiante objeto = new CapaBL.Estudiante();
11 objeto.actualizarEstudiante(estudiante);
}
12
13 public void agregarEstudiante(CapaBE.Estudiante estudiante)
{
14 CapaBL.Estudiante objeto = new CapaBL.Estudiante();
15 objeto.insertarEstudiante(estudiante);
}
16 public void eliminarEstudiante(string cedula)
17 {
CapaBL.Estudiante objeto = new CapaBL.Estudiante();
18 objeto.eliminarEstudiante(cedula);
19 }
20 public CapaBE.Estudiante buscarEstudiante(string cedula)
21 {
CapaBL.Estudiante objeto = new CapaBL.Estudiante();
22 return objeto.buscarEstudiante(cedula);
23 }
24 public List<CapaBE.Estudiante> listar()
25 {
CapaBL.Estudiante objeto = new CapaBL.Estudiante();
26 return objeto.listarEstudiantes();
27 }
}
28 }
29
30
31
32
Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
33
34
Listado No. 7: Cdigo de la implementacin de IEstudiante en Estudiante.svc

7. Ahora probemos nuestro WCF. Pulsemos con el botn derecho del mouse sobre el archivo
Estudiante.svc y seleccionemos Browse with tal como se muestra en la figura No. 13.

Figura No. 13: Agregando el navegador para probar el WCF.


8. A continuacin, debemos establecer el probador del WCF, tal como se muestra en la figura
No. 11. Debemos buscar el utilitario WCF Test Client (WcfTestClient.exe) que generalmente
se ubica en el directorio C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE\. La
figura No. 14 muestra este proceso.

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


Figura No. 14: Agregando el navegador para probar el WCF.

9. Una vez agregado nos aparecer ya el utilitario que nos permitir probar nuestros WCF, tal
como se muestra en la figura No. 15.

Figura No. 15: El probador de WCF.


10. Ahora si pulsamos el botn Browse, podremos probar nuestro WCF. La prueba se mostrara
como en la figura 16.

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


Figura No. 16: Probando el WCF Estudiante.

11. Ahora vamos a probar la funcionalidad del WCF Estudiante. Como podemos observar en la
figura No. 13, se cuenta con los mtodos necesarios para la gestin de datos de la tabla
Estudiante. Estos mtodos son: agregarEstudiante(), actualizarEstudiante(),
eliminarEstudiante(), buscarEstudiante(), buscarEstudiante() y listar(). Observa la figura No.
17 donde se ejecuta la funcin listar(). Se puede observar la lista de datos, producto de la
prueba.

Figura No. 17: Ejecutando el mtodo listar() del WCF Estudiante.svc

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


12. Finalmente, compilemos nuestro primer WCF para disponerlo para consumo. Cada clase de
nuestro modelo de capas tendr su propio WCF para ser consumido. Esto nos permite
escalabilidad y un mejor mantenimiento del cdigo. Asimismo, cumplimos, en parte, con la
Ley de Demter.
Ahora procede a crear el cdigo para los WCF Profesor, Universidad y Centro Universitario,
considerando lo explicado hasta ahora.
Tiempo: 25 a 30 minutos.

Compilemos el proyecto para que tengamos disponible la DLL.

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
UI (User Interface)
La UI (User Interface) o tambin conocida como lgica de presentacin permite al usuario interactuar con el aplicativo.

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


UI (User
Interface) o
lgica de

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


UI (User Interface).

Vamos a terminar la ltima capa requerida para nuestro aplicativo web. Esta capa es la que
permitir al usuario interactuar con la lgica de negocios y a su vez con la de acceso a datos.
Consumir datos utilizando WCF y enviar datos para actualizar la informacin de la base de
datos.
En este contexto podemos considerar varias herramientas de front-end tal como Sublime Text,
Bracket u otro que permita la creacin de archivos HTML5, CSS3 y Javascript. Esto permitir
disear la interface que utilizar el usuario para comunicarse con el back-end del aplicativo web.
Iniciemos entonces.
1. Lo primero que haremos es crear la referencia al WCFEstudiante que diseamos en el
apartado anterior. Para ello pulsemos con el botn derecho del mouse sobre el nombre del
proyecto web y seleccionemos Add y Service Reference, tal como se muestra en la figura No.
18.

Figura No. 18: Agregando una referencia al WCF Estudiante.

2. Una vez que seleccionemos Service Reference tendremos acceso a una ventana como la
mostrada en la figura No. 19.

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


Figura No. 19: Agregando una referencia al WCF Estudiante.

3. En la figura 19 debemos pulsar sobre el botn Discover para buscar los servicios web
disponibles en nuestro localhost. Tambin podramos escribir directamente la direccin
donde se ejecuta nuestro servicio o un servicio externo que deseemos consumir. Una vez
seleccionado podemos ver todas las funcionalidades que posee (observemos en la figura 16
las funciones declaradas en la interface del servicio IEstudiante.
El namespace que pondremos a la referencia a nuestro WCF ser wcfEstudiante. Una vez
puesto el nombre al WCF pulsemos en el botn Advanced. Se nos mostrar una imagen
similar a la figura No. 20. Observemos que por defecto el WCF devuelve una coleccin tipo
Array, sin embargo, en nuestro proyecto lo que vamos a devolver como coleccin son listas
de datos. Por ende, vamos a cambiar de System.Array a System.Collections.Generic.List.

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


Figura No. 20: Configurando el tipo de coleccin devuelta.

4. Pulsemos el botn OK dos veces para aceptar la referencia al servicio.


5. Ahora vamos a crear un archivo Javascript denominado Utilitarios. El cdigo se muestra en
el listado No. 8.
1. function EnterEvent(e) {
2. if (e.keyCode == 13) {
3. //e.preventDefault();
_doPostBack('<%=btnBuscar.UniqueID%>', "");
4. }
5. }
6. function limpiarCajasTexto() {
7. for (i = 0; i < document.forms[0].length; i++) {
8. doc = document.forms[0].elements[i];
9. if (doc.type == "text" | doc.type == "textarea") {
if (!doc.getAttribute('readOnly', 'readonly'))
10.
doc.value = "";
11. }
12. }
13. }
Listado No. 8: Cdigo del archivo Javascript: Utilitarios.js

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


6. Como primer punto vamos a crear un archivo CSS que utilizaremos en las interfaces del
aplicativo. Lo denominaremos styles.css. El cdigo de este CSS se muestra en el listado No.
9. Algunos selectores del CSS no se utilizarn en este taller.
1 /* ---------- Google Font ---------- */
@import url(http://fonts.googleapis.com/css?
2 family=Open+Sans:400,400italic,600,700,800);
3
/* RESET STYLES */
4 *, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset,
5 input, p,
blockquote, th, td { margin:0; padding:0 }
6 table { border-collapse:collapse; border-spacing:0 }
7 fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-
8 weight:normal }
9 ol, ul, li { list-style:none }
caption, th { text-align:left }
10 h1, h2, h3, h4, h5, h6 {font-weight:normal;}
11 q:before, q:after { content:''}
strong { font-weight: bold }
12 em { font-style: italic }
13 .italic { font-style: italic }
.aligncenter { display:block; margin:0 auto; }
14 .alignleft { float:left; margin:10px; }
15 .alignright { float:right;margin:10px; }
.no-margin{margin:0px;}
16 .no-bottom{margin-bottom:0px;}
17 .no-padding{padding:0px;}
.margin-t{margin-top:22px;}
18 div { position:relative }
19 a{text-decoration:none;}
a:hover{text-decoration:underline;}
20 a:active,a:focus{outline: none;}
21
img.alignleft, img.alignright, img.aligncenter {
22 margin-bottom: 11px;
23 }
24 .alignleft, img.alignleft{
25 display: inline;
float: left;
26 margin-right: 22px;
27 }
28 .alignright, img.alignright {
29 display: inline;
float: right;
30 margin-left: 22px;
31 }
32 .aligncenter, img.aligncenter {
33 clear: both;
display: block;
34 margin-left: auto;
35 margin-right: auto;
}
36
37 article, aside, figure, footer, header, hgroup, nav, section {display: block;}
38

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


39 *{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
40 -moz-box-sizing: border-box; /* Firefox, other Gecko */
41 box-sizing: border-box; /* Opera/IE 8+ */
}
42
43 .imagen
{
44 box-shadow: 2px 2px 5px #999;
45 }
46 html{-webkit-font-smoothing:antialiased;}
47
a{color:#BA0707;}
48 a:hover{color:#BA0707;text-decoration:underline;}
49
body {
50 /*background: url(images/bgnoise_lg.png) repeat left top;*/
51 background-image: url('../Imagenes/bgnoise_lg.png');
/* background:#ffffff url("images/bgnoise_lg.png") no-repeat 0 0;*/
52 color: #3E4156;
53 font: 14px "Open Sans", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
54 -webkit-text-size-adjust: 100%;
55 line-height: 1;
width: 100%;
56 }
57
58 h1{font-size:36px;line-height:1.3em; }
59 h2{font-size:32px;line-height:1.3em;}
h3{font-size:24px;line-height:1.3em;}
60 h4{font-size:18px;line-height:1.3em;}
61 h5{font-size:16px;}
h6{font-size:14px;}
62 p{padding-bottom:11px;}
63 p,div, span{line-height:1.5em;}
.column-clear{clear:both;}
64 .clear{overflow: hidden;}
65
66 .mainWrap{width:960px;margin:0 auto;}
67
.title{margin:100px 0 20px 0;
68 text-align:center;
69 color:#3E4156;}
.back{text-align:center;}
70
71 nav{display:block;
margin-top: 30px;
72 background:#3E4156;
73 }
74
75 .menu{display:block;}
76
.menu li{display: inline-block;
77 position: relative;
78 z-index:100;}
79
80 .menu li:first-child{margin-left:0;}
81
82 .menu li a {font-weight:600;
text-decoration:none;
Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
83 padding:11px;
84 display:block;
85 color:#ffffff;
86 -webkit-transition: all 0.2s ease-in-out 0s;
87 -moz-transition: all 0.2s ease-in-out 0s;
88 -o-transition: all 0.2s ease-in-out 0s;
89 transition: all 0.2s ease-in-out 0s;
90 }
91
92 .menu li a:hover, .menu li:hover > a{color:#ffffff;
background:#9CA3DA;}
93
94 .menu ul {display: none;
95 margin: 0;
96 padding: 0;
97 width: 150px;
98 position: absolute;
top: 43px;
99
left: 0px;
10 background: #ffffff;
0 }
10
1 .menu ul li {display:block;
10 float: none;
2 background:none;
margin:0;
10
padding:0;
3 }
10 .menu ul li a {font-size:12px;
4 font-weight:normal;
10 display:block;
5 color:#797979;
10 border-left:3px solid #ffffff;
background:#ffffff;}
6
10 .menu ul li a:hover, .menu ul li:hover > a{
7 background:#f0f0f0;
10 border-left:3px solid #9CA3DA;
8 color:#797979;
10 }
9
.menu li:hover > ul{ display: block;}
110
.menu ul ul {left: 149px;
111 top: 0px;
112 }
113
114 .mobile-menu{display:none;
115 width:100%;
116 padding:11px;
background:#3E4156;
117 color:#ffffff;
118 text-transform:uppercase;
119 font-weight:600;
12 }
0 .mobile-menu:hover{background:#3E4156;
12 color:#ffffff;
1 text-decoration:none;
}
12
2
12 @media (min-width: 768px) and (max-width: 979px) {
3
Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
12 .mainWrap{width:768px;}
4 .menu ul {top:37px;}
12 .menu li a{font-size:12px;
padding:8px;}
5 }
12
6 @media (max-width: 767px) {
12
7 .mainWrap{width:auto;padding:50px 20px;}
12
8 .menu{display:none;}
12 .mobile-menu{display:block;
9 margin-top:0px;}
13
0 nav{margin:0;
13 background:none;}
1
.menu li{display:block;
13
margin:0;}
2
13 .menu li a {background:#ffffff;
3 color:#797979;
13 border-top:1px solid #e0e0e0;
4 border-left:3px solid #ffffff;}
13
.menu li a:hover, .menu li:hover > a{
5
background:#f0f0f0;
13 color:#797979;
6 border-left:3px solid #9CA3DA;}
13
7 .menu ul {display:block;
13 position:relative;
8 top:0;
left:0;
13
width:100%;}
9
14 .menu ul ul {left:0;}
0
14 }
1 footer {
14 font-size: 0.75em;
text-align: center;
2
clear: both;
14 padding-top: 50px; #151515
3 border-top: 5px solid #d0d0d0;
14 /*color: #ccc;*/
4 color: white;
14 background-color: #2A2A2A;
5
/*background-color: #6d808f;*/
14 }
6 @media (max-width: 480px) {
14
7 }
14
8
14 @media (max-width: 320px) {
}
9
15 /* Mvil -481 */
0 /* Tabletas +480-671 */
15 @media only screen and (max-width:670px) {
Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
1 main article img {
15 height: auto;
2 margin-left: .8em;
margin-bottom: .6em;
15 max-width: 92%;
3 }
15 }
4
15
5
15
6
15
7
15
8
15
9
16
0
16
1
16
2
16
3
16
4
16
5
16
6
16
7
16
8
16
9
17
0
17
1
17
2
17
3
17
4
17
5
17
6
17
7
17
8
Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
17
9
18
0
18
1
18
2
18
3
18
4
18
5
18
6
18
7
18
8
18
9
19
0
19
1
19
2
19
3
19
4
19
5
19
6
19
7
19
8
19
9
20
0
20
1
20
2
20
3
20
4
20
5
20
Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
6
20
7
20
8
20
9
21
0
211
21
2
21
3
21
4
21
5
Listado No. 9: Listado del CSS: styles.css
7. Tambin requeriremos un CSS especficamente para el diseo de los botones del aplicativo.
Este se llamar botones.css y el cdigo respectivo se muestra en listado No. 10.

1 .button {
background: #006699;
2 border: none;
3 color: #ffffff;
font: 13px Tahoma, Arial, sans-serif;
4 padding: 10px 15px;
5 text-decoration: none;
cursor: pointer;
6 border: 1px solid #333;
7 letter-spacing: 1px;
/**** Sombra de texto ****/
8 text-shadow: 0px -1px 0px #333333;
9 /**** Bordes redondeados ****/
/* W3C */
10 border-radius: 5px;
11 /* Firefox */
-moz-border-radius: 5px;
12 /**** Degradados ****/
13 /* Chrome 1-9 and Safari 4-5.0 */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0,
14 #8b8b8b), color-stop(0.5, #707070), color-stop(0.5, #5e5e5e), color-stop(1,
15 #777777));
/* Chrome 10+ Safari 5.1+ Mobile Safari */
16 background-image: -webkit-linear-gradient(top, #8b8b8b, #707070 50%, #5e5e5e
17 50%, #777777);
/* Firefox 3.6+ */
18 background-image: -moz-linear-gradient(top, #8b8b8b, #707070 50%, #5e5e5e
19 50%, #777777);
/* Opera 11.10+ */
20 background-image: -o-linear-gradient(top, #8b8b8b, #707070 50%, #5e5e5e 50%,
21 #777777);
/* W3C */
22 background-image: linear-gradient(top, #8b8b8b, #707070 50%, #5e5e5e 50%,
23 #777777);
}

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


24 .button:hover {
/* Chrome 1-9 and Safari 4-5.0 */
25 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0,
26 #5d5d5d), color-stop(0.5, #424242), color-stop(0.5, #383838), color-stop(1,
#535353));
27 /* Chrome 10+ Safari 5.1+ Mobile Safari */
28 background-image: -webkit-linear-gradient(top, #5d5d5d, #424242 50%, #383838
50%, #535353);
29 /* Firefox 3.6+ */
30 background-image: -moz-linear-gradient(top, #5d5d5d, #424242 50%, #383838
50%, #535353);
31 /* Opera 11.10+ */
32 background-image: -o-linear-gradient(top, #5d5d5d, #424242 50%, #383838 50%,
#535353);
33 /* W3C */
34 background-image: linear-gradient(top, #5d5d5d, #424242 50%, #383838 50%,
#535353);
35 }
36 .button:active {
/* Chrome 1-9 and Safari 4-5.0 */
37 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0,
38 #000000), color-stop(0.05, #2b2b2b), color-stop(0.5, #434343), color-stop(1,
#3e3e3e));
39 /* Chrome 10+ Safari 5.1+ Mobile Safari */
40 background-image: -webkit-linear-gradient(top, #000000, #2b2b2b 5%,
#434343 50%, #3e3e3e);
41 /* Firefox 3.6+ */
42 background-image: -moz-linear-gradient(top, #000000, #2b2b2b 5%, #434343
50%, #3e3e3e);
43 /* Opera 11.10+ */
44 background-image: -o-linear-gradient(top, #000000, #2b2b2b 5%, #434343
50%, #3e3e3e);
45 /* W3C */
46 background-image: linear-gradient(top, #000000, #2b2b2b 5%, #434343 50%,
#3e3e3e);
47 }
48
49
50
51
52
53
54
55
56
57
58
Listado No. 10: Listado del CSS: botones.css

8. Existen otros requerimientos para la implementacin de esta aplicacin que constituyen


software open source que reutilizaremos. Entre estas estn font-awesome, que son libreras
que se descargan desde https://fortawesome.github.io/Font-Awesome/. En esta librera se

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


encuentran recursos tales como iconos, script y css reutilizables. Estos archivos se les
facilitar.
9. Una vez creado el archivo styles.css y utilitario.js, vamos a crear dos pginas maestras:
MasterPage.master y ContentPage.Master. La primera servir para crear la pgina principal
del aplicativo. La segunda ser para las pginas de contenido del sitio. El listado 9 muestra el
cdigo requerido para la pgina maestra PaginaMaestra.master: El listado No. 11 muestra el
cdigo.
1 <%@ Master Language="C#" AutoEventWireup="true"
CodeFile="PaginaMaestra.master.cs" Inherits="PaginaMaestra" %>
2 <!DOCTYPE html>
3 <html lang="es">
<head>
4 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
5 <meta charset="utf-8">
<title>Sistema de Administracin de Estudiantes y Profesores</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <link href="CSS/style.css" rel="stylesheet" />
<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
9 type="text/javascript" ></script>
<script src="Scripts/menu.js"></script>
10
11 </head>
<body>
12 <div class="mainWrap">
13 <a id="touch-menu" class="mobile-menu" href="#"><i class="icon-
reorder"></i>Menu</a>
14 <nav>
15 <ul class="menu">
<li><a href="inicio.aspx"><i class="icon-home"></i>INICIO</a>
16 </li>
17 <li><a href="Estudiante.aspx"><i class="icon-user"></i>Estudiantes</a>
<li><a href="#"><i class="icon-user"></i>Profesores</a>
18 <li><a href="#"><i class="icon-building"></i>Universidades</a>
19 <li><a href="#"><i class="icon-building"></i>Centros universitarios</a>
<li><a href="#"><i class="icon-search"></i>Consultas</a>
20 <li><a href="#"><i class="icon-envelope"></i>Contactenos</a>
21 </li>
</ul>
22 </nav>
23 <main>
<article>
24 <h1>Universidad Estatal a Distancia (UNED)</h1>
25 <p>Este sitio web es para la gestin de <a
href="http://www.acme.edu/graduados.html" target="_blank">estudiantes</a> de
26 la <a href="http://www.uned.ac.cr/" target="_blank">uned.ac.cr</a>, donde se
27 explica el proceso de nuestros estudiantes.</p>
<img src="imagenes/universidad.png" width="960" height="250"
28 alt="universidad">
29 <h2>Generalidades del proceso</h2>
<p>Puedes comunicarte al 4556666 para mayor informaci&oacute;n</p>
30 </article>
31 </main>
<footer>
32 <p>SAU (v2) - by @enriqueGomezJimenez</p>
33 </footer>
</div><!--end mainWrap-->
Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
34 </body>
</html>
35
36
37
38
39
40
41
42
43
Listado No. 11: Cdigo fuente de la PaginaMaestra.master

10. Esta pgina maestra deber verse tal como se muestra en la figura No. 21.

Figura No. 21: Interface de la pgina maestra PaginaMaestra.master.

11. El cdigo fuente para la PaginaContenido.master se incluye el listado No. 12.


1 <%@ Master Language="C#" AutoEventWireup="true"
CodeFile="PaginaContenido.master.cs" Inherits="PaginaContenido" %>
2 <!DOCTYPE html>
3 <html lang="es">
<head>
4 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
5 <meta charset="utf-8">
<title>Sistema de Administracin de <%--Estudiantes--%> y Profesores</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="CSS/style.css" rel="stylesheet" />
8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
9 type="text/javascript" ></script>
<%-- <script src="Script/menu.js"></script>--%>
10 <script src="Scripts/menu.js"></script>

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


11 </head>
<body>
12 <div class="mainWrap">
13 <a id="touch-menu" class="mobile-menu" href="#"><i class="icon-
reorder"></i>Menu</a>
14 <nav>
15 <ul class="menu">
<li><a href="Inicio.aspx"><i class="icon-home"></i>INICIO</a>
16 </li>
17 </ul>
</nav>
18 <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
19 <p>
<br />
20
21 </asp:ContentPlaceHolder>
<footer>
22 <p>SAU (v2) - by @enriqueGomezJimenez</p>
23 </footer>
</div><!--end mainWrap-->
24 </body>
25 </html>
26
27
28
29
30
31
Listado No. 12: Cdigo fuente de la PaginaContenido.master

12. Ahora procedamos a crear la pgina de inicio. Se denominar inicio.aspx y ser creada con la
pgina maestra PaginaMaestra.master. La visualizacin de esta pgina ser similar a la
mostrada en la figura No. 18. Puedes utilizar tambin un men responsive, adaptado desde el
sitio http://www.flashuser.net/responsive-flat-menu-tutorial. La pgina de contenido tendr
una interface similar a la figura No. 18.

13. Procedamos a crear ahora el formulario para el mantenimiento de estudiantes. El formulario


se denominar Estudiante. Este formulario se basar en la pgina maestra
PageContent.master. La tabla No. 1 muestra los objetos de este formulario:
Tipo de control Propiedades
Label ID: Label1
Text: Cdula
CSS Class: etiqueta
Label ID: Label2
Text: Nombre
CSS Class: etiqueta
Label ID: Label3
Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
Tipo de control Propiedades
Text: Apellidos
CSS Class: etiqueta
Label ID: Label4
Text: Telfono casa
CSS Class: etiqueta
Label ID: Label5
Text: Telfono trabajo
CSS Class: etiqueta
Label ID: Label6
Text: Telfono celular
CSS Class: etiqueta
Label ID: Label7
Text: Email
CSS Class: etiqueta
Label ID: Label8
Text: Direccin
CSS Class: etiqueta
Label ID: Label9
Text: Universidad que proviene:
CSS Class: etiqueta
Label ID: Label10
Text: Centro Universitario
CSS Class: etiqueta
TextBox ID: txtCedula
Text: empty
TextBox ID: txtNombre
Text: empty
TextBox ID: txtApellidos
Text: empty
TextBox ID: txtTelCasa
Text: empty
TextBox ID: txbTelTrabajo
Text: empty
TextBox ID: txbTelCelular
Text: empty
TextBox ID: txtEmail
Text: empty
TextBox ID: txtDireccion
Text: empty
TextMode: Multiline
DropDownList ID: drdUnProviene
DropDownList ID: drdCentroU
Button ID: btnBuscar
Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
Tipo de control Propiedades
Text: Buscar
Button ID: btnAceptar
Text: Aceptar
Visible: false
Button ID: btnCancelar
Text: Cancelar
Visible: false
Button ID: btnModificar
Text: Modificar
Visible: false
Button ID: btnEliminar
Text: Eliminar
Visible: false

El listado No. 13 muestra el cdigo HTML para el webForm para mantenimiento de estudiantes.

1 <%@ Page Title="" Language="C#" MasterPageFile="~/PaginaContenido.master"


AutoEventWireup="true"
2 CodeFile="Estudiante.aspx.cs" Inherits="Estudiante" %>
3 <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
runat="Server">
4 <link href="CSS/foundation.min.css" rel="stylesheet" />
5 <link href="CSS/style.css" rel="stylesheet" />
<script src="Scripts/foundation.min.js"></script>
6 <link href="CSS/Botones.css" rel="stylesheet" />
7 <script type = "text/javascript">
function Confirm() {
8 var confirm_value = document.createElement("INPUT");
9 confirm_value.type = "hidden";
confirm_value.name = "confirm_value";
10 if (confirm("Desea realmente realizar esta operacin?")) {
11 confirm_value.value = "Yes";
} else {
12 confirm_value.value = "No";
13 }
document.forms[0].appendChild(confirm_value);
14 }
15 </script>
<form runat="server">
16 <div class="row" style="border: 2px solid black">
17 <div class="large-12 columns">
<br />
18 <div class="row">
19 <div class="large-1 columns">Cedula:</div>
<div class="large-2 columns">
20 <asp:TextBox ID="txtCedula" runat="server"
21 placeholder="Cdula"></asp:TextBox>
</div>
22 <div class="large-9 columns">
23 <asp:Button ID="btnBuscar" runat="server" Width="100"
Text="Buscar"
24 CssClass="button" Height="40px" Style="left: 0px;
25 top: 0px; height: 37px"
OnClick="btnBuscar_Click" />
26
Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
27 </div>
</div>
28 <div class="row">
29 <div class="large-1 columns">Nombre:</div>
<div class="large-2 columns">
30 <asp:TextBox ID="txtNombre" runat="server"
31 placeholder="Nombre"></asp:TextBox>
</div>
32 <div class="large-1 columns">Apellidos:</div>
33 <div class="large-8 columns">
<asp:TextBox ID="txtApellidos" runat="server"
34 placeholder="Apellidos"></asp:TextBox>
35 </div>
</div>
36 <div class="row" style="left: 1px; top: 0px">
37 </div>
<div class="row">
38 <div class="large-1 columns">Telefono Casa:</div>
39 <div class="large-2 columns">
<asp:TextBox ID="txtTelCasa" runat="server"
40 placeholder="Telfono casa"></asp:TextBox>
41 </div>
<div class="large-1 columns">Telefono Trabajo:</div>
42 <div class="large-2 columns">
43 <asp:TextBox ID="txtTelTrabajo" runat="server"
placeholder="Telfono trabajo"></asp:TextBox>
44 </div>
45 <div class="large-1 columns">Telefono Celular:</div>
<div class="large-2 columns">
46 <asp:TextBox ID="txtTelCelular" runat="server"
47 placeholder="Telfono celular"></asp:TextBox>
</div>
48 <div class="large-1 columns">Email:</div>
49 <div class="large-2 columns">
<asp:TextBox ID="txtEmail" runat="server"
50 placeholder="Email"></asp:TextBox>
51 </div>
</div>
52 <div class="row">
53 <div class="large-12 columns">
Direccin:
54 </div>
55 <div class="large-12 columns">
<asp:TextBox ID="txtDireccion" runat="server"
56 TextMode="MultiLine"
57 placeholder="Direccin"></asp:TextBox>
</div>
58 </div>
59 <div class="row">
<div class="large-3 columns">Universidad que proviene:</div>
60 <div class="large-9 columns">
61 <asp:DropDownList ID="drdUnProviene" runat="server"
Height="40px" Width="195px">
62 </asp:DropDownList>
63 </div>
</div>
64 <div class="row">
65 <div class="large-3 columns">Centro Universitario:</div>
<div class="large-9 columns" style="left: 0px; top: 0px">
66 <asp:DropDownList ID="drdCentroU" runat="server"
67 Height="40px" Width="194px">
</asp:DropDownList>
68 </div>
Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
69 </div>
<div class="row">
70 <div class="large-2 columns">
71 </div>
<div class="large-2 columns">
72 <asp:Button ID="btnAgregar" runat="server"
73 Text="Agregar" CssClass="button"
Height="40px" Width="150px"
74 OnClick="btnAgregar_Click"
75 Style="left: 0px; top: 0px"
Enabled="False"></asp:Button>
76 </div>
77 <div class="large-2 columns">
<asp:Button ID="btnModificar" runat="server"
78 Text="Modificar" CssClass="button"
79 Height="40px" Width="150px" Enabled="False"
OnClientClick="Confirm()"
80 OnClick="btnModificar_Click"></asp:Button>
81 </div>
<div class="large-2 columns">
82 <asp:Button ID="btnEliminar" runat="server"
83 Text="Eliminar" CssClass="button"
Height="40px" Width="150px" Enabled="False"
84 OnClientClick="Confirm()"
85 OnClick="btnEliminar_Click"></asp:Button>
</div>
86 <div class="large-2 columns">
87 <asp:Button ID="btnCancelar" runat="server"
Text="Cancelar" CssClass="button"
88 Height="40px" Width="150px"
89 OnClientClick="limpiarCajasTexto()"
Visible="False"
90 OnClick="btnCancelar_Click"></asp:Button>
91 </div>
<div class="large-2 columns">
92 </div>
93 </div>
</div>
94 </div>
95 </form>
</asp:Content>
96
97
98
99
10
0
10
1
10
2
10
3
10
4
10
Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
5
10
6
10
7
10
8
10
9
110
111
112
113
114

Listado No. 13: HTML para la generacin de la interface de Estudiantes.aspx

La figura No. 22 muestra, en tiempo de diseo, lo generado mediante el listado

Figura No. 22: Formulario Web: Estudiantes.

14. El listado del cdigo fuente de este formulario se muestra en el listado No. 14.

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


1 using System;
using System.Collections.Generic;
2 using System.Linq;
3 using System.Web;
using System.Web.UI;
4 using System.Web.UI.WebControls;
5 public partial class Estudiante : System.Web.UI.Page
{
6 wcfEstudiante.EstudianteClient estudiante = new
7 wcfEstudiante.EstudianteClient();
wcfUniversidad.UniversidadClient universidad = new
8 wcfUniversidad.UniversidadClient();
9 wcfCentrosUniversitarios.CentrosUniversitariosClient centros = new
wcfCentrosUniversitarios.CentrosUniversitariosClient();
10 List<CapaBE.Estudiante> lstEstudiante = new List<CapaBE.Estudiante>();
11 CapaBE.Estudiante objEstudiante = new CapaBE.Estudiante();
private void cargarUniversidades()
12 {
13 List<CapaBE.Universidad> lstUniversidad = new
List<CapaBE.Universidad>();
14 lstUniversidad = universidad.listar();
15 drdUnProviene.DataSource = lstUniversidad;
drdUnProviene.DataValueField = "UniversidadID"; //"key"
16 drdUnProviene.DataTextField = "NOmbre"; //"value"
17 drdUnProviene.DataBind();
drdUnProviene.SelectedIndex = 0;
18 }
19 private void cargarCentrosUniversitarios()
{
20 List<CapaBE.centrosUniversitarios> lstCentros = new
21 List<CapaBE.centrosUniversitarios>();
lstCentros = centros.listar();
22 drdCentroU.DataSource = lstCentros;
23 drdCentroU.DataValueField = "CentroUniversitarioID"; //"key"
drdCentroU.DataTextField = "NombreCentro"; //"value"
24 drdCentroU.DataBind();
25 drdCentroU.SelectedIndex = 0;
}
26 private void LimpiarControl(ControlCollection controles)
27 {
foreach (Control control in controles)
28 {
29 if (control is TextBox)
((TextBox)control).Text = string.Empty;
30 else if (control is DropDownList)
31 ((DropDownList)control).ClearSelection();
else if (control is RadioButtonList)
32 ((RadioButtonList)control).ClearSelection();
33 else if (control is CheckBoxList)
((CheckBoxList)control).ClearSelection();
34 else if (control is RadioButton)
35 ((RadioButton)control).Checked = false;
else if (control is CheckBox)
36 ((CheckBox)control).Checked = false;
37 else if (control.HasControls())
//Esta linea detcta un Control que contenga otros Controles
38 //As ningn control se quedar sin ser limpiado.
39 LimpiarControl(control.Controls);
}
40 }
41 private void deshabilitarBotones()
{
42 btnCancelar.Visible = false;
Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
43 btnAgregar.Enabled = false;
btnModificar.Enabled = false;
44 btnEliminar.Enabled = false;
45 txtCedula.ReadOnly = false;
LimpiarControl(this.Controls);
46 this.txtCedula.Focus();
47 }
48 protected void Page_Load(object sender, EventArgs e)
49 {
if (!Page.IsPostBack)
50 {
51 txtCedula.Attributes.Add("onkeypress",
"EnterEvent(event,this);");
52 cargarUniversidades();
53 cargarCentrosUniversitarios();
}
54 }
55
protected void btnBuscar_Click(object sender, EventArgs e)
56 {
57 txtCedula.ReadOnly = true;
lstEstudiante = estudiante.buscarEstudiante(txtCedula.Text);
58 foreach (CapaBE.Estudiante regis in lstEstudiante)
59 {
txtNombre.Text = regis.Nombre;
60 txtApellidos.Text = regis.Apellidos;
61 txtDireccion.Text = regis.Direccion;
txtTelCasa.Text = regis.Telcasa;
62 txtTelCelular.Text = regis.Telcelular;
63 txtTelTrabajo.Text = regis.Teltrabajo;
txtEmail.Text = regis.Email;
64 ubicarUniversidad(regis.Universidadid);
65 ubicarCentroU(regis.Centrouniversitarioid);
btnAgregar.Enabled = false;
66 btnModificar.Enabled = true;
67 btnEliminar.Enabled = true;
btnCancelar.Visible = true;
68 }
69 if (lstEstudiante.Count == 0)
{
70 btnCancelar.Visible = true;
71 btnAgregar.Enabled = true;
btnEliminar.Enabled = false;
72 btnModificar.Enabled = false;
73 txtNombre.Focus();
74 }
75 }
private void ubicarCentroU(String centroU)
76
{
77 int i = 0;
78 foreach (ListItem item in drdCentroU.Items)
79 {
80 string valor;
81 valor = item.Value;
82 if (valor.Equals(centroU))
drdCentroU.SelectedIndex = i;
83 i++;
84 }
85 }
86 private void ubicarUniversidad(String UniversidadId)
87 {
88 int i = 0;
Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
89 foreach (ListItem item in drdUnProviene.Items)
90 {
91 string valor;
valor = item.Value;
92 if (valor.Equals(UniversidadId))
93 drdUnProviene.SelectedIndex = i;
94 i++;
95 }
96 }
97 protected void agregarRegistro()
98 {
try{
99 objEstudiante.Cedula = txtCedula.Text;
100 objEstudiante.Nombre = txtNombre.Text;
101 objEstudiante.Apellidos = txtApellidos.Text;
102 objEstudiante.Direccion = txtDireccion.Text;
103 objEstudiante.Telcasa = txtTelCasa.Text;
104 objEstudiante.Email = txtEmail.Text;
objEstudiante.Email2 = txtEmail.Text;
105
objEstudiante.Telcelular = txtTelCelular.Text;
106 objEstudiante.Teltrabajo = txtTelTrabajo.Text;
107 objEstudiante.Universidadid = drdUnProviene.SelectedValue;
108 objEstudiante.Centrouniversitarioid = drdCentroU.SelectedValue;
109 estudiante.insertarEstudiante(objEstudiante);
110 estudiante.actualizarEstudiante(objEstudiante);
111 }
catch (Exception ex)
112
{
113 this.Page.ClientScript.RegisterStartupScript(this.GetType(),
114 "alert", "alert('Ocurri el error!')" + ex.Message, true);
115 }
116 deshabilitarBotones();
117 }
118 protected void actualizarRegistro()
{
119
try
120 {
121 objEstudiante.Cedula = txtCedula.Text;
122 objEstudiante.Nombre = txtNombre.Text;
123 objEstudiante.Apellidos = txtApellidos.Text;
124 objEstudiante.Direccion = txtDireccion.Text;
125 objEstudiante.Telcasa = txtTelCasa.Text;
objEstudiante.Teltrabajo = txtTelTrabajo.Text;
126
objEstudiante.Email = txtEmail.Text;
127 objEstudiante.Email2 = txtEmail.Text;
128 objEstudiante.Telcelular = txtTelCelular.Text;
129 objEstudiante.Universidadid = drdUnProviene.SelectedValue;
130 objEstudiante.Centrouniversitarioid = drdCentroU.SelectedValue;
131 estudiante.actualizarEstudiante(objEstudiante);
132 }
catch (Exception ex)
133 {
134 this.Page.ClientScript.RegisterStartupScript(this.GetType(),
135 "alert", "alert('Ocurri el error!')"+ex.Message, true);
136 }
137 deshabilitarBotones();
138 }
139 protected void eliminarRegistro()
{
140 try
141 {
142 estudiante.eliminarEstudiante(txtCedula.Text);
143 }
Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.
144 catch(Exception ex)
145 {
146 this.Page.ClientScript.RegisterStartupScript(this.GetType(),
"alert", "alert('Ocurri el error!')" + ex.Message, true);
147 }
148 deshabilitarBotones();
149 }
150
151 protected void btnAgregar_Click(object sender, EventArgs e)
152 {
153 agregarRegistro();
}
154
155 protected void btnModificar_Click(object sender, EventArgs e)
156 {
157 string confirm = Request.Form["confirm_value"];
158 if (confirm == "Yes")
159 {
actualizarRegistro();
160
}
161 deshabilitarBotones();
162 }
163
164 protected void btnCancelar_Click(object sender, EventArgs e)
165 {
166 deshabilitarBotones();
}
167
168 protected void btnEliminar_Click(object sender, EventArgs e)
169 {
170 string confirm = Request.Form["confirm_value"];
171 if (confirm == "Yes")
172 {
173 eliminarRegistro();
}
174
deshabilitarBotones();
175 }
176 }
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
Listado No. 14: Cdigo del formulario: Estudiante.aspx.

15. La ejecucin de este formulario ser como se muestra en la figura No. 23.

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.


Figura No. 23: Ejecucin del formulario Web: Estudiantes.

Ya tenemos funcionando nuestro mantenimiento de estudiantes. Ahora procede a crear el


mantenimiento de Universidades y Centros Universitarios, considerando lo explicado hasta ahora.
Tiempo: 45 a 60 minutos.

Taller de Programacin en capas Prof. Mag. Enrique Gmez Jimnez, 2016.