You are on page 1of 54

UNIDAD 3 PASO 7 EVALUACIÓN FINAL POR POA

VISUAL BASIC AVANZADO

TUTOR:

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA CEAD JOSE ACEVEDO Y GOMEZ INGENIERIA DE SISTEMAS BOGOTA D.C

2017

INTRODUCTION

In step 7 we will do the final project which we have everything required in this last activity, the web application in asp.net, we have a start, a link with the student register, update, edit and delete, another link will be made One exam for each course, which at the end of the exam has a score of points and if I classify the test or not.

OBJECTIVE

The objective of this evaluation is to put into practice everything learned in the course of advanced visual basic, from the tools in visual basic like in ASP.NET, the functions and programming of objects.

DESARROLLO DE LA ACTIVIDAD

Paso 7- Evaluación Final por POA

La universidad Nacional Abierta y a Distancia requiere un programa de computador para el apoyo en el proceso enseñanza aprendizaje de los estudiantes de ingeniería de sistemas, este programa debe manejar un registro de estudiantes en una base de datos vía web, debe validar la entrada de la información que se ingresa a la base de datos, una vez registrado el estudiante debe seleccionar una de las áreas a estudiar como apoyo al proceso de formación, estas áreas son:

  • 1. Ingles 0, ingles 1, ingles 2.

  • 2. Bases de datos básicos. Nivel 1 y nivel 2.

  • 3. Algoritmos, introducción a la programación.

  • 4. Análisis de sistemas, diseño de sistemas.

Una vez seleccionado el tema el estudiante hace una prueba de ingreso con 5 preguntas básicas de tema seleccionado y se le muestra el resumen de la prueba. El sistema puede aprobar o no la prueba realizada. En el manejo de la base de datos se debe ingresar nuevo estudiante, borrar, consultar o modificar uno existente.

El proyecto o programa debe ser publicado en internet.

  • 1. Paso , ingresar a visual estudio y en archivo, nuevo sitio web

En mi caso le coloque el nombre de login.aspx 2. Se procede a crear el login

En mi caso le coloque el nombre de login.aspx

  • 2. Se procede a crear el login para el inicio de sesión Código de login.aspx :

<%
<%

@ Page Language="VB" AutoEventWireup="false" CodeFile="login.aspx.vb"

Inherits="login"

%>
%>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Login Alumnos</title> <link href="css.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .auto-style1 { width: 111px;

} </style> </head> <body bgColor ="#0e926c"> <H1>Login Alumnos</H1>

<form id="form1" runat="server"> <center> <div class="login_form">

<table style="width:100%;"> <tr>

<td class="auto-style1">Usuario</td> <td>

<asp:TextBox ID="usu" runat="server"></asp:TextBox> </td> <td>&nbsp;</td> </tr> <tr>

<td class="auto-style1">Password</td> <td>

<asp:TextBox ID="pas" runat="server"></asp:TextBox> </td> <td>&nbsp;</td> </tr> <tr>

<td class="auto-style1">&nbsp;</td> <td>

ConnectionString="

<%
<%

<asp:Button ID="Button1" runat="server" Text="Aceptar" /> <asp:SqlDataSource ID="SqlDataSource1" runat="server" "

$ ConnectionStrings:prologinConnectionString

%>
%>

SelectCommand="SELECT * FROM [usuario]"></asp:SqlDataSource> </td> <td>&nbsp;</td> </tr> </table> </center> </div> </form> </body> </html>

El diseño del login.aspx

< asp : TextBox ID ="usu" runat ="server"></ asp : TextBox > </ td > <

Para crear este login se insertó una tabla de 3 filas y 3 columnas en la opción tabla y luego insertar tabla

Para crear este login se insertó una tabla de 3 filas y 3 columnas en la

Al dar clic configuramos los parámetros de nuestra tabla

3. Anexamos un botón a nuestro diseño y le colocamos el nombre de aceptar
4. Luego anexamos un sqldatasource1
4. Luego anexamos un sqldatasource1
  • 4. Luego anexamos un sqldatasource1

4. Luego anexamos un sqldatasource1

Luego ingresamos a sql server y creamos nuestra base de datos, en mi caso ya la tengo creada

La cual le coloque el nombre de prologin, se crean las tablas de nombre y usuario y se insertan los datos de login

Luego ingresamos a sql server y creamos nuestra base de datos, en mi caso ya la

Luego en sqldatasource1 configuramos la base de dato ya creada

Luego ingresamos a sql server y creamos nuestra base de datos, en mi caso ya la
Luego ingresamos a sql server y creamos nuestra base de datos, en mi caso ya la

