Ejercicio Propuesto Programación Aplicada II

Ejercicio propuesto Programación Aplicada II-2021
Estudiantes:
 Rojas Llanos, Juan Carlos

 Fernández Sangay, Jhon Freddy
Pasos requeridos:
1. Crear un proyecto/Asp.Net Core 3.0

2. Agregar Carpeta Models (Aquí irán las clases necesarias para el ejercicio propuesto: Estudiante y Record)
Estudiante:
namespace Propuesto.Models
{
public class Estudiante
{
private int _Cod;
private string _Nombre, _Apellido;
private Record _Record;
public Estudiante(int cod, string nombre, string apellido, Record record)

{
_Cod = cod;
Nombre = nombre;
Apellido = apellido;
_Record = record;
}
public Estudiante()
{
}
public int Cod { get => _Cod; set => _Cod = value; }
public string Nombre { get => _Nombre; set => _Nombre = value; }
public string Apellido { get => _Apellido; set => _Apellido = value; }
public Record Record { get => _Record; set => _Record = value; }
}
}
Record:
namespace Propuesto.Models
{
public class Record
{
private double _N1, _N2, _N3, _Promedio, _Asistencia;
public Record(double n1, double n2, double n3, double asistencia)

{
_N1 = n1;
_N2 = n2;
_N3 = n3;
_Promedio = (_N1+_N2+_N3)/3;
_Asistencia = asistencia;
}
public double N1 { get => _N1; set => _N1 = value; }

public double Promedio { get => _Promedio; set => _Promedio = value; }
public double Asistencia { get => _Asistencia; set => _Asistencia = value; }
}
}
3. Modificares el contenido del archivo _Layout.cshtml

_Layout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Estudiante</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css?v2" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
@RenderBody()
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)
</body>
</html>
4. Ahora empezaremos con el modelado del ejercicio dentro de Index.cshtml.cs

5. Primeramente, se nos solicitó Mostrar el listado de estudiantes con sus datos respectivos. Para ello crearemos Estudiantes en el modelo.
public List<Estudiante> e = new List<Estudiante>

{
new Estudiante(1,"Juan","Rojas",new Record(16,17,15,.87)),
new Estudiante(2,"Pedro","Mantilla",new Record(12,13,5,.27)),
new Estudiante(3,"Mateo","Chuque",new Record(8,17,15,.81)),
new Estudiante(4,"Luis","Arrivasplata",new Record(6,11,13,.36)),
new Estudiante(5,"Sebastian","Ocas",new Record(16,13,11,.65)),
new Estudiante(6,"Roger","Huaripata",new Record(12,11,18,.70)),
new Estudiante(7,"Jon","Ramirez",new Record(15,7,4,.21)),
new Estudiante(8,"María","Llanos",new Record(13,17,9,.99)),
new Estudiante(9,"Ana","López",new Record(6,7,5,1)),
new Estudiante(10,"Dency","García",new Record(11,14,11,.89))
};
6. Para mostrar los estudiantes en la vista se debe hacer un ajuste al diseño; creando primero las opciones solicitadas en el ejercicio. Luego
las divisiones para cada ítem. Cada uno con sus respectivos íconos.
<div class="col-12 col-md-4 d-flex flex-column justify-content-center align-content-center" id="barraL">

