Boa tarde,
Poderiam me auxiliar? Consigo puxar os dados do meu banco de dados, cada linha certinho, mas preciso organizar cada linha em uma coluna, ou poder formatar com CSS, para ficar certinho e não só jogado na tela.
Banco de dados:
CREATE DATABASE portoBianchini;
USE portoBianchini;
CREATE TABLE Usuario (
idUsuario INTEGER NOT NULL AUTO_INCREMENT,
nomeCompleto VARCHAR(50) NOT NULL,
senha VARCHAR(20) NOT NULL,
PRIMARY KEY(idUsuario)
);
CREATE TABLE Navio (
idNavio INTEGER NOT NULL AUTO_INCREMENT,
transportadora VARCHAR(50) NOT NULL,
comandante VARCHAR(50) NOT NULL,
matrícula VARCHAR(20) NOT NULL,
PRIMARY KEY(idNavio)
);
CREATE TABLE Caminhao (
idCaminhao INTEGER NOT NULL AUTO_INCREMENT,
trasportadora VARCHAR(50) NOT NULL,
motorista VARCHAR(50) NOT NULL,
placa VARCHAR(10) NOT NULL,
PRIMARY KEY(idCaminhao)
);
CREATE TABLE Container (
idContainer INTEGER NOT NULL AUTO_INCREMENT,
remetente VARCHAR(50) NOT NULL,
destinatario VARCHAR(50) NOT NULL,
localizacao VARCHAR(3) NOT NULL,
origem VARCHAR(7) NOT NULL,
destino VARCHAR(7) NOT NULL,
dtEntrada datetime NOT NULL,
codigo VARCHAR(20),
PRIMARY KEY(idContainer)
);
CSS que utilizo:
* {
margin: 0;
padding: 0;
}
body {
font: 100% normal Arial, Helvetica, sans-serif;
background: #161712;
}
form,
input,
select,
textarea {
margin: 0;
padding: 0;
color: #ffffff;
}
div.box {
margin: 0 auto;
text-align: center;
width: 500px;
background: #222222;
margin-top: 50px;
border: 1px solid #262626;
}
div.box img {
margin-top: 5px;
width: 120px;
height: 75px;
}
div.box h1 {
color: #ffffff;
font-size: 22px;
text-transform: uppercase;
padding: 5px 0 5px 5px;
border-bottom: 1px solid #161712;
}
div.box h2 {
color: #ffffff;
font-size: 18px;
text-transform: uppercase;
padding: 5px 0 5px 5px;
border-bottom: 1px solid #161712;
}
div.box h3 {
color: #ffffff;
margin-top: 15px;
padding: 5px 0 5px 5px;
}
div.box label {
width: 100%;
display: block;
background: #1C1C1C;
border-top: 1px solid #262626;
border-bottom: 1px solid #161712;
padding: 10px 0 10px 0;
}
div.box label span {
display: block;
color: #bbbbbb;
font-size: 12px;
float: left;
width: 100px;
text-align: right;
padding: 5px 20px 0 0;
}
div.box .input_text {
padding: 10px 10px;
width: 200px;
background: #262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left: 1px double #333333;
border-right: 1px double #333333;
}
div.box .button {
color: white;
margin: 10px;
width: 160px;
height: 50px;
background: #CC0000;
border-bottom: 1px double #660000;
border-top: 1px double #660000;
border-left: 1px double #FF0033;
border-right: 1px double #FF0033;
}
Página que preciso formatar:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Saída de Container</title>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="image/logo.jpg" >
</head>
<body>
<div class="box">
<!--FORMULÁRIO DE CADASTRO-->
<form method="post" id="cadastrocontainer">
<h1>Cadastro Saída Container</h1>
<label>
<span>Código</span>
<input id="cod" name="cod" type="text" class="input_text"/>
</label>
</form>
<button onclick="window.location.href='scontainer.php'" class="button">Cadastrar</button>
<button onclick="window.location.href='pageInicial.php'" class="button">Cancelar</button>
</div>
<div class="box">
<form>
<?php
$db = new PDO(
'mysql:host=localhost;dbname=portobianchini;charset=utf8',
'root', '' );
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$resultado = $db->query('SELECT * FROM container');
foreach($resultado as $linha) {
echo "*ID:*".' '.$linha['idContainer'].' '."*Remetente:*".' '.$linha['remetente'].' '."*Destinatário:*".' '.$linha['destinatario'].' '."*Localização:*".' '.$linha['localizacao'].' '."*Origem:*".' '.$linha['origem'].' '."*Destino:*".' '.$linha['destino'].' '."*Data de Entrada:*".' '.$linha['dtEntrada'].' '."*Código:*".' '.$linha['codigo']."<br>"."<br>";
}
?>
</form>
</div>
</body>
</html>
Em anexo coloquei como aparece a tela agora para mim.
Obrigado desde já, amigos.
