Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de PHP, MySQL y React REST API con formulario de ejemplo

 A lo largo de este tutorial, usaremos PHP con React y Axios para crear una aplicación API REST simple con operaciones CRUD. En el backend usaremos PHP con una base de datos MySQL.

El backend de PHP expondrá un conjunto de puntos finales de la API RESTful, por lo que usaremos la biblioteca Axios para realizar llamadas Ajax desde la interfaz de usuario de React.js.

También veremos cómo manejar formularios en React y cómo enviar datos de formularios de varias partes con Axios usando FormData .

En este tutorial, integraremos React con PHP usando Babel en el navegador y una <script>etiqueta. Como tal, serviremos la aplicación React desde PHP, por lo que no necesitamos habilitar CORS en nuestro servidor, ya que tanto el backend como el frontend se sirven desde el mismo dominio.

Veremos el otro enfoque de usar dos servidores separados para las aplicaciones frontend y backend en otro tutorial que usará create-react-apppara crear el proyecto React.

Prerrequisitos

Debe tener los siguientes requisitos previos para poder seguir este tutorial cómodamente:

  • Conocimiento de PHP y MySQL,
  • Conocimiento de JavaScript y React,
  • PHP y MySQL instalados en su máquina de desarrollo.

Creando la base de datos MySQL

Comencemos por crear una base de datos MySQL usando el cliente MySQL (esto generalmente se instala cuando instala el servidor MySQL). Abra una nueva terminal y ejecute el siguiente comando:

mysql -u root -p

Se le pedirá su contraseña de MySQL. Asegúrese de enviar la contraseña correcta y escriba Enter en su teclado para confirmar.

A continuación, estará presente con la CLI del cliente MySQL. Puede crear una base de datos utilizando la siguiente declaración SQL:

mysql> create database reactdb;

A continuación, agreguemos una tabla SQL en nuestra base de datos. Simpy ejecute las siguientes instrucciones SQL:

mysql> use reactdb;
mysql> CREATE TABLE `contacts` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `name` varchar(100) NOT NULL,
  `email` varchar(100) NOT NULL,
  `city` varchar(100),
  `country` varchar(100),
  `job` varchar(100)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Primero ejecutamos la useinstrucción SQL para seleccionar la reactdbbase de datos como nuestra base de datos de trabajo actual. A continuación, invocamos la CREATE TABLE <name_of_table>declaración para crear una tabla SQL que tenga las siguientes columnas:

  • id: un identificador único para la persona,
  • nombre: el nombre de la persona,
  • email: el correo electrónico de la persona,
  • ciudad: la ciudad de la persona
  • país: el país de la persona
  • trabajo: el trabajo que ocupa la persona

Básicamente, esta es una base de datos simple para administrar los datos de sus contactos.

Creación de la API RESTful de PHP y MySQL

Después de crear la base de datos, la tabla y las columnas de MySQL. Procedamos ahora a crear una interfaz API RESTful expuesta por una aplicación PHP que ejecuta operaciones CRUD en nuestra tabla MySQL creada previamente. Regrese a su terminal y comience creando un directorio para los archivos de su proyecto:

$ cd ~
$ mkdir php-react-rest-api-crud

Crear un punto final de API REST

Ahora, creemos un punto final que proporcione datos de contactos en formato JSON a nuestra interfaz de Vue.

Cree una apicarpeta dentro de la carpeta raíz de su proyecto:

$ mkdir api

Navegue dentro de la apicarpeta y cree un contacts.phparchivo y agregue el siguiente contenido:

<?php
$host = "localhost"; 
$user = "root"; 
$password = "YOUR_MYSQL_DB_PASSWORD"; 
$dbname = "reactdb"; 
$id = '';

$con = mysqli_connect($host, $user, $password,$dbname);

$method = $_SERVER['REQUEST_METHOD'];
$request = explode('/', trim($_SERVER['PATH_INFO'],'/'));


if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}


switch ($method) {
    case 'GET':
      $id = $_GET['id'];
      $sql = "select * from contacts".($id?" where id=$id":''); 
      break;
    case 'POST':
      $name = $_POST["name"];
      $email = $_POST["email"];
      $country = $_POST["country"];
      $city = $_POST["city"];
      $job = $_POST["job"];

      $sql = "insert into contacts (name, email, city, country, job) values ('$name', '$email', '$city', '$country', '$job')"; 
      break;
}

// run SQL statement
$result = mysqli_query($con,$sql);

// die if SQL statement failed
if (!$result) {
  http_response_code(404);
  die(mysqli_error($con));
}

if ($method == 'GET') {
    if (!$id) echo '[';
    for ($i=0 ; $i<mysqli_num_rows($result) ; $i++) {
      echo ($i>0?',':'').json_encode(mysqli_fetch_object($result));
    }
    if (!$id) echo ']';
  } elseif ($method == 'POST') {
    echo json_encode($result);
  } else {
    echo mysqli_affected_rows($con);
  }

$con->close();

Primero usamos la extensión MySQLi PHP para crear una conexión a nuestra base de datos MySQL usando el mysqli_connect()método. A continuación, usamos $_SERVER['REQUEST_METHOD']para recuperar el método de solicitud enviado desde el cliente Axios. Si la solicitud es GET, creamos una SELECTconsulta SQL si la solicitud es POST, creamos una INSERTconsulta SQL con los datos de publicación recuperados del $_POSTobjeto.

