Untitled

<!DOCTYPE html>

<link rel="stylesheet" href="css/estilos.css">
    <link href="https://file.myfontastic.com/SnwsCaP7tHRQg33WPWDYKZ/icons.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="https://bootswatch.com/4/united/bootstrap.min.css">


    <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
    <script type="text/javascript">
        function Reproducir(id)
        {
            var in1 = "<iframe title="YouTube video player" width="299" height="168" src="http://www.youtube.com/embed/";
            var in2 = "" frameborder="0" allowfullscreen></iframe>";
            var ids = ["P09AKS7Htpc", "l71awxHqWYc", "jj68dUrq-0E", "wJ1QTP-fA-g", "X5D-gfDJRqc", "9WqGvjMzEBI", "x76VEPXYaI0", "T_xX2dFsyoY", "u5OGoXca-II", "CK76aj_-5xY"];
            for (i = 0; i < ids.length; i++)
            {
                if (id === i)
                {
                    document.getElementById("rep").innerHTML = in1 + ids[i] + in2;
                }
            }
        }
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

</head>
<body>


    <header class="header">
        <div class="contenedor">
            <h1 class="" ></h1>
            <span class="icon-menu" id="btn-menu"></span>
            <nav class="nav" id="nav">
                <ul class="menu">
                    <li class="menu__item"><a class="menu__link" href="quienes.html">¿Quiénes Somos?</a></li>
                    <li class="menu__item"><a class="menu__link" href="index.html">Principal</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <div class="banner" align="center">
        <img src="img/portada2.jpg" alt="" >
        <div class="contenedor">
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">

        <aside id="asi" class="col-md-3">
                <div id="rep">

                </div>
            </aside>

            <section id="seccion" class="col-md-8">
                <div class="row">
                    <div class="contenedor">
                        <section class="productos">
                            <h1>BUSQUEDA DE PRODUCTOS ULTRA TECNO</h1>
                            <br>
                            <div class="formulario">
                                <br><br><label for="caja_busqueda">Buscar</label>
                                <input type="text" name="caja_busqueda" id="caja_busqueda"></input>
                            </div>
                            <br>
                            <div id="datos">
                            </div>
                        </section>
                        <script type="text/javascript" src="js/jquery.js"></script>
                        <script type="text/javascript" src="js/find_products.js"></script>
                    </div>

                </div>


            </section>
        </div>
    </div>

<script>
        // configuraci�n inicial del carrito
        paypal.minicart.render({
            strings: {
                button: 'Pagar'
                , buttonAlt: "Total"
                , subtotal: 'Total:'
                , empty: 'No hay productos en el carrito'
            }
        });
        // Eventos para agregar productos al carrito

        $('.producto').click(function (e) {
            e.stopPropagation();
            paypal.minicart.cart.add({
                business: 'micorreo@gmail.com', // Cuenta paypal para recibir el dinero
                item_name: $(this).attr("titulo"),
                amount: $(this).attr("precio"),
                currency_code: 'USD',

            });
        });

    </script>

    <footer class="footer">
        <div class="social">
            <h4>Creadores <img src="img/ups.jpg" alt="" width="150" align="right"></h4>
            <h4>Luis Fernando Vallejo Llumiquinga           (lvallejol1@est.ups.edu.ec)</h4>
            <h4>Jose Antonio Guerra Cajas                   (jguerra@est.ups.edu.ec)</h4>
            <h4>Brayan Leonardo Ramírez Merino              (bramirez@est.ups.edu.ec)</h4>
            <h4>Todos los derechos reservados</h4>
        </div>
    </footer>
</body>

<?php
$servername = "localhost";
$username = "username";
$password = "contraseña";
$dbname = "bdd_name";


$conn = new mysqli($servername, $username, $password, $dbname);
  if($conn->connect_error){
    die("Conexión fallida: ".$conn->connect_error);
  }

$salida = "";

$query = "SELECT * FROM Productos";

if (isset($_POST['consulta'])) {
    $q = $conn->real_escape_string($_POST['consulta']);
    $query = "SELECT * FROM Productos WHERE producto LIKE '%$q%' OR marca LIKE '%$q%' OR modelo LIKE '%$q%' OR descripcion LIKE '%$q%' OR cod_producto LIKE '$q' ";
}

$resultado = $conn->query($query);
if ($resultado->num_rows > 0) {

    $salida.="<table border=3 class='tabla_datos'>
            <thead>
                <tr id='titulo'>
                    <td>ID</td>
                    <td>Producto</td>
                    <td>Descripcion</td>
                    <td>Marca</td>
                    <td>Modelo</td>
                    <td>Precio</td>
                    <td>Stock</td>
                </tr>

            </thead>


    <tbody>";

    while ($fila = $resultado->fetch_assoc()) {
        $salida.="<div class='col-xs-6 col-sm-3 col-md-3'>
                    <div class='thumbnail'>
                        <img data-src='holder.js/100%x200' alt='100%x200' src='img/ps4.jpg' data-holder-rendered='true' style='height: 200px; width: 100%; display: block;'>
                        <div class='caption'>
                            <h3>".$fila['producto']."</h3>
                            <p>".$fila['descripcion']."</p>
                            <p><a href='javascript:Reproducir(9)' class='btn btn-primary' role='button'>Ver</a>
                            <a href='#' class='btn btn-default producto' precio='".$fila['precio']."' titulo='".$fila['producto']."' role='button'>Comprar</a></p>
                        </div>
                    </div>
                </div>" ;

    }
}else{
    $salida.="NO HAY DATOS :(";
}
echo $salida;
$conn->close();