Untitled

<div class="row">
        <div class="col-md-4">
                <?php
          //comprobacion de mensaje guardao mediante $_SESSION segundo el tipo de alert ejemplo: $_SESSION['type']; alert-seccess en sesion tipo para mostrar
                if (isset($_SESSION['message'])) { ?>
                    <div  class="alert alert-<?=$_SESSION['type'];?> alert-disimissible fade-show" role="alert">
                        <?=$_SESSION['message'];?>
                         <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                   </div>
                    //destruir session al cerrar el alert de no ser asi al refrescar la pagina la session se mantiene y por ende el mensaje por igual.
                    <?php session_destroy();endif}?>
            <div class="card card-body">
             //formulario para agregar una nota el cual manda los datos mediante POST para ser verificados en el archivo save_task.php
                <form action="libs/save_task.php" method="POST">
                    <div class="form-group">
                        <input type="text" placeholder=" Write a Task" name="task" class="form-control" autofocus="">
                    </div>
                    <div class="form-group">
                        <textarea name="description" rows="2" placeholder="Write an description" class="form-control"></textarea>
                    </div>
                        <input type="submit" value="Save" class="btn btn-success form-control">
                </form>
            </div>
         </div>
        <div  class="col-md-8">
            <table id="tab" class="table table-bordered table-responsive-sm">
                <thead class="thead-dark">
                    <tr>
                        <th>Title</th>
                        <th>Description</th>
                        <th>Date-created</th>
                        <th>Edit</th>
                        <th>Delete</th>
                    </tr>
                </thead>
                 <tbody id="mostrar">//se carga los datos mediante JS de manera dinamica, con XMLHttpRequest();
                    </tbody>
            </table>
        </div>
    </div></div> <script src="js/main.js"></script><script src="js/jquery-3.2.1.js"></script><script src="js/bootstrap.min.js"></script></body></html>

<?php session_start(); require_once 'database.php';
//validacion campos enviados por $_POST no esten vacios
 //preparacion de la consulta
try {
    $stmt = Database::conectar()->prepare("INSERT INTO task(title, description) VALUES(:title, :desp)");
//vinculacion de parametros
    $stmt->bindParam(':title', $_POST['task']);
    $stmt->bindParam(':desp', $_POST['description']);
//ejecucion de la consulta
    $stmt->execute();
    $_SESSION['type'] = 'success';
    $_SESSION['message'] = 'Save task';
    header('Location: ../');
} catch (PDOException $e) {
    print_r('Error en: ' . $e->getMessage());  }}else{ $_SESSION['type'] = 'warning';$_SESSION['message'] ='Not empty message null';header('Location: ../');}

$_SESSION['type'] = 'success'; //guardo el tipo de color a mostrar en el alert de bootstrap en este caso se mostrara alert-success
    $_SESSION['message'] = 'Save task'; // y aqui el mensaje a mostrar
    header('Location: ../'); // redirecciona a la pagina principal y mostrara los mensajes ya sea que la consulta haya sido exitosa o que hubiese generado error.

<tbody id="mostrar">
  </tbody>

function mostrarTodo() {
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange= function(){
    if (this.readyState === 4 && this.status===200) {
        document.getElementById('mostrar').innerHTML =this.responseText;
    }
}
xmlhttp.open("GET","libs/mostrarDatos.php",true );
xmlhttp.send();}mostrarTodo();

<?php
require_once 'database.php';//se hace un require para el archivo databa.php
$sql = "SELECT * FROM task";//variable que contiene la consulta
            $stmt = Database::conectar()->prepare($sql);//preparacion de la consutla
            $stmt->execute();//ejecucion de la consulta
            while ($result= $stmt->fetch(PDO::FETCH_OBJ)) { ?><tr > // recorre con un while y con fetch se obtienen las filas
                        <!-- <td><?=$result->id;?></td> -->
                        <td><?=$result->title;?></td>
                        <td><?=$result->description;?></td>
                        <td><?=$result->created_at;?></td>
                        <td class="update">
       <button  type="button" data-toggle="modal" data-target="#editarUsuario" class="btn btn-secondary" data-id="<?=$result->id;?>">
                                <i class="fa fa-edit"></i>
                            </button></td>
                        <td>
                            <a class="btn btn-danger" href="libs/delete_task.php?id=<?=$result->id;?>">
                                <i class="fa fa-trash"></i>
                            </a>
                        </td>
                    </tr>
       <?php }//end while ?>

