Frank K Hosaka

Na terceira versão, eu mexi o máximo que pude no CSS .modal, quase que eu consegui botar a caixa do input em cima do elemento que foi clicado. Pelo menos, deixei mais prático, o input recebe o foco e sempre limpa. <style> form {margin: 0;} .modal { display: none; position: relative; z-index: 1; padding-top: 0px; left: 0; top:0; width: 29%; height: 20%; overflow: absolute; } .modal-content { background-color: #fefefe; margin: auto; padding: 0px; border: 1px solid #888; width: 80%;} </style> <script> function verli(jd) { inpli.value=jd; divmodal.style.display="block"; inpmudar.focus();} function mudar() { var element = document.getElementById(inpli.value); element.innerHTML=inpmudar.value; inpmudar.value=""; divmodal.style.display="none";} </script> <li id="li1" onclick="verli(id)">A</li> <li id="li2" onclick="verli(id)">vaca</li> <li id="li3" onclick="verli(id)">foi</li> <li id="li4" onclick="verli(id)">para</li> <li id="li5" onclick="verli(id)">o</li> <li id="li6" onclick="verli(id)">brejo</li> <div id="divmodal" class="modal" > <div class="modal-content"> <form> <input id="inpmudar" onchange="mudar()" autocomplete="off"> <input type="hidden" id="inpli"> </form> </div> </div>

A minha segunda versão é bem melhor que a primeira. Eu criei um <input> oculto para ajudar a função 'mudar' a "lembrar" qual foi o item que foi selecionado, mas ainda não descobri como evitar a repaginação se alguém apertar a tecla {enter}. <style> form {margin: 0;} .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top:170; width: 100%; height: 50%; overflow: auto; } .modal-content { background-color: #fefefe; margin: auto; padding: 10px; border: 1px solid #888; width: 80%;} </style> <script> function verli(jd) {inpli.value=jd;divmodal.style.display="block"} function mudar() { var element = document.getElementById(inpli.value); element.innerHTML=inpmudar.value; divmodal.style.display="none";} </script> <li id="li1" onclick="verli(id)">A</li> <li id="li2" onclick="verli(id)">vaca</li> <li id="li3" onclick="verli(id)">foi</li> <li id="li4" onclick="verli(id)">para</li> <li id="li5" onclick="verli(id)">o</li> <li id="li6" onclick="verli(id)">brejo</li> <div id="divmodal" class="modal" > <div class="modal-content"> <form> Mudar para:<input id="inpmudar" onchange="mudar()"> <input type="hidden" id="inpli"> </form> </div> </div>

Esse programa só funciona se você não usar a tecla {ENTER}, ao clicar em 'ola' ou 'mundo', ele abre um input onde você pode digitar uma outra palavra para substituir a palavra que você selecionou. Para o input funcionar, basta você clicar fora da área do input. Se você apertar a tecla {ENTER}, isso vai repaginar tudo, e vai voltar a tudo o que era antes. Não sei como evitar a repaginação com a tecla {ENTER}. Pretendo usar esse algorítimo para alterar o registro de uma tabela - hoje eu tenho diario.php e detalhe.php, pretendo alterar tudo na tela do diario.php. <style> form {margin: 0;} .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top:170; width: 100%; height: 50%; overflow: auto; } .modal-content { background-color: #fefefe; margin: auto; padding: 10px; border: 1px solid #888; width: 80%;} </style> <script> var lig = ""; function mudali2() {divmodal.style.display="block";lig="li2";} function mudali3() {divmodal.style.display="block";lig="li3";} function mudar() { if (lig=="li2") {li2.innerHTML=inpmudar.value;} if (lig=="li3") {li3.innerHTML=inpmudar.value;} divmodal.style.display="none";} </script> <li id="li2" onclick="mudali2()">olá</li> <li id="li3" onclick="mudali3()">mundo</li> <div id="divmodal" class="modal" > <div class="modal-content"> <form> Mudar para:<input id="inpmudar" onchange="mudar()"></form> </div> </div>

Eu tenho um orçamento.php que foi idealizado para o ceular, ou seja, você não precisa de um papel inteiro para imprimir o orçamento. Você pode cortar o papel no meio, e pedir para o Android imprimir a tela do navegador, só que no modo paisagem, supondo que o celular e a impressora estejam na mesma rede local. É óbvio que o melhor é pedir para o Android transformar a página do navegador em pdf e depois você encaminha o pdf para o WhatsApp ou email do interessado.

Ontem, eu escrevi sobre o menor menu para o celular. Eu modifiquei o menu.php para apresentar o menor menu do mundo, é aquele que não aparece em nenhum lugar. Para o usuário sair da tela do diário e ir para a tela do balancete, basta dar um duplo clique na tela. menu.php <script> function ligamodal() {divmodal.style.display = "block";} function desligamodal() {divmodal.style.display = "none";} </script> <style> form {margin: 0;} .modal { display: none; position: absolute; z-index: 1; padding-top: 0px; left: 100; top:0; width: 30%; height: 50%; overflow: auto; } .modal-content { background-color: #fefefe; margin: auto; padding: 10px; border: 1px solid #888; width: 80%;} </style> <body ondblclick='ligamodal()'> <div id='divmodal' class='modal' onclick='desligamodal()'> <div class='modal-content'> <a href="orcamento.php">Orçamento</a><br> <a href="diario.php">Diário</a><br> <a href="balancete.php">Balancete</a><br> <a href="pagar.php">Pagar</a><br> <a href="pessoa.php">Pessoa</a><br> <a href="produto.php">Produto</a><br> <a href="apuracao.php">Apuração</a><br> </div> </div>

Eu faria assim: <?php $login=$_POST['login']; $senha=$_POST['senha']; $mysqli = new mysqli("12.0.0.1","log","Pa$$wOrd","meusdados"); // meusdados é o nome do banco de dados if ($mysqli->connect_errno) {echo "falha na conexão com MySQL".$mysqli->connect_errno; exit;} $insert = $mysqli->query("insert into tbusuario (usuario, senha) values ('$login', '$senha')");

Essa é a minha listagem do menu.php <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- código copiado de https://www.devmedia.com.br/menu-em-css-menu-dropdown-horizontal-com-html5-e-css3/37205--> <style> ul {margin: 0; padding: 0; list-style-type: none;} li {margin: 0; padding: 0; list-style-type: none;} th {border: 1px solid blue;} td {white-space: nowrap;} *{margin: 0; padding: 0;} body{font-family: arial, helvetica, sans-serif;} .menu{list-style:none;border:1px solid #c0c0c0;float:right;} .menu li{position:relative;float:right;border-right:1px solid #c0c0c0;} .menu li a{color:#333; text-decoration:none; padding:5px 10px; display:block;} .menu li a:hover{background:#333;color:#fff;-moz-box-shadow:0 3px 10px 0 #CCC; -webkit-box-shadow:0 3px 10px 0 #ccc;text-shadow:0px 0px 5px #fff;} .menu li ul{position:absolute;top:25px;left:-100;background-color:#fff;display:none;} .menu li:hover ul, .menu li.hover ul{display:block;} .menu li ul li{border:1px solid #c0c0c0;display:block;width:150px;} div#divmenu{ width: 63px; background: #e9e9e9; height: 30px; float:right;} </style> <div id="divmenu"> <ul class="menu"> <li><a href="#">Menu</a> <ul> <li><a href="orcamento.php">Orçamento</a></li> <li><a href="diario.php">Diario</a></li> <li><a href="balancete.php">Balancete</a></li> <li><a href="pagar.php">Pagar</a></li> <li><a href="produto.php">Produto</a></li> <li><a href="apuracao.php">Apuracao</a></li> </ul> </li> </ul> </div> E aqui as imagens:

<a href="#home" class="active"> De acordo com html - What is href="#" and why is it used? - Stack Overflow, o que eu consegui entender é que o href é sempre um hyperlink, geralmente para fora da página de onde você está. Para navegar dentro da página é que se usa # mais o nome do elemente para onde você deseja saltar. O problema do código é que não encontrei nenhum id="home" ou preciso melhorar as minhas buscas no Google.

<a href="javascript:void(0);" class="icon" onclick="myFunction()"> De acordo com What Does JavaScript:Void(0) Mean? (freecodecamp.org), o void(0) é o único recurso disponível para executar um código JavaScript sem atualizar a página do navegador. Ele não faz muito sentido, mas eu tentei colocar o código <script> no topo da página, e o resultado foi inesperado, ele começa a página com o menu em evidência. Estudando a função, isso faz sentido. A função altera entre o menu exposto e indisposto. Já o void(0) faz mais sentido, o usuário pode abrir e fechar o menu a vontade, até ele decidir o que fazer da vida. O curioso é que eu encontrei um código usando o evento ondblclick, não sei se isso existe, mas comigo não funciona. Eu inventei o seguinte código: <input type="submit" onclick="alert('olá mundo')" ondblclick="alert('olá olá mundo mundo')" value="me clique"> e ele só executa o primeiro clique. O segundo clique, ele nunca executa ou sou devagar demais com o mouse. Ainda sobre esse código, existe class="icon", eu não consegui achar nenhuma informação no Google e nem no arquivo CSS do Awesome.

<i class="fa fa-bars"></i> Hoje eu aprendi que o marcador <i> é para deixar o texto em itálico. Eu só conhecia o <b> que deixa o texto em negrito. No caso do código em estudo, o marcador <i> recebeu a definição de duas classes, o "fa" e o "fa-bars", e eles vão ser encontradas no arquivo indicado no marcador <link>, ou seja, no font-awesome.min.css. Ou seja, a Awesome deve ser a dona do ícone do hamburger. Fontes: HTML i Tag (w3schools.com) e fa-bars: Font Awesome Icons

Esse é o código do meu menu.php: <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- código copiado de https://www.w3schools.com/howto/howto_js_mobile_navbar.asp antes de usar o php include é preciso definir a variável $menu --> <style> ul {margin: 0; padding: 0; list-style-type: none;} li {margin: 0; padding: 0; list-style-type: none;} th {border: 1px solid blue;} td {white-space: nowrap;} body {font-family: Arial, Helvetica, sans-serif;} .mobile-container {max-width: 480px; margin: auto; background-color: #555; height: 500px; color: white; border-radius: 10px;} .topnav {overflow: hidden; background-color: #333; position: relative;} .topnav #myLinks {display: none;} .topnav a {color: white; padding: 14px 16px; text-decoration: none; font-size: 17px; display: block;} .topnav a.icon {background: black; display: block; position: absolute; right: 0; top: 0;} .topnav a:hover {background-color: #ddd; color: black;} .active {background-color: #04AA6D; color: white;} </style> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="topnav"> <a href="#home" class="active"><?php echo $menu; ?></a> <div id="myLinks"> <a href="orcamento.php">Orçamento</a> <a href="diario.php">Diário</a> <a href="balancete.php">Balancete</a> <a href="pessoa.php">Pessoa</a> <a href="produto.php">Produto</a> <a href="pagar.php">Pagar</a> <a href="apuracao.php">Apuração</a> </div> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> <script> function myFunction() { var x = document.getElementById("myLinks"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; }} </script> Se você quiser testar esse código vai ser necessário tirar o código php que coloquei na <div> que foi "classificado" como topnav e colocar qualquer texto. O programa é bem simples, ele esconde a <div> topnav, e quando você aperta o ícone do hamburger, ele mostra a <div> topnav, onde estão mascarados vários links com a ajuda do CSS. É bem fácil entender o que o programa faz, como ele faz que é o problema. Eu tenho uma lista enorme de dúvidas: 1) como o elemento <link> define o formato do ícone do hamburger? Eu abri o arquivo font-awesome.min.css, mas não achei nada que indicasse o formato do ícone. 2) o elemento <a href="#home"> só atualiza a tela, quando o usuário clicar no texto que está na <div> topnav que está sempre visível? 3) o que é o elemento <a href="javascript:void(0);">? 4) o que é o elemento <i class="fa fa-bars"></i>? Vou tentar achar as respostas no Google, o meu problema é que o meu inglês é péssimo.

O Wash está me ajudando a montar um menu tipo hamburger, o único que dá para usar no celular. Estamos tendo problema nos links, eu desconfio que o problema é no CSS onde eu não tenho a menor experiência. No meio do caminho, o Wash montou uma tabela exemplo, onde ele escreveu na coluna produto as palavras Café, Itália e Pérola. O Wash é profissional, e eu sou um programador eventual. Fiquei feliz com a iniciativa do Wash. Eu fui na minha tabela produtos, e alterei Perola para Pérola. Fui na caixa de busca e escrevi "perola", e o PHP disse que encontrou "Pérola". Puxa vida, pensei eu. Será que eu posso escrever Maçã ao invés de Maca? Será que eu posso escrever Café ao invés de Cafe? Será que eu posso usar Itália ao invés de Italia? Acho que a resposta é não. O MySQL e o PHP são bastante versáteis, mas para mandar esses produtos lá no cupom fiscal, na Secretaria da Fazenda ou na Receita Federal, eu sei que as informações são bastante truncadas, os arquivos tipo XML truncavam na minha época as palavras com acento, e assim sempre evitei de acentuar as palavras na tabela de produtos, mas isso já faz muito tempo, e eu não trabalho mais nessa área. Diante do exposto, alguém aqui sabe se a Nota Fiscal Eletrônica já suporta palavras acentuadas?

Se você está falando da versão que retirou os hashes, ele também tem o mesmo problema.

Eu fiz exatamente isso, mas ele não funciona. Mexi no CSS .app > header > nav { display: flex; flex-direction: column; position: absolute; top: 55px; width: 160px; transition: all .2s ease; transform: translateX(-170px);} onde está flex-direction: column eu mudei para row, e aí o link funcionou, mas não tenho todas as opções e também é difícil de visualizar.

Olá, Wash, estou estudando o seu código, e alterei o código HTML <nav> <a href='#' class='hamburger-close'></a> <a href='orcamento.php'>Orçamento</a> <a href='#diario.php'>Diário</a> <a href='#balancete.php'>Balancete</a> <a href='#pagar.php'>Pagar</a> <a href='#produto.php'>Produto</a> <a href='#pessoa.php'>Pessoa</a> <a href='#apuracao.php'>Apuração</a> </nav> eu seleciono o menu desejado, mas ele não vai para onde eu esperava. Você pode me ajudar?

Acabei de implementar a nova tecnologia no meu orçamento.php e deu tudo certo. Só que o meu <div> foi parar dentro de um <table>, o modal funciona, mas com um péssimo visual. Reeditei e coloquei o <div> para fora do <table>. No caso, eu não trabalhei com um <button> mas sim um <li> onde está o nome do cliente. O menu é um horror, mas vou trabalhar para melhorar.

Consegui resolver o problema do <script>. Uma coisa é o JavaScript fazer auditoria do elemento (nesse caso o código tem que ficar na base da página) e outra coisa é o elemento chamar o JavaScript (nesse caso eu posso colocar o código no topo da página). O código modificado ficou assim: <style> .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top:-70; width: 50%; height: 50%; overflow: auto; } .modal-content { background-color: #fefefe; margin: auto; padding: 10px; border: 1px solid #888; width: 80%;} </style> <script> function ligamodal() {divmodal.style.display = "block";} function desligamodal () {divmodal.style.display= "none";} </script> <?php echo "<button id='btnmodal' onclick='ligamodal()'>Mais detalhes</button>"; for ($i=0;$i<=10;$i++) {echo "<br>frank esteve aqui";} echo "<div id='divmodal' class='modal' onclick='desligamodal()'>"; echo "<div class='modal-content'>"; $mensagem="<b>A mensagem de hoje é:</b>"; for ($i=2;$i<=10;$i++) {$mensagem=$mensagem."<br>$i elefantes";} echo "$mensagem</div></div>" ?>

Ao invés de usar a função alert( ) do Javascript, eu recebi a orientação de usar um modal. Eu já ouvi falar de modal, o problema é que o meu conhecimento em Javascript é bastante precário, eu não vi nenhuma chance de utilizar o modal no meu projeto. Mas, enfim, eu tomei coragem e encontrei um pequeno código de modal no Google, How To Make a Modal Box With CSS and JavaScript (w3schools.com). Apesar dele ser pequeno, ele tem muito CSS que não compreendo, assim eu fiquei apenas com dois CSS que eram necessários para o meu propósito. Outra coisa que eu achei estranho é que o tutorial coloca o <script> na base da página e não no topo como eu faço. Eu coloquei no topo, e o código não funcionou. Isso me fez concluir que é necessário primeiro criar o elemento para depois o JavaScript decidir o que fazer. Mas isso não faz o menor sentido, pois todos os meus códigos <script> estão no topo e eles funcionam. Finalmente, o meu primeiro código PHP que abraça a tecnologia CSS/JavaScript do modal: <style> .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top:-70; width: 50%; height: 50%; overflow: auto; } .modal-content { background-color: #fefefe; margin: auto; padding: 10px; border: 1px solid #888; width: 80%;} </style> <?php echo "<button id='btnmodal'>Mais detalhes</button>"; for ($i=0;$i<=10;$i++) {echo "<br>frank esteve aqui";} echo "<div id='divmodal' class='modal'>"; echo "<div class='modal-content'>"; $mensagem="<b>A mensagem de hoje é:</b>"; for ($i=2;$i<=10;$i++) {$mensagem=$mensagem."<br>$i elefantes";} echo "$mensagem"; echo "</div></div>" ?> <script> btnmodal.onclick = function() {divmodal.style.display = "block";} divmodal.onclick = function() {divmodal.style.display = "none";} </script>

Valeu! Isso sim que é menu de gente civilizada, e não aquele trambolho que eu fiz!

echo '<a href="" onclick="alert('."'".$mensagem."'".')">'.$cliente.'</a>'; Isso daqui é um horror! Não existe nenhuma maneira de memorizar onde vem as aspas simples e as aspas duplas. A melhor forma é colocar o comando java numa variável PHP e depois chamar onde for preciso, assim: $java = "alert($mensagem)"; echo "<a href='#' onclick=$java>$cliente</a>";

Hoje eu vi um comentário do Iowys desse fórum, ele disse que não faz sentido eu falar em linhas no celular quando ele é a base de pixels. Eu fiquei mordido, mas o Iowys estava coberto de razão. Para agradecer o comentário, eu decidi fazer uma captura da tela do celular. Compartilhei a imagem no OneDrive do celular, mas ele não apareceu no gerenciador do notebook. Pensei mais um pouco, e lembrei do Gmail no celular. Compartilhei a imagem no correio eletrônico, mandando a mensagem para mim mesmo. Entrei no Gmail do notebook, baixei a imagem, e finalmente mandei a imagem para o fórum. Eu gastei muito tempo com esse zigue-zague, mas aprendi que não dá para confiar no OneDrive do celular, no OneDrive do notebook e nem no OneDrive online do portal da Microsoft. Já o Gmail do Google funciona! Mesmo assim, a lição mais importante que eu aprendi é que a distância mais curta entre o celular e o fórum não é o notebook, mas sim o próprio celular. Esqueci que dá para entrar no fórum pelo celular e de lá eu posso compartilhar a galeria de imagens.

Todo santo dia eu faço backup no MySQL Workbench pelo menu Server > Export Data, mas na hora de conferir no gerenciador de arquivos, eu vi que ele não fez o que eu pedi. Olhando as notificações, ele reclamou que eu tinha viewer inconsistente. Eu achei isso muito bacana. Eu ajuntei duas tabelas, a de fornecedor e a de cliente, e criei a tabela pessoa. Também consertei todos os meus códigos PHP. Eu pensei que eu tinha feito tudo, mas esqueci completamente dos viewer. Viewer é uma maneira prática de passar informação já mastigada para o PHP, mas eu mudei de ideia e uso todas as tabelas no PHP. Depois de consertar os viewer inconsistentes eu consegui fazer o backup.

Você tem toda razão, esse negócio de linha não faz o menor sentido. Eu executei o programa e fiquei preocupado com a disposição das informações na vertical, nada me impede de colocar tudo na horizontal. A dica de usar o CSS gerou essa tela, e ela é bem mais bonita que a minha.

Com a ajuda do Wash aqui do fórum, agora eu consigo incluir quantos <form> eu precisar dentro de uma <table>. Geralmente a tabela ficava com uma linha enorme e outra menor. A dica foi de utilizar o código <style> form {margin:0;} </style> logo no começo do código. Eu sei muito pouco sobre o JavaScript, mas uso bastante <script> function nomefuncao (id) { inpnomefuncao.value=id; frmnomefuncao.submit( ); } </script>, eu sempre tinha a péssima mania de dar o mesmo id da função para o formulário e o input, agora eu uso o prefixo inp e o prefixo frm no id. Por exemplo, se o nome da função é excluir, o nome do formulário é frmexcluir e o do input é inpexcluir. Essa é a função que eu mais uso para pegar o valor selecionado pelo usuário e mandar para o servidor pelo método POST. Com um pouco mais de experiência no método POST, eu aprendi a colocar as rotinas dentro de uma página PHP ao invés de criar várias páginas difíceis de administrar. Antes eu tinha atualiza.php, adiciona.php, exclui.php, agora coloco o máximo de rotinas dentro de uma só página. Também comecei a utilizar o comando PHP include, ele já traz um monte de definições de uma outra página que você não precisa mais digitar. A minha digitação melhorou bastante, agora enfrento o problema da lógica. O PHP não apresenta nenhuma notificação, e assim eu não sei o que fiz de errado para o programa ficar sem nenhum movimento. Aprendi a usar a ferramenta de inspeção do navegador, e lá tenho outras notificações. Mesmo que o código PHP apareça numa só linha dentro do painel de inspeção, essa ferramenta mostra onde exatamente começa o problema. Mas nesse fim de semana, eu fiz um belo trabalho. Eu ajuntei a tabela fornecedores na tabela clientes e criei a tabela pessoa. Isso ajudou bastante no código PHP, ao invés de ter fornecedor.php e cliente.php, agora só tenho um código pessoa.php, de onde o orçamento da venda ou a entrada de produtos vai pegar informações da pessoa que vendeu ou deseja comprar. Finalmente, quero apresentar a tela do meu orçamento.php, ele é bem feio, mas o que me deixa contente é que ele funciona. Faz quase um ano que estou estudando o PHP por conta própria.

Esse menu é enorme, ele ocupa seis linhas, o meu é feio, mas ocupa apenas uma linha, e ele fica persistente em quase todas as rotinas do sistema, usei o comando include do PHP, oha só como ficou: