Featured Post

Tablas Responsivas con Bootstrap 5 pc escritorio y dispositivos mobiles

el
0

Proyecto web tabla registros Javascript Fetch Await Async (peticiones asíncronas) Php Api-Json Mysql MaterializeCSS

el

Proyecto web tabla registros Javascript Fetch Await Async (peticiones asíncronas) Api-Json Mysql Php MaterializeCSS

INDEX.PHP

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>


<style>

* {

font-family: "Century Gothic";

}

table.striped > tbody > tr:nth-child(odd) {

background-color: rgba(170, 213, 213, 0.5);

}

</style>

</head>

<body>

<br>

<div class="main container">

<a class="btn-floating btn-small  btn green darken-1 modal-trigger" href="#demo-modal"><i class="material-icons right">add_circle</i></a>


<div id="demo-modal" class="modal">


<div class="modal-content">

    

<h4>Nuevo Ingreso</h4>

<div class="row">

<div class="input-field col s6">

<input placeholder="ingrese" id="nombre" type="text" class="validate">

<label for="nombre">Nombre</label>

</div>

<div class="input-field col s6">

<input placeholder="ingrese" id="precio" type="number" class="validate">

<label for="precio">Precio</label>

</div>

</div>

</div>


<div class="modal-footer">

<a href="#" class="modal-action modal-close btn teal lighten-1">Guardar</a>

<a href="#" class="modal-action modal-close waves-effect waves-red btn red lighten-1">Cerrar</a>

</div>

</div>

<hr>

<table class="striped">

<thead style="background-color:black;color:white;">

<tr>

<th>Id</th>

<th>Nombre</th>

<th>Precio</th>

<th>Editar/Eliminar</th>

</tr>

</thead>

<tbody id="tbody">

</tbody>

</table>

<hr>

</div>

<script>

const tbody = document.querySelector("#tbody");

async function cargar_tabla() {

tbody.innerHTML = "";

const resultado = await fetch("json_api.php");

const datos = await resultado.json();

return datos.articulos.map((i) => {

 const tr = document.createElement("tr");

 tr.id = i.id;

 const td1 = document.createElement("td");

 const td2 = document.createElement("td");

 const td3 = document.createElement("td");

 const td4 = document.createElement("td");

 const cid = document.createTextNode(i.id);

 const cnombre = document.createTextNode(`${i.nombre}`);

 const cprecio = document.createTextNode(`$ ${i.precio}`);


 const actions = `<button class="btn-floating btn-small yellow" onclick="editar(${i.id},'${i.nombre}','${i.precio}')" type="submit"><i class="material-icons right">edit</i></button> <button class="btn-floating btn-small red" onclick="eliminar(${i.id},'${i.nombre}','${i.precio}')" type="submit"><i class="material-icons right">delete</i></button>`;


 td1.appendChild(cid);

 td2.appendChild(cnombre);

 td3.appendChild(cprecio);

 td4.innerHTML = actions;


 tr.appendChild(td1);

 tr.appendChild(td2);

 tr.appendChild(td3);

 tr.appendChild(td4);

 tbody.appendChild(tr);

  });

}


document.addEventListener("DOMContentLoaded", function () {

  cargar_tabla();

});


function editar(id,n,p) {

alert(id + "-" + n + " -" + " $" + p);

}


function eliminar(id,n,p) {

alert(id + "-" + n + " -" + " $" + p);

}


$(document).ready(function(){

    $('.modal').modal();

  })

</script>

</body>

</html>

API_JSON.PHP

<?php

header('Access-Control-Allow-Origin: *');

header('Content-Type: application/json; charset=UTF-8');

header('Access-Control-Allow-Methods: GET');


$conexion=new PDO("mysql:dbname=tienda;host=localhost","root","root");

$conexion->query("SET NAMES 'UTF8'");

$consulta = "SELECT * FROM articulos";

$resultado = $conexion->prepare($consulta);

$resultado->execute();

$articulos = array();

while($registros=$resultado->fetch(PDO::FETCH_ASSOC)){

     $articulos["articulos"][]= $registros;

}

echo json_encode($articulos, JSON_PRETTY_PRINT);

?>

VISTA PREVIA














Post publicado por:




Comentarios

Publicar un comentario