Frank K Hosaka

Eu tenho um arquivo blade_A e outro blade_b. Ambos usam a function._c. Para a function_c voltar para quem chamou, estou pensando em usar a variável session. No blade_a, eu teria algo parecido como session('endereço')=blade_a, e na function_c eu teria um comando assim: voltar para session('endereço'). Como sou novato no Laravel, a minha dúvida é saber se existe solução melhor.

Já faz mais de um ano que estou com o Laravel básico. Agora, avancei mais um passo: instalei o componente Breezer, agora eu tenho uma rotina de autenticação, mais comandos no Blade, uma barra de navegação e o TailwindCSS. O problema é que estou apanhando muito para criar um modal. Hoje achei esse tutorial: How To Make a Modal Box With CSS and JavaScript (w3schools.com) - esse tutorial é super bacana, eu gostei muito dele. Ele não funciona no Laravel, pois ele não usa a gramática do TailwindCSS. Consultei o dicionário do Tailwind para saber como se fala "cor" e "esconder" na gramática dele, e assim consegui adaptar o código: lcto.blade.php <x-app-layout> <button onclick=myModal.className='bg-red-600'>Open Modal</button> <div id=myModal class='hidden' onclick=this.className='hidden'> <div> <p>Some text in the Modal..</p> </div> </div> </x-app-layout> <x-app-layout> é da gramática do Blade, ele pede para incluir o código dentro de uma outra página criada pelo app.php.

Ainda falando da barra de navegação, encontrei um problema no Tailwind na hora de fixar a barra no topo da tela: ele esconde a parte inicial dos elementos que vem a seguir. A solução que eu encontrei foi criar um <div style="height:100px"></div>, ou seja, empurrei os elementos seguintes para não ocultar a parte inicial. O Bootstrap fuciona bem. Já o CSS tradicional que eu encontrei no w3school faz a parte inicial dos elementos que vem depois da barra sobrepor à barra de navegação. CSS não é nada fácil! bootstrap.php <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <nav class="navbar navbar-light sticky-top bg-light flex-md-nowrap p-0"> <h1 class=display-1>Olá mundo</h1> </nav> <div> <h1 class=display-1>1</h1> <h1 class=display-1>2</h1> <h1 class=display-1>3</h1> <h1 class=display-1>4</h1> <h1 class=display-1>5</h1> <h1 class=display-1>6</h1> --------------------------------------- css.php <style> .navbar {overflow: hidden;position: fixed;top: 0;width: 100%;} .main {margin-top: 100px;} </style> <div class="navbar"> <h1>Olá mundo</h1> </div> <div class="main"> <div> <h1>1</h1> <h1>2</h1> <h1>3</h1> <h1>4</h1> <h1>5</h1> <h1>6</h1> <h1>7</h1> <h1>8</h1> <h1>9</h1> <h1>10</h1> </div> </div> tailwind.php <script src="https://cdn.tailwindcss.com"></script> <nav class="bg-white dark:bg-gray-900 fixed w-full z-20 top-0 left-0 border-b border-gray-200 dark:border-gray-600"> <h1 class="text-9xl">Olá mundo</h1> </nav> <div class="text-9xl"> <h1>1</h1> <h1>2</h1> <h1>3</h1> <h1>4</h1> <h1>5</h1> <h1>6</h1> </div>

O meu conhecimento em HTML é precário, mas encontrei no projeto Laravel Chirps um arquivo chamado navigation.blade.php, nele eu encontrei o marcador <nav>. Para mim <nav> ou <div> é a mesma coisa, pois eu não sei nada de HTML. No entanto, ele aparece no topo da página do navegador. Eu clico "Dashboard", e ele apresenta o conteúdo do Dashboard. Eu clico "Chirps", e ele apresenta o conteúdo do Chirps. Só que a barra permanece no topo da página. Eu gostei desse recurso, mas fiquei imaginando se era possível acrescentar mais uma linha na barra de navegação. Esse é o meu primeiro teste. Se você perceber que estou fazendo coisa errada, por favor me alerte. <nav> <div>linha de cima</div> <div id=em_baixo>linha de baixo</div> <hr> </nav> <script> function teste(){em_baixo.innerHTML='<input>'} </script> <input type=submit onclick=teste()>

A minha hospedagem de site não permite usar o npm pelo recurso SSH e assim não consigo instalar o TailwindCSS. Ontem, estava estudando o welcome.blade.php, e eu consegui ver o primeiro <svg> sem o TailwindCSS, mas o segundo ficou invisível. Existe algum jeito de resolver esse problema? <script src='https://cdn.tailwindcss.com'></script> <body style="width:500;margin:0 auto;margin-top:100"> <svg viewBox="0 0 62 65" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-16 w-auto bg-gray-100 dark:bg-gray-900"> <path d="M61.8548 14.6253C61.8778 14.7102 61.8895 14.7978 61.8897 14.8858V28.5615C61.8898 28.737 61.8434 28.9095 61.7554 29.0614C61.6675 29.2132 61.5409 29.3392 61.3887 29.4265L49.9104 36.0351V49.1337C49.9104 49.4902 49.7209 49.8192 49.4118 49.9987L25.4519 63.7916C25.3971 63.8227 25.3372 63.8427 25.2774 63.8639C25.255 63.8714 25.2338 63.8851 25.2101 63.8913C25.0426 63.9354 24.8666 63.9354 24.6991 63.8913C24.6716 63.8838 24.6467 63.8689 24.6205 63.8589C24.5657 63.8389 24.5084 63.8215 24.456 63.7916L0.501061 49.9987C0.348882 49.9113 0.222437 49.7853 0.134469 49.6334C0.0465019 49.4816 0.000120578 49.3092 0 49.1337L0 8.10652C0 8.01678 0.0124642 7.92953 0.0348998 7.84477C0.0423783 7.8161 0.0598282 7.78993 0.0697995 7.76126C0.0884958 7.70891 0.105946 7.65531 0.133367 7.6067C0.152063 7.5743 0.179485 7.54812 0.20192 7.51821C0.230588 7.47832 0.256763 7.43719 0.290416 7.40229C0.319084 7.37362 0.356476 7.35243 0.388883 7.32751C0.425029 7.29759 0.457436 7.26518 0.498568 7.2415L12.4779 0.345059C12.6296 0.257786 12.8015 0.211853 12.9765 0.211853C13.1515 0.211853 13.3234 0.257786 13.475 0.345059L25.4531 7.2415H25.4556C25.4955 7.26643 25.5292 7.29759 25.5653 7.32626C25.5977 7.35119 25.6339 7.37362 25.6625 7.40104C25.6974 7.43719 25.7224 7.47832 25.7523 7.51821C25.7735 7.54812 25.8021 7.5743 25.8196 7.6067C25.8483 7.65656 25.8645 7.70891 25.8844 7.76126C25.8944 7.78993 25.9118 7.8161 25.9193 7.84602C25.9423 7.93096 25.954 8.01853 25.9542 8.10652V33.7317L35.9355 27.9844V14.8846C35.9355 14.7973 35.948 14.7088 35.9704 14.6253C35.9792 14.5954 35.9954 14.5692 36.0053 14.5405C36.0253 14.4882 36.0427 14.4346 36.0702 14.386C36.0888 14.3536 36.1163 14.3274 36.1375 14.2975C36.1674 14.2576 36.1923 14.2165 36.2272 14.1816C36.2559 14.1529 36.292 14.1317 36.3244 14.1068C36.3618 14.0769 36.3942 14.0445 36.4341 14.0208L48.4147 7.12434C48.5663 7.03694 48.7383 6.99094 48.9133 6.99094C49.0883 6.99094 49.2602 7.03694 49.4118 7.12434L61.3899 14.0208C61.4323 14.0457 61.4647 14.0769 61.5021 14.1055C61.5333 14.1305 61.5694 14.1529 61.5981 14.1803C61.633 14.2165 61.6579 14.2576 61.6878 14.2975C61.7103 14.3274 61.7377 14.3536 61.7551 14.386C61.7838 14.4346 61.8 14.4882 61.8199 14.5405C61.8312 14.5692 61.8474 14.5954 61.8548 14.6253ZM59.893 27.9844V16.6121L55.7013 19.0252L49.9104 22.3593V33.7317L59.8942 27.9844H59.893ZM47.9149 48.5566V37.1768L42.2187 40.4299L25.953 49.7133V61.2003L47.9149 48.5566ZM1.99677 9.83281V48.5566L23.9562 61.199V49.7145L12.4841 43.2219L12.4804 43.2194L12.4754 43.2169C12.4368 43.1945 12.4044 43.1621 12.3682 43.1347C12.3371 43.1097 12.3009 43.0898 12.2735 43.0624L12.271 43.0586C12.2386 43.0275 12.2162 42.9888 12.1887 42.9539C12.1638 42.9203 12.1339 42.8916 12.114 42.8567L12.1127 42.853C12.0903 42.8156 12.0766 42.7707 12.0604 42.7283C12.0442 42.6909 12.023 42.656 12.013 42.6161C12.0005 42.5688 11.998 42.5177 11.9931 42.4691C11.9881 42.4317 11.9781 42.3943 11.9781 42.3569V15.5801L6.18848 12.2446L1.99677 9.83281ZM12.9777 2.36177L2.99764 8.10652L12.9752 13.8513L22.9541 8.10527L12.9752 2.36177H12.9777ZM18.1678 38.2138L23.9574 34.8809V9.83281L19.7657 12.2459L13.9749 15.5801V40.6281L18.1678 38.2138ZM48.9133 9.14105L38.9344 14.8858L48.9133 20.6305L58.8909 14.8846L48.9133 9.14105ZM47.9149 22.3593L42.124 19.0252L37.9323 16.6121V27.9844L43.7219 31.3174L47.9149 33.7317V22.3593ZM24.9533 47.987L39.59 39.631L46.9065 35.4555L36.9352 29.7145L25.4544 36.3242L14.9907 42.3482L24.9533 47.987Z" fill="#FF2D20"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-7 h-7 stroke-red-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" /> </svg>

Hoje eu fiz novo teste no Hostinger. Consegui instalar um novo projeto do Laravel, usando o serviço SSH. Eu não consegui abrir o projeto no navegador. Eu fiz uma gambiarra, copiando os arquivos .htaccess e index.php de um outro projeto do Laravel. O problema foi na hora de instalar o Breeze. Eu precisava do comando npm. Tentei usar o comando nvm install 17.3.1, mas eu recebi um monte de mensagens. Procurei no Google informações sobre hospedagem. Existem apenas dois tipos: o que hospeda sites, você pode usar o recurso básico do Laravel que é o meu caso. E a hospedagem VPS, lá tem o comando npm, onde você pode usar recursos turbinados do Laravel como o TailwindCSS. Assim, só resta uma solução para mim, lamentar como é chato ser pobre.

Hoje estou super contente. Descobri que eu fiz uma baita confusão com o código de um suplemento chamado "Blade" e o Tailwind CSS. No Google, eu encontrei várias reclamações de pessoas que conseguiram implantar o Tailwind no Laravel do servidor, mas o dropdown não estava funcionando. Eu fui procurar o dropdown no Tailwind e não achei nada lá. Só assim é que eu consegui enxergar a minha besteira. A grosso modo, a gramática do Tailwind é assim class="text-gray-600", e a gramática do Blade é assim <x-dropdown>, ou seja, o Tailwind aparece dentro do marcador e o Blade é o marcador. O tutorial do Tailwind não é nada fácil, são pelo menos uns cinco arquivos que você tem que trabalhar. Eu pensei em criar o tailwind.css com esse comando: npx tailwindcss -o public/tailwind.css --minify isso para ser usado dentro do Laravel, assim <link href="{{asset('tailwind.css')}}" rel=stylesheet> e depois copiaria no Laravel do Hostinger. Mas eu li no projeto Chirp do Laravel que a parte mais importante da implantação do projeto é ter um suporte no servidor, o que não é o meu caso. Eu fui empurrando o meu código lá no Hostinger, e nem sei como isso funciona. A improvisação é coisa muito perigosa. Eu mesmo quase perdi todo o meu projeto em PHP, mas consegui recuperar. Quando a gente fala em servidor, todo cuidado é pouco. Se você não conhece o Laravel, eu recomendo ler primeiro o tópico 8 do tutorial do projeto Chirp.

Ontem eu tentei usar o 8.2.0 no Hostinger. Eu recebi também mensagem de erro, e decidi voltar para trás.

