Trivial 2.0: Completo

libreria.php

<?php

function conectar() {
    $server = "localhost";
    $user = "root";
    $password = "";
    $db = "trivial";
    try {
        $conn = new PDO("mysql:host=$server;dbname=$db", $user, $password, [PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"]);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        return $conn;
    } catch (Exception $ex) {
        echo $ex->getMessage();
    }
}

function getPregunta($idUsuario) {
    try {
        $conn = conectar();
        //Buscamos una pregunta que no se haya hecho a este usuario al azar
        $sql = "SELECT * FROM preguntas where idpreguntas not in (select idpreguntas from resultados where idusuarios=$idUsuario) order by rand() limit 1";
        $resul = $conn->query($sql);
        $fila = $resul->fetch();
        return $fila;
    } catch (Exception $ex) {
        echo $ex->getMessage();
    }
}

function getPuntuacion($idUsuario) {
    try {
        $conn = conectar();
        $sql = "SELECT ifnull(sum(puntos),0) puntuacion FROM resultados where idusuarios=:id";
        $st = $conn->prepare($sql);
        $st->execute(['id' => $idUsuario]);
        $fila = $st->fetch();
        return $fila['puntuacion'];
    } catch (Exception $ex) {
        echo $ex->getMessage();
    }
}

function comprobarUsuario($nombre, $password) {
    try {
        $conn = conectar();
        //Buscamos un usuario con el nombre solicitado
        $sql = "select * from usuarios where nombre=:nombre";
        $st = $conn->prepare($sql);
        $st->execute(['nombre' => $nombre]);
        $usuario = $st->fetch();
        //Si no existe es un alta, lo insertamos en la BD
        if (!$usuario) {
            $st = $conn->prepare("insert into usuarios (nombre,password) values (:nombre,:password)");
            $st->execute(['nombre' => $nombre, 'password' => md5($password)]);
            //Y devolvemos el id del usuario insertado
            return $conn->lastInsertId();
        } else {
            //Si el usuario existe miramos si la contrasela coincide, si es así devolvemos el id
            if (md5($password) == $usuario['password']) {
                return $usuario['idusuarios'];
            }
        }
        //Si no se da ninguna de las condiciones devolvemos falso
        return false;
    } catch (Exception $ex) {
        echo $ex->getMessage();
        return false;
    }
}

function guardaResultado($idUsuario, $idPregunta, $puntos) {
    try {
        $conn = conectar();
        $sql = "insert into resultados (idusuarios,idpreguntas,puntos) values (:idu,:idp,:puntos)";
        $st = $conn->prepare($sql);
        $st->execute(['idu' => $idUsuario, 'idp' => $idPregunta, 'puntos' => $puntos]);
        return getPuntuacion($idUsuario);
    } catch (Exception $ex) {
        echo $ex->getMessage();
    }
}

login.php

<?php
require_once 'libreria.php';
$error="";
session_start();
//Recuperamos el valor de nombre y password
$nombre= filter_input(INPUT_POST, 'nombre');
$password= filter_input(INPUT_POST, 'password');

//Si no están vacíos es porque hay un registro o login, lo comprobamos en la BD
if (!empty($nombre) && !empty($password)){
    //La función comprobar Usuario nos devuelve el id del usuario si existe
    $idUsuario=comprobarUsuario($nombre,$password);
    //Si existe el usuario guardamos la información en la BD y redirigimos al index
    if ($idUsuario){
        $_SESSION['idUsuario']=$idUsuario;
        $_SESSION['nombre']=$nombre;
        header("location:index.php");
    } else{
        $error="Usuario o contraseña incorrecta";
    }
}
?>
<!DOCTYPE html>
<html>
    <head>
        <title>Trivial informático</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

    </head>
    <body>
        <div class="container" >
            <div class="jumbotron">
            <h1>Introduce tu usuario y contraseña</h1>
            <h2>Si no estás en el sistema se creará tu usuario</h2>
            <h2 class="text-danger"><?=$error?></h2>
            </div>
            <form method="post">
                <div class="form-group">
                    <label for="nombre">Usuario:</label>
                    <input type="text" class="form-control" name="nombre">
                </div>
                <div class="form-group">
                    <label for="pwd">Password:</label>
                    <input type="password" class="form-control" name="password">
                </div>
                <button type="submit" class="btn btn-primary">Enviar</button>
            </form>
        </div>
    </body>
</html>

index.php

<?php
session_start();
//Si no está definida la variable de sesión es que no se ha logueado, lo mandamos al login
if (empty($_SESSION['idUsuario'])){
    header("location:login.php");
}
require_once("libreria.php");
//Recuperamos la puntuación para mostrarla
$puntuacion= getPuntuacion($_SESSION['idUsuario']);
?>
<!DOCTYPE html>

<html>
    <head>
        <title>Trivial informático</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
        
    </head>
    <body>
        <div class="container" >
            <div class="jumbotron">
                <h1 class="display-1">Trivial. Bienvenido <?=$_SESSION['nombre']?></h1>
                <p>¿Cual es tu cultura general? Puntuación: <span id="puntuacion"><?=$puntuacion?></span></p>
            </div>
            <div class="row">
                <div class="col-12" id="mensaje" style="min-height: 70px;"></div>
            </div>
            <div class="row tablero">
                <div class="col-12"><h1 id="pregunta" class="text-center">Bienvenido al trivial. Muy pronto preguntas</h1></div>
            </div>
            <div class="row my-4 tablero">

                <div class="col-6 text-center"><button id="res1" class="btn btn-lg btn-success">.</button></div>
                <div class="col-6 text-center"><button id="res2" class="btn btn-lg btn-success">.</button></div>

            </div>

            <div class="row tablero">

                <div class="col-6 text-center"><button id="res3" class="btn btn-lg btn-success">.</button></div>
                <div class="col-6 text-center"><button id="res4" class="btn btn-lg btn-success">.</button></div>

            </div>
        </div>
        <script src="trivial.js" type="text/javascript"></script>

    </body>
</html>

trivial.js

var preguntas;
//Busca una pregunta por Ajax
function cargarPregunta() {
    $.get("pregunta.php", function (datos, status) {

        if (status == "success") {
            preguntas = JSON.parse(datos);
            pintarPregunta();
        }
    });
}
//Pinta la pregunta en nuestro HTML
function pintarPregunta() {
    $('#pregunta').text(preguntas.pregunta);
    $('#res1').text(preguntas.respuestas[0]);
    $('#res2').text(preguntas.respuestas[1]);
    $('#res3').text(preguntas.respuestas[2]);
    $('#res4').text(preguntas.respuestas[3]);
    $(".tablero").show();
    $('#mensaje div').fadeOut();
}

$(function () {
    cargarPregunta();
    //Enlazar con los botones el evento click y comprobar si la respuesta es correcta
    $('button').click(function () {
        var puntos = 0;
        //Comprobamos que el botón pulsado es la respuesta correcta
        if ($(this).text() === preguntas.correcta) {
            $('#mensaje').html('<div class="alert alert-success alert-dismissible">  <button type="button" class="close" data-dismiss="alert">&times;</button>  <strong>¡Bien! </strong> Respuesta correcta.</div>')
            puntos = 1;
        } else {
            $('#mensaje').html('<div class="alert alert-danger alert-dismissible">  <button type="button" class="close" data-dismiss="alert">&times;</button>  <strong>¡Error! </strong> Respuesta incorrecta.</div>')

        }
        //Escondemos el tablero para queno pueda pulsar más botones
        $(".tablero").hide();
        //LLamamos por ajax con post para guardar los resultados, la función nos devuelve la puntuación
        $.post("resultado.php", {idPregunta: preguntas.id, puntos: puntos}, function (datos, status) {
            $('#puntuacion').text(datos);
            cargarPregunta();
        });

    });
});

pregunta.php

<?php

require_once 'libreria.php';
session_start();
//Obtenemos una pregunta de la base de datos
$fila = getPregunta($_SESSION['idUsuario']);

//La fila que recuperamos la organizamos de una manera más amigable para el JS
$res['pregunta'] = $fila['pregunta'];
$res['id'] = $fila['idpreguntas'];
$res['correcta'] = $fila['respuesta1'];
$res['respuestas'] = [$fila['respuesta1'], $fila['respuesta2'], $fila['respuesta3'], $fila['respuesta4']];
shuffle($res['respuestas']);

//Lo codificamos en JSON
echo json_encode($res);

resultado.php

<?php
require_once 'libreria.php';
session_start();
//Recuperamos los datos
$idUsuario= $_SESSION['idUsuario'];
$idPregunta= filter_input(INPUT_POST, 'idPregunta');
$puntos= filter_input(INPUT_POST, 'puntos');
//Y guardamos el resultado
$puntos=guardaResultado($idUsuario,$idPregunta,$puntos);
//Devolvemos los puntos
echo $puntos;

Publicado por

Juan Pablo Fuentes

Formador de programación y bases de datos