<button  type="button" data-toggle="modal" data-target="#editarUsuario"        class="btn btn-secondary" data-id="<?=$result->id;?>">
                  <i class="fa fa-edit"></i>
                            </button>

document.addEventListener("click", function(event){
//validacion que busca en especifico la clase .btn btn-sencodary
if (event.target.className=="btn btn-secondary"){

var id = event.target.dataset.id;
    // console.log(id);
        cargarFormulario(id , function(){
            document.querySelector("#ed").innerHTML = this.responseText;
     });
}    });

var id = event.target.dataset.id;

cargarFormulario(id , function(){
            document.querySelector("#ed").innerHTML = this.responseText;
     });

function cargarFormulario(id, callback){
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
            if(this.readyState === 4 && this.status === 200) {
                callback.apply(xmlhttp);
            } //end if
    }
    xmlhttp.open("GET", "libs/edit_task.php?id=" + id , true);
    xmlhttp.send();

xmlhttp.onreadystatechange = function(){
            if(this.readyState === 4 && this.status === 200) {
                callback.apply(xmlhttp);
            } //end if
    }

<div class="modal fade" id="editarUsuario" tabindex="-1" role="dialog" aria-labelledby="Titulo" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title text-center" id="Titulo">Editar nota</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
        <div id="ed" class="modal-body">
        </div>
        <div class="modal-footer">
            <button type="button" class="btb btn-secondary" data-dismiss="modal">
            Cancelar</button>
        </div>
    </div>
    </div>
</div>

var alerta =document.getElementById("alerta");document.addEventListener("click", function(e){if (e.target.id == "save_data") {var id = e.target.dataset.id;
saveUpdates(id)}});function saveUpdates(id) {
var ts = document.querySelector("#ts").value;
var tes = document.querySelector("#tes").value;

var title = "title="+ts;
var description = "&description=" + tes;
 xmlhttp = new XMLHttpRequest();
 xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            mostrarTodo();
            alerta.innerText=this.responseText;
        }
 }
 xmlhttp.open("GET","libs/saved_changes.php?&"+ title + description + '&id='+id, true);
 xmlhttp.send();

if (this.readyState == 4 && this.status == 200) {
                mostrarTodo(); // al pasar la verificacion llamamos a la funcion mostrarTodo() para ver vizualmente los cambios, ya que de no ser asi el usuario no se percataria de nada.
                alerta.innerText=this.responseText; // de retornar variables se utuliza la referencia al div#alert

<?php
require_once 'database.php';
if (isset($_GET)) {
try {
         $sql="UPDATE task SET title = :title , description = :descri
          WHERE id =:id";

    $consulta = Database::conectar()->prepare($sql);
    $consulta->bindParam(":title", $_GET['title']);
    $consulta->bindParam(":descri", $_GET['description']);
    $consulta->bindParam(":id", $_GET['id']);
    $consulta->execute();
    $tipo = $_SESSION['type'] = 'success';
    $mensaje = $_SESSION['message'] = 'Changes successfully';
} catch (PDOException $e) {
    $tipo = $_SESSION['type'] = 'danger';
    $mensaje = $_SESSION['message'] = 'No se guardaron los cambios';
}
echo $tipo;
echo $mensaje;}

<?php
  class Database { //reemplazar
private static $host = 'localhost';
private static $user = ''; // usario
private static $password = ''; //password
private static $dbname = 'php2019';
private static $charset = 'utf8mb4';

public function __construct()
{
    self::$host;
    self::$user;
    self::$password;
    self::$dbname;
    self::$charset;
}

public static function conectar()
{
    try {
        $dns = 'mysql:host=' . self::$host . ';dbname=' . self::$dbname . ';charset='.self::$charset;
        $options = [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_EMULATE_PREPARES => false,
        ];
        $pdo = new PDO($dns, self::$user, self::$password, $options);
        return $pdo;
    } catch (PDOException $e) {
        print_r('Error al establecer conexion con el provedor de bases de datos' . $e->getMessage());
    }
}

$var tipo = array(
       '0' => 'success',
       '1' => 'warning',
       '2' => 'danger',
       ); ///etc....
 $var mensaje = array(
    '0' => 'Mensaje exito',
     '1' => 'mensaje en caso de advertencia',
      '2' => 'mensaje en caso de error'
    );

<div class="alert-<?=$tipo[0];?>" > //mostraria aler-success qu es el color del alert mensaje exitoso</div>"