Eu me esforcei bastante. Consegui trabalhar com o Tailwind no computador local, mas precisei de dois terminais, um para colocar o Laravel na rede local e o outro para conectar o Laravel com a tecnologia do Tailwind pelo npm run dev. No Hostinger, enfrentei um monte de problemas. O vite não deu certo para mim, mas pelo menos o básico do CDN funciona. Isso explica porque pouca gente se interessa pelo Laravel, a gente apanha demais só para formatar um <input>. Com o Bootstrap é difícil, mas o Tailwind torna quase impossível.

Faz dois dias que estou tentando experimentar o Tailwind no Hostinger, mas o grande problema é que eu não estava conseguindo instalar sequer o projeto. O Hostinger tem um auto instalador que cria o projeto bem como o novo banco de dados correspondente, só que eu não estava conseguindo instalar o componente Breezer que, em teoria, traz embutido o recurso do Tailwind. Eu cansei de ver tanto tutorial. Então, eu pensei em instalar o novo projeto através do SSH, fui até o diretório Public_HTML e de lá eu pedi para o "composer2" criar um novo projeto chamado teste. O tutorial do Hostinger orienta a usar uma área fora do Public_HTML e depois copiar tudo na raíz do Public_HTML (isso não dá para fazer porque todo o meu projeto em PHP está nesse diretório). Depois que eu criei o projeto teste, fiz o teste e a resposta foi que eu não tenho permissão para usar esse recurso. Eu fiquei indignado, faz dois dias que estou trabalhando nisso. Mas, de repente, uma lâmpada acendeu na minha cabeça. Eu tenho um outro projeto laravel no hostinger: e se eu copiar o index.html e o .htaccess na pasta teste? Não deu outra, funcionou! Nas próximas mensagens, eu vou falar do meu fracasso ou sucesso em instalar o Breeze bem como o Vite no novo projeto.

O método send( ) da classe Acesso precisa de um requisição type, email e senha; aqui segue uma sugestão: if(isset($_POST['teste'])){ $conexao = new Conexao(); $acesso = new Acesso($conexao->conectar()); $acesso->send();} echo "<form method=post> <input name=type value=login> <input name=email value=frankhosaka@gmail.com> <input name=senha value=1234> <input type=submit name=teste> <form>"; Aqui não estou ensinando a usar o PHPMailer, mas sim como chamar um método de uma classe, no caso, o $acesso->send( ). Eu também sou novo na área de classe, eu apanho muito para usá-la também.

Agora estou testando o tailwind no PHP. Botei o arquivo tailwind.css no diretório C:/Wamp64/www. Para testar, criei um novo diretório: C:/Wamp64/www/tailwind. Peguei o meu arquivo index.php e botei no novo diretório, ele era a base de Bootstrap, mudei o link para: <link href="../tailwind.css" rel="stylesheet"> Como eu não sei absolutamente nada de tailwind.css, estudei o primeiro exemplo desse tutorial: Tailwind CSS Login Form - Flowbite Na hora de testar, o botão para confirmar não apareceu. Fui obrigado a ler o código do botão: <button type="submit" class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Sign in</button> Eu achei muito estranho a gramática bg-primary-600. A palavra primary é mais familiar do Bootstrap, então eu mudei para blue, e assim consegui colocar o botão na tela do navegador. Ou seja, todo tutorial no Google é bem vindo, só que muita gente não testa o que escreveu, e assim a gente perde mais tempo do que aprender algo de útil. Eu gostei do comando focus, ele funciona no botão, mas não no input. Então decidi tirar o comando focus do input bem como o dark. Eu ainda estou no começo, mas estou contente por ter conseguido usar o Tailwind no PHP: <?php session_start(); $mensagem=""; if(isset($_SESSION['mensagem'])){$mensagem=$_SESSION['mensagem'];} if(isset($_GET['limpar'])){unset($_SESSION['id']);}?> <!DOCTYPE html> <html lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Projeto PHP</title> <link href="../tailwind.css" rel="stylesheet"> <section class="bg-gray-50 dark:bg-gray-900"> <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0"> <a href=# class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">Projeto PHP</a> <a href=# class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white"><?=$mensagem?></a> <div class="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700"> <div class="p-6 space-y-4 md:space-y-6 sm:p-8"> <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white"> Acesse sua conta </h1> <form class="space-y-4 md:space-y-6" method=post action=menu.php> <div> <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Seu email</label> <input type=email name=email id=email class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5" placeholder=nome@gmail.com required=""> </div> <div> <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Senha</label> <input type=password name=senha id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5" required=""> </div> <div> <button type="submit" class="w-full text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Entre</button> </div> </form></div></div></section></html>

