Williams Duarte

Vou lhe dar outro exemplo de como você pode realizar esta consulta utilizando IN. A consulta SQL inicial buscará na tabela variações todos os registros que contenham a palavra "casa" ou seu plural "casas", e em seguida verificará se os outros itens desses registros estão ativos. Como SQL tem limitações para verificar múltiplas colunas de uma forma dinâmica em diferentes tabelas, faremos uma abordagem que requer uniões múltiplas com a tabela itens. SELECT v.* FROM variações v JOIN itens i1 ON (v.item1 = i1.item OR v.item1 = i1.plural) AND i1.ativo = 'S' JOIN itens i2 ON (v.item2 = i2.item OR v.item2 = i2.plural) AND i2.ativo = 'S' JOIN itens i3 ON (v.item3 = i3.item OR v.item3 = i3.plural) AND i3.ativo = 'S' WHERE 'casa' IN (v.item1, v.item2, v.item3) OR 'casas' IN (v.item1, v.item2, v.item3) Processamento PHP <?php $pdo = new PDO('mysql:host=your_host;dbname=your_dbname', 'username', 'password'); // Sua consulta SQL $sql = "SELECT v.* FROM variações v JOIN itens i1 ON (v.item1 = i1.item OR v.item1 = i1.plural) AND i1.ativo = 'S' JOIN itens i2 ON (v.item2 = i2.item OR v.item2 = i2.plural) AND i2.ativo = 'S' JOIN itens i3 ON (v.item3 = i3.item OR v.item3 = i3.plural) AND i3.ativo = 'S' WHERE 'casa' IN (v.item1, v.item2, v.item3) OR 'casas' IN (v.item1, v.item2, v.item3)"; $stmt = $pdo->query($sql); // Verifica se há registros if ($stmt->rowCount() > 0) { while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { echo "Registro encontrado: " . implode(", ", $row) . "<br>"; } } else { echo "Nenhum registro ativo encontrado."; } ?>

O problema está no retorno, não no script js, é como eu disse antes: " resposta esperada geralmente depende de como você configurou o servidor para lidar com o upload"

Só utilizar operador UNION ALL https://www.devmedia.com.br/sql-utilizando-o-operador-union-e-union-all/37457 Exemplo de Uso: $consulta = " ( SELECT A.cod_evento AS cod, A.titulo_evento AS titulo, A.data_evento AS data, 1 AS ordem FROM tabela1 A ) UNION ALL ( SELECT B.cod_noticia AS cod, B.titulo_noticia AS titulo, B.data_noticia AS data, 2 AS ordem FROM tabela2 B ) ORDER BY data, ordem; "; $resultado = mysqli_query($conexao, $consulta) or die ("Erro"); while($busca = mysqli_fetch_array($resultado)) { print $busca['cod']; print $busca['titulo']; } Adapte a sua necessidade!

Para gerenciar updates condicionais em múltiplas subcategorias no banco de dados MySQL, baseando-se na existência de relações entre essas subcategorias, você pode adotar uma abordagem que utiliza uma coluna de referência adicional e variáveis de usuário. Essa metodologia permite atualizações agrupadas e controladas, otimizando a manutenção e a consistência dos dados. Você tem duas tabelas relacionadas: uma para categorias e outra para subcategorias. A tabela de subcategorias deve conter uma coluna adicional, ref_id, destinada a estabelecer um vínculo entre subcategorias que devem ser atualizadas conjuntamente. Essa coluna vai ser usada para agrupar subcategorias relacionadas que, quando uma delas é atualizada, as demais também devem ser. Armazenamento Temporário (@RefID): Para facilitar a execução condicional de updates, você utiliza uma variável de usuário, @RefID, para armazenar temporariamente o valor de ref_id da subcategoria alvo do update. Execução Condicional do Update: Primeiramente, você recupera e armazena o ref_id da subcategoria alvo na variável @RefID. Com base no valor armazenado, você realiza o update em todas as subcategorias que compartilham o mesmo. Se a subcategoria alvo não está relacionada a outras (ou seja, ref_id é nulo), o update é realizado apenas nela. Implementação SQL: -- Armazenar o ref_id da subcategoria alvo SET @RefID := (SELECT ref_id FROM subcategoria WHERE id = X); -- Atualizar todas as subcategorias relacionadas UPDATE subcategoria SET campo = valor WHERE ref_id = @RefID; -- Atualizar a subcategoria alvo se não estiver relacionada UPDATE subcategoria SET campo = valor WHERE id = X AND ref_id IS NULL; A estrutura permite atualizações precisas, seja em subcategorias individuais ou em grupos, de acordo com a presença de relações entre elas. Maiores detalhes leia o documentação! MySQL User-Defined Variables: https://dev.mysql.com/doc/refman/8.0/en/user-variables.html