Después de eso, usamos el mysqli_query()método para ejecutar la consulta en nuestra tabla de base de datos para obtener o crear datos. Finalmente usamos el json_encode()método para codificar datos como datos JSON y enviarlos al cliente.

Puede servir su aplicación PHP usando el siguiente comando desde la raíz de su proyecto:

$ php -S 127.0.0.1:8080

Crea la aplicación React

A continuación, navegue hasta la carpeta raíz del proyecto y agregue un index.phparchivo:

$ touch index.php

A continuación, abra el index.phparchivo y agregue el siguiente código:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PHP| MySQL | React.js | Axios Example</title>
    <script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <!-- Load Babel Compiler -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
</body>
</html>

Simplemente incluimos las bibliotecas React, ReactDOM, Babel y Axios de sus CDN.

A continuación, en el index.html, en la <body>etiqueta de añadir una <div>etiqueta donde se puede montar su aplicación React:

<div id='root'></div>

A continuación, agregue una <script>etiqueta del text/babeltipo para crear nuestra aplicación React:

<body>
<div id='root'></div>

<script  type="text/babel">

class App extends React.Component {
  state = {
    contacts: []
  }
  render() {
    return (
        <React.Fragment>
        <h1>Contact Management</h1>
        <table border='1' width='100%' >
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Country</th>
            <th>City</th>
            <th>Job</th>     
        </tr>

        {this.state.contacts.map((contact) => (
        <tr>
            <td>{ contact.name }</td>
            <td>{ contact.email }</td>
            <td>{ contact.country }</td>
            <td>{ contact.city }</td>
            <td>{ contact.job }</td>
        </tr>
        ))}
        </table>
        </React.Fragment>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>   

Primero creamos un componente React llamado Appextendiendo la React.Componentclase. A continuación, agregamos una variable de contactos al stateobjeto que se utilizará para mantener los contactos después de que los recuperemos del punto final PHP REST usando Axios .

A continuación, definimos un render()método React que devuelve un fragmento que envuelve el <h1>encabezado y los <table>elementos.

En la tabla recorremos this.state.contactsy mostramos cada información <tr>correspondiente a cada contacto.

Finalmente, usamos el método render () de ReactDOM para montar nuestro Appcomponente en el DOM.

La contactsmatriz está vacía. Usemos el cliente Axios para enviar una solicitud GET para obtener datos del /api/contacts.phppunto final expuesto por el servidor PHP.

En el componente Aplicación, agregue un componentDidMount()método de ciclo de vida, que se llama cuando el componente se monta en el DOM y dentro de él; agregue el código para obtener datos:

  componentDidMount() {
    const url = '/api/contacts.php'
    axios.get(url).then(response => response.data)
    .then((data) => {
      this.setState({ contacts: data })
      console.log(this.state.contacts)
     })
  }

Cuando se obtienen los datos, llamamos al método React setState para actualizar el estado del componente con los datos obtenidos.

Cree un formulario de reacción para enviar datos

Agreguemos ahora un componente React que muestra un formulario y maneja el envío del formulario al backend de PHP. En su index.phparchivo, agregue el siguiente componente antes del Appcomponente:

class ContactForm extends React.Component {
    state = {
        name: '',
        email: '',
        country: '',
        city: '',
        job: '',

    }

    handleFormSubmit( event ) {
        event.preventDefault();
        console.log(this.state);
    }

    render(){
        return (
        <form>
            <label>Name</label>
            <input type="text" name="name" value={this.state.name}
                onChange={e => this.setState({ name: e.target.value })}/>

            <label>Email</label>
            <input type="email" name="email" value={this.state.email}
                onChange={e => this.setState({ email: e.target.value })}/>

            <label>Country</label>
            <input type="text" name="country" value={this.state.country}
                onChange={e => this.setState({ country: e.target.value })}/>

            <label>City</label>
            <input type="text" name="city" value={this.state.city}
                onChange={e => this.setState({ city: e.target.value })}/>

            <label>Job</label>
            <input type="text" name="job" value={this.state.job}
                onChange={e => this.setState({ job: e.target.value })}/>

            <input type="submit" onClick={e => this.handleFormSubmit(e)} value="Create Contact" />
        </form>);
    }
}

Luego inclúyelo en el Appcomponente para poder mostrarlo debajo de la tabla:


class App extends React.Component {
  // [...]
  render() {
    return (
        <React.Fragment>
            <!-- [...] -->
            <ContactForm />
        </React.Fragment>
    );
  }
}

Ahora cambiemos el método handleFormSubmit()of ContactFormpara enviar realmente los datos del formulario usando Axios y FormData a nuestro punto final PHP REST que se encarga de guardarlo en la base de datos MySQL:

    handleFormSubmit( event ) {
        event.preventDefault();


        let formData = new FormData();
        formData.append('name', this.state.name)
        formData.append('email', this.state.email)
        formData.append('city', this.state.city)
        formData.append('country', this.state.country)
        formData.append('job', this.state.job)

        axios({
            method: 'post',
            url: '/api/contacts.php',
            data: formData,
            config: { headers: {'Content-Type': 'multipart/form-data' }}
        })
        .then(function (response) {
            //handle success
            console.log(response)

        })
        .catch(function (response) {
            //handle error
            console.log(response)
        });
    }

Conclusión

En este tutorial, hemos visto cómo usar PHP con MySQL, React y Axios para crear una aplicación de ejemplo CRUD API REST simple. También hemos visto cómo manejar formularios en React y enviar datos al servidor.

Publicar un comentario

0 Comentarios