O Tailwind é bem diferente, mas no momento eu só estou preocupado com a mensagem que vejo no painel de inspeção do navegador, ele reclama quando eu uso o recurso do CDN. Para evitar esse contratempo, eu criei um roteiro para criar o arquivo tailwind.css para usar no PHP, vou usar como rascunho para o Laravel (o Laravel já vem com o Tailwind embutido, quando você estuda o projeto Chirper ou acrescenta o Breezer), com o tailwind.css posso conectar o HTML pelo marcador <link>: npm init -y npm install tailwindcss postcss autoprefixer npx tailwindcss init criar arquivo style.css com o conteúdo @tailwind base; @tailwind components; @tailwind utilities; npx tailwindcss-cli build -o tailwind.css

A listagem é parcial. Eu consegui encontrar o arquivo PHPMailer.php pelo comando composer require phpmailer/phpmailer e pelo Google encontrei o arquivo SMTP.php, e eu presumo que o arquivo conexao.php tenha a classe Conexao, mas eu não tenho a listagem dela. Tem jeito de você colocar uma cópia do código conexao.php para eu continuar estudando?

Em 2020 eu gastei quase dois meses para conseguir conectar o celular no PHP. Foi bem difícil mexer no Apache. No notebook bastava escrever "localhost" e no celular "192.168.0.12" que é o IP do Notebook. Agora em 2023 eu uso o Laravel no notebook assim: "localhost:8000". E hoje eu tive a curiosidade de entrar pelo celular, assim: 192.168.0.12:8000, mas o meu acesso foi negado. A minha primeira reação foi entrar em pânico, eu tenho pavor do Apache. Então eu criei a porta 8000 no Firewall do Windows, mas não deu certo. Então, eu fui buscar a solução no Google, e em menos de meia hora eu encontrei a solução: Não preciso mexer no Apache, graças a Deus! A solução está no próprio Laravel. Ao invés de escrever "php artisan serve", agora preciso escrever "php artisan serve --host 192.168.0.12 --port 8000".

Tentei usar o PHP para testar o código com o CDN da Tailwind, mas não deu certo: a mensagem que eu recebi é essa: cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI

Eu fiz uma grande besteira e assim eu perdi o meu acesso ao projeto Chirp, o primeiro projeto que aparece no tutorial do Laravel. A única solução que eu encontrei foi começar do zero para descobrir qual foi a besteira que eu fiz. A primeira etapa é criar um projeto vazio, mas ele não é nada vazio. A página Welcome já traz embutido o Tailwind CSS. A segunda etapa é a instalação do componente Breezer do Laravel, ele define a rotina de bloqueio e autenticação do usuário. Nessa etapa, o editor VS Code encontrou dois problemas nessa linha: style="display: {{ $show ? 'block' : 'none' }}" O CS Code disse "property value expected" e "at-rule or selector expected". Procurei a solução do problema no Google, mas nada funcionou. Tentei executar o modal.blade.php, criando uma rota para ele, mas eu não consegui enxergar coisa alguma. Tudo o que eu sei é que esse arquivo é executado dentro da rotina da conta do usuário, onde ele redefine ou elimina a conta. Enfim, só sobrou a contemplação. Quem usa essa gramática de definir o estilo no meio do caminho era somente eu. Mas desconfio que eu não sou o único. Desconfio que isso é coisa do Tailwind CSS, mas não posso provar porque eu não consegui instalar o CSS no meu notebook. E assim, o meu estudo do Laravel fica comprometido, porque eu também não sei nada sobre o Tailwind CSS. Em seguida faço a listagem de todo o arquivo modal.blade.php e que o Laravel coloca junto com o app.blade.php onde tem o comando <!DOCTYPE html>: @props([ 'name', 'show' => false, 'maxWidth' => '2xl' ]) @php $maxWidth = [ 'sm' => 'sm:max-w-sm', 'md' => 'sm:max-w-md', 'lg' => 'sm:max-w-lg', 'xl' => 'sm:max-w-xl', '2xl' => 'sm:max-w-2xl', ][$maxWidth]; @endphp <div x-data="{ show: @js($show), focusables() { // All focusable element types... let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])' return [...$el.querySelectorAll(selector)] // All non-disabled elements... .filter(el => ! el.hasAttribute('disabled')) }, firstFocusable() { return this.focusables()[0] }, lastFocusable() { return this.focusables().slice(-1)[0] }, nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() }, prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() }, nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) }, prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 }, }" x-init="$watch('show', value => { if (value) { document.body.classList.add('overflow-y-hidden'); {{ $attributes->has('focusable') ? 'setTimeout(() => firstFocusable().focus(), 100)' : '' }} } else { document.body.classList.remove('overflow-y-hidden'); } })" x-on:open-modal.window="$event.detail == '{{ $name }}' ? show = true : null" x-on:close.stop="show = false" x-on:keydown.escape.window="show = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50" style="display: {{ $show ? 'block' : 'none' }}" > <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" > <div class="absolute inset-0 bg-gray-500 opacity-75"></div> </div> <div x-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }} sm:mx-auto" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" > {{ $slot }} </div> </div>