Conectamos la base de datos y le damos siguiente

Conectamos la base de datos y le damos siguiente

Se deja el chech como se muestra resaltado en amarillo y le damos siguiente

Se deja el chech como se muestra resaltado en amarillo y le damos siguiente Le damos

Le damos en consultar prueba y nos debe mostrar los datos insertado y finalizar

Procedemos a crear un nuevo ítem, que es donde después de logearse entrara a una nueva página

Procedemos a crear un nuevo ítem, que es donde después de logearse entrara a una nueva

Creamos un nuevo formulario , le colocamos le nombre que deseemos y le damos agregar

Procedemos a crear un nuevo ítem, que es donde después de logearse entrara a una nueva

En mi caso se llama default, en el botón aceptar de colocaremos el Re direccionamiento, quedando de la siguiente manera

Imports System.Data Partial Class login Inherits System.Web.UI.Page

Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles

Button1.Click

Dim numero As Integer Dim dvSql As DataView = DirectCast(SqlDataSource1.Select(DataSourceSelectArguments.Empty), DataView) If dvSql.Count > 0 Then numero = 1

End If If numero = 1 Then Session("usuario") = dvSql(0).Item(0)

Response.Redirect("Default2.aspx")

End If

End Sub

End Class

Luego procederemos a crear el Segundo link con los datos de inserción, edición, y eliminación de datos

  • 1. Ingresamos a archivo, damos clic en nuevo y luego en sitio web.

En mi caso se llama default, en el botón aceptar de colocaremos el Re direccionamiento, quedando
3. En la parte derecha le damos clic derecho y agregar un nuevo elemento
3. En la parte derecha le damos clic derecho y agregar un nuevo elemento
  • 3. En la parte derecha le damos clic derecho y agregar un nuevo elemento

4. Agregamos un formulario web forms
  • 4. Agregamos un formulario web forms

5. Insertamos una tabla En este caso se insertó de 4 filas y 2 columnas
  • 5. Insertamos una tabla

5. Insertamos una tabla En este caso se insertó de 4 filas y 2 columnas

En este caso se insertó de 4 filas y 2 columnas

6. En la primera columna colocamos los datos capturar y en cada fila los datos a
  • 6. En la primera columna colocamos los datos capturar y en cada fila los datos a lo que hace referencia la información que se va a capturar.

6. En la primera columna colocamos los datos capturar y en cada fila los datos a
8. Se despliega la db y en la carpeta tabla le damos agregar nueva tabla
8. Se despliega la db y en la carpeta tabla le damos agregar nueva tabla
9. Y agregamos los datos de las columnas y definimos el tipo de dato que se
  • 9. Y agregamos los datos de las columnas y definimos el tipo de dato que se van a ingresar y si se permiten o no valores nulos

9. Y agregamos los datos de las columnas y definimos el tipo de dato que se

10. Guardamos la db

11. En visual studio 2014 deja como predeterminado el primer campo como llave principal, de no

11. En visual studio 2014 deja como predeterminado el primer campo como llave principal, de no ser así se le asigna en las propiedades de la tabla como esta en la imagen anterior.

11. En visual studio 2014 deja como predeterminado el primer campo como llave principal, de no

12.

De damos clic derecho en la tabla que creamos y mostrar datos de la tabla

12. De damos clic derecho en la tabla que creamos y mostrar datos de la tabla
  • 13. Procederemos a ingresar datos de prueba en la tabla en los campos asignados

12. De damos clic derecho en la tabla que creamos y mostrar datos de la tabla

14. Conectar a la web l base de datos, pero primero agregamos un nuevo elemento, un formulario web forms

14. Conectar a la web l base de datos, pero primero agregamos un nuevo elemento, un
14. Conectar a la web l base de datos, pero primero agregamos un nuevo elemento, un

15. Aunque ya teníamos una , en esta lo que agregamos es primero una grid view y luego un sqldatasource

15. Aunque ya teníamos una , en esta lo que agregamos es primero una grid view
15. Aunque ya teníamos una , en esta lo que agregamos es primero una grid view

16.

En el sqldatasource le damos en comfigurar origen de datos, para conectar la db que creamos

16. En el sqldatasource le damos en comfigurar origen de datos, para conectar la db que

Seleccionamos la database.mdf

16. En el sqldatasource le damos en comfigurar origen de datos, para conectar la db que

Le damos siguiente

Le damos siguiente 17. Le damos en la opción de especificar columnas de una tabla o

17. Le damos en la opción de especificar columnas de una tabla o vista, y chech en el asterisco para que tome todos los campos de la tabla, luego nos vamos a avanzada

