viernes, 13 de mayo de 2016

Juego de penales básico hecho con HTML y JavaScript


Descargar código en github

Realizar petición post con cURL

El siguiente ejemplo trata de como realizar una petición POST con cURL y obtener los datos del servidor en forma de JSON para su posterior manipulación. El ejercicio consiste en que el usuario ingrese un dato, en este caso el nombre de un sujeto y que el servidor devuelva la información de éste.

El archivo index.php básicamente es la interfaz gráfica de la aplicación. Consta de una caja de texto y un botón; cuando lo presiona abre una sesión cURL a la url especificada y hace comunicación en el servidor, si la búsqueda es exitosa devuelve los respectivos resultados.

Las principales líneas del código están comentadas para entender el proceso.

Archivo: index.php


<?php

if ($_SERVER["REQUEST_METHOD"] == "POST") {//cuando se procesa el formulario

$nombre=$_POST['usuario'];//capturo lo que tiene la caja de texto

$variables="nombre_user=".$nombre;//el parametro nombre_user almacena el valor ingresado
$url="http://localhost/curl/datos.php";

$ch = curl_init($url);//inicia sesion cURL

curl_setopt($ch, CURLOPT_POST, true);//peticion post
curl_setopt($ch, CURLOPT_POSTFIELDS, $variables);//le envio el parametro a la url
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$result = curl_exec($ch);//obtengo la respuesta del servidor
curl_close($ch); //liberar recursos

}

?>

<!DOCTYPE html>
<html>
<head>
<title>cURL</title>
</head>
<body>

<h2>cURL</h2>

<form method="POST" action="<?php echo $_SERVER["PHP_SELF"] ?>"><--se procesa el mismo-->
Nombre: <input type="text" name="usuario" placeholder="Entre usuario" required="required" />
<input type="submit" value="Buscar" />

</form>

<hr>

<?php

if(isset($result)){//si esta variable (respuesta del servidor) tiene valor imprimo lo que tiene

$user=json_decode($result);//como el servidor devuelve la info en forma de json, lo convierto en array para manipularlo.

if(array_key_exists('nombre',$user)){//si el anterior array tiene una key nombre, es porque la busqueda fue exitosa.

echo 'Id: '.$user->id.'<br >';
echo 'Nombre: '.$user->nombre.'<br >';
echo 'Edad: '.$user->edad;
}else{
echo $user->message;
}

}

?>

</body>
</html>


Este archivo contiene la información de los usuarios en formato JSON, si el nombre ingresado por el usuario existe devuelve su información con forma de JSON.

Archivo: datos.php


<?php

#json
$json_users=' [{"id":"01","nombre":"John","edad":"26"},
{"id":"02","nombre":"Pete","edad":"34"},
{"id":"03","nombre":"Wilson","edad":"56"},
{"id":"04","nombre":"Alan","edad":"12"},
{"id":"05","nombre":"Rob","edad":"43"}] ';


$nombre_user=$_POST['nombre_user'];//recibo el valor ingresado por el usuario

$datos_users=json_decode($json_users);//convierto el anterior json en array para manipular datos

//la variable $respuesta envia los resultados
$respuesta='{"code":"404","message":"No encontrado"}';//si la búsqueda no contiene resultados envía un mensaje de no encontrado

for ($i=0; $i < count($datos_users); $i++) { //recorro el array para realizar la busqueda

if (strtolower($datos_users[$i]->nombre)==strtolower($nombre_user)){//si existe un usuario, le envio la respuesta de este en formato json

$respuesta='{"id":"'.$datos_users[$i]->id.'","nombre":"'.$datos_users[$i]->nombre.'","edad":"'.$datos_users[$i]->edad.'"}';
break; //detiene la busqueda

}
}

echo $respuesta;//respuesta final del servidor

?>


Descargar código en Github.

lunes, 12 de agosto de 2013

Chat con AJAX - PHP - MySQL - JavaScript

A continuación se explica el código necesario para crear un chat básico con AJAX, PHP y MySQL.

Se utiliza una tabla creada en MySQL llamada mensaje que posee los campos id (autoincrement), usuario (varchar) y contenido (text).

El archivo index.html contiene la interfaz gráfica (cajas de texto, boton) y el código CSS. Se importa el archivo ajax.js que contiene el objeto XMLHttpRequest que me permite intercambiar datos de forma asíncrona con el servidor. Esto significa que es posible para actualizar partes de una página web, sin volver a cargar toda la página.

Además contiene dos funciones javascript:

1) mostrar: Esta función se ejecuta cada 3 segundos (setInterval(mostrar,3000)) y muestra en el div con id historial los mensajes almacenados en la base de datos a través del archivo mensajes.php que hace una consulta SQL.

2) agregar: Esta función captura el usuario y mensaje ingresado, los valores los almaceno en las variables usuario y cont y se los envío al arhivo proceso.php para que a través del método POST las capture y las inserte a la base de datos.

viernes, 5 de abril de 2013

PSeInt: Calcular potencia de un número

Algoritmo que calcula la potencia de un número ingresado por el usuario:

Proceso potencia

    acum<-1;

    Escribir "Digite base";
    Leer base;

    Escribir "Digite exponente";
    Leer exponente;    

    Para i<-1 Hasta exponente Con Paso 1 Hacer

        acum<-acum*base;

    FinPara
 
    Escribir base," elevado a la ",exponente," es: ",acum;

FinProceso

PSeInt: Factorial de un número

El siguiente pseudocodigo calcula el factorial de un número ingresado por el usuario:

Proceso factorial
    
    acum<-1;

    Escribir "Digite un numero para calcular su factorial";

    Leer num;

    Para i<-1 Hasta num Con Paso 1 Hacer

        acum<-acum*i;

    FinPara
    
    Escribir "El factorial de ",num," es ",acum;

FinProceso

Se crea un variable acumuladora para almacenar las multiplicaciones.

domingo, 31 de marzo de 2013

Constante PI en PSeInt

PSeInt a partir de la versión 20130331 "31/marzo/2013" incluye la constante PI. Una constante imprescindible a la hora de trabajar con funciones u operaciones matemáticas. Para averiguar su valor basta con la siguiente línea de código:
Proceso sin_titulo
    
    Escribir "El valor de PI: ",PI;
    
FinProceso

AJAX y XML: Extraer o recuperar datos de un archivo XML con AJAX

Para el siguiente tutorial se necesitan conocimientos en AJAX, JavaScript, XML y XML DOM.

Se tiene la siguiente información en un archivo XML:

Archivo libros.xml



Obtendremos a través de AJAX esa información y la mostraremos en el navegador en una tabla HTML.