A seguir uma lista onde eu uso o meu CSS improvisado, o CDN do Bootstrap e o CDN do Tailwind, mas isso só é possível se você omitir o código <!doctype html> : <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <script src='https://cdn.tailwindcss.com'></script> <?php $mysqli=new mysqli("localhost","root","","laravel"); $query=$mysqli->query("select * from tbprod where prod like 'disponivel' limit 5"); // tailwind echo "<table class='table-auto border-collapse border border-slate-300'>"; while($row=$query->fetch_assoc()){ echo " <tr class='even:bg-amber-100 odd:bg-blue-100'> <td class='p-2'>".$row['codprod']." <td class='p-2'>".$row['prod'];} // bootstrap & improvisado echo "</table><div style='width:100'><table class='table table-striped'>"; $query=$mysqli->query("select * from tbprod where prod like 'disponivel' limit 5"); while($row=$query->fetch_assoc()){ echo "<tr><td>".$row['codprod']."<td>".$row['prod'];} echo "</table></div>";

Bom, já faz quatro horas que estou estudando o Tailwind, estou começando a ficar desesperado. Acredito que o melhor é não instalar nada no notebook, e fazer um link direto no CDN do tailwindcss, assim: <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <h1 class="text-black">TreinaWeb!</h1> <!--não funciona, precisa ser configurado--> <h1 class="text-blue-600">Escola Online</h1> <h1 class="text-green">Para Desenvolvedores</h1> <!--não funciona, precisa ser configurado--> </body> </html> Pelo menos eu descobri que é possível eu fazer os meus estilos improvisados junto com o Tailwind, basta arrancar a instrução <!doctype html> do código. Essa não é a forma correta de programar, mas eu sou de opinião que os fins justificam as gambiarras.

Instalando Tailwind CSS via NPM e alterando suas propriedades CSS com theme | Blog TreinaWeb - esse é o endereço que me ajudou a instalar o Tailwind no meu notebook. Existe um tutorial também na página oficial do Tailwind, mas enfrentei um monte de mensagens de erro, e eu não sabia para onde ir, já esse tutorial deixou o meu notebook redondo. Nos primeiros testes que eu fiz, notei que as minhas gambiarras não funcionam mais, do tipo <div style:'width:500;margin:0 auto'>. Ou seja, a minha fase de improvisação com o Bootstrap chegou no fim. Esse é o preço que tenho que pagar para poder estudar o Laravel e instalar um facilitador do tipo Livewire.

