Como preencher próximo campo select com JavaScript e salvar no banco de dados com PHP
Neste tutorial, será apresentado como preencher o próximo campo select com JavaScript e salvar no banco de dados com PHP.
Primeiramente, será mostrado como preencher o campo select com PHP; conforme a opção selecionada pelo usuário, ela é recuperada no JavaScript.
Em seguida, será apresentado como preencher o próximo campo select com JavaScript.
Por fim, será mostrado como salvar no banco de dados.
Download do código fonte desenvolvido na aula: Download
Curso de PHP Developer: Mais Detalhes do Curso
Receber as aulas gratuitas do curso de PHP Developer: Acessar
Para começar, é criado o arquivo "index.php" com a estrutura básica do HTML e o formulário.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Celke</title>
</head>
<body>
<h2>Preencher próximo select</h2>
<form method="POST" action="">
<label>Curso: </label>
<select name="curso_id" id="curso_id">
<option value="">Selecione</option>
</select><br><br>
<label>Módulo: </label>
<select name="modulo_id" id="modulo_id">
<option value="">Selecione</option>
</select><br><br>
<label>Conteúdo: </label>
<textarea name="conteudo" id="conteudo" cols="30" rows="4" placeholder="Conteúdo do curso"></textarea><br><br>
<input type="submit" value="Salvar"><br><br>
</form>
</body>
</html>Criado o arquivo "js/custom.js". Nele, é implementado para receber os seletores dos campos "curso" e "módulo". Com os seletores recuperados, verifica-se se o seletor "curso" existe na página para evitar erros no JavaScript. Se o seletor existir, aguarda-se o usuário selecionar um curso no formulário. Ao selecionar um curso, a função JavaScript é executada, recuperando o ID do curso selecionado pelo usuário e chamando o arquivo "listar_modulos.php", responsável por recuperar no banco de dados os módulos que pertencem ao curso.
// Receber o SELETOR do campo curso do formulário
const inputCursoId = document.getElementById("curso_id");
// Receber o SELETOR do campo módulo do formulário
const inputModuloId = document.getElementById("modulo_id");
// Somente acessa o IF quando existir o SELETOR "curso_id"
if (inputCursoId) {
// Aguardar o usuario clicar no botao apagar
inputCursoId.addEventListener("change", async () => {
// Receber o id da opção selecionada
const cursoId = inputCursoId.value;
// Criar a opção carregando para o campo select módulo
inputModuloId.innerHTML = "<option value=''>Carregando...</option>";
// Chamar o arquivo PHP responsável em recuperar os módulos do banco de dados
const dados = await fetch('listar_modulos.php?cursoid=' + cursoId);
});
}Necessário incluir o arquivo "custom.js" com JavaScript no arquivo "index.php".
<script src="./js/custom.js"></script>Criada a base de dados "celke" com as tabelas "cursos", "modulos" e "aulas". Abaixo está o SQL para criar a tabela "cursos" e inserir alguns registros.
CREATE TABLE IF NOT EXISTS `cursos` (
`id` int NOT NULL AUTO_INCREMENT,
`nome` varchar(220) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
INSERT INTO `cursos` (`id`, `nome`) VALUES
(1, 'Curso de PHP'),
(2, 'Curso de Laravel');Abaixo está o SQL para criar a tabela "modulos" e inserir alguns registros, indicando a qual curso pertence o módulo.
CREATE TABLE IF NOT EXISTS `modulos` (
`id` int NOT NULL AUTO_INCREMENT,
`nome` varchar(220) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL,
`curso_id` int NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
INSERT INTO `modulos` (`id`, `nome`, `curso_id`) VALUES
(1, 'Módulo 1 - Introdução ao PHP', 1),
(2, 'Módulo 2 - PHP e Banco de Dados', 1),
(3, 'Módulo 1 - Introdução ao Laravel', 2),
(4, 'Módulo 2 - Como criar sistema administrativo com Laravel', 2),
(5, 'Módulo 3 - Criar sistema de papeis com Laravel', 2);Abaixo está o SQL para criar a tabela "aulas".
CREATE TABLE IF NOT EXISTS `aulas` (
`id` int NOT NULL AUTO_INCREMENT,
`conteudo` text NOT NULL,
`modulo_id` int NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;O próximo passo é criar o arquivo "conexao.php", no qual é implementada a conexão do projeto com a base de dados "celke".
<?php
//Inicio da conexão com o banco de dados utilizando PDO
$host = "localhost";
$user = "root";
$pass = "";
$dbname = "celke";
$port = 3306;
try {
//Conexão com a porta
//$conn = new PDO("mysql:host=$host;port=$port;dbname=" . $dbname, $user, $pass);
//Conexão sem a porta
$conn = new PDO("mysql:host=$host;dbname=" . $dbname, $user, $pass);
//echo "Conexão com banco de dados realizado com sucesso.";
} catch (PDOException $err) {
echo "Erro: Conexão com banco de dados não realizado com sucesso. Erro gerado " . $err->getMessage();
}
//Fim da conexão com o banco de dados utilizando PDO
No arquivo "index.php", é incluÃdo o arquivo "conexao.php", recuperados os cursos no banco de dados e impressos no campo "cursos".
// Incluir o arquivo com a conexão com banco de dados
include_once './conexao.php';
// Recuperar do banco de dados os cursos
$query_cursos = "SELECT id, nome FROM cursos ORDER BY nome ASC";
// Prepara a QUERY
$result_cursos = $conn->prepare($query_cursos);
// Executar a QUERY
$result_cursos->execute();
?>
<label>Curso: </label>
<select name="curso_id" id="curso_id">
<option value="">Selecione</option>
<?php
// Percorrer o array de cursos retornado do banco de dados
while ($row_curso = $result_cursos->fetch(PDO::FETCH_ASSOC)) {
// Extrair o array de dados para usar o nome do elemento do array como variável
extract($row_curso);
// Criar a opção para o campo select
echo "<option value='$id'>$nome</option>";
}
?>
</select><br><br>Criado o arquivo "listar_modulos.php", responsável por recuperar os módulos conforme o curso selecionado no formulário. Após recuperar os registros do banco de dados, são retornados para o JavaScript.
<?php
// Incluir o arquivo com a conexão com banco de dados
include_once './conexao.php';
// Receber o id do curso
$curso_id = filter_input(INPUT_GET, 'cursoid', FILTER_SANITIZE_NUMBER_INT);
// $curso_id = 100;
// QUERY para recuperar os módulos
$query_modulos = "SELECT id, nome FROM modulos WHERE curso_id =:curso_id ORDER BY nome ASC";
// Prepara a QUERY
$result_modulos = $conn->prepare($query_modulos);
// Substituir o link pelo valor
$result_modulos->bindParam(':curso_id', $curso_id);
// Executar a QUERY
$result_modulos->execute();
// Acessar o IF quando encontrar módulo no banco de dados
if(($result_modulos) and ($result_modulos->rowCount() != 0)){
// Ler os registros recuperado do banco de dados
$dados = $result_modulos->fetchAll(PDO::FETCH_ASSOC);
// Criar o array com o status e os dados
$retorna = ['status' => true, 'dados' => $dados];
}else{
// Criar o array com o status e os dados
$retorna = ['status' => false, 'msg' => 'Nenhum módulo encontrado!'];
}
// Converter o array em objeto e retornar para o JavaScript
echo json_encode($retorna);No JavaScript, é feita a leitura dos dados retornados do PHP e verificado se algum registro foi encontrado, neste caso, algum módulo. Se não encontrar, envia a opção para o campo de módulos indicando que não foram encontrados registros. No entanto, se encontrar registros, acessa o bloco IF, que contém um laço de repetição percorrendo a lista de módulos. Após percorrer a lista de módulos, os dados são enviados para o campo de módulos.
// Ler os dados
const resposta = await dados.json();
//console.log(resposta);
// Acessar o IF quando encontrar módulo no banco de dados
if (resposta['status']) {
// Criar a opção selecione para o campo select módulo
var opcoes = "<option value=''>Selecione</option>";
// Percorrer a lista de módulos
for (var i = 0; i < resposta.dados.length; i++){
// Criar a lista de opções para o campo select módulos
opcoes += `<option value='${resposta.dados[i]['id']}'>${resposta.dados[i]['nome']}</option>`;
}
// Enviar as opções para o campo select no HTML
inputModuloId.innerHTML = opcoes;
} else {
// Enviar a opção vazia para o campo select no HTML
inputModuloId.innerHTML = `<option value=''>${resposta['msg']}</option>`;
}Para finalizar, é acrescentado no arquivo "index.php" na tag <form> para qual arquivo os dados do formulário devem ser enviados quando o usuário clicar no botão salvar.
<form method="POST" action="cadastrar_aula.php">Criado o arquivo "cadastrar_aula.php", responsável por cadastrar o registro no banco de dados e atribuir a mensagem de erro ou sucesso na sessão "msg".
<?php
session_start(); // Iniciar a sessão
// Limpar o buffer de saida
ob_start();
// Incluir o arquivo com a conexão com banco de dados
include_once './conexao.php';
// Receber os dados enviado pelo formulário
$dados = filter_input_array(INPUT_POST, FILTER_DEFAULT);
// var_dump($dados);
// Criar a QUERY cadastrar módulo no banco de dados
$query_cad_aula = "INSERT INTO aulas (conteudo, modulo_id) VALUES (:conteudo, :modulo_id)";
// Prepara a QUERY
$cad_aula = $conn->prepare($query_cad_aula);
// Substituir o link pelo valor
$cad_aula->bindParam(':conteudo', $dados['conteudo']);
$cad_aula->bindParam(':modulo_id', $dados['modulo_id']);
// Verificar se consegui cadastrar corretamente
if ($cad_aula->execute()) {
// Criar a sessão msg e atribuir a mensagem de sucesso
$_SESSION['msg'] = "<p style='color: #082;'>Aula cadastrada com sucesso!</p>";
// Redirecionar o usuário para o formulário
header("Location: index.php");
} else {
// Criar a sessão msg e atribuir a mensagem de sucesso
$_SESSION['msg'] = "<p style='color: #f00;'>Aula não cadastrada!</p>";
// Redirecionar o usuário para o formulário
header("Location: index.php");
}
A mensagem de erro ou sucesso, criada no arquivo "cadastrar_aula.php", será impressa para o usuário através do arquivo "index.php". Primeiramente, a sessão é iniciada e verifica-se se existem mensagens. Se existirem, são impressas.
session_start(); // Iniciar a sessão
// Verificar se existe a sessão msg
if (isset($_SESSION['msg'])) {
// Imprimir o valor que está na sessão
echo $_SESSION['msg'];
// Destruir a sessão
unset($_SESSION['msg']);
}Baixar o código-fonte completo do projeto.
Bom, era isso. Espero que o tutorial tenha sido útil!