INSTITUTO DE EDUCACIÓN SUPERIOR “JOBS CAPACITY”
SESIÓN 10
PROCESO CRUD SIMPLE
Introducción V 10-1
El concepto CRUD está estrechamente vinculado a la gestión de datos digitales. CRUD hace
referencia a un acrónimo en el que se reúnen las primeras letras de las cuatro operaciones
fundamentales de aplicaciones persistentes en sistemas de bases de datos:
• Create (Crear registros)
• Read bzw. Retrieve (Leer registros)
• Update (Actualizar registros)
• Delete bzw. Destroy (Borrar registros)
En pocas palabras, CRUD resume las funciones requeridas por un usuario para crear y gestionar
datos. Varios procesos de gestión de datos están basados en CRUD, en los que dichas operaciones
están específicamente adaptadas a los requisitos del sistema y de usuario, ya sea para la gestión
de bases de datos o para el uso de aplicaciones. Para los expertos, las operaciones son las
herramientas de acceso típicas e indispensables para comprobar, por ejemplo, los problemas de la
base de datos, mientras que, para los usuarios, CRUD significa crear una cuenta (créate) y utilizarla
(read), actualizarla (update) o borrarla (delete) en cualquier momento.
En esta sesión realizaremos un proyecto utilizando el proceso CRUD pero aun no manejaremos una
base de datos.
En el siguiente proyecto buscaremos registrar personal de una empresa considerando el id,
nombres y cargo.
Crearemos un nuevo proyecto con el nombre proceso-crud:
ng new proceso-crud --no-standalone
1
Jobs Capacity – Juntos hacia tu éxito
INSTITUTO DE EDUCACIÓN SUPERIOR “JOBS CAPACITY”
Instalación y Configuración de Bootstrap V 10-2
En este proyecto vamos a utilizar la última versión de Bootstrap para darle un mejor estilo a nuestro
formulario, ingresaremos a:
[Link]
Y vamos a instalar a través del administrador de paquetes:
Una vez instalado vamos a configurar las librerías de hoja de estilos y JavaScript, para ello abrimos
el archivo [Link] y dentro de options en el atributo styles indicamos la ruta de nuestro
archivo [Link] y dentro de scripts indicamos el archivo [Link].
Para probar si quedo correctamente instalado vamos a aperturar el archivo [Link]
y vamos a reemplazar todo el código por el siguiente:
<h1>Hola Mundo</h1>
Iniciamos nuestro servidor con npm start, si ya lo teníamos iniciado entonces tenemos que
detenerlo con la combinación de teclas Ctrl + C y volver a cargarlo.
Podemos apreciar el siguiente resultado:
Es importante que tenga la misma apariencia: Tipo de letra y tamaño.
2
Jobs Capacity – Juntos hacia tu éxito
INSTITUTO DE EDUCACIÓN SUPERIOR “JOBS CAPACITY”
Configuración de estilos V 10-3
Aperturar el archivo [Link] y en este vamos a insertar el fondo que vamos a utilizar, para ello
podemos ingresar a la página:
[Link]
En esta página podremos generar un degradado a nuestro criterio:
Rotar degradado
Cambiar de degradado
Copiar código CSS
Una vez copiado lo pegaremos en nuestro archivo [Link], primero invocar a la etiqueta body.
Clases V 10-4
Dentro de nuestra carpeta app generar una carpeta llamada models y dentro de esta crear una
clase con el nombre Empleados y dentro de nuestra clase declarar 3 variables públicas.
3
Jobs Capacity – Juntos hacia tu éxito
INSTITUTO DE EDUCACIÓN SUPERIOR “JOBS CAPACITY”
Para trabajar con formularios es necesario agregar este módulo a [Link], para ello nos
situamos en imports y agregamos FormsModule.
Es necesario importar también en la parte superior.
Vamos a nuestro archivo [Link] y en nuestra clase vamos a crear tres objetos de la
clase Empleados, tener en cuenta que tenemos que agregar de la carpeta models, considerar los
3 parámetros: id, nombre y cargo.
Métodos GuardarEditar, Editar, Eliminar V 10-5
[Link]
import { Component } from '@angular/core';
import { Empleados } from './models/empleados';
@Component({
selector: 'app-root',
templateUrl: './[Link]',
styleUrl: './[Link]'
})
4
Jobs Capacity – Juntos hacia tu éxito
INSTITUTO DE EDUCACIÓN SUPERIOR “JOBS CAPACITY”
export class AppComponent {
empleadoArreglo: Empleados[] = [
{id: 1, nombre: "Juan Carlos", cargo: "Director"},
{id: 2, nombre: "Angelica", cargo: "Administrador"},
{id: 3, nombre: "Gabriel", cargo: "Programador"},
];
seleccionarEmpleado: Empleados = new Empleados();
GuardarEditar(){
if([Link] === 0){
[Link] = [Link] + 1;
[Link]([Link]);
}
[Link] = new Empleados();
}
Editar(empleados: Empleados){
[Link] = empleados;
}
Eliminar(){
if(confirm('Estas seguro de eliminar el empleado')){
[Link] = [Link](x => x !=
[Link]);
[Link] = new Empleados();
}
}
}
seleccionarEmpleado: Empleados = new Empleados();
Después de crear nuestros objetos estamos creando el método seleccionarEmpleado con un objeto
vacío esto es para cuando nuestra aplicación se inicia, por ello tiene que estar vacío.
GuardarEditar(){
if([Link] === 0){
[Link] = [Link] + 1;
[Link]([Link]);
}
[Link] = new Empleados();
}
En el método GuardarEditar se declara una condicional para indicar si tenemos un elemento
seleccionado en el caso de que no tengamos un elemento seleccionado entonces agregamos un
nuevo con el método push, caso contrario no se realizará nada aún.
Después de insertar a la lista estamos creando otro objeto vacío para seleccionarEmpleado.
5
Jobs Capacity – Juntos hacia tu éxito
INSTITUTO DE EDUCACIÓN SUPERIOR “JOBS CAPACITY”
Editar(empleados: Empleados){
[Link] = empleados;
}
Con el método Editar pedimos un empleado y le asignamos a seleccionarEmpleado.
Eliminar(){
if(confirm('Estas seguro de eliminar el empleado')){
[Link] = [Link](x => x != [Link]);
[Link] = new Empleados();
}
}
Por último, nuestro método Eliminar condiciona con un método confirm de JavaScript si deseamos
eliminar, en el caso de confirmar entonces se elimina del arreglo con el método filter y le asignamos
nuevamente a la selección un Empleado vacío.
Salida HTML V 10-6
Vamos a nuestra pagina [Link] agregaremos 3 secciones, la primera será nuestro
navbar, la segunda será para el título y la tercera para el listado, considerar la grilla de Bootstrap.
[Link]
<nav class="navbar bg-dark">
<div class="container">
<a class="navbar-brand" href="#">
<img src="../[Link]" alt="Bootstrap" width="24" height="24">
</a>
</div>
</nav>
<div class="container">
<h2 class="text-white mt-4">Personal de la Empresa Jobs Capacity</h2>
</div>
<div class="container">
<div class="row">
6
Jobs Capacity – Juntos hacia tu éxito
INSTITUTO DE EDUCACIÓN SUPERIOR “JOBS CAPACITY”
<div class="col-md-8 mt-4">
<ul class="list-group">
<li class="list-group-item list-group-item-action"
*ngFor="let empleado of empleadoArreglo"
(click)="Editar(empleado)"
[[Link]]="empleado == seleccionarEmpleado"
>
<span class="badge bg-primary">{{[Link]}}</span>
{{ [Link] }} - {{[Link]}}
</li>
</ul>
<div class="card mt-4">
<div class="card-body">
<div class="card-title">
Inserta un nuevo personal
</div>
<div class="input-group">
<input type="number" class="form-control"
[(ngModel)]="[Link]"
*ngIf="[Link] !== 0">
<input type="text" placeholder="Digite un nombre" class="form-control"
[(ngModel)]="[Link]">
<input type="text" placeholder="Indique un cargo" class="form-control"
[(ngModel)]="[Link]">
<button type="button" class="btn btn-primary"
(click)="GuardarEditar()">Registrar</button>
<button type="button" class="btn btn-danger"
*ngIf="[Link] !== 0"
(click)="Eliminar()">Eliminar</button>
</div>
</div>
</div>
</div>
<div class="col-md-4 mt-4 bg-body-tertiary rounded h-100">
<img src="../assets/[Link]" alt="" class="w-100 p-4 mt-4">
</div>
</div>
</div>
Para la segunda columna se esta utilizando el logotipo de la institución el cual lo pegaremos en
nuestra carpeta assets.
7
Jobs Capacity – Juntos hacia tu éxito
