SELECT COMBO DEPENDIENTES VUEJS AXIOS API JSON PHP MYSQL

 2 select dependientes con vuejs php mysql pdo entre 2 tablas


2 / 2


Para crear select dependientes con Vue.js, PHP, MySQL y PDO entre 2 tablas, puedes seguir los siguientes pasos:


Crea las dos tablas en MySQL, una para las categorías y otra para los productos. La tabla de categorías debe tener un campo de identificación (id) y un campo de nombre (name). La tabla de productos debe tener un campo de identificación (id), un campo de nombre (name) y un campo de categoría (category_id).


Crea un archivo PHP que se conecte a la base de datos y recupere los datos de las categorías desde la tabla de categorías:


php

Copy code

<?php

// Conexión a la base de datos

$pdo = new PDO("mysql:host=localhost;dbname=tu_base_de_datos", "tu_usuario", "tu_contraseña");


// Consulta SQL para obtener las categorías

$query = "SELECT id, name FROM categories";

$stmt = $pdo->query($query);

$categories = $stmt->fetchAll(PDO::FETCH_ASSOC);


// Devuelve las categorías en formato JSON

echo json_encode($categories);

?>

Crea un archivo HTML con Vue.js que contenga dos select: uno para las categorías y otro para los productos. El select de categorías debe estar vacío al principio.

html

Copy code

<!DOCTYPE html>

<html>

<head>

  <title>Select dependientes con Vue.js, PHP, MySQL y PDO</title>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

  <div id="app">

    <select v-model="selectedCategory" @change="getProducts">

      <option value="">Selecciona una categoría</option>

      <option v-for="category in categories" :value="category.id">{{ category.name }}</option>

    </select>


    <select v-model="selectedProduct">

      <option value="">Selecciona un producto</option>

      <option v-for="product in products" :value="product.id">{{ product.name }}</option>

    </select>

  </div>


  <script>

    var app = new Vue({

      el: '#app',

      data: {

        categories: [],

        products: [],

        selectedCategory: '',

        selectedProduct: ''

      },

      methods: {

        getCategories: function() {

          // Hace una petición AJAX al archivo PHP para obtener las categorías

          axios.get('get_categories.php')

            .then(response => {

              this.categories = response.data;

            })

            .catch(error => {

              console.log(error);

            });

        },

        getProducts: function() {

          // Hace una petición AJAX al archivo PHP para obtener los productos de la categoría seleccionada

          axios.get('get_products.php', {

            params: {

              category_id: this.selectedCategory

            }

          })

            .then(response => {

              this.products = response.data;

            })

            .catch(error => {

              console.log(error);

            });

        }

      },

      created: function() {

        // Llama al método getCategories cuando se carga la página

        this.getCategories();

      }

    });

  </script>

</body>

</html>

Crea un archivo PHP que reciba el identificador de la categoría seleccionada y devuelva los productos de esa categoría desde la tabla de productos:

php

Copy code

<?php

// Conexión a la base de datos

$pdo = new PDO("mysql:host=localhost;dbname=tu_base_de_datos", "tu_usuario", "tu_contraseña");


// Consulta SQL para obtener los productos de la categoría seleccionada

$query =




jose fernandez

get_categories.php

El archivo "get_categories.php" sería un archivo PHP que se encarga de conectarse a la base de datos y obtener las categorías desde la tabla correspondiente en la base de datos. Luego, este archivo devolvería las categorías en formato JSON para que Vue.js pueda procesarlas y mostrarlas en el select correspondiente.


Aquí está un ejemplo de cómo podría ser el archivo "get_categories.php":


php

Copy code

<?php

// Conexión a la base de datos

$pdo = new PDO("mysql:host=localhost;dbname=tu_base_de_datos", "tu_usuario", "tu_contraseña");


// Consulta SQL para obtener las categorías

$query = "SELECT id, name FROM categories";

$stmt = $pdo->query($query);

$categories = $stmt->fetchAll(PDO::FETCH_ASSOC);


// Devuelve las categorías en formato JSON

echo json_encode($categories);

?>

Este archivo simplemente ejecuta una consulta SQL para obtener las categorías de la tabla "categories" en la base de datos y luego devuelve los resultados en formato JSON. Este formato es fácilmente procesado por Vue.js y se puede utilizar para mostrar las categorías en el select correspondiente en el frontend.





jose fernandez

haz get_products.php

Por supuesto, aquí te dejo un ejemplo de cómo podría ser el archivo "get_products.php" que devuelve los productos de la categoría seleccionada en formato JSON:


php

Copy code

<?php

// Verifica si se recibió el parámetro category_id

if (isset($_GET['category_id'])) {

    // Conexión a la base de datos

    $pdo = new PDO("mysql:host=localhost;dbname=tu_base_de_datos", "tu_usuario", "tu_contraseña");

    

    // Prepara la consulta SQL para obtener los productos de la categoría seleccionada

    $query = "SELECT id, name FROM products WHERE category_id = :category_id";

    $stmt = $pdo->prepare($query);

    $stmt->bindValue(':category_id', $_GET['category_id']);

    $stmt->execute();

    

    // Obtiene los productos de la categoría seleccionada

    $products = $stmt->fetchAll(PDO::FETCH_ASSOC);

    

    // Devuelve los productos en formato JSON

    echo json_encode($products);

} else {

    // Si no se recibió el parámetro category_id, devuelve un mensaje de error

    echo "Error: category_id is missing.";

}

