Saltar al contenido

Tutorial de Reactjs Crud – Eliminar usuario

Hola amigos, bienvenidos de nuevo a mi blog. Hoy, en esta publicación de blog, les voy a decir: Tutorial de Reactjs Crud – Eliminar usuario.


Reactjs Crud Parte 1 – Agregar video de trabajo de usuario:

Reactjs Crud – Agregar usuario

Reactjs Crud Parte 2 – Ver video de trabajo del usuario:


Reactjs Crud Parte 3 – Eliminar el video de trabajo del usuario:

Reactjs Crud Eliminar usuario

Para los recién llegados a reactjs, consulte el siguiente enlace para obtener una comprensión básica:

Tutoriales básicos de Reactjs


Amigos, ahora sigo adelante y aquí está el fragmento de código de trabajo para Tutorial de Reactjs Crud – Eliminar usuario y utilícelo con cuidado para evitar errores:

1. En primer lugar amigos antes de iniciar Reactjs eliminar el tutorial de usuario, debe consultar el Tutorial de Reactjs Crud para agregar usuario, ver el usuario e implementar ese fragmento de código completo:

Tutorial de Reactjs Crud – Agregar usuario

Tutorial de Reactjs Crud – Ver usuario

2. Ahora amigos, necesitamos ejecutar los siguientes comandos para obtener el módulo sweetlaert en nuestra aplicación reactjs:

Sweetalert mostrará un mensaje de éxito del usuario eliminado:

npm install sweetalert2-react

npm start

3. Chicos, después de haber terminado por completo con el paso 1 y el paso 2, primero debemos eliminar el código antiguo del archivo reactadduser / src / Home.js y agregue el siguiente código en nuestro archivo reactadduser / src / Home.js:

import React from 'react';
import './App.css';

//Import react routes and its other modules
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';

//Include Sweetalert
import Swal from 'sweetalert2'

//Bootstrap libraries
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
//jquery, popper.js libraries for bootstrap modal
import 'jquery/dist/jquery.min.js';

import $ from 'jquery';

//Axios servies module for post or get request
import axios from 'axios';


class Home extends React.Component {
  constructor(props) {
    super(props)
      this.state = {
        data: [],
        userdetails:[]
              }
      }

      //Get user details inside bootstrap modal popup
      userdetails(userid){
        
        const fd = new FormData();
          fd.append('userid', userid);
          
          
          axios.post('http://localhost/reactimageupload.php', fd
          ).then(res=>
          {
    
            //Storing user detail in state array object
            this.setState({userdetails: res.data[0]});
            $("#myModal").modal("show");

          
          }
          );
      }

      //Delete User Function
      deleteuser(userid)
      {
        const fd = new FormData();
          fd.append('deleteid', userid);
          
          
          axios.post('http://localhost/reactimageupload.php', fd
          ).then(res=>
          {
    
            
            //Get all users details in bootstrap table
            axios.get('http://localhost/reactimageupload.php').then(res => 
            {
            //Storing users detail in state array object
            this.setState({data: res.data});
            }); 

            //Success Message in Sweetalert modal
            Swal.fire({
              title: 'User id of '+userid+' has been deleted.',
              text: res.data.data,
              type: 'success',
              
            });

          
          }
          );
      }
      componentDidMount(){

        //Get all users details in bootstrap table
        axios.get('http://localhost/reactimageupload.php').then(res => 
        {
        //Storing users detail in state array object
        this.setState({data: res.data});
           }); 
        
        }
    
 
  render() {
   
    return (
     
      <div className="maincontainer">
        
        <h1 className="mr-5 ml-5 mt-5">Reactjs simple crud tutorial for beginners</h1>
        <div className="container mb-5 mt-5 text-left">
        <button className="bg-primary mb-3"><Link class="nav-link" to={'/adduser'}><span>Add</span><i class="fas fa-user"></i></Link></button>
        <table class="table table-hover table-bordered">
          <thead>
            <tr>
              <th>ID</th>
              <th>Email</th>
              <th>Username</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
          {this.state.data.map((result) => {
            return (
             
                 <tr>
                  <td>{result.id}</td>
                  <td>{result.email}</td>
                  <td>{result.username}</td>
                  <td>
                    <button className="bg-info" onClick={e => {this.userdetails(result.id)}}> <i class="fas fa-eye"></i> </button>
                    <button className="bg-warning"> <i class="fas fa-edit"></i> </button>
                    <button className="bg-danger" onClick={e => {this.deleteuser(result.id)}}> <i class="fas fa-trash"></i> </button>
                  </td>
                </tr>
             
            )
          })}
           
            
          </tbody>
        </table>

        
            
      </div>
      <div class="modal" id="myModal">
            <div class="modal-dialog">
              <div class="modal-content">
              
                <div class="modal-header">
                  <h4 class="modal-title align-center">User : {this.state.userdetails.username}</h4>
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                
                <div class="modal-body text-center">
                <table class="table table-hover table-bordered">
          <thead>
            <tr>
              <th>ID</th>
              <th>Email</th>
              <th>Username</th>
              
            </tr>
          </thead>
          <tbody>
          
             
                  <tr>
                  <td>{this.state.userdetails.id}</td>
                  <td>{this.state.userdetails.email}</td>
                  <td>{this.state.userdetails.username}</td>
                  </tr>
           
            
          </tbody>
        </table>
                </div>
              
                <div class="modal-footer">
                  <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>
    
      </div>
      
)
};
}

