Subtotal 0,00 €
- Molina de Segura, Murcia, Spain
- brandon@brandon-engineer.com
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
A continuación se describirá todos los objetivos obligatorios que propone el cliente sobre el proyecto
Se va a desarrollar todas las ideas para optimizar el uso del proyecto propuestas por mi
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
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
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);
}
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)
}
}
})
}
})
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>
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;
}
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