?>

Este archivo verifica si se recibió el parámetro "category_id" en la URL (que es la identificación de la categoría seleccionada en el frontend) y si es así, ejecuta una consulta SQL para obtener los productos de esa categoría. Luego, los resultados se devuelven en formato JSON. Si el parámetro "category_id" no se recibió, el archivo devuelve un mensaje de error.


Es importante tener en cuenta que este archivo utiliza la función "prepare" de PDO para evitar posibles vulnerabilidades de seguridad, como la inyección SQL.





jose fernandez

haz el .sql de este ej

Por supuesto, aquí te dejo un ejemplo de cómo podría ser el archivo SQL para crear las tablas "categories" y "products" en una base de datos MySQL:


sql

Copy code

-- Crea la tabla "categories"

CREATE TABLE categories (

  id INT(11) NOT NULL AUTO_INCREMENT,

  name VARCHAR(255) NOT NULL,

  PRIMARY KEY (id)

);


-- Inserta algunas categorías de ejemplo

INSERT INTO categories (name) VALUES ('Electrónica'), ('Ropa'), ('Hogar');


-- Crea la tabla "products"

CREATE TABLE products (

  id INT(11) NOT NULL AUTO_INCREMENT,

  name VARCHAR(255) NOT NULL,

  price DECIMAL(10, 2) NOT NULL,

  category_id INT(11) NOT NULL,

  PRIMARY KEY (id),

  FOREIGN KEY (category_id) REFERENCES categories(id)

);


-- Inserta algunos productos de ejemplo

INSERT INTO products (name, price, category_id) VALUES ('Laptop', 899.99, 1), ('Camiseta', 19.99, 2), ('Sofá', 399.99, 3);

Este archivo SQL crea dos tablas: "categories" y "products". La tabla "categories" tiene dos columnas: "id" (que es la clave primaria de la tabla) y "name" (que es el nombre de la categoría). La tabla "products" tiene cuatro columnas: "id" (que es la clave primaria de la tabla), "name" (que es el nombre del producto), "price" (que es el precio del producto) y "category_id" (que es la clave foránea que relaciona el producto con su categoría correspondiente).


Además, este archivo SQL inserta algunas categorías y productos de ejemplo para que puedas probar las consultas y el funcionamiento de la aplicación.





jose fernandez

haz mismo ejemplo con fetch sin vuejs sin axios

Por supuesto, aquí te dejo un ejemplo de cómo podría ser el archivo HTML y el archivo PHP para obtener las categorías y los productos sin Vue.js y sin Axios. En este caso, se utilizará la función "fetch" de JavaScript para obtener los datos del servidor y mostrarlos en el frontend.


Archivo HTML:


html

Copy code

<!DOCTYPE html>

<html>

<head>

    <title>Ejemplo de select dependiente sin Vue.js y sin Axios</title>

</head>

<body>

    <h1>Ejemplo de select dependiente sin Vue.js y sin Axios</h1>


    <div>

        <label for="category">Categoría:</label>

        <select id="category">

            <option value="">Seleccione una categoría</option>

        </select>

    </div>


    <div>

        <label for="product">Producto:</label>

        <select id="product" disabled>

            <option value="">Seleccione un producto</option>

        </select>

    </div>


    <script>

        // Obtiene las categorías desde el servidor

        fetch('get_categories.php')

            .then(response => response.json())

            .then(categories => {

                // Agrega las categorías al select correspondiente

                const select = document.getElementById('category');

                categories.forEach(category => {

                    const option = document.createElement('option');

                    option.value = category.id;

                    option.textContent = category.name;

                    select.appendChild(option);

                });

            })

            .catch(error => console.error(error));

        

        // Obtiene los productos de la categoría seleccionada desde el servidor

        const categorySelect = document.getElementById('category');

        const productSelect = document.getElementById('product');

        categorySelect.addEventListener('change', () => {

            const categoryId = categorySelect.value;

            if (categoryId) {

                fetch(`get_products.php?category_id=${categoryId}`)

                    .then(response => response.json())

                    .then(products => {

                        // Agrega los productos al select correspondiente

                        productSelect.innerHTML = '<option value="">Seleccione un producto</option>';

                        products.forEach(product => {

                            const option = document.createElement('option');

                            option.value = product.id;

                            option.textContent = product.name;

                            productSelect.appendChild(option);

                        });

                        // Habilita el select de productos

                        productSelect.disabled = false;

                    })

                    .catch(error => console.error(error));

            } else {

                // Si no se seleccionó ninguna categoría, deshabilita el select de productos

                productSelect.disabled = true;

                productSelect.innerHTML = '<option value="">Seleccione un producto</option>';

            }

        });

    </script>

