Aplicacion ASP

Carrera Profesional de Computación e Informática Lenguaje de
Programación
Desarrollo de la Aplicación Importaciones Neptuno
El sitio web debe permitir la venta por internet y estar habilitado para
• Registrar a cada cliente
• Validar al cliente
• Mostrar un catalogo de los productos en venta
• Generar un carrito de compras y permitir su administración
• Disponer de una pasarela de pago
• Disponer de un módulo de administración y mantenimiento del sitio
Preparación el escenario de trabajo

1 Creación del directorio de trabajo
Crear en su unidad de trabajo la carpeta AplicacionASP
Inicie SQL Server 2008 y adjunte la base de datos cedido por el profesor del
curso
2 Creación del proyecto en Visual Studio 2008
Inicie Visual Studio, Nuevo, Proyecto web, Neptuno
3 Definición del webform
El layout será el siguiente
Logotipo Imagen
Categorías Contenido
4 Agregar las imágenes

Crear la carpeta imagenes y agregar las imágenes entregadas por el profesor
jjlarico@live.com Página 1 Julio Javier Larico Tipula

Programación
5 Creación del conjunto de marcos
Eliminar la Página default.aspx

Agregar nuevo, elemento, HTML page cambiar de nombre a inicio.html
6 Cambia r a la vista código y agregar lo siguiente
</head>
<frameset rows="110,*" frameborder="1" framespacing="0">
<frameset cols="195,*">
<frame name="Logotipo" src="logotipo.htm" scrolling="no">
<frame name="Imagen" src="ImagenLema.htm" scrolling="no">
</frameset>
<frameset cols="95,*">
<frame name="categorias" src="categorias.aspx">
<frame name="contenido" src="presentacion.htm">
</frameset>
</html>
7 Guarde y ejecute la página inicio.htm

Programación
8 Muestra de la identificación de marca de la empresa, Página logotipo.htm

Añada al proyecto web una nueva Página htm de nombre logotipo.htm
9 Estando en la página logotipo.htm cambia a la vista código y agregar lo siguiente
<body>
<img src="imagenes/Neptuno.jpg" alt="Produtos gourmet para el mundo" height=100>
</body>
10 Grabar el proyecto y ejecute la Página inicio.htm
Debe mostrar el logotipo agregar en la página logotipo.htm

Programación
11 Muestra de la imagen lema. Página imagenlema.htm
Añada un nuevo, elemento al proyecto web, html page ponga como nombre ImagenLema.htm
12 Estando en la Página ImagenLema.htm cambie a la vista código
<body>
<img src="imagenes/Comunicandonos.jpg" width=580 >
</body>
13 Guarde su proyecto y ejecute la página inicio.htm

Programación
14 Creación de la página de presentación del sitio. Página presentación.htm
Agregar nuevo, elemento, Page html: presentación.htm
15 Cambiar a la vista código y agregar lo siguiente
<body>
<p>Somos la empresa lider en comercilización de productos

alimenticios exóticos y le presentamos este sitio para que pueda
realizar sus transacciones desde la comodidad de su escritorio.
<p>Puede consultar libremente nuestro catálogo General de Productos

<a href="CatalogoProductos.aspx?categoria=Todas"><img src ="imagenes/CofreDorado.gif"
alt ="Catalogo General" border="1" align="middle" width="47" height="50">
</a>
<p>Registrese en nuestra página <a href="NuevoCliente.aspx">

<img src="imagenes/OjoVigilante.gif" alt="Cliente Nuevo" border="0" align="middle"
width="32" height ="31">
</a>
y aproveche las ventajas de nuestros asociados
<p>Para mayor información <a href ="mailto:Consultas@neptuno.com? subject=Informacion

adicional">
<img src="imagenes/Correo.gif" border="1" alt="Consultenos sin compromiso" align="middle"
width="50" height="50">
</a>
Comuníquese con nosotros
</body>
16 Guarde todo y ejecute la página inicio.htm

Programación
17 Preparación del Catalogo de Productos de la empresa

Creación de la lista de precios
En SQL Server 2008, ejecute el siguiente código
USE Nwind
go
CREATE VIEW v_ListaPrecios