export default Home;

4. Ahora amigos, aquí está mi fragmento de código php para agregar, eliminar, obtener datos de mysql y mostrar en reactjs y agregué este código en mi archivo xampp / htdocs / save.php:

Primero elimine el código antiguo del archivo save.php y agregue el siguiente código nuevo en el archivo save.php:

// Cree una base de datos de usuarios dentro de phpmysql admin y cree una tabla de detalles de usuario y cree campos de identificación, correo electrónico y nombre de usuario

<?php
//Please create users database inside phpmysql admin and create userdetails tabel and create id, email and username fields
$servername = "localhost";
$username   = "root";
$password   = "";
$dbname     = "users";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

//Add user
if(isset($_POST['myEmail']))
{
    $sql = "INSERT INTO userdetails (email, username)
        VALUES ('".$_POST['myEmail']."', '".$_POST['myUsername']."')";
    if (mysqli_query($conn,$sql)) {

        //Success Message
        $data = array("data" => "You Data added successfully");
        echo json_encode($data);
    } else {
        $data = array("data" => "Error: " . $sql . "<br>" . $conn->error);
        echo json_encode($data);
        
    }
}

//Get single user details
elseif(isset($_POST['userid']))
{
    $trp = mysqli_query($conn, "SELECT * from userdetails where id =".$_POST['userid']);
    $rows = array();
    while($r = mysqli_fetch_assoc($trp)) {
        $rows[] = $r;
    }
    print json_encode($rows);
}
//Delete user
elseif(isset($_POST['deleteid']))
{
    $sql = mysqli_query($conn, "DELETE from userdetails where id =".$_POST['deleteid']);
    if ($sql) {
        
        //Success Message
        $data = array("data" => "Record deleted successfully");
        echo json_encode($data);
      } else {
      
        $data = array("data" =>"Error deleting record: " . mysqli_error($conn));
        echo json_encode($data);
      }
}
else
{
    //get all users details
    $trp = mysqli_query($conn, "SELECT * from userdetails");
    $rows = array();
    while($r = mysqli_fetch_assoc($trp)) {
        $rows[] = $r;
    }
    print json_encode($rows);
}
?>

Ahora hemos terminado amigos. Si tiene algún tipo de consulta o sugerencia o algún requisito, no dude en comentar a continuación.

Chicos en mi próxima publicación, les diré, Operación reactjs php crud: edite el usuario agregado en la ventana emergente modal de bootstrap.

Nota: Amigos, solo les digo la configuración básica y cosas, pueden cambiar el código de acuerdo con sus requisitos. Para un mejor entendimiento debe ver los videos de arriba.
Te agradeceré que cuentes tus opiniones para esta publicación, nada importa si tus opiniones son buenas o malas.

Jassa

Gracias

La publicación Reactjs Crud Tutorial – Delete User apareció primero en Therichpost.