Eu nem sabia que existia o DBTools, mas usei o comando de exportação do Access para importar no MySQL e também consegui fazer uma conexão entre os dois bancos de dados. O problema do Access é que não dá para ver as tabelas pelo navegador, o que não é o caso do MySQL que dá para ver pelo phpMyAdmin, um recurso que você encontra no WampServer. Hoje hospedo o meu banco de dados no Hostinger por R$ 23,00 por mês (é um plano anual, se for bianual, o aluguel é bem menor). Eu já tive vários pesadelos com o Access como a perda da referência integral. Já o MySQL não me pediu para me preocupar com a referência integral, estou trabahando com ele já faz três anos, e estou contente. As minhas consultas são bem mais simples, eu tenho a tabela 1 de um lado e tenho a tabela 2 do outro lado, e eu peço para o PHP se virar com os dois para montar a minha consulta. Também estou estudando Laravel, e tudo indica que preciso aprender a usar os relacionamentos (aqueles famosos barbantes que eu desenhava no formulário de consulta do Access), mas evito de usar a técnica da junção, o meu banco de dados é pequeno, hoje ele tem 4 mb (ou seja, 8.000 lançamentos contábeis, 2.000 produtos, 4.000 clientes). O Hostinger disse que o tamanho máximo do banco de dados é 128 mb, mas acho pouco provável que consiga montar um banco de dados tão enorme assim. O MySQL foi muito difícil de aprender, até hoje eu apanho. Mas aprendi a gostar dele, principalmente porque ele é o único banco de dados que eu conheço que dá para ver dentro do celular. Não é o caso do Access, só podia ver uma cópia não editavel no formato Handbase, DataToList e outro aplicativo do Android que não lembro mais o nome, como eu detestava tudo aquilo. Pelo PHP, posso fazer um formulário que possa caber na tela do celular (não é fácil, mas estou chegando lá). O PHP é o melhor conector de tabelas que eu já experimentei, por enquanto não me preocupo se existe um relacionamento um a um, um para muitos ou muitos para muitos, não é o caso do Laravel que não é tão flexível como o PHP. Já o Backup do MySQL é uma maravilha, eu adorei, eu posso restaurar as tabelas em qualquer outro banco de dados. O nome do backup é dump, é um texto com a extensão .sql, e você pode fazer a hora que você quiser, sem precisar fechar os terminais que estão usando o banco de dados.