Le damos siguiente 17. Le damos en la opción de especificar columnas de una tabla o

Seleccionamos la primera opción y le damos aceptar

Seleccionamos la primera opción y le damos aceptar 18. En esta ventana damos consulta de prueba

18. En esta ventana damos consulta de prueba y deben salir los datos de prueba que se cargaron previamente

Seleccionamos la primera opción y le damos aceptar 18. En esta ventana damos consulta de prueba

19.

En la gridview le damos en la flechita y seleccionamos la base de dato

19. En la gridview le damos en la flechita y seleccionamos la base de dato 20.
  • 20. En el formato automático le cambiamos el tipo de diseño de la vista y se habilita los chech de habilitar edición y eliminación

19. En la gridview le damos en la flechita y seleccionamos la base de dato 20.

21.

Así nos quedara después de colocarle un nuevo formato y las opciones que seleccionamos para editar y eliminar

21. Así nos quedara después de colocarle un nuevo formato y las opciones que seleccionamos para
  • 22. En el sqldatasource en la fecha derecha de opciones seleccionamos la base de datos que creamos, esto nos permitirá insertar datos y nos aparecerá los campos que creamos en la db

21. Así nos quedara después de colocarle un nuevo formato y las opciones que seleccionamos para

23.

en la propiedades del lado derecho en la opción Defauldmode lo cambiamos por insert

23. en la propiedades del lado derecho en la opción Defauldmode lo cambiamos por insert 24.
  • 24. ya nos queda el sqldatasource de la siguiente manera , activamos los chech de inserción, edición y eliminación de datos

23. en la propiedades del lado derecho en la opción Defauldmode lo cambiamos por insert 24.
  • 25. guardamos cambios y lo ejecutamos, el cual abrirá el navegador predeterminado de visual studio, y nos mostrara los datos que se cargaron inicialmente cuando se creó la db

25. guardamos cambios y lo ejecutamos, el cual abrirá el navegador predeterminado de visual studio, y
  • 26. como se refleja en la imagen se eliminó la fila 2con la opción eliminar y en los campos vacíos del segundo cuadro ingresamos la línea 6 y 7 con datos de registros de dos nuevos usuarios

25. guardamos cambios y lo ejecutamos, el cual abrirá el navegador predeterminado de visual studio, y

27.

le damos editar y cambiaremos los datos de la fila 1

27. le damos editar y cambiaremos los datos de la fila 1 28. en esta última
  • 28. en esta última imagen vemos los datos modificados, de las opciones editar , eliminar e insertar

27. le damos editar y cambiaremos los datos de la fila 1 28. en esta última

Estos son los pasos para crear y diseñar un una aplicación web con base de datos que nos permite ingresar, borrar y modificar o editar datos de registros.

Quedando de esta manera, adicional se le agrego 4 label y 4 botones para ingresar a los exámenes

Estos son los pasos para crear y diseñar un una aplicación web con base de datos

El código de ese diseño es el siguiente:

<%
<%

@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb"

Inherits="Default2"

%>
%>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> .auto-style1 { margin-left: 40px;

} </style> </head> Bienvenidos Registre sus datos y Selecciones el Curso <body bgColor ="#0e926c"> <form id="form1" runat="server" aria-haspopup="False"> <div>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4" DataKeyNames="Cedula" DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None"> <AlternatingRowStyle BackColor="White" /> <Columns>

<asp:CommandField ShowDeleteButton="True" ShowEditButton="True" /> <asp:BoundField DataField="Cedula" HeaderText="Cedula" ReadOnly="True" SortExpression="Cedula" /> <asp:BoundField DataField="Nombre" HeaderText="Nombre" SortExpression="Nombre" /> <asp:BoundField DataField="Apellido" HeaderText="Apellido" SortExpression="Apellido" /> <asp:BoundField DataField="Codigo" HeaderText="Codigo" SortExpression="Codigo" /> </Columns> <EditRowStyle BackColor="#7C6F57" /> <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" /> <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" /> <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" /> <RowStyle BackColor="#E3EAEB" /> <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" /> <SortedAscendingCellStyle BackColor="#F8FAFA" /> <SortedAscendingHeaderStyle BackColor="#246B61" /> <SortedDescendingCellStyle BackColor="#D4DFE1" /> <SortedDescendingHeaderStyle BackColor="#15524A" /> </asp:GridView>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="

ConnectionStrings:ConnectionString

%>
%>

" DeleteCommand="DELETE FROM [Table] WHERE

<%
<%

$