</body>

</html>

Archivo "get_categories.php":


php

Copy code

<?php

// Conexión a la base de datos

$pdo = new PDO("mysql:host=localhost;dbname=tu_base_de_datos", "tu_usuario", "tu_contraseña");


// Consulta SQL para obtener las categorías

$query = "SELECT id, name FROM categories";

$stmt = $pdo->query($query);

$categories = $stmt->fetchAll(PDO::FETCH_ASSOC);


// Devuelve las categorías en formato JSON

echo json_encode($categories);

?>

Archivo "get_products.php":


php

Copy code

<?php

// Verifica si se recibió el parámetro category_id

if (isset($_GET['category_id'])) {

    // Conexión a la base de datos

    $pdo = new PDO("mysql:host=localhost;dbname=tu_base_de_datos", "tu_usuario", "tu_contraseña");

    

    // Prepara la consulta SQL para obtener los productos de la categoría seleccionada

    $query = "SELECT id, name FROM products




jose fernandez

get_products.php

Aquí te dejo el código del archivo "get_products.php" que se encarga de obtener los productos de una categoría específica desde la base de datos y devolverlos en formato JSON:


php

Copy code

<?php

// Verifica si se recibió el parámetro category_id

if (isset($_GET['category_id'])) {

    // Conexión a la base de datos

    $pdo = new PDO("mysql:host=localhost;dbname=tu_base_de_datos", "tu_usuario", "tu_contraseña");

    

    // Prepara la consulta SQL para obtener los productos de la categoría seleccionada

    $query = "SELECT id, name FROM products WHERE category_id = :category_id";

    $stmt = $pdo->prepare($query);

    $stmt->bindParam(':category_id', $_GET['category_id']);

    $stmt->execute();

    $products = $stmt->fetchAll(PDO::FETCH_ASSOC);


    // Devuelve los productos en formato JSON

    echo json_encode($products);

} else {

    // Si no se recibió el parámetro category_id, devuelve un error

    http_response_code(400);

    echo json_encode(['error' => 'Falta el parámetro category_id']);

}

?>

Este archivo recibe el parámetro "category_id" a través de la URL y se utiliza para filtrar los productos por categoría en la consulta SQL. Luego, los resultados se devuelven en formato JSON utilizando la función "json_encode". Si el parámetro "category_id" no se recibió, se devuelve un error con el código de respuesta HTTP 400 (Bad Request).

Comentarios

Publicar un comentario

Entradas populares de este blog

INSERTAR Y UPDATE FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE

COMO INSERTAR FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE ChatGPT Para insertar una fecha con PHP y MySQL en un formulario usando el método POST con jQuery y la etiqueta date, puedes seguir estos pasos. Asumiré que estás utilizando un formulario HTML con un campo de fecha: Crear el formulario HTML: html Copy code <!DOCTYPE html> <html lang="es"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Formulario de Fecha</title>     <!-- Agregar jQuery -->     <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> </head> <body>     <form id="miFormulario">         <label for="fecha">Fecha:</label>         <input type="date" id="fecha" name="fecha" required>         <but...
Leer más

Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6

  Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6   Para crear una copia de seguridad de un archivo MS Access (.mdb) a un pendrive cuando se hace clic en un botón en un formulario VB6, puedes usar el siguiente código: vb Private Sub cmdBackup_Click ()     On Error GoTo ErrorHandler         Dim ArchivoOrigen As String     Dim ArchivoDestino As String     Dim UnidadPendrive As String     Dim FSO As Object     Dim Drv As Object     Dim Existe As Boolean         ' Ruta del archivo de origen (base de datos Access)     ArchivoOrigen = "C:\Ruta\A\Tu\BaseDeDatos.mdb" ' Cambiar por tu ruta real         ' Verificar si el archivo de origen existe     If Dir(ArchivoOrigen) = "" Then         Ms...
Leer más

CONVERTIR IMÁGEN JPG O PNG A WEBP CON PHP DE FORMA SIMPLE

ChatGPT Puedes convertir imágenes de formato JPG o PNG a WebP utilizando la biblioteca GD en PHP. Aquí te muestro un ejemplo simple de cómo hacerlo: php Copy code <?php // Ruta de la imagen de entrada (puede ser JPG o PNG) $imagen_entrada = 'imagen.jpg'; // Ruta de la imagen de salida en formato WebP $imagen_salida = 'imagen.webp'; // Cargar la imagen de entrada $imagen = imagecreatefromstring(file_get_contents($imagen_entrada)); // Verificar si la carga de la imagen fue exitosa if ($imagen !== false) {     // Guardar la imagen en formato WebP     imagewebp($imagen, $imagen_salida);     // Liberar la memoria utilizada por la imagen cargada     imagedestroy($imagen);     echo 'La imagen se ha convertido a formato WebP correctamente.'; } else {     echo 'No se pudo cargar la imagen de entrada.'; } ?> Asegúrate de que la extensión PHP GD esté habilitada en tu servidor. Además, si necesitas ajustar la calidad de la imagen Web...
Leer más