Tenho um Blade que tem a descrição de um produto e um formulário que vai criar um novo produto baseado nas informações contidos naquele produto: multiplocriar.blade.php @include("menu") <table><tr><th><th><th> <tr><td>{{$prod->codprod}}<td>{{$prod->un}}<td>{{$prod->prod}} <tr><td>{{dec($prod->custo)}}<td>{{$prod->marg}}<td>{{$prod->codbar}} <tr><td>{{$prod->loc}}<td>{{$prod->emb}}<td>{{$prod->cf}} {{$prod->codforn}} </table> @if($criar) <form> @csrf <table><tr><th><th> <tr><td>Código<td><font color=red>criando um produto vinculado ao anterior <tr><td>Unidade<td><input name=un value={{$prod->un}}> <tr><td>Produto<td><input name=prod value='{{$prod->prod}}' size=40> <tr><td>Custo<td><input name=custo value={{dec($prod->custo)}}> <tr><td>Margem<td><input name=marg value=50> <tr><td>Código de Barra<td><input name=codbar value={{$prod->codbar}}> <tr><td>Local<td><input name=loc value={{$prod->loc}}> <tr><td>Embalagem<td><input name=emb value={{$prod->emb}}> <tr><td>NCM<td><input name=cf value={{$prod->cf}}> <tr><td><font color=red>Fator de conversão<td> <input name=codforn value='{"cod":{{$prod->codprod}},"conv":'> <tr><td><td> <input type=submit value=Cofirmar> </table> </form> @endif E controller ficou assim: MultiploController.php <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Models\tbprod; class MultiploController extends Controller { Public Function inicio(Request $request){ if($request->input('codprod')){ $codprod=$request->input('codprod'); $prod=tbprod::where('codprod',$codprod)->first(); $criar=true; return view('multiplocriar',['prod'=>$prod,'criar'=>$criar]);} if($request->input('un')){ tbprod::create($request->input()); $prod=tbprod::latest()->first(); $criar=false; return view('multiplocriar',['prod'=>$prod,'criar'=>$criar]);} } Ou seja, eu uso o mesmo Blade para criar e confirmar um novo produto criado. Para essa gambiarra funcionar, o Model ficou assim: tbprod.php <?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class tbprod extends Model{ use HasFactory; protected $table="tbprod"; protected $fillable=['prod','custo','codforn','marg','loc','emb','cf','codbar']; protected $primaryKey="codprod"; public function vinculado(){return $this->hasMany(tbprod::class,'codforn','codforn');} }

O Biehl não gostou da minha solução. Ele queria que eu usasse uma caixa <select> ao invés de quatro <input>. Assim, usei o meu famoso método científico da tentativa e erro para ver se eu consigo agradar o Biehl, mas desconfio que não vou conseguir. Mas, pelo menos, eu aprendo um pouco mais. <?php //tab_aprendiz(id,ref,cores)(1,555,verde)(2,555,azul) id=chave primária, auto-incrementa if (isset($_POST['enviar'])){ $conexaoBD=new mysqli("localhost","root","","laravel"); $cores=json_decode($_POST['cores']); $corprocurada=$cores[0]; $coralterada=$cores[1]; $sql="UPDATE tab_aprendiz SET cores='$coralterada' WHERE cores='$corprocurada'"; mysqli_query($conexaoBD,$sql); var_dump(mysqli_fetch_all(mysqli_query($conexaoBD,"select * from tab_aprendiz")));} ?> <form method=post> <select name=cores multiple size=4> <option value='["verde","vermelho"]'>verde->vermelho</option> <option value='["azul","amarelo"]'>azul->amarelo</option> <option value='["vermelho","verde"]'>vermelho->verde</option> <option value='["amarelo","azul"]'>amarelo->azul</option> </select> <input type="submit" name="enviar" value="Salvar"> </form>

Depois de dois anos estudando o PHP, o HTML e o JavaScript, finalmente eu consegui montar um código para navegar entre os orçamentos. Até ontem, eu só tinha um botão para recuar um orçamento de cada vez. Com esse novo navegador eu posso recuar até 10 orçamentos, não preciso mais recuar dez vezes até chegar no orçamento desejado: <meta name="viewport" content="width=device-width, initial-scale=1"> <script> function mostrar(){navegacao.style="display:block"} function ocultar(){navegacao.style="display:none"} function anterior(ped){location.replace('?anterior='+ped)} function posterior(ped){ ped=ped+18 location.replace('?anterior='+ped)} </script> <div style='width:300;margin:0 auto'> <input type=submit value='Barra de Navegação do Orçamento' onclick=mostrar()> <?php $style="display:none"; $where=""; $mysqli=new mysqli("localhost","root","","laravel"); if(isset($_GET['anterior'])){ $anterior=$_GET['anterior']; $where="where ped <= $anterior"; $style="display:block";} $query=$mysqli->query("select * from tbpedido $where order by ped desc limit 10"); echo "<div id=navegacao style=$style><table><th>Dia<th>Pedido<th>Total"; while($row=$query->fetch_assoc()){ $ped=$row['ped']; echo "<tr><td>".$row['dia']; echo "<td><a href=?ped=$ped>$ped</a>"; echo "<td>".$row['total'];} echo "</table> <input type=submit value=anterior onclick=anterior($ped)> <input type=submit value=posterior onclick=posterior($ped)> <input type=submit value=cancelar onclick=ocultar()> </div></div>";

Ontem eu encontrei o Biehl no fórum do iMasters, e ele perguntou para a plateia como fazer atualização múltipla. Ele queria mudar a cor verde para o vermelho e o azul para amarelo. Como eu sou bastante bitolado, eu logo queria responder que isso é impossível, que o MySQL foi projetado para fazer uma atualização de cada vez. O Google mostrou para mim que eu estava bastante errado: <?php // tb_aprendiz(id,cor)(1,vermelho)(2,amarelo) if(isset($_GET['cor'])){ $cor=$_GET['cor']; $cor1velho=$cor[0];$cor1novo=$cor[1]; $cor2velho=$cor[2];$cor2novo=$cor[3]; $mysqli=new mysqli("localhost","root","","laravel"); $query=$mysqli->query("update tab_aprendiz set cor = case cor when '$cor1velho' then '$cor1novo' when '$cor2velho' then '$cor2novo' else cor end");} ?> <form> <table><th>Cor Antiga<th>Cor Nova <tr><td><input name=cor[] required><td><input name=cor[] required> <tr><td><input name=cor[] required><td><input name=cor[] required> <tr><td><input type=submit> </form>