[Cedula] = @Cedula" InsertCommand="INSERT INTO [Table] ([Cedula], [Nombre], [Apellido], [Codigo]) VALUES (@Cedula, @Nombre, @Apellido, @Codigo)" SelectCommand="SELECT * FROM [Table]" UpdateCommand="UPDATE [Table] SET [Nombre] = @Nombre, [Apellido] = @Apellido, [Codigo] = @Codigo WHERE [Cedula] = @Cedula">

<DeleteParameters> <asp:Parameter Name="Cedula" Type="Int32" /> </DeleteParameters> <InsertParameters> <asp:Parameter Name="Cedula" Type="Int32" /> <asp:Parameter Name="Nombre" Type="String" /> <asp:Parameter Name="Apellido" Type="String" /> <asp:Parameter Name="Codigo" Type="String" /> </InsertParameters> <UpdateParameters> <asp:Parameter Name="Nombre" Type="String" /> <asp:Parameter Name="Apellido" Type="String" /> <asp:Parameter Name="Codigo" Type="String" /> <asp:Parameter Name="Cedula" Type="Int32" /> </UpdateParameters> </asp:SqlDataSource> <asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataKeyNames="Cedula" DataSourceID="SqlDataSource1" DefaultMode="Insert" Height="50px" Width="125px"> <Fields> <asp:BoundField DataField="Cedula" HeaderText="Cedula" ReadOnly="True" SortExpression="Cedula" /> <asp:BoundField DataField="Nombre" HeaderText="Nombre" SortExpression="Nombre" /> <asp:BoundField DataField="Apellido" HeaderText="Apellido" SortExpression="Apellido" /> <asp:BoundField DataField="Codigo" HeaderText="Codigo" SortExpression="Codigo" />

<asp:CommandField ShowInsertButton="True" /> </Fields> </asp:DetailsView>

</div>

<p>

 

<h3>Selecciones el curso</h3></p>

<p>

&nbsp;</p> <asp:Label ID="lbl1" runat="server" Text="1- Ingles 0, ingles 1, ingles 2. "></asp:Label> <asp:Button ID="boton1" runat="server" Height="21px" Text="Ingresar" /> <br /> <br /> <asp:Label ID="lbl2" runat="server" Text="2- Bases de datos básicos. Nivel 1 y nivel 2."></asp:Label> <asp:Button ID="boton2" runat="server" Height="21px" Text="Ingresar" /> <br /> <div class="auto-style1"> </div> <asp:Label ID="lbl3" runat="server" Text="3- Algoritmos, introducción a la programación."></asp:Label> <asp:Button ID="boton3" runat="server" Height="21px" Text="Ingresar" /> <br /> <br /> <asp:Label ID="lbl4" runat="server" Text="4- Análisis de sistemas, diseño de sistemas."></asp:Label> <asp:Button ID="boton4" runat="server" Height="21px" Text="Ingresar" />

<p>

&nbsp;</p> <asp:Button ID="BTNINICIO1" runat="server" BackColor="#FF9900" Text="INICIO"

/>

</form>

</body>

</html>

En los botones de cada curso solo se le re direccionó a una carpeta donde están los nuevos ítem de los exámenes

Este es el código para cada botón

Partial Class Default2 Inherits System.Web.UI.Page

Protected Sub boton1_Click(sender As Object, e As EventArgs) Handles

boton1.Click

Response.Redirect("/pruebas/Default.aspx") End Sub Protected Sub boton2_Click(sender As Object, e As EventArgs) Handles

boton2.Click

Response.Redirect("/pruebas/curso2.aspx")

End Sub Protected Sub boton3_Click(sender As Object, e As EventArgs) Handles

boton3.Click

Response.Redirect("/pruebas/curso3.aspx")

End Sub Protected Sub boton4_Click(sender As Object, e As EventArgs) Handles

boton4.Click

Response.Redirect("/pruebas/curso4.aspx")

End Sub Protected Sub BTNINICIO1_Click(sender As Object, e As EventArgs) Handles

BTNINICIO1.Click

Response.Redirect("login.aspx") End Sub End Class

Se procede a crear una nueva carpeta donde colocaremos los formularios de os examenes

En mi caso le coloque el nombre de prueba

Se procede a crear una nueva carpeta donde colocaremos los formularios de os examenes En mi

Dentro de la carpeta pruebas coloque un nuevo elemento en este caso creer uno por cada curso

Se procede a crear una nueva carpeta donde colocaremos los formularios de os examenes En mi

El primero para ingles llamado default, el segundo curso2.aspx, tercero cruso3.aspx y el cuarto

curso4.aspx

El procedimiento realizado en el primer formulario llamado (Default), se aplicó la misma lógica para los demás exámenes