Você está lidando com um conflito entre módulos ES e CommonJS no seu projeto Node.js. Quando você define "type": "module" no seu package.json, o Node.js espera que todos os arquivos .js usem a sintaxe de módulos ES6 (import/export). O problema é que o Consign, pelo que você descreveu, não suporta diretamente esta sintaxe. Aqui estão algumas abordagens que você pode tentar: Alterar o Tipo de Módulo: Modifique "type": "module" para "type": "commonjs" no seu package.json. Isso exigirá que você atualize seu código para usar require e module.exports em vez de import e export. Aqui está um exemplo de como seu index.js poderia ser alterado: const express = require('express'); const consign = require('consign'); const app = express(); consign() .include("models") .then("libs/middlewares.js") .then("routes") .then("libs/boot.js") .into(app); Importação Dinâmica: Se quiser manter os módulos ES, experimente usar import() dinamicamente. Essa é uma solução mais moderna, mas pode não ser totalmente compatível com a forma como o Consign carrega arquivos. Reavaliar o Uso do Consign: Dependendo da complexidade do seu projeto, talvez valha a pena considerar estruturas alternativas que não dependam do Consign, facilitando o uso de módulos ES diretamente. Configuração Adequada do Babel: Como você já utiliza o Babel, certifique-se de que está corretamente configurado para transpilar o código ES6+ para compatibilidade com a versão do Node.js que você está usando. Isso pode ajudar a manter a sintaxe de módulos ES6 e ainda assim ser compatível com bibliotecas que esperam CommonJS.

Fiquei curioso sobre isto, então resolvi pesquisar! SELECT ROW_NUMBER() OVER (ORDER BY nome_usuario) AS contador, id_usuario, nome_usuario FROM usuarios

O erro "Unexpected token ... sugere que o seu código esperava JSON, mas recebeu HTML, provavelmente de uma página de erro (como 404 ou 500). Isso ocorre ao tentar converter a resposta do servidor em JSON quando a URL está errada ou o servidor não responde corretamente. Verifique a URL e as configurações do servidor para garantir que aceitam uploads POST e retornam JSON. fetch('http://localhost/dashboard/dados', { method: 'POST', body: formData }) .then(response => { if (!response.ok) { throw new Error('Houve um problema com a resposta da rede'); } // Verifica se a resposta é JSON antes de tentar converter const contentType = response.headers.get('content-type'); if (contentType && contentType.includes('application/json')) { return response.json(); } else { throw new Error('Não é JSON: ' + contentType); } }) .then(data => { console.log('Sucesso:', data); }) .catch(error => { console.error('Problemas com o Upload:', error); }); Entenda, quando você faz o upload de arquivos para um servidor usando PHP ou Node.js, a resposta esperada geralmente depende de como você configurou o servidor para lidar com o upload e o que você precisa fazer com os arquivos após recebê-los. Abaixo estão exemplos de respostas que você pode esperar de cada um: Exemplo de Resposta do PHP: <?php // Processamento do upload... // Supondo que tudo correu bem $response = [ 'success' => true, 'message' => 'Upload realizado com sucesso!', 'fileInfo' => [ 'name' => $_FILES['file']['name'], 'size' => $_FILES['file']['size'], 'type' => $_FILES['file']['type'], ] ]; header('Content-Type: application/json'); echo json_encode($response); Exemplo de Resposta do Node.js com Express: app.post('/upload', upload.single('file'), (req, res) => { // Processamento do upload... // Supondo que tudo correu bem res.json({ success: true, message: 'Upload realizado com sucesso!', fileInfo: { name: req.file.originalname, size: req.file.size, type: req.file.mimetype, } }); }); Obs.: Diferentes frameworks têm a capacidade de ajustar automaticamente seus comportamentos com base nos cabeçalhos HTTP recebidos, o que significa que não existe uma única abordagem padrão aplicável a todos os casos.