AS
SELECT IdProducto, NombreProducto, IdCategoría, CantidadPorUnidad, PrecioUnidad
FROM productos
go
SELECT * FROM v_ListaPrecios

Go

Programación
18 Modificación de la tabla Categorías

Ejecute el siguiente código
Use NWIND
Go
ALTER TABLE categorías DROP COLUMN Imagen

go
-- Cambia algunos nombres de categoría

UPDATE categorías SET NombreCategoría = 'Salsas'
WHERE IdCategoría = 2
UPDATE categorías SET NombreCategoría = 'Cereales'
UPDATE categorías SET NombreCategoría = 'Vegetales'
UPDATE categorías SET NombreCategoría = 'Pescados'
Go
19 Creación del menú de categorias de Productos. Página categorías.aspx
Cambiar a la vista código y agregar el siguiente código en la seccion head
<head runat="server">
<title>Página sin título</title>
<base target="contenido">
</head>
Agregar el siguiente código en la sección body

Programación
<form id="form1" runat="server">

<div>
<asp:datalist ID="dlCategorias" BorderWidth="0" runat ="server">
<itemTemplate>
<table align="center">
<tr>
<td width="50" align ="center">
<a href ='<%# databinder.eval(container.dataitem,"idCategoría","catalogoproductos.aspx?
categoria={0}") %>'>
<img src='<%# databinder.eval(container.dataitem,"idcategoría","Imagenes/cat{0}.gif")%>'
width=48 height=48 border=1>
</a>
<%#DataBinder.Eval(Container.DataItem, "NombreCategoría")%>
<br>
</td>
</tr>
</table>
</ItemTemplate>
</asp:datalist>
</div>
</form>
20 Cambiar al modo diseño y hacer doble clic sobre un área libre para agregar el siguiente
código
Imports System.Data.SqlClient
Partial Public Class categorias
Inherits System.Web.UI.Page
Protected Sub Page_Load( ) Handles Me.Load