<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action mt-1" href="#" data-toggle="collapse" data-target="#ME" >📚 Mostrar
Estudiantes</a>
<a class="list-group-item list-group-item-action mt-1" href="#" data-toggle="collapse" data-target="#RC" >💻 Resumen de la
Clase</a>
<a class="list-group-item list-group-item-action mt-1" href="#" data-toggle="collapse" data-target="#CR" >📈 Consultar
Resultados</a>
</div>
</div>
7. Para mostrar los datos se utilizará una tabla, un foreach; mostrando por colores distintivos entre los con notas menores a 10.5 (color red) y
los mayores (color blue); también se tendrá en cuenta el formato del promedio “00.00”. Además se concatena apellidos y nombres.
<div class="col-12 col-md-8" id="datos">
<div class="collapse" id="ME">
<h1>Mostrar Estudiantes</h1>
<div class="table-responsive">
<table class="table table-hover table-striped">
<thead class="table-dark">
<tr>
<th scope="col" class="text-center">Código</th>
<th scope="col" class="text-center">Estudiante</th>
<th scope="col" colspan="3" class="text-center">Notas</th>
<th scope="col" class="text-center">Promedio</th>
<th scope="col" class="text-center">% Asistencia</th>
</tr>
</thead>
<tbody>
@foreach (var est in Model.e)
{
<tr>
<th scope="row" class="text-center">@est.Cod</th>
<td>@(est.Nombre+ " "+est.Apellido)</td>
@if (est.Record.N1 < 10.5)
{
<td class="text-danger text-center">@est.Record.N1</td>
}
else
{
<td class="text-primary text-center">@est.Record.N1</td>
}

{
}
else
{
}
{
}
else
{
}
@if (est.Record.Promedio < 10.5)
{
<td class="text-danger text-center">@est.Record.Promedio.ToString("00.00")</td>
}
else
{
<td class="text-primary text-center">@est.Record.Promedio.ToString("00.00")</td>
}
@if (est.Record.Asistencia < .7)
{
<td class="text-center text-danger">@(est.Record.Asistencia*100) %</td>
}
else
{
<td class="text-center text-primary">@(est.Record.Asistencia*100) %</td>
}
</tr>
}
</tbody>
</table>
</div>
</div>
8. Ahora de manera visual se tiene:
9. Seguidamente volveremos al modelo para trabajar el segundo punto del ejercicio: Resumen de la Clase. Con sus datos respectivos.
a. Primero el número de estudiantes:
public int NEstudiantes()

{
return e.Count();
}
b. Promedio de la asignatura:
public double PromedioAsignatura()

{
double prom = 0;
foreach (var est in e)
prom += est.Record.Promedio;
prom /= NEstudiantes();
return prom;
}
c. Estudiante con menor asistencias:
public Estudiante MasFalton()

{
double menor = 1;
Estudiante nuevo = null;
{
if (est.Record.Asistencia < menor)
{
menor = est.Record.Asistencia;
nuevo = new Estudiante(est.Cod, est.Nombre, est.Apellido, new Record(est.Record.N1, est.Record.N2,
est.Record.N3,est.Record.Asistencia));
}
}
return nuevo;
}
public string MostrarMenorAsistencia()
{
Estudiante e = MasFalton();
return e.Nombre + " " + e.Apellido + " Con un % de asistencia de: " + e.Record.Asistencia * 100 + "%";
}
10. Para visualizar la parte 2 del ejercicio trabajaremos la sección correspondiente en la vista. Se trabajará en un tabla, llamando a los
métodos ya creados en el modelo según corresponda.
<div class="collapse" id="RC">

<h1>Resumen de la Clase</h1>
<table class="table table-hover">
<tr>
<th scope="col">Número de Estudiantes:</th>
<th scope="col">Promedio General de Asignatura:</th>
<th scope="col">El Estudiante con menor % de asistencia es:</th>
</tr>
</thead>
<tbody>
<tr>
<td>@Model.NEstudiantes()</td>
<td>@Model.PromedioAsignatura().ToString("00.00")</td>
<td>@Model.MostrarMenorAsistencia()</td>
</tr>
</tbody>
</table>
</div>
</div>
11. Visualmente la parte 2 se obtiene:
12. Seguidamente se desarrollará la parte 3 del ejercicio en el modelo:
a. Se generan TempData’s para guardar los resultados solicitados desde un formulario de la vista.
[TempData]
public int Cod { get; set; }
[TempData]
public string Est { get; set; }
[TempData]
public string Prom { get; set; }
[TempData]
public string Asis { get; set; }
b. Se trabaja el método OnPost pero modificado: OnPostBuscarE validando que si el código ingresado no existe muestre “No existe”
public IActionResult OnPostBuscarE(string codE)