El primero para ingles llamado default, el segundo curso2.aspx, tercero cruso3.aspx y el cuarto curso4.aspx El

En este caso explicaremos el primero resaltado en amarillo para el cual se designó el examen de ingles

El primero para ingles llamado default, el segundo curso2.aspx, tercero cruso3.aspx y el cuarto curso4.aspx El

Para su creación se le inserto una tabla de 5 por 5

Para su creación se le inserto una tabla de 5 por 5
En la primera fila, tercera columna digitamos el nombre de EXAMEN DE INGLES y en la

En la primera fila, tercera columna digitamos el nombre de EXAMEN DE INGLES y en la cuarta columna digitamos el nombre de alumno y colocamos un textbox, la cual colocaremos el nombre del alumno

En la primera fila, tercera columna digitamos el nombre de EXAMEN DE INGLES y en la

En la segunda fila digitamos las preguntas

En la primera fila, tercera columna digitamos el nombre de EXAMEN DE INGLES y en la

En la misma fila

Le agregamos un radiobuttonlist en cada columnas de las preguntas en cada fila donde se digito la spreguntas

Le agregamos un radiobuttonlist en cada columnas de las preguntas en cada fila donde se digito

En las tareas del radiobuttonlist le damos editar elementos ..

Le agregamos un radiobuttonlist en cada columnas de las preguntas en cada fila donde se digito

Primero le damos agregar miembros el cual va incrementando de 0 en adelante, ejemplo 0,1,2,3,4 etc, después seleccionamos el primer miembro y en el lado derecho en las propiedades en Text que se encuentra resaltado se colocó la primera respuesta 1. At school y así las siguientes respuesta, de la misma manera para las demás preguntas de las 5 creadas

Primero le damos agregar miembros el cual va incrementando de 0 en adelante, ejemplo 0,1,2,3,4 etc,

Agregamos un bottton del cuadro de herramientas

Agregamos un bottton del cuadro de herramientas Le cambiamos el nombre por evaluar
Agregamos un bottton del cuadro de herramientas Le cambiamos el nombre por evaluar

Le cambiamos el nombre por evaluar

Agregamos un bottton del cuadro de herramientas Le cambiamos el nombre por evaluar

La lógica del examen se encuentra en el boton de EVALUAR, miremos el código

Partial Class pruebas_Default Inherits System.Web.UI.Page

La lógica del examen se encuentra en el boton de EVALUAR, miremos el código Partial Class

Private Property puntaje As Integer /// declaramos la variable puntaje

Protected Sub btn1_Click(sender As Object, e As EventArgs) Handles btn1.Click

puntaje = 0

// el valor inicial es de cero para puntaje

//se coloca una condición if y se llama la lista creadas enumerada segunla cantidad creada y

se le coloca un selecid index por el valor de la respuesta correcta y el valor del puntaje por

 

cada respuesta correta

 

If lista1.SelectedIndex = 1 Then puntaje = puntaje + 5 If lista2.SelectedIndex = 1 Then puntaje = puntaje + 5 If lista3.SelectedIndex = 0 Then puntaje = puntaje + 5 If lista4.SelectedIndex = 0 Then puntaje = puntaje + 5 If lista5.SelectedIndex = 2 Then puntaje = puntaje + 5

//El mensaje msgbox lo unimos al textbox donde colocamos el nombre del estudiante

 

Mas el texto de su puntaje es, mas el valor del puntaje mas el comparativo de texto que es

la suma de todas las respuestas correctas

 

MsgBox("Sr(a)" + TextBox1.Text + " su puntaje es " + Str(puntaje) + "/25", MsgBoxStyle.Information)

//esta condición el cual si es mayor o menor a 15 es la suma de las preguntas correcta

Para informar si paso o no la evaluacion

 

If puntaje < 15 Then MsgBox("Evaluacion perdida") If puntaje > 15 Then MsgBox("Evaluacion Exitosa")

End Sub

Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles

Button1.Click

Response.Redirect(" /Default2.aspx ..

Nuevo curso
Nuevo curso

") // este boton no direcciona a selecionar un

End Sub

End Class

Ejecución de la aplicación web

Ejecución de la aplicación web
Ejecución de la aplicación web
En esta parte respondemos erradamente y nos muestra el siguiente mensaje

En esta parte respondemos erradamente y nos muestra el siguiente mensaje

En esta parte respondemos erradamente y nos muestra el siguiente mensaje

CONCLUSION

In this final work we learned how to create a web application with asp.net and database, connection between several links and execution of events and objects, which was enriching, knowing the use of tools and properties for this latest project Visual basic advanced.