Bienvenidos sean a este post, hoy veremos como pasar datos a un servidor mediante GET.
Para esta ocasion vamos a necesitar obligatoriamente tener un servidor web, dado que los tipos de datos que enviaremos deben ser obtenidos y procesados por un servidor y no solamente eso tambien usaremos a PHP para este ejemplo, en los posts anteriores les comente como hacerlo pero si no tienen uno y quieren implementar uno rapido, primero les recomiendo este post:
En este veran como instalar y configurar una pc virtual y luego como instalar un debian en el mismo, el siguiente paso sera instalar Apache y PHP, para ello les recomiendo este post:
En este explico paso a paso como instalar Apache, PHP (los cuales son obligatorios) y de forma opcional pueden instalar mariadb aunque no esta de mas, una vez instalado todo esto podemos continuar con nuestro ejercicio, para ello retomaremos el codigo que hicimos hasta este post, en caso de no tenerlo les dejo un link para descargarlo:
Extraigan todos los archivos en el servidor o algun directorio del servidor, con esto realizado vamos a trabajar con este codigo, para ello debemos crear un nuevo archivo con el nombre de p.php y le agregaremos el siguiente codigo:
p.php
<?php
$entradas = array(
'CTHULHU' => array(
'nombre' => 'cthulhu',
'resumen' => 'Cthulhu es un Dios Primigenio, una criatura extraterrestre que tiene características físicas y habilidades que los hacen algo parecido a un dios para los humanos. La forma más apropiada de decir su nombre no puede ser pronunciada por el aparato fonológico humano. Esta pronunciación no es más que lo más cercano que el aparato vocal humano puede llegar a reproducir de las sílabas de una lengua extraterrestre.',),
'DAGON' => array(
'nombre' => 'dagon',
'resumen' => 'Es mencionado como padre y/o dios de los Profundos. Vive en el fondo del mar acompañado de su cónyuge, la Madre Hidra y guarda algún parentesco con Cthulhu. Se sirve de sus súbditos para controlar el pueblo costero de Innsmouth y su puerto, así como para reprimir a los curiosos que se acercan demasiado a su secreto. Vive bajo el Arrecife del Diablo y es adorado por la Orden Esotérica de Dagón.',),
'HIDRA' => array(
'nombre' => 'hidra',
'resumen' => 'Hidra, La Madre Hidra o Madre Hidra es una de las deidades de los Profundos. Se refieren a ella como la consorte de Dagón. Es considerada la gran madre ancestral de estos. Hay dos maneras de representar a la Madre Hidra: siguiendo el diseño tradicional de la Hidra de Lerna; y la que propone asemejarla a sus hijos, de manera que la mostrarían simplemente como un Profundo de gran tamaño',),
"K'THUN" => array(
'nombre' => "k'thun",
'resumen' => "K'thun, Madre de las Razas, es una diosa poco conocida. Las antiguas tribus asiáticas la representaban como un horrido árbol gris pálido con tentáculos en vez de ramas y raíces y con unas gigantescas fauces con un ojo en su interior situadas donde habría de estar la copa. K'thun pasa su existencia buscando materia viva para luego emplearla para fabricar criaturas mediante complejos procesos de partenogénesis, o sea, de fecundación sin gameto masculino.",)
);
if (isset($entradas[strtoupper($_REQUEST['buscar'])])) {
$buscar = strtoupper($_REQUEST['buscar']);
$entrada = $entradas[$buscar];
echo build_entrada($buscar, $entrada);
} else {
echo '<div>Perdon, su busqueda no fue encontrada</div>';
}
function build_entrada($b, $e) {
$html = '<div class="entrada">';
$html .= '<h3 class="nombre">';
$html .= $e['nombre'];
$html .= '</h3>';
$html .= '<div class="resumen">';
$html .= $e['resumen'];
$html .= '</div>';
$html .= '</div>';
return $html;
}
?>Esto es muy similar a cuando vimos la carga de script en este post, donde al comienzo crearemos un array con todos los datos, en este caso por un tema de practicidad lo hacemos asi pero estos datos se podrian extraer de una base de datos, por ejemplo, estos datos son los mismos que vimos en este post pero ahora lo manejaremos de una forma distinta pero sepan que son los mismos datos, despues tenemos este segmento:
if (isset($entradas[strtoupper($_REQUEST['buscar'])])) {
$buscar = strtoupper($_REQUEST['buscar']);
$entrada = $entradas[$buscar];
echo build_entrada($buscar, $entrada);
} else {
echo '<div>Perdon, su busqueda no fue encontrada</div>';
}Aqui verificaremos por medio de un condicional e isset si el valor en entradas existe, para hacer esto primero usaremos a strtoupper para que el valor recuperado por medio de $_REQUEST identificado como buscar se pasara como clave del array anterior, esto iniciara su busqueda si el mismo existe procede a ejecutar el bloque correspondiente de lo contrario mostrara un mensaje indicando que no fue encontrado, volviendo al bloque anterior primero definira una variable llamada $buscar donde guardara el valor en mayusculas del $_REQUEST, la siguiente variable sera el resultado del valor obtenido de aplicar la variable anterior al array entradas, por ultimo mostraremos el resultado de la funcion build_entrada y a su vez le pasamos las variables anteriores, ahora veamos esta funcion:
function build_entrada($b, $e) {
$html = '<div class="entrada">';
$html .= '<h3 class="nombre">';
$html .= $e['nombre'];
$html .= '</h3>';
$html .= '<div class="resumen">';
$html .= $e['resumen'];
$html .= '</div>';
$html .= '</div>';
return $html;
}Observen que basicamente vamos a crear los bloques de HTML que mostraremos en la pagina, las clases entrada, nombre y resumen ya estan definidas en estilo.css y los datos usaremos los identificadores de cada uno con el argumento $e que representa a cada entrada, todo esto lo almacenamos en una variable llamada $html y la devolveremos para que sea mostrada, si lo probamos se vera de la siguiente forma:
En este caso cuando buscamos una entrada y es encontrada nos devuelve los datos y en caso de no encontrarla se vera de la siguiente forma:
Al no pasar dato alguno no encontro nada y nos mostro el otro mensaje, hasta aca tenemos todo funcionando perfectamente ahora debemos modificar a indice.html de la siguiente manera:
indice.html
<html>
<head>
<title>Yog-sotheria</title>
<link rel="stylesheet" href="estilo.css" type="text/css"/>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
crossorigin="anonymous"></script>
<script src="codigo.js"></script>
</head>
<body>
<div id="contenedor">
<div id="header">
<h2>Yog-sotheria</h2>
<div class="autor">por H.P. Lovecraft</div>
</div>
<div class="mitos">
<div class="dioses" id="primigenios">
<h3>Dioses Primigenios</h3>
<ul>
<li><a href="p.php?buscar=cthulhu">Cthulhu</a></li>
<li><a href="p.php?buscar=dagon">Dagon</a></li>
<li><a href="p.php?buscar=hidra">Hidra</a></li>
<li><a href="p.php?buscar=kthun">K'thun</a></li>
</ul>
</div>
<div class="dioses" id="exteriores">
<h3><a href="dios-ext.html">Dioses Exteriores</a></h3>
</div>
<div class="dioses" id="arquetipicos">
<h3><a href="dios-arq.html">Dioses Arquetitpicos</a></h3>
</div>
</div>
<div id="diccionario">
</div>
</div>
</body>
</html>
Basicamente es la misma pagina pero eliminamos el link de dioses primigenios y ahora agregamos un listado con los dioses enlistados, y para cada caso llamamos al archivo anterior con la deidad, el resto sigue exactamente igual a como vinimos trabajando pero esto no acaba aun, nuestro siguiente paso sera ir al archivo estilo.css y le agregaremos la siguiente clase:
.dioses ul {
list-style: none;
padding: 0;
margin: 0 1em;
}En este caso es para aplicar un estilo al listado que le agregamos a la pagina, pueden agregarlo al final del archivo o junto a la clases dioses para tenerlo ordenado pero es solamente eso, hasta aqui creamos una nueva pagina con los datos, modificamos la pagina con un nuevo listado y agregamos un estilo nuevo solo nos resta trabajar con el archivo codigo.js donde cambiaremos este segmento de codigo:
$(document).ready(function() {
$('#primigenios a').click(function(e) {
e.preventDefault();
$('#diccionario').load('p.html');
});
});
De la siguiente manera:
$(document).ready(function() {
$('#primigenios a').click(function(e) {
e.preventDefault();
var solicitud = {buscar: $(this).text()};
$.get('p.php', solicitud, function(datos) {
$('#diccionario').html(datos);
});
});
});En este caso seguimos con el evento click al link del div primigenios, seguimos utilizando el preventDefault para desactivar la conducta predeterminada del link, despues definimos un objeto donde asociaremos el texto del link a la clave buscar, despues a traves de get cargaremos la pagina que creamos al comienzo, lo siguiente sera pasarle el objeto anterior (para enviar el dato a buscar) y finalmente tenemos una funcion que almacenara todo los datos recibidos y esto lo asignaremos al div diccionario por medio de html, con todo esto comentado pasemos a ver como funciona mediante el siguiente video
Como pueden ver ahora solo mostramos informacion de cada uno de los elementos de la lista cada vez que lo seleccionamos o hacemos click, esto es solo un modo practico pero se deberia hacer con una base de datos y sacando informacion de este, antes de finalizar les dejo todos los codigos finales que trabajamos en este post y necesarios para probar la pagina:
En resumen, hoy hemos visto como enviar datos a un archivo que trabaja del lado del servidor, les deje dos posts para instalar un server virtual y un servidor web, despues hemos hecho los cambios necesarios para poder adaptar a nuestra pagina para trabajar de esta forma, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 