{
int cod = int.Parse(codE);
if(est.Cod == cod)
{
Cod = est.Cod;
Est = est.Nombre + " " + est.Apellido;
Prom = est.Record.Promedio.ToString("00.00");
Asis = (est.Record.Asistencia * 100).ToString()+"%";
break;
}
else
{
Cod = 0;
Est = "No Existe";
Prom = "No Existe";
Asis = "No Existe";
}
return Page();
}
13. Trabajamos la sección correspondiente a la parte 3 del ejercicio propuesto: Se crea un formulario, se agrega: asp-page-handler; además
de la directiva: @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers; para realizar la consulta. Validando el ingreso de datos.
<div class="collapse" id="CR">

<h1>Consultar Resultados</h1>
<form class="row g-3" id="miForm" method="post">
<div class="col-auto">
<input type="number" class="form-control" id="codEst" name="codE" placeholder="Ingrese Código" required>
</div>
<div class="col-auto">
<button type="submit" asp-page-handler="BuscarE" class="btn btn-primary mb-3" onclick="BuscarEstudiante()">Buscar
Estudiante</button>
</div>
</form>
<table class="table table-hover table-striped">
<tr>
<th scope="col">Cód</th>
<th scope="col">Estudiante</th>
<th scope="col">Promedio</th>
<th scope="col">%Asistencias</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">@Model.Cod</th>
<td>@Model.Est</td>
<td>@Model.Prom</td>
<td>@Model.Asis</td>
</tr>
</tbody>
</table>
</div>
</div>
14. Visualmente la parte 3:
Finalmente destacar que el sitio es una sola página, responsive y animada; para ello se ha utilizado
Bootstrap, CSS, JS, JQuery.
CSS:
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;1,500;1,700&display=swap');
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body {
font-family: 'Lora', serif !important;
}
h1{
font-weight:700;
color:#832121;
text-align:center;
}
p{
font-weight:500;
font-size:1.5rem;
}
a{
font-weight:400;
font-size: 1.25rem;
}
.list-group-item:hover {
background: #e9c293;
}
#barraL, #datos {
min-height: 100vh;
}
#barraL {
background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
}
#datos {
background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}
@media screen and (max-width: 750px) {
#barraL, #datos {
min-height: 20vh;
}
JS, JQuery:
$(document).ready(function () {
$('.list-group').on('click', 'a', function () {
$('.list-group-item.active').removeClass('active');
$(this).addClass('active');
});
$('.list-group-item').on('click', function () {
var toggle = $('.collapse').is(':visible');
if (toggle) {
$('.collapse').collapse('hide');
}
});
$('#miForm').submit(function () {
alert("Buscando Estudiante Ingrese nuevamente a Consultar Resultados");
});
});
Link del Proyecto:

https://drive.google.com/drive/folders/1zhlTP6O1qQXSz6WG_z6Z9pojoPA8qB5C?usp=sharing

Ejercicio Propuesto Programación Aplicada II

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Ejercicio Propuesto Programación Aplicada II

Cargado por

Copyright:

Formatos disponibles

Ejercicio propuesto Programación Aplicada II-2021

 Rojas Llanos, Juan Carlos

1. Crear un proyecto/Asp.Net Core 3.0

public Estudiante(int cod, string nombre, string apellido, Record record)

public Record(double n1, double n2, double n3, double asistencia)

public double N1 { get => _N1; set => _N1 = value; }

3. Modificares el contenido del archivo _Layout.cshtml

4. Ahora empezaremos con el modelado del ejercicio dentro de Index.cshtml.cs

public List<Estudiante> e = new List<Estudiante>

<div class="col-12 col-md-4 d-flex flex-column justify-content-center align-content-center" id="barraL">

@if (est.Record.N2 < 10.5)

public int NEstudiantes()

public double PromedioAsignatura()

c. Estudiante con menor asistencias:

public Estudiante MasFalton()

<div class="collapse" id="RC">

public IActionResult OnPostBuscarE(string codE)

<div class="collapse" id="CR">

Link del Proyecto:

También podría gustarte