If Not (Page.IsPostBack) Then
Dim ds As DataSet
Dim cn As SqlConnection
Dim da As SqlDataAdapter
cn = New SqlConnection("Integrated Security=SSPI;Persist Security Info=False;Initial
Catalog=Nwind;Data Source=PCSERVER")
da = New SqlDataAdapter("select idcategoría,nombrecategoría from categorías", cn)
ds = New DataSet
da.Fill(ds, "categorias")
dlCategorias.DataSource = ds.Tables("categorias").DefaultView
dlCategorias.DataBind( )
End If
End Sub
End Class
Guarde y ejecute el proyecto

Programación
21 Creación de la página que genera el catalogo de productos. Página

CatalogoProductos.aspx
Agregar al proyecto una nueva página y grabar con nombre CatalogoProductos.aspx
Estando en la vista código de la Página CatalogoProductos.aspx agregar lo siguiente
<form id="form1" runat="server">

<div>
<asp:datalist ID="dlProductos" BorderWidth ="0" runat ="server">
<HeaderTemplate>
<Table width="655" border="1" align="center" cellspacing="0">
<tr>
<td>IdProducto</td>
<td>Nombre</td>
<td>Unidad Medida</td>
<td colspan="2">Precio Unitario</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td align="center"><%# databinder.eval(container.dataitem,"IdProducto")%></td>
<td><%# databinder.eval(container.dataitem,"NombreProducto") %></td>
<td align="center"><%# databinder.eval(container.dataitem,"CantidadPorUnidad")
%></td>
<td align ="right"><%# databinder.eval(container.dataitem,"PrecioUnidad","{0:c}")
%></td>
<td align ="center"><a href='<%#
databinder.eval(container.dataitem,"IdProducto","AgregarAlCarrito.aspx?IdProducto") %>'>
<img src="imagenes/AgregarCarrito.gif" alt="Agregar al carrito" border="0">
</a>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</Table>
</FooterTemplate>
</asp:datalist>
</div>
</form>
22 Cambie a la vista diseño

Programación
23 Estando en la vista diseño de la Página CatalogoProductos.aspx, haga doble clic en la página

aspx para agregar el siguiente código.
Partial Public Class CatalogoProductos
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles

Me.Load
Dim ds As DataSet
Dim da As SqlDataAdapter
Dim categoria As String
categoria = UCase(Request.QueryString("Categoria"))
cn = New SqlConnection("Integrated Security=SSPI;Persist Security Info=False;Initial
Catalog=Nwind;Data Source=PCSERVER")
If categoria = "TODAS" Then

da = New SqlDataAdapter("select * from v_ListaPrecios", cn)
Else
da = New SqlDataAdapter("select * from v_ListaPrecios where IdCategoría='" &
categoria & "'", cn)
End If
ds = New DataSet
da.Fill(ds, "Productos")
dlProductos.DataSource = ds.Tables("Productos").DefaultView
dlProductos.DataBind()
End Sub
End Class
24 Para probar el proyecto, ejecute la página inicio.htm

Programación
25 Uso de las hojas de estilo
Agregar un nuevo Item, StyleSheet, Neptuno.css
Agregar el siguiente código
body {
background-color:#FFDAB9;
font-family:Verdana, arial;
font-size:11;
}
table, td {
font-size:8pt;
font-family:Verdana;
}
.titulo {
text-align :center ;
font-size:11pt;
font-weight :bold ;
}
.subtitulo {
text-align :center ;
font-size :8pt;
font-weight:bold;
}
.tituloIzquierdo {
text-align:left ;
font-size :11pt;
font-weight :bold ;
}
.tituloDerecho {
text-align :right ;
font-size:11pt;
font-weight :bold ;
}
.tituloMenor
{
text-align:center;
font-size :8pt;
font-weight :bold ;
}
.tituloIzqMenor {
text-align :left;
font-size :8;
font-weight :bold;
}
.tituloDerMenor
{
text-align:right ;
font-size :8pt;
font-weight :bold;
}
A:link {

Programación
color:Blue ;
text-decoration :none;
}
A:visited {
color:Red;
text-decoration :none;
}
A:hover {
color:Maroon;
text-decoration :underline;
}
input
{
font-size:9pt;
font-family:Verdana ;
}
.boton {
font-size :9pt;
font-family :Verdana ;
font-weight :bold;
}
26 Aplicación de la hoja de estilo a la Página logotipo.htm
<head>
<title>Desarrollado por Julio Larico</title>
<link href ="neptuno.css" rel="Stylesheet" type ="text/css" >
</head>
27 De igual modo, aplicar la hoja de estilo a la Página ImagenLema.htm,

Presentacion.htm,Categorias.aspx y CatalogoProductos.aspx
28 Guarde los cambios y ejecute la aplicación. (inicio.htm)

Programación
29 Registro de un nuevo cliente
Para continuar con el presente proyecto, es necesario modificar la base de datos, tabla clientes.
Para ello siga las instrucciones del docente.
Creación de la página de Registro de Nuevo Cliente. NuevoCliente.aspx
Agregar, Nuevo Item, Web Form
30 Situar el cursor dentro del área div e insertar una tabla con la siguiente configuración (21 col)

Programación
31 Diseñar lo siguiente
32 Cambiar las propiedades de acuerdo a la siguiente tabla
Objeto Propiedad Id MaxLength

Textbox1 ID txtNomEmp 40
Textbox2 ID txtID 5
Textbox3 ID txtDir 60
Textbox4 ID txtCiu 15
Textbox5 ID txtReg 15
Textbox6 ID txtCodPos 10
Textbox7 ID txtPais 15
Textbox8 ID txtTel 24
Textbox9 ID txtFax 24
Textbox10 ID txtNomCon 30
Textbox11 ID txtCar 30
Textbox12 ID txtEmail 40
Textbox13 ID txtPass 20

Programación
33 Para agregar el botón, haga clic en dicha celda, cambie a la vista código y escribir lo
siguiente
<input type="submit" value="Aceptar" onserverclick="RegistrarCliente_Click" class="boton"

runat="server" />
34 Combinar la última fila
35 Ubicar el cursor en la última fila, cambiar a la vista código y agregar lo siguiente

<asp: Label ID="Mensaje" runat="server" Text="Label">
</asp:Label>
36 Cambie a la vista diseño, haga doble clic sobre el formulario web para abrir la vista código
en el archivo NuevoCliente.aspx.vb
Importar el espacio de nombres

37 En declaraciones agregar el siguiente codigo

Dim strCon As String
38 En el evento load de la página agregar lo siguiente

Protected Sub Page_Load( ) Handles Me.Load
strCon = "Data source=PCSERVER; Initial Catalog=Nwind; Integrated Security=SSPI"
cn = New SqlConnection(strCon)
End Sub
39 Defina el procedimiento RegistrarCliente_Click que sera invocado por el boton Aceptar del
formulario
40 Agregar el siguiente código para el procedimiento RegistrarCliente_Click
Sub RegistrarCliente_Click(ByVal sender As Object, ByVal e As EventArgs)

If Not (Request.Form Is "") Then
Dim comandoSQL As SqlCommand
If txtNomEmp.Text = "" Then
Mensaje.Text = "Error: El nombre es obligatorio"
Mensaje.ForeColor = Drawing.Color.Red
Return

Programación
End If
Dim strInsert As String = "Insert into Clientes(Idcliente,NombreCompañía

,NombreContacto,CargoContacto,Dirección,Ciudad,Región,CódPostal,País,Teléfono,Fax,Email
,Clave)
values(@Id,@NomEmp,@NomCon,@Car,@Dir,@Ciu,@Reg,@CodPos,@Pais,@Tel,@Fax,@
Email,@Clave)"
comandoSQL = New SqlCommand(strInsert, cn)
comandoSQL.Parameters.Add(New SqlParameter("@Id", SqlDbType.NVarChar, 5))

comandoSQL.Parameters("@Id").Value = txtD.Text
comandoSQL.Parameters.Add(New SqlParameter("@NomEmp",
SqlDbType.NVarChar, 40))
comandoSQL.Parameters("@NomEmp").Value = txtNomEmp.Text
comandoSQL.Parameters.Add(New SqlParameter("@NomCon", SqlDbType.NVarChar,

30))
comandoSQL.Parameters("@NomCon").Value = txtNomCon.Text
comandoSQL.Parameters.Add(New SqlParameter("@Car", SqlDbType.NVarChar, 30))

comandoSQL.Parameters("@Car").Value = txtCar.Text
comandoSQL.Parameters.Add(New SqlParameter("@Dir", SqlDbType.NVarChar, 60))

comandoSQL.Parameters("@Dir").Value = txtDir.Text
comandoSQL.Parameters.Add(New SqlParameter("@Ciu", SqlDbType.NVarChar, 15))

comandoSQL.Parameters("@Ciu").Value = txtCiudad.Text
comandoSQL.Parameters.Add(New SqlParameter("@Reg", SqlDbType.NVarChar, 15))

comandoSQL.Parameters("@Reg").Value = txtRegion.Text
comandoSQL.Parameters.Add(New SqlParameter("@CodPos", SqlDbType.NVarChar,

10))
comandoSQL.Parameters("@CodPos").Value = txtCodPos.Text
comandoSQL.Parameters.Add(New SqlParameter("@Pais", SqlDbType.NVarChar, 15))

comandoSQL.Parameters("@Pais").Value = txtPais.Text
comandoSQL.Parameters.Add(New SqlParameter("@Tel", SqlDbType.NVarChar, 24))

comandoSQL.Parameters("@Tel").Value = txtTel.Text
comandoSQL.Parameters.Add(New SqlParameter("@Fax", SqlDbType.NVarChar, 24))

comandoSQL.Parameters("@Fax").Value = txtFax.Text
comandoSQL.Parameters.Add(New SqlParameter("@Email", SqlDbType.NVarChar,

40))
comandoSQL.Parameters("@Email").Value = txtEmail.Text
comandoSQL.Parameters.Add(New SqlParameter("@Clave", SqlDbType.NVarChar,

20))
comandoSQL.Parameters("@Clave").Value = txtPass.Text
comandoSQL.Connection.Open()

Programación
Try
comandoSQL.ExecuteNonQuery()
Mensaje.Text = "Registro añadido"
Catch ex As Exception
Mensaje.Text = "Error" & ex.Message
Mensaje.ForeColor = Drawing.Color.Red
End Try
comandoSQL.Connection.Close()
End If
End Sub
Guarde y ejecute su proyecto. Inicio.htm

Programación
Congratulaciones….
Ahora nos queda implementar el Carrito de Compras.
Eso lo veremos en la segunda parte del Proyecto.

Aplicacion ASP

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Aplicacion ASP

Transféré par

Droits d'auteur :

Formats disponibles

Carrera Profesional de Computación e Informática Lenguaje de

Desarrollo de la Aplicación Importaciones Neptuno

Preparación el escenario de trabajo

3 Definición del webform

El layout será el siguiente

4 Agregar las imágenes

jjlarico@live.com Página 1 Julio Javier Larico Tipula

5 Creación del conjunto de marcos

Eliminar la Página default.aspx

6 Cambia r a la vista código y agregar lo siguiente

7 Guarde y ejecute la página inicio.htm

jjlarico@live.com Página 2 Julio Javier Larico Tipula

8 Muestra de la identificación de marca de la empresa, Página logotipo.htm

9 Estando en la página logotipo.htm cambia a la vista código y agregar lo siguiente

10 Grabar el proyecto y ejecute la Página inicio.htm

Debe mostrar el logotipo agregar en la página logotipo.htm

jjlarico@live.com Página 3 Julio Javier Larico Tipula

11 Muestra de la imagen lema. Página imagenlema.htm

12 Estando en la Página ImagenLema.htm cambie a la vista código

13 Guarde su proyecto y ejecute la página inicio.htm

jjlarico@live.com Página 4 Julio Javier Larico Tipula

14 Creación de la página de presentación del sitio. Página presentación.htm

Agregar nuevo, elemento, Page html: presentación.htm

15 Cambiar a la vista código y agregar lo siguiente

<p>Somos la empresa lider en comercilización de productos

<p>Puede consultar libremente nuestro catálogo General de Productos

<p>Registrese en nuestra página <a href="NuevoCliente.aspx">

y aproveche las ventajas de nuestros asociados

<p>Para mayor información <a href ="mailto:Consultas@neptuno.com? subject=Informacion

Comuníquese con nosotros

16 Guarde todo y ejecute la página inicio.htm

jjlarico@live.com Página 5 Julio Javier Larico Tipula

17 Preparación del Catalogo de Productos de la empresa

CREATE VIEW v_ListaPrecios

SELECT * FROM v_ListaPrecios

jjlarico@live.com Página 6 Julio Javier Larico Tipula

18 Modificación de la tabla Categorías

ALTER TABLE categorías DROP COLUMN Imagen

-- Cambia algunos nombres de categoría

19 Creación del menú de categorias de Productos. Página categorías.aspx

Cambiar a la vista código y agregar el siguiente código en la seccion head

Agregar el siguiente código en la sección body

jjlarico@live.com Página 7 Julio Javier Larico Tipula

<form id="form1" runat="server">

Protected Sub Page_Load( ) Handles Me.Load

Guarde y ejecute el proyecto

jjlarico@live.com Página 8 Julio Javier Larico Tipula

21 Creación de la página que genera el catalogo de productos. Página

Agregar al proyecto una nueva página y grabar con nombre CatalogoProductos.aspx

Estando en la vista código de la Página CatalogoProductos.aspx agregar lo siguiente

<form id="form1" runat="server">

22 Cambie a la vista diseño

jjlarico@live.com Página 9 Julio Javier Larico Tipula

23 Estando en la vista diseño de la Página CatalogoProductos.aspx, haga doble clic en la página

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles

If categoria = "TODAS" Then

24 Para probar el proyecto, ejecute la página inicio.htm

jjlarico@live.com Página 10 Julio Javier Larico Tipula

25 Uso de las hojas de estilo

Agregar un nuevo Item, StyleSheet, Neptuno.css

Agregar el siguiente código

jjlarico@live.com Página 11 Julio Javier Larico Tipula

26 Aplicación de la hoja de estilo a la Página logotipo.htm