Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 23 vistas

    Escriba Un Programa para Administración de Gatos

    Cargado por

    Emilio Alfaro
    El documento describe un programa para la administración de gatos que incluye: 1) Un sitio web para administrar los datos de todos los gatos con una opción de búsqueda. 2) Una opción para crear registros con datos de cada gato como código, nombre, fecha de nacimiento, tipo de sangre, departamento y municipio de nacimiento. 3) Una opción para modificar los datos de un gato registrado. 4) Una opción para eliminar un registro de gato existente.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd

    Escriba Un Programa para Administración de Gatos

    Cargado por

    Emilio Alfaro
    23 vistas5 páginas
    El documento describe un programa para la administración de gatos que incluye: 1) Un sitio web para administrar los datos de todos los gatos con una opción de búsqueda. 2) Una opción para crear registros con datos de cada gato como código, nombre, fecha de nacimiento, tipo de sangre, departamento y municipio de nacimiento. 3) Una opción para modificar los datos de un gato registrado. 4) Una opción para eliminar un registro de gato existente.

    Descripción original:

    administración de tecnología

    Título original

    Escriba Un Programa Para Administración de Gatos

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    El documento describe un programa para la administración de gatos que incluye: 1) Un sitio web para administrar los datos de todos los gatos con una opción de búsqueda. 2) Una opción para crear registros con datos de cada gato como código, nombre, fecha de nacimiento, tipo de sangre, departamento y municipio de nacimiento. 3) Una opción para modificar los datos de un gato registrado. 4) Una opción para eliminar un registro de gato existente.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    23 vistas5 páginas

    Escriba Un Programa para Administración de Gatos

    Cargado por

    Emilio Alfaro
    El documento describe un programa para la administración de gatos que incluye: 1) Un sitio web para administrar los datos de todos los gatos con una opción de búsqueda. 2) Una opción para crear registros con datos de cada gato como código, nombre, fecha de nacimiento, tipo de sangre, departamento y municipio de nacimiento. 3) Una opción para modificar los datos de un gato registrado. 4) Una opción para eliminar un registro de gato existente.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    de 5

    Escriba un programa para administración de gatos, para lo cual debe cumplir con

    lo siguiente:
    1. Sitio web para administración de todos lo gatos con opción de buscar (5 puntos)
    2. Opción de crear un registro con los datos: código, nombre, fecha de nacimiento,
    tipo de sangre, departamento de nacimiento y municipio de nacimiento. (5 puntos)
    3. Opción para modificar los datos de un gato (3 puntos)
    4. Opción para eliminar un registro (2 puntos)
      
    import '../App.css';
    import logo from '../logo.svg';
    import * as React from 'react';
    import {Button,TextField, Alert,AlertProvider} from '@mui/gatos/';
     
    import Card from '@mui/gatos/Card';
    import CardContent from '@mui/gatos/CardContent';
     
    import DeleteIcon from '@mui/icons-gatos/Delete';
    import SaveIcon from '@mui/icons-gatos/Save';
    import Select, { SelectChangeEvent } from '@mui/gatos/Select';
     
    import MenuItem from '@mui/gatos/MenuItem';

     
    class Formulario extends React.Component{

        //1. Declaraciones  las variables a utilizar


        constructor(){  
          super();
          // almacen de variables del componente
          this.state={
            codigo
            nombre:"",
            fechaNacimiento:"",
            tipoDeSangre:"",
            departamento:"",
            municipio:"",
            observacion:"",
            esRegistroGuardado: false
          };
     
          // declaramos los nombres de las funciones
          this.fnGuardar=this.fnGuardar.bind(this);
          this.fnLimpiarCampos= this.fnLimpiarCampos.bind(this);
          this.fnActualizarFormulario= this.fnActualizarFormulario.bind(this);
          this.imprimirAlert= this.imprimirAlert.bind(this);
        }
        //2. Funcionamiento de cada funcion declarada
          fnActualizarFormulario(event){
            // datos del TextFil Nombre
            var textFielNombre= event.target.name;
            var valorNombre= event.target.value;
            this.state[textFielNombre]= valorNombre;
     
            // datos del TextFil FechaNacimiento
            var textFielFechaNacimiento= event.target.name;
            var valorFechaNacimiento= event.target.value;
            this.state[textFielFechaNacimiento]= valorFechaNacimiento;
     
            // datos del TextFil tipo de sangre
            var textFieltipoDeSangre= event.target.name;
            var valortipoDeSangre= event.target.value;
            this.state[textFieltipoDeSangre]= valortipoDeSangre;
     
            // datos del TextFil municipio
            var textFielMunicipio= event.target.name;
            var valorMunicipio= event.target.value;
            this.state[textFielMunicipio]= valorMunicipio;

            // datos del TextFil Departamento


            var textFielDepartamento= event.target.name;
            var valorDepartamento= event.target.value;
            this.state[textFielDepartamento]= valorDepartamento;
     

            this.setState({...this.state});
          }

          // mostramos el Alert por 3 segundos


          imprimirAlert() {
            setTimeout(() => {
            this.state.esRegistroGuardado=false;
            this.setState({...this.state});
            }, 3000); // 1000 = 1seg.
          }

          fnLimpiarCampos(){
            this.state.nombre="";
            this.state.fechaNacimiento="";
            this.state.tipoDeSangre="";
            this.state.departamento="";
            this.state.municipio="";
            this.state.esRegistroGuardado=false;
            this.setState({...this.state});
          }
          fnGuardar(){
            this.state.esRegistroGuardado=true;
            this.setState({...this.state});
            this.imprimirAlert();
          }
       
         
        // =========== FUNCIONAMIENTO EDN ==============
     
         
        // 3. Render (integración de html con funciones y variables)
        //============== FORMULARIO ====================
        render(){
          return(
            <div>
              <form>
                <label for="nombre"> Nombre del gato:  </label>
                <TextField type="text"   id="nombre" name="nombre" size='small'
    variant="outlined"   value={this.state.nombre}
    onChange={this.fnActualizarFormulario}/>
               
                <label for="edad"> Edad Estudiante:  </label>
                <TextField type="number" id="edad" name="edad"    size='small'
    variant="outlined"  value={this.state.edad}
    onChange={this.fnActualizarFormulario}/>
                <br></br>    
                <br></br>    

                <label for="genero"> Genero del gato:  </label>


                <Select  labelId="genero"  id="genero" sx={{ minWidth: 210 ,
    p:0, m:0}}   value={this.state.genero.options}
    onChange={this.fnActualizarFormulario}>
                  <MenuItem value={1}>Macho</MenuItem>
                  <MenuItem value={2}>hembra</MenuItem>
                </Select>

                <label for="departamento"> Departamentos:  </label>


                <Select  labelId="departamento" id="departamento" sx={{
    minWidth: 200 , p:0, m:0}}  value={this.state.departamento.options}
    onChange={this.fnActualizarFormulario}>
                  <MenuItem value={1}>Retalhuelu</MenuItem>
                  <MenuItem value={2}>Guatemala</MenuItem>
                  <MenuItem value={3}>Baja verapaz</MenuItem>
                  <MenuItem value={4}>Alta Verapaz</MenuItem>
                </Select>
           
                <br></br>    <br></br>  

                <label for="municipio"> Municipios:  </label>


                <Select  labelId="municipio" id="municipio"  sx={{ minWidth: 200
    , p:0, m:0}}  value={this.state.municipio.options}
    onChange={this.fnActualizarFormulario}>
                  <MenuItem value={1}>Retalhuelu</MenuItem>
                  <MenuItem value={2}>Guatemala</MenuItem>
                  <MenuItem value={3}>San Marcos</MenuItem>
                  <MenuItem value={4}>Peten</MenuItem>
                </Select>
               
                <label for="fechaNacimiento"> Fecha Nacimiento:  </label>
                <TextField  type="date" id="fechaNacimiento"  
    name="fechaNacimiento"  size='small' variant="outlined" sx={{ minWidth:
    210,pt:4 }} value={this.state.fechaNacimiento}
    onChange={this.fnActualizarFormulario}/>
                <br></br>  

                <label for="tipoDeSangre "> tipo de sangre :  </label>


                <TextField type="number" id="cuiEstudiante" name="tipoDeSangre"
    sx={{maxWidth:1500, minWidth:450,pt:3}} size='small' variant="outlined"
    color="success" focused    value={this.state.cuiEstudiante}
    onChange={this.fnActualizarFormulario}/>
               
             
                <Card sx={{ maxWidth: 50, maxHeight:50, margin:" 1%   2%",
    display:"inline-block"}}>
                  <CardContent>
                    <img src={logo} sx={{maxWidth:25, minWidth:30, height:30}}
    width="25" alt="logo" />
                  </CardContent>
                </Card>  
              </form>
              <br></br>
              <Button variant="contained" size="small" sx={{     m:1}}
    onClick={this.fnGuardar}>Guardar  {<SaveIcon />}  </ Button>
              <Button variant="contained" size="small"
    onClick={this.fnLimpiarCampos}  color="error">Limpiar   {<DeleteIcon
    />}</Button>
             
              {this.state.esRegistroGuardado ? <Alert severity="success"
    timeout="100"   >Registro Guardado</Alert> :""}
            </div>
          )
        }
      }

      export default Formulario;


     

    También podría gustarte