Neste post vou ensinar como exibir registros oriundos do banco de dados MySQL em um component Modal Bootstrap 4 com a linguagem de programação PHP. A utilização desta forma de exibição é muito utilizada para melhorar a experiência do usuário na utilização do sistema. Diminuindo a mudança de páginas é possível o aumento da velocidade no carregamento de páginas além de uma melhora na visualização dos dados.
2. BANCO DE DADOS
Irei utilizar o banco de dados MySQL muito utilizado em sistemas feitos com linguagens de programação Web como PHP que estamos utilizando.
A estrutura de exemplo será criada como uma empresa ficticia.
O nome do banco de dados será "empresa" onde terá uma tabela chamada "cliente" que possuirá 04 (quatro) colunas:
- id (Identificador único da tabela do tipo Int);
- nome (Nome do cliente do tipo Varchar);
- telefone (Telefone do cliente do tipo Varchar);
- email (E-mail do cliente do tipo Varchar).
3. LINGUAGEM DE PROGRAMAÇÃO
Iremos utilizar a linguagem de programação PHP que é uma das mais utilizadas para sistemas Web.
Além de sua semântica e sintaxe super simples ela possui muitas bibliotecas já prontas feitas ela comunidade assim facilitando e deixando mais rápido o desenvolvimento.
4. PROJETO
4.1 Página inicial (index.php)
Nesta página temos uma estrutura simples de HTML com classes e links de referência do framework CSS Bootstrap 4 que é encontrado rapidamente já pronto no link https://getbootstrap.com Além de termos algumas códigos em PHP dentro do HTML para exibição dinâmica.
Numa explicação rápida onde é mesmo que só é apenas um atalho pra melhorar a visualização e diminuir o código.
Já a passagem do índice por array é oriundo da busca MySQL com a Query acima.
O modelo de Modal é encontrado rapidamente no link
O segrego para exibir os dados que se encontram no banco de dados é o fechamento do escopo do while deve-se ser fechado após a última div do Modal.
Como aprender PHP de maneira profissional, completa e do jeito certo?
Se é iniciante neste mundo da linguagem de programação PHP então CLIQUE AQUI para saber mais e se torne um profissional no mercado de TI na área de programação web. CLIQUE AQUI para saber mais.<?php
include 'conexao.php';
?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="Emmanuel Siqueira">
<meta name="description" content="COMO EXIBIR DADOS DO BANCO DE DADOS MYSQL NO MODAL COM PHP">
<meta name="keywords" content="HTML, HTML5, PHP, CSS, Javascript, Bootstrap">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Lista de clientes</title>
</head>
<body>
<p class="h1 text-center">LISTA DE CLIENTES</p>
<table class="table">
<thead>
<tr>
<th scope="col">Nome</th>
<th scope="col">Telefone</th>
<th scope="col">E-mail</th>
<th scope="col">Opções</th>
</tr>
</thead>
<tbody>
<?php
$query = mysqli_query($conexao, "SELECT * FROM cliente");
while ($row = mysqli_fetch_assoc($query)) {
?>
<tr>
<th scope="row"><?= $row['nome']; ?></th>
<td><?= $row['telefone']; ?></td>
<td><?= $row['email']; ?></td>
<td><button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#modal<?= $row['id']; ?>">
Exibir
</button></td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade modal-dialog modal-dialog-centered" id="modal<?= $row['id']; ?>" tabindex="-1"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Informações do cliente</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
NOME: <?= $row['nome'] . "<br>"; ?>
TELEFONE: <?= $row['telefone'] . "<br>"; ?>
E-MAIL: <?= $row['email'] . "<br>"; ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
<?php } ?>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
</script>
</body>
</html>
Como aprender PHP de maneira profissional, completa e do jeito certo?
Se é iniciante neste mundo da linguagem de programação PHP então CLIQUE AQUI para saber mais e se torne um profissional no mercado de TI na área de programação web. CLIQUE AQUI para saber mais.
0 Comentários