Brandon Engineer

Shopping cart

Subtotal 0,00 

View cartCheckout

Zeus

blank

Resumen del proyecto

Se me propuso crear un software de acceso rápido para la gestión documental de los proyectos para facilitar la visualización de los mismos

Objetivos a realizar

A continuación se describirá todos los objetivos obligatorios que propone el cliente sobre el proyecto

  • Búsqueda por numero de proyecto
  • Agregar una búsqueda por nombre del cliente
  • Al encontrar el proyecto hacer un hipervínculo dinámico que lleve directamente a la carpeta del servidor interno

 

Objetivos propuestos por mi

Se va a desarrollar todas las ideas para optimizar el uso del proyecto propuestas por mi

  • Agregar filtros de busqueda; PLC, esquema electrico, SCADA,etc

Información del proyecto

Cliente:

Sistein

Categoría:

IT

Fecha:

Marzo de 2024

Dirección:

Molina de segura

Recursos del proyecto

Inicio del proyecto

Nada mas empezar me reuni con el jefe del departamento de calidad ya que es el que esta encargado de la estandarización de la empresa y estipulamos los puntos que necesitamos.

Una vez listo contacte con el CTO Alejandro, el cual tendremos que estudiar como hacer la base de datos desde donde se accederá.

Una vez reunidos y pactados las necesidades del proyecto procedí a ejecutar el proyecto

Para la ejecución de la busqueda prepare una pagina web sencilla con HTML,CSS,JS y PHP

PHP

Conexión con la base de datos

Para establecer la conexión con la base de datos se crea el archivo: «database.php»

				
					<?php

$server = "localhost";
$username = "testsistein";
$password = "*********";
$database = "sistein";

//crear conexion

$db = new mysqli($server,$username,$password,$database);

if ($db ->connect_error){

    die("Error al conectar con la base de datos: " . $db->connect_error);

}
				
			

La Base de datos de test la ejecutare en el VPS que tengo contratado para este blog y crearé una base de datos solamente para estas pruebas

Consulta en la base de datos

Una vez ya establecido la conexión con la base de datos procedo a hacer la consulta y pasar los datos a JavaScript para el tratamiento de los datos extraídos. El código usado en «search_data.php»:

				
					<?php

require_once('database.php');

$search_criteria = $_POST['search_criteria'];

//consulta

$query = "SELECT id,descripcion FROM obras
WHERE descripcion LIKE '%".$search_criteria."%'";

$authors = [];
$errors = ['data' => false];


$getAuthors = $db->query($query);

if($getAuthors->num_rows > 0){
    while($data = $getAuthors->fetch_assoc()){

        $authors[] = $data;

    }
    echo json_encode($authors);
}else{
    echo json_encode($errors);
}


				
			

JavaScript

Una vez todo listo empezamos a recoger los datos y para presentarlos en el HTML

				
					window.addEventListener('DOMContentLoaded',()=>{
    const search = document.querySelector('#search')
    const tableContainer = document.querySelector('#results tbody')
    const resultContainer = document.querySelector('#resultsContainer')
    const errorContainer = document.querySelector('.errors-container')
    let search_criteria = '';
        if(search){
            search.addEventListener('input', event =>{
                search_criteria = event.target.value.toUpperCase()
                showResults()
            })
        }
        const searchData = async() => {
            let searchData = new FormData()
            searchData.append('search_criteria', search_criteria)
            try{
                const response = await fetch('search_data.php',{
                    method: 'POST',
                    body: searchData
                })
                return response.json()
            }catch(error){
                alert(`${'Hubo un error y no podemos procesar la solicitud en este momento. Razones: '}${error.message}`)
                console.log(error)
            }
        }
        //funcion para mostrar los datos
        const showResults =() =>{
            searchData()
            .then(dataResults =>{
                console.log(dataResults)
                tableContainer.innerHTML = ''
                if(typeof dataResults.data !== 'undefined' && !dataResults.data){
                    errorContainer.style.display = 'block'
                    errorContainer.querySelector('p').innerHTML = `
                    No hay resultados: <span class="bold">${search_criteria}</span>`
                    resultContainer.style.display = 'none'
                }else{
                    resultContainer.style.display = 'block'
                    errorContainer.style.display = 'none'
                    for (const author of dataResults){
                        const row = document.createElement('tr')
                        row.innerHTML = `
                        <td>${author.id}</td>
                        <td>${author.descripcion.toUpperCase().replace(search_criteria, '<span class="bold">$&</span>')}</td>
                        `
                        tableContainer.appendChild(row)
                    }

                }
            })
        }
})
				
			

HTML

Este es el HTML para la busqueda en base de datos

				
					<!DOCTYPE html>
<html lang="es">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Busqueda en la base de datos de sistein</title>
        <link rel="stylesheet" href="style.css">
    </head>
<body>
    <main>
        <h1>Busqueda en la base de datos del SAP</h1>
        <div class="input-container">
            <input type="search" id="search" placeholder="Proyecto que buscas" />
        </div>
        <div class="errors-container" style="display: none;">
            <p></p>
        </div>
        <div class="results-container" style="display: none;" id="resultsContainer">
            <table id="results">
                <thead>
                    <th>ID</th>
                    <th>Descripcion</th>
                </thead>
                <tbody>
                    
                </tbody>
            </table>
        </div>
    </main>


    <script src="script.js" defer></script>

</body>
</html>
				
			

CSS

Para hacer que sea visualmente mas cómodo ajuste la hoja de estilos

				
					*, *::after, *::before{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{

    font-family: Arial, Helvetica, sans-serif;
    background-color: aliceblue;

}
main{
    width: 980px;
    margin: 50px auto;
}

table{
    width: 100%;
    border-collapse: collapse;
}

table tr:nth-child(even){
    background-color: bisque;
}

table tr td{

    padding: 8px 5px;
    background-color: white;
    padding: 25px;
    border-radius: 8px;

}
.input-container{

    margin: 25px 0;
    background-color: white;
    padding: 25px;
    border-radius: 8px;

}
.input-container input[type="search"]{

    padding: 12px 20px;
    border-radius: 5px;
    border: none;
    background-color: antiquewhite;
    width: 40%;

}

.bold{

    font-weight: bold;
    color: red;
}

.results-container{

    background-color: white;
    padding: 25px;
    border-radius: 8px;
}
				
			

Presentación de la aplicación

Una vez listo se presento el proyecto para la implementación, una vez aprobado nos pusimos en contacto con el equipo que va a preparar el gestor de proyectos de la empresa para pedirle acceso a la base de datos y así poder hacer estas solicitudes.

El personal de la empresa del gestor de proyectos nos dijo que no nos podía dar acceso pero nos dio una alternativa mejor que la que estaba preparando yo asique cerré el proyecto Zeus debido a su poca viabilidad

es_ESSpanish