aplicacionasp

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 trabajo1 Creación del directorio de trabajo

Crear en su unidad de trabajo la carpeta AplicacionASPInicie SQL Server 2008 y adjunte la base de datos cedido por el profesor del curso

2 Creación del proyecto en Visual Studio 2008Inicie 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ágenesCrear la carpeta imagenes y agregar las imágenes entregadas por el profesor

[email protected] Página 1 Julio Javier Larico Tipula


5 Creación del conjunto de marcos

Eliminar la Página default.aspxAgregar 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



8 Muestra de la identificación de marca de la empresa, Página logotipo.htmAñ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



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



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 puedarealizar 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:[email protected]? 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



17 Preparación del Catalogo de Productos de la empresaCreación de la lista de preciosEn SQL Server 2008, ejecute el siguiente código

USE Nwindgo

CREATE VIEW v_ListaPreciosASSELECT IdProducto, NombreProducto, IdCategoría, CantidadPorUnidad, PrecioUnidadFROM productosgo

SELECT * FROM v_ListaPreciosGo



18 Modificación de la tabla CategoríasEjecute el siguiente código

Use NWINDGo

ALTER TABLE categorías DROP COLUMN Imagengo

-- Cambia algunos nombres de categoríaUPDATE categorías SET NombreCategoría = 'Salsas'

WHERE IdCategoría = 2UPDATE categorías SET NombreCategoría = 'Cereales'

WHERE IdCategoría = 5UPDATE categorías SET NombreCategoría = 'Vegetales'

WHERE IdCategoría = 7UPDATE categorías SET NombreCategoría = 'Pescados'

WHERE IdCategoría = 8Go

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

<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.SqlClientPartial 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 SubEnd Class

Guarde y ejecute el proyecto



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



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.

Imports System.Data.SqlClientPartial 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 cn As SqlConnection 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 SubEnd Class

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

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 { 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)



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)



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



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 nombresImports System.Data.SqlClient

37 En declaraciones agregar el siguiente codigoDim strCon As StringDim cn As SqlConnection

38 En el evento load de la página agregar lo siguienteProtected 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



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()



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



Congratulaciones….

Ahora nos queda implementar el Carrito de Compras.

Eso lo veremos en la segunda parte del Proyecto.


aplicacionasp

Documents