A lógica é bem parecida com a de um único arquivo, só que você vai incluir mais de um arquivo no formData. No input no seu HTML adicione o atributo multiple <input multiple type="file"> Agora, pegue os arquivos do input. const fileInput = document.querySelector('input[type="file"][multiple]'); Adicione cada arquivo ao formData Array.from(fileInput.files).forEach((file, index) => { // Aqui, 'files[]' é o nome do campo que será usado pelo servidor para receber os arquivos. // O uso de '[]' indica que é um array de arquivos. O nome exato depende da API do servidor. formData.append('files[]', file); }); O restante é praticamente igual! Fóruns exigem esforço próprio; não esperem soluções prontas. Pesquise para aproveitar bem.

Uma coisa que notei no seu código é a definição explícita do cabeçalho 'Content-Type' como 'multipart/form-data'. Na verdade, ao fazer uploads de arquivos usando FormData, é recomendável não definir esse cabeçalho manualmente. Isso porque o navegador precisa adicionar um boundary ao tipo de conteúdo, o que é algo que ele faz automaticamente quando você omite esse cabeçalho. Aqui vai uma sugestão de como você poderia ajustar o seu código: const formData = new FormData(); const fileField = document.querySelector('input[type="file"]'); formData.append('file', fileField.files[0]); fetch('http://localhost/dashboard/dados', { method: 'POST', body: formData }) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => { console.log('Success:', data); }) .catch((error) => { console.error('Problemas com o Upload:', error); }); Com essa abordagem, você deixa que o navegador cuide do cabeçalho Content-Type por você. Isso simplifica um pouco as coisas e pode resolver o problema que você está enfrentando. Além disso, é sempre bom verificar se o servidor está configurado corretamente para aceitar uploads de arquivos e se o endpoint especificado está correto e pronto para lidar com solicitações POST multipart/form-data. Se mesmo assim você continuar tendo problemas, uma boa dica é verificar os logs do servidor para mais detalhes sobre o que pode estar errado. Espero que essa dica te ajude a resolver o problema! Se tiver mais alguma dúvida ou se algo não estiver claro, sinta-se à vontade para perguntar. Boa sorte com o seu projeto!

Seu código está bastante extenso, tornando a análise um tanto complexa. Além disso, não identifiquei em nenhum ponto específico a execução de uma chamada POST que envie os dados atualizados através de data: {data: JSON.stringify(arrayData)}. É fundamental incluir essa chamada AJAX após a atualização dos dados para garantir que eles sejam enviados corretamente ao seu backend. Exemplo: $.ajax({ type: "POST", url: "<URL_PARA_ENVIO_DOS_DADOS>", data: {data: JSON.stringify(arrayData)}, success: function(response) { // Trate a resposta aqui }, error: function(xhr, status, error) { // Trate erros aqui } }); Usei um formatador online, para tentar pelo menos entender teu código, então faça um teste de evento de click: Lembrando que tu é o pai da criança, só você e Deus sabe oque este código faz, só estou lhe dando um exemplo, não é solução final. $(document).ready(function () { $('#apply_removal').on('click', function () { let percentage = $('#percentage').val(); // Coleta o percentual if (!percentage) { alert('Por favor, insira um percentual válido.'); return; } let arrayData = []; // Inicializa o array $('.table-body tr').each(function () { let veiculo = $(this).find('.veiculo').text(); let moto = $(this).find('.moto').text(); let caminhao = $(this).find('.caminhao').text(); let removal_vehicle = parseFloat(veiculo) * (1 + parseFloat(percentage) / 100); let removal_motorcycle = parseFloat(moto) * (1 + parseFloat(percentage) / 100); let removal_tuck = parseFloat(caminhao) * (1 + parseFloat(percentage) / 100); // Atualiza os campos na tabela $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2)); // Adiciona os dados atualizados ao array arrayData.push({ removal_vehicle, removal_motorcycle, removal_tuck }); }); // Faz a chamada AJAX para enviar ao backend $.ajax({ type: "POST", url: "<URL_PARA_ENVIO_DOS_DADOS>", // Substitua pela URL correta do seu backend data: JSON.stringify({data: arrayData}), // Certifique-se de que seu backend espera receber um JSON contentType: "application/json", // Informa ao servidor que o tipo de conteúdo é JSON success: function(response) { console.log('Dados enviados com sucesso!', response); }, error: function(xhr, status, error) { console.error('Erro ao enviar dados:', error); } }); }); });

Mais limpo: SELECT GROUP_CONCAT(nome SEPARATOR ', ') AS nomes FROM usuarios; <?php $query = mysqli_query($conexao, "SELECT GROUP_CONCAT(nome SEPARATOR ', ') AS nomes FROM usuarios"); $row = mysqli_fetch_assoc($query); $nomes = explode(', ', $row['nomes']); ?>

style.css Modifique os Detalhes do Tema /* Theme Name: Nome do Tema Theme URI: http://exemplo.com/nome-do-tema/ Author: Nome do Autor Author URI: http://exemplo.com/ Description: Uma breve descrição do tema. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: nome-do-tema */ Alterando os detalhes do tema neste arquivo style.css, vai fazer com que o WordPress e os sistemas de atualização o reconheçam como um tema diferente e, portanto, não apliquem atualizações automáticas destinadas ao tema original.

Acho que você tem demência, a quantos anos esta nesta vibe de tabela_aprendiz? Sobre "interpretação", leia direito, entenda o contexto, senão entender leia novamente! Senão entender ainda, copie e cole um trecho do que eu disse abaixo "restrições de segurança dos navegadores" e cole no google Veja o que eu disse, e não é você quem ira mudar isto. "Replicar a imagem selecionada no primeiro input para o segundo, e diretamente isso não é viável devido às restrições de segurança dos navegadores. Eles não permitem que scripts manipulem arquivos de input de forma direta por razões de privacidade." Vou faciltar sua vida porque tu gosta de coisa mastigada: Leia aqui: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file E é notório que em todo este tempo, não estudou o básico de Javascript e nem PHP. https://forum.imasters.com.br/topic/588653-rodar-código-php-em-servidores-diferentes/ E eu que tenho problemas de interpretação! rsrsrs

Percebi algum tempo atrás, que você tem uma tendência em rejeitar soluções que não se originam de seu próprio trabalho. Essa abordagem te limita em capacidade de aprendizado e crescimento na programação, um campo que se beneficia imensamente da colaboração e da troca de conhecimentos. Estar aberto a diferentes métodos e soluções não apenas enriquece sua base de conhecimento, mas também aprimora suas habilidades de resolução de problemas. Veja oque você ignorou funcionando: https://codepen.io/William-Duarte-the-decoder/pen/bGZjZKq Agora senão sabe trocar uma imagem ou link de exemplo, paciência! Veja o quanto você rejeita qualquer pergunta ou resposta feita: https://forum.imasters.com.br/topic/588664-carregar-imagem/ Veja o quanto fica ainda mais evidente que não sabe javascript básico: https://forum.imasters.com.br/topic/588672-servir-vários-banners-com-um-script/ Veja aqui a recomendação de um curso básico na Udemy, onde aprendera usar forEach para "Servir os banners" ou é manipular? rsrs https://www.udemy.com/course/curso-web/

Pelo que percebi, você buscou um script na internet e está tentando adaptá-lo às suas necessidades. No entanto, identifiquei que as transições não estão funcionando devido a vários problemas no seu código anterior. Sugeri duas soluções, sendo a última mais direta e eficaz. Entendo que, como o script é bastante diferente do que você encontrou originalmente, você pode estar tendo dificuldades para compreendê-lo devido a algumas limitações. É importante frisar que o conhecimento em JavaScript é essencial aqui, pois só assim você conseguirá entender completamente o código e realizar as modificações necessárias. Caso continue enfrentando dificuldades, talvez seja interessante considerar a contratação de um freelancer especializado. Eles podem oferecer o suporte técnico necessário para resolver esses problemas de forma eficiente, já que esta situação parece exigir uma assistência mais dedicada do que a que podemos oferecer aqui gratuitamente.

Corrigido, peço que, para futuras consultas, evite abrir múltiplos tópicos sobre o mesmo assunto, senão consegue resolver aguarde um pouco. Isso nos ajudará a manter o fórum organizado e a garantir que cada questão receba a atenção adequada. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Transição Suave entre Imagens</title> <style> #banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner-link { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: opacity 1s ease-in-out; opacity: 0; z-index: 1; /* Todos começam no fundo */ } .banner-link.active { opacity: 1; z-index: 2; /* Somente o ativo fica no topo */ } .banner-link img { width: 100%; height: auto; } </style> </head> <body> <div id="banner"> <a href="https://example.com/link1" class="banner-link active"><img src="https://via.placeholder.com/240x480?text=Image+1" alt="Image 1"></a> <a href="https://example.com/link2" class="banner-link"><img src="https://via.placeholder.com/240x480?text=Image+2" alt="Image 2"></a> <a href="https://example.com/link3" class="banner-link"><img src="https://via.placeholder.com/240x480?text=Image+3" alt="Image 3"></a> <!-- Adicione mais imagens conforme necessário --> </div> <script> const banner = document.getElementById('banner'); const links = document.querySelectorAll('.banner-link'); // Seleciona todos os links let currentIndex = 0; // Começa na primeira imagem function showRandomImage() { // Esconde o link (e a imagem dentro dele) atual links[currentIndex].classList.remove('active'); // Seleciona um novo link (e imagem) aleatório diferente do atual let randomIndex; do { randomIndex = Math.floor(Math.random() * links.length); } while (randomIndex === currentIndex); // Mostra o novo link (e imagem) links[randomIndex].classList.add('active'); // Atualiza o índice do link (e imagem) atual currentIndex = randomIndex; } showRandomImage(); // Mostra a primeira imagem let intervalId = setInterval(showRandomImage, 3000); // Altera a imagem a cada 3 segundos // Pausar o intervalo quando o mouse está sobre o banner banner.addEventListener('mouseover', () => { clearInterval(intervalId); }); // Retomar o intervalo quando o mouse sai do banner banner.addEventListener('mouseout', () => { intervalId = setInterval(showRandomImage, 3000); }); </script> </body> </html>

No seu CSS #banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner-link { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: opacity 1s ease-in-out; } .banner-link img { width: 100%; height: auto; } No seu JavaScript: Lembre-se de que a lógica de criação de novos elementos img e a foi removida, pois ela substituiria todo o conteúdo do banner, o que poderia interferir nas transições suaves. As imagens agora são controladas apenas por suas classes CSS. const links = document.querySelectorAll('.banner-link'); // Seleciona todos os links let currentIndex = 0; // Começa na primeira imagem // Inicialize todos os links como ocultos, exceto o primeiro links.forEach((link, index) => { if (index !== 0) { link.style.opacity = 0; link.style.zIndex = 1; link.style.position = 'absolute'; // Garante que todos os links usem o mesmo espaço } else { link.style.opacity = 1; link.style.zIndex = 2; link.style.position = 'relative'; } }); function showRandomImage() { // Esconde o link (e a imagem dentro dele) atual links[currentIndex].style.opacity = 0; links[currentIndex].style.zIndex = 1; // Seleciona um novo link (e imagem) aleatório diferente do atual let randomIndex; do { randomIndex = Math.floor(Math.random() * links.length); } while (randomIndex === currentIndex); // Mostra o novo link (e imagem) links[randomIndex].style.opacity = 1; links[randomIndex].style.zIndex = 2; // Atualiza o índice do link (e imagem) atual currentIndex = randomIndex; } showRandomImage(); // Mostra a primeira imagem setInterval(showRandomImage, 3000); // Altera a imagem a cada 3 segundos No HTML, você pode colocar cada imagem dentro de um elemento de link: <div id="banner"> <a href="https://example.com/link1" class="banner-link" style="opacity: 1; z-index: 2;"><img src="https://via.placeholder.com/240x480?text=Image+1" alt="Image 1"></a> <a href="https://example.com/link2" class="banner-link" style="opacity: 0; z-index: 1;"><img src="https://via.placeholder.com/240x480?text=Image+2" alt="Image 2"></a> <a href="https://example.com/link3" class="banner-link" style="opacity: 0; z-index: 1;"><img src="https://via.placeholder.com/240x480?text=Image+3" alt="Image 3"></a> <!-- Adicione mais imagens conforme necessário --> </div> Código HTML Completo: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Transition Suave entre Imagens</title> <style> #banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner-link { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: opacity 1s ease-in-out; } .banner-link img { width: 100%; height: auto; } </style> </head> <body> <div id="banner"> <a href="https://example.com/link1" class="banner-link" style="opacity: 1; z-index: 2;"><img src="https://via.placeholder.com/240x480?text=Image+1" alt="Image 1"></a> <a href="https://example.com/link2" class="banner-link" style="opacity: 0; z-index: 1;"><img src="https://via.placeholder.com/240x480?text=Image+2" alt="Image 2"></a> <a href="https://example.com/link3" class="banner-link" style="opacity: 0; z-index: 1;"><img src="https://via.placeholder.com/240x480?text=Image+3" alt="Image 3"></a> <!-- Adicione mais imagens conforme necessário --> </div> <script> const links = document.querySelectorAll('.banner-link'); // Seleciona todos os links let currentIndex = 0; // Começa na primeira imagem // Inicialize todos os links como ocultos, exceto o primeiro links.forEach((link, index) => { if (index !== 0) { link.style.opacity = 0; link.style.zIndex = 1; link.style.position = 'absolute'; // Garante que todos os links usem o mesmo espaço } else { link.style.opacity = 1; link.style.zIndex = 2; link.style.position = 'relative'; } }); function showRandomImage() { // Esconde o link (e a imagem dentro dele) atual links[currentIndex].style.opacity = 0; links[currentIndex].style.zIndex = 1; // Seleciona um novo link (e imagem) aleatório diferente do atual let randomIndex; do { randomIndex = Math.floor(Math.random() * links.length); } while (randomIndex === currentIndex); // Mostra o novo link (e imagem) links[randomIndex].style.opacity = 1; links[randomIndex].style.zIndex = 2; // Atualiza o índice do link (e imagem) atual currentIndex = randomIndex; } showRandomImage(); // Mostra a primeira imagem setInterval(showRandomImage, 3000); // Altera a imagem a cada 3 segundos </script> </body> </html>

Dei uma ligeira modificada e uma enxugada neste teu código, ja deixei comentado para o que cada linha faz, testa ai: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Colocar Imagens do Banner no HTML</title> <style> #banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner-img { width: 100%; height: 100%; object-fit: cover; position: absolute; transition: opacity 0.5s ease-in-out; } .banner-link { display: none; width: 100%; height: 100%; } .active { display: block; } </style> </head> <body> <div id="banner"> <a class="banner-link" href="link147"><img class="banner-img" src="imagem1.png" alt="Image 1"></a> <a class="banner-link" href="link254"><img class="banner-img" src="imagem2.png" alt="Image 2"></a> <a class="banner-link" href="link350"><img class="banner-img" src="imagem3.png" alt="Image 3"></a> <a class="banner-link" href="link462"><img class="banner-img" src="imagem4.png" alt="Image 4"></a> <a class="banner-link" href="link538"><img class="banner-img" src="imagem5.png" alt="Image 5"></a> </div> <script> const links = document.querySelectorAll('.banner-link'); let currentIndex = 0; function showRandomImage() { // Remover a classe 'active' da imagem/link atual links[currentIndex].classList.remove('active'); // Calcular o índice da próxima imagem currentIndex = (currentIndex + 1) % links.length; // Adicionar a classe 'active' à nova imagem/link links[currentIndex].classList.add('active'); } // Iniciar mostrando a primeira imagem links[currentIndex].classList.add('active'); // Alterar a imagem/link a cada 2 segundos setInterval(showRandomImage, 2000); </script> </body> </html>

Para entender melhor o problema e fornecer uma solução exata, seria muito útil se você pudesse compartilhar um fragmento do seu código, partes onde o modal e o editor são inicializados. Dessa forma, a comunidade pode examinar os detalhes e trabalhar em conjunto para encontrar a melhor solução. Lembre-se, uma imagem vale mais que mil palavras, mas apenas você conhece o que está por trás do código!

$.validator.addMethod( "customEmail", function (value, element) { // Regex que corresponde a @fulano, @beltrano, ou @sicrano return this.optional(element) || /^[\w-\.]+@(fulano|beltrano|sicrano)\.com\.br$/i.test(value); }, "Por favor, insira um e-mail válido com um dos seguintes domínios: @fulano.com.br, @beltrano.com.br, @sicrano.com.br" ); $("#formulario").validate({ ignore: ".ignore", rules: { empresa: { required: true }, nome: { required: true }, contato: { required: true }, celular: { required: true }, email: { required: true, email: true, customEmail: true }, }, }); Não sei se entendi direito! Agora se for qualquer dominio: $.validator.addMethod( "customEmail", function (value, element) { // Esta regex valida a estrutura básica de um e-mail. return this.optional(element) || /^[\w-\.]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i.test(value); }, "Por favor, insira um e-mail válido." ); $("#formulario").validate({ ignore: ".ignore", rules: { empresa: { required: true }, nome: { required: true }, contato: { required: true }, celular: { required: true }, email: { required: true, email: true, customEmail: true }, }, });

Para tornar o código mais limpo, modular e orientado a objetos (OOP), podemos encapsular as funcionalidades em classes e usar métodos para operar sobre os estados internos dos objetos. Isso torna o código mais organizado oque facilita a manutenção e compreensão. Vou reestruturar seu código. Classe OverviewCounter -> Esta classe conterá a lógica para contar os status e as pendências. Classe ComponentProcessor -> Esta classe será responsável por processar os componentes e pendências. Classe OverviewProcessor -> Esta classe usará as classes acima para processar os dados de visão geral e calcular as contagens. import { AssetStatusType } from '@domain/interfaces/common' import { BothComponentType, ComponentsType, GroupFiltersType, OperationType, OverviewModelType, PendenciesType, StructurePendenciesCount, StructureStatusCount } from '../../types' class OverviewCounter { private statusCount: StructureStatusCount = {} as StructureStatusCount; private pendenciesCount: StructurePendenciesCount = {} as StructurePendenciesCount; updateStatusCount(status: AssetStatusType) { this.statusCount[status] = (this.statusCount[status] || 0) + 1; } updatePendenciesCount(key: AssetStatusType, subKey: OperationType | PendenciesOverviewType) { this.pendenciesCount[key] = this.pendenciesCount[key] ?? {}; this.pendenciesCount[key][subKey] = (this.pendenciesCount[key]?.[subKey] || 0) + 1; } getStatusCount(): StructureStatusCount { return this.statusCount; } getPendenciesCount(): StructurePendenciesCount { return this.pendenciesCount; } } class ComponentProcessor { private counter: OverviewCounter; private countedIds: Set<string>; constructor(counter: OverviewCounter, countedIds: Set<string>) { this.counter = counter; this.countedIds = countedIds; } processPendencies(pendencies: PendenciesType[] | null | undefined, id: string, state: AssetStatusType) { if (pendencies?.length) { for (const { pendencyType } of pendencies) { const uniqueId = `${state}-${pendencyType}-${id}`; if (!this.countedIds.has(uniqueId)) { this.counter.updatePendenciesCount(state, pendencyType); this.countedIds.add(uniqueId); } } } } processComponents(components: ComponentsType[], isGroupByTree: boolean, id: string, type: BothComponentType) { for (const { pendencies, status, operationType } of components) { if (isGroupByTree && type === 'location') { this.counter.updateStatusCount(status); if (operationType) { this.counter.updatePendenciesCount(status, operationType); } } this.processPendencies(pendencies, id, status); } } } class OverviewProcessor { private counter: OverviewCounter; private countedIds: Set<string>; constructor() { this.counter = new OverviewCounter(); this.countedIds = new Set<string>(); } processOverviewData(data: OverviewModelType[], groupBy: GroupFiltersType) { const componentProcessor = new ComponentProcessor(this.counter, this.countedIds); const isGroupByTree = groupBy === 'tree'; const isGroupByAsset = groupBy === 'asset'; for (const { id, status, components, operationType, type } of data) { if (isGroupByAsset || type === 'asset') { this.counter.updateStatusCount(status); if (operationType) { this.counter.updatePendenciesCount(status, operationType); } } componentProcessor.processComponents(components, isGroupByTree, id, type); } } getResults() { return { ...this.counter.getStatusCount(), pendencies: this.counter.getPendenciesCount() }; } } export const calculateOverviewCounts = (data: OverviewModelType[], groupBy: GroupFiltersType) => { const processor = new OverviewProcessor(); processor.processOverviewData(data, groupBy); return processor.getResults(); };

A solução envolve um pouco de personalização no script de inicialização do DataTables. A ideia é utilizar a função customize disponível na opção pdfHtml5 que nos permite modificar o documento PDF gerado antes de salvá-lo. $('#exportar').DataTable({ language: { url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/pt-BR.json', }, dom: 'Bfrtip', order: [[ 0, 'desc' ]], buttons: [ { extend: 'pdfHtml5', text: 'Exportar para PDF', customize: function (doc) { // Ajuste o cabeçalho e o conteúdo doc.styles.tableHeader.fontSize = 10; // Tamanho da fonte para o cabeçalho doc.defaultStyle.fontSize = 8; // Tamanho da fonte para o conteúdo // Definir a largura das colunas para se ajustar proporcionalmente doc.content[1].table.widths = Array(doc.content[1].table.body[0].length + 1).join('*').split(''); } } ] }); O truque está na linha que ajusta a largura das colunas (doc.content[1].table.widths), fazendo com que cada coluna ocupe uma parte igual da largura total da página. https://datatables.net/reference/button/pdfHtml5 https://stackoverflow.com/questions/70784888/how-to-customize-jquery-datatables-export-pdf

Replicar a imagem selecionada no primeiro input para o segundo, e diretamente isso não é viável devido às restrições de segurança dos navegadores. Eles não permitem que scripts manipulem arquivos de input de forma direta por razões de privacidade. Mas uma maneira de contornar essa limitação, mostrando a imagem selecionada em ambos os campos, mesmo que não possamos tecnicamente "carregar" a imagem no segundo input. Exemplo: <!DOCTYPE html> <html lang="pt"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exemplo</title> </head> <body> <h2>Input1 - Escolha uma Imagem</h2> <input type="file" id="id1" name="input1" onchange="carregarImagem(event)"> <br><br> <h4>Imagem Selecionada no Input1:</h4> <img id="img1" style="width: 100px; height: 100px;" /><br><br> <h2>Input2 - Visualização da Imagem do Input1</h2> <input type="file" id="id2" name="input2" disabled> <!-- Desativei este campo, pois não é possível atribuir arquivos diretamente --> <h4>Imagem Espelhada do Input1 no Input2:</h4> <img id="img2" style="width: 100px; height: 100px;" /> <script> function carregarImagem(event){ var reader = new FileReader(); reader.onload = function(){ var output1 = document.getElementById('img1'); var output2 = document.getElementById('img2'); output1.src = reader.result; output2.src = reader.result; }; reader.readAsDataURL(event.target.files[0]); } </script> </body> </html>

Vamos começar pelo começo e pelo seu sistema de autoload em /mvc/modelos/funções.php, notei que você está utilizando um mecanismo personalizado para carregar suas classes. Isso é uma parte fundamental do projeto, pois um autoload eficiente e preciso é essencial para a gestão das dependências. Aqui está o seu trecho de código atual: spl_autoload_register(function ($Class) { $includeDir = false; $findDir = ['controles','modelos','visões']; foreach ($findDir as $DirName) { if (!$includeDir && file_exists(__DIR__ . FindClass($DirName, $Class)) && !is_dir(__DIR__ . FindClass($DirName, $Class))) { include_once (__DIR__ . FindClass($DirName, $Class)); $includeDir = true;}} if (!$includeDir) { die("Erro interno no servidor ao encontrar dados cruciais de funcionamento!");}}); Sugestões de Melhoria: Evite usar diretórios com acentos ou caracteres especiais, como visões. Isso pode causar inconsistências em diferentes ambientes de servidor. Prefira nomes em inglês ou sem acentuação, como views. Ao nomear diretórios e classes, adote uma convenção consistente. Por exemplo, use PascalCase para nomes de classes e camelCase para métodos e funções. Certifique-se de que o caminho gerado pela função FindClass seja o correto. Utilizar __DIR__ é uma boa prática, mas a função deve construir corretamente o caminho até o arquivo da classe. Agora, vamos falar sobre a conexão com o banco de dados em /mvc/modelos/conexão.php. Aqui está o trecho de código referente à sua classe conexão: class conexão { private static $pdo; public function __construct(){} public static function instância(){ $dbname="mvc"; $user="root"; $password=""; // ... código omitido ... if(!self::$pdo){ self::$pdo=new PDO("mysql:host=localhost;dbname=$dbname",$user,$password);} return self::$pdo;}} Sugestões de Melhoria: Renomeie a classe para evitar acentos. Por exemplo, use Conexao em vez de conexão. Considere a segurança e manutenção do seu código. Armazenar credenciais de banco de dados diretamente no código não é uma prática segura. Idealmente, essas informações devem estar em um arquivo de configuração externo ou variáveis de ambiente. Embora o padrão singleton possa ser útil em alguns casos, ele pode limitar a testabilidade e a flexibilidade da sua aplicação. Pense em alternativas como a injeção de dependências para gerenciar suas conexões de banco de dados. Por último, mas não menos importante, vamos olhar para a forma como você está lidando com a entrada do usuário em /mvc/controles/controle.php. Notei que você está passando diretamente a entrada do usuário para consultas SQL, o que pode ser uma porta aberta para ataques de injeção de SQL. Aqui está um exemplo do seu código: public function validaEmail($email){ $stmt=conexão::instância()->query("select email from usuários where email='$email'"); return $stmt->fetch(PDO::FETCH_ASSOC);} Sugestões de Melhoria: Nunca insira diretamente dados do usuário em suas consultas SQL. Use prepared statements para evitar injeção de SQL. Com prepared statements, sua consulta deve se parecer com isto: $stmt = conexão::instância()->prepare("SELECT email FROM usuarios WHERE email = :email"); $stmt->execute(['email' => $email]); return $stmt->fetch(PDO::FETCH_ASSOC); Novamente, evite usar acentos e caracteres especiais nos nomes de classes e tabelas. Implementando essas sugestões, você não só aumentará a segurança e a robustez do seu projeto, mas também tornará o código mais limpo, organizado e de acordo com as melhores práticas de desenvolvimento. Se precisar de mais alguma ajuda, não hesite em perguntar! Só vou colocar abaixo como faria um refactory nos trechos acima: Antes: spl_autoload_register(function ($Class) { $includeDir = false; $findDir = ['controles','modelos','visões']; foreach ($findDir as $DirName) { if (!$includeDir && file_exists(__DIR__ . FindClass($DirName, $Class)) && !is_dir(__DIR__ . FindClass($DirName, $Class))) { include_once (__DIR__ . FindClass($DirName, $Class)); $includeDir = true;}} if (!$includeDir) { die("Erro interno no servidor ao encontrar dados cruciais de funcionamento!");}}); Depois: spl_autoload_register(function ($class) { $includeDir = false; $directories = ['controllers', 'models', 'views']; foreach ($directories as $dirName) { $filePath = __DIR__ . DIRECTORY_SEPARATOR . $dirName . DIRECTORY_SEPARATOR . $class . '.php'; if (!$includeDir && file_exists($filePath) && !is_dir($filePath)) { include_once ($filePath); $includeDir = true; break; } } if (!$includeDir) { die("Internal server error: Unable to locate crucial operational data!"); } }); Antes: class conexão { private static $pdo; public function __construct(){} public static function instância(){ $dbname="mvc"; $user="root"; $password=""; // ... código omitido ... if(!self::$pdo){ self::$pdo=new PDO("mysql:host=localhost;dbname=$dbname",$user,$password);} return self::$pdo;}} Depois: class Conexao { private static $pdo; public function __construct() {} public static function getInstance() { $dbname = "mvc"; $user = "root"; $password = ""; // ... código omitido ... if (!self::$pdo) { self::$pdo = new PDO("mysql:host=localhost;dbname=$dbname", $user, $password); } return self::$pdo; } } Antes: public function validaEmail($email){ $stmt=conexão::instância()->query("select email from usuários where email='$email'"); return $stmt->fetch(PDO::FETCH_ASSOC);} Depois: public function validaEmail($email) { $stmt = Conexao::getInstance()->prepare("SELECT email FROM usuarios WHERE email = :email"); $stmt->execute(['email' => $email]); return $stmt->fetch(PDO::FETCH_ASSOC); } Essas mudanças aumentam a segurança e a robustez do seu projeto, e também tornam o código mais claro, organizado e alinhado com as melhores práticas de desenvolvimento em PHP. Isso facilita a manutenção e a escalabilidade do projeto. Para aumentar a segurança das suas credenciais de banco de dados e outras informações sensíveis, é recomendável carregar esses dados de um arquivo .env externo ao invés de tê-los diretamente no código. Para isso, você pode usar o pacote vlucas/phpdotenv, que é amplamente utilizado na comunidade PHP. Aqui está como você pode fazer isso: Primeiro, instale o pacote usando Composer (se você ainda não tem o Composer, terá que instalá-lo primeiro): composer require vlucas/phpdotenv Crie um arquivo .env na raiz do seu projeto com o seguinte conteúdo: DB_NAME=mvc DB_USER=root DB_PASSWORD=sua_senha_aqui No seu arquivo Conexao.php, você pode carregar as variáveis de ambiente e usar os valores para conectar-se ao banco de dados: Antes: class Conexao { private static $pdo; public function __construct() {} public static function getInstance() { $dbname = "mvc"; $user = "root"; $password = ""; // ... código omitido ... if (!self::$pdo) { self::$pdo = new PDO("mysql:host=localhost;dbname=$dbname", $user, $password); } return self::$pdo; } } Depois: use Dotenv\Dotenv; class Conexao { private static $pdo; public function __construct() {} public static function getInstance() { $dotenv = Dotenv::createImmutable(__DIR__); $dotenv->load(); $dbname = $_ENV['DB_NAME']; $user = $_ENV['DB_USER']; $password = $_ENV['DB_PASSWORD']; // ... restante do código ... if (!self::$pdo) { self::$pdo = new PDO("mysql:host=localhost;dbname=$dbname", $user, $password); } return self::$pdo; } } Certifique-se de adicionar o .env ao seu .gitignore para evitar que suas credenciais sejam expostas se você estiver usando controle de versão como Git. Essa abordagem não apenas melhora a segurança do seu aplicativo, mas também facilita a gestão de configurações em diferentes ambientes (desenvolvimento, teste, produção), pois você pode ter arquivos .env separados para cada ambiente sem precisar alterar o código.

Laravel é amplamente reconhecido como um framework robusto no ecossistema do PHP, introduzindo uma estrutura mais rica e elaborada que transcende as capacidades do PHP puro. Essa complexidade, contudo, não deve ser interpretada meramente como uma sobreposição ao PHP, mas como uma abordagem meticulosamente projetada para amplificar as potencialidades do desenvolvimento web. Embora seja verdade que ao adotar um framework como o Laravel, nos comprometemos com determinadas convenções e estruturas predefinidas, essa percepção de limitação é mitigada significativamente quando se integra o conhecimento e as práticas do Domain-Driven Design (DDD). O DDD oferece uma perspectiva que valoriza a modelagem do domínio de negócio, o que, por sua vez, promove uma abordagem mais flexível e adaptativa no desenvolvimento de software. Portanto, o compromisso com as convenções do Laravel pode ser visto não como uma restrição, mas como uma fundação sobre a qual soluções personalizadas e orientadas ao domínio podem ser construídas de forma eficaz. A escolha entre utilizar um framework como o Laravel ou optar pelo PHP puro não é uma questão de certo ou errado, mas sim uma decisão que deve ser alinhada às necessidades específicas de um projeto e à familiaridade do desenvolvedor com as ferramentas disponíveis. Enquanto alguns desenvolvedores apreciam a liberdade e a flexibilidade oferecidas pelo PHP puro, outros valorizam a eficiência, a estrutura e as facilidades que um framework como o Laravel pode oferecer. No que se refere à orientação a objetos, é crucial reconhecer que, apesar de existir uma curva de aprendizado, ela constitui uma abordagem poderosa que proporciona maior clareza, reusabilidade e facilidade de manutenção na programação em PHP. As críticas relacionadas à complexidade da orientação a objetos geralmente surgem de experiências de aprendizado mal direcionadas e não refletem a realidade prática, onde essa abordagem aprimora a gestão de projetos de software complexos e colaborativos. Conclusão, tanto o uso de frameworks como o Laravel quanto a programação em PHP puro apresentam seus próprios méritos e desafios. A decisão entre um e outro deve ser embasada no contexto do projeto, nos requisitos específicos e na experiência do desenvolvedor ou da equipe envolvida. Igualmente, a orientação a objetos, quando compreendida e implementada adequadamente, pode se tornar um recurso inestimável para aumentar a qualidade e a eficiência no desenvolvimento de software.