Carcleo

Estou começando no Laravel 11 e me deparei com um problema de belongsTo public function listOfClass(Request $request, StudentDisciplineClassroom $sdc) : ?string { $all = $sdc::select('student')->with('studentRelation')->where('classroom',$request->classroom)->distinct('student')->get(); dd($all->toArray()); $students = []; foreach ($all as $student) { $students[] =$student; } return response()->json($students)->getContent(); } isso Em studentRelation temos na tabela StudentDisciplineClassroom com os campos id(chave primaria) ra (chave estrangera que referencia o campo academic_registration na tabela de students) e a tabela student tem os campos id (chave primária) academic_registration (que vai ser refeenciada na tabela StudentDisciplineClassroom Mas na hora de fazer $sdc::select('student')->with('studentRelation')->where('classroom',$request->classroom)->distinct('student')->get(); O studentRelation retorna nulo Onde eu posso estar errando?

Ficou mais fácil assim: <div id="personal" class="personal"> <button>X</button> <label>Quantas pedras deseja adquirir?</label> <input type="number" name="rocks" id="rocks" required placeholder="1" max="200"> <a href="/cliente/compra/rifa/1"><h3>RESERVAR</h3></a> </div> $("#personal > input").change(function() { $("#personal > a").attr("href", '/cliente/compra/rifa/'+$(this).val()); });

Mas ai no caso eu alteraria todo o href né? E não apenas o parametro

Pessoal, tenho uma janela popup que vai cobrar toda a tela. <div id="personal" class="personal"> <label>Quantas pedras deseja adquirir?</label> <input type="number" name="rocks" id="rocks" required placeholder="1" max="200"> <a href="<?php echo route('client.buy.raffle',[1]); ?> "><h3>RESERVAR</h3></a> </div> onde tem [1] , no <a href preciso alterar via JavaScript para o valor colocado no input no momento do clique Será que tem jeito?

Tenho o seguinte: const http = require("http") const host = "localhost" const port = "80" const Config = require("./Config") const server = http.createServer() server.on('request', (request, response) => { response.writeHead(200, {"Content-Type": "text/html; charset=utf-8"}) const { headers, method, url } = request Config.has("/", Config.home) response.end() }); server.listen(port, host) Preciso arranjar uma forma de na Classe config, obter o headers mas sem passar ele via construtor tipo New Config (headers) dentro de server.on() Tentei, na classe Config importar o http novamente mas parece que só consigo o headers dentro do server Alguma saída?

Não amigo. Queria deixar responsivo de forma tal que se você for arrastando a lateral do navegador e ir diminuindo sua largura gradativamente, o conteúdo vá se adaptando. Com CSS, isso vai bem. Mas não consegui faze só com CSS. Então o JavaScript parece que não acompanha!

Estou a um tempo tentando criar um slider personalizado. De fato, eu até consegui e coloquei no codepen. https://codepen.io/carcleo/pen/yLVOxMv Mas uma implementação não estou conseguindo fazer. Nos sliders prontos que pegamos na web, ao redimencionar manualmente o navegador, a UL que abriga as LI's com os Slides, se redimenciona junto e isso não acontece com o meu, Isto é, ao diminuir a janela do navegador, as imagens acompanham o tamanho das LIs, mas como não consigo redimencinar a UL junto os slides acabam se mostrando de forma errada. Não consegui uma forma de fazer o CSS fazer esse serviço. Só consegui com JS. Se alguém puder ajudar? Obs.: não quero copiar da internet, meu objetivo é entender a logica da coisa

Pessoal, bom dia! Não estou conseguindo importar uma classe usando composer. O intrigante é que é apenas uma e tudo, aparentemente, esta correto. Árvore do projeto site / /classes /classes/Rotas.php /mvc /mvc/controller /mvc/controller/Contato.php /mvc/view /mvc/view/contato.php /mvc/view/home.php /public /public/config.php /public/index.php /public/router.php /vendor Tenho o index que importa 2 arquivos somente, um de config e outro de router. index.php <?php require_once 'config.php'; require_once 'router.php'; config.php <?php error_reporting(E_ALL); ini_set('display_errors', true); date_default_timezone_set('America/Sao_Paulo'); require_once '../vendor/autoload.php'; router.php <?php use classes\Rotas; $rota = new Rotas; $rota->get("/", function() { require_once '../mvc/view/home.php'; }); $rota->get("/contato", "Contato@form"); Rotas.php <?php namespace classes; use mvc\controller\Contato; class Rotas { public function get (String $rota, $require = null){ if ($_SERVER['REQUEST_URI'] === $rota) { if ( is_string($require) and $require !== "" ){ $require = strtolower($require); $require = explode('@', $require); $class = ucfirst($require[0]); $metodo = $require[1]; $classe = new $class; return $classe->$metodo(); } if ( is_callable ($require) ) $require(); } } } Contato.php <?php namespace mvc\controller; class Contato { public function form () { require_once '../mvc/view/contato.php'; } } Erro: Fatal error: Uncaught Error: Class 'Contato' not found in D:\web\rotas.com\classes\Rotas.php:25 Stack trace: #0 D:\web\rotas.com\public\router.php(11): classes\Rotas->get() #1 D:\web\rotas.com\public\index.php(4): require_once('D:\\web\\rotas.co...') #2 {main} thrown in D:\web\rotas.com\classes\Rotas.php on line 25 Não acho essa falha Detalhe: a Classe Routas.php está sendo carregada normalmente, o que me garante que o autoload está funcionando também!.

Amigo, obrigado pelas respostas mas acho que o que eu quero não é nem mesmo viável! O que eu pensei seria o seguinte: A API precisa de um administrador para popular os dados. Mas o /admin não deve ficar em /api/admin. Esse deve ser o meu primeiro erro de pensamento. me corrija se estiver errado! Pois no caso, até o Administrador deverá usar endepoints. Outro problema seria que, se eu envolvesse /admin, teria a seguinte árvore de diretórios /admin /api Fazendo assim de /admin outra API que irá ter o mesmo sistema de autenticação salvo se eu colocar outro JWT nesta API /admin. Isso porque o usuário da API é um cliente com credenciais de cliente e o usuário de /admim terá credenciais de administrador. Imagino que se eu mantiver o mesmo JWT para ambos ambientes terei problemas com autorizações e o cliente comum acabará acessando o /admn se tentar. Nesse caso, terei que fazer: /admin => ambiente de administração da API. Se enpoints de Webservice. /api => ambiente da própria API acesso somente com endpoinds impedindo acesso direto ao MySQL Me corrija se eu estiver errado? Tipo, até que ponto é mesmo necessário usar a SESSION para autenticação de usuário e JWT TOKEN para validação ao mesmo tempo! Isso não está claro para mim!

Pessoal, sobre o JWT Json Web Token, tenho algumas dúvidas. Atualmente faço uso de $_SESSION no PHP para autenticar e validar usuários e seus acessos à API e, logins no site/admin, dentre outras coisas. Mas, estudando aqui sobre API's, percebi a grande utilização do JWT em conjunto com a autenticação. 1 => No form de login o usuário de identifica 2 => Se as credenciais existirem o usuário ganha o retorno OK e cria uma $_SESSION com as credenciais. Mas isso é quando Ambiente Admin e API estão no mesmo domínio. Quando estão em domínios diferentes está sendo usado o JWT. Mas, aí vem a dúvida: É confiável para níveis de acesso e autenticação? Andei pensando em umas coisas: A) Enviar no Token o nível de acesso do usuário. Se é administrador, API, etc... Mas isso pode ser mudado pelo man-in-the-middle. B) Então pensei em enviar via SECRET. Também não dá pois o segredo deve ser 1 para todo e qualquer acesso ficando impossível a verificação do TOKEN pela API C) Pensei enviar via cabeçalho (header). Mas no caso, é a API quem gera o Token. Logo, não dá! Será que não existe saída? Terei mesmo que usar $_SESSION para nível de acesso e JWT para validação da requisição? Será que estou tendo uma visão errada do cenário? Alguém pode me ajudar a enxergar isso? Meu sistema de diretórios é: site/admin //administrador da API site/api // A própria API

Consegui. Segue para alguém que queira usar! Mudanças apenas no jQuery e Css CSS #detalhes { background-image: url("img/1.jpg") !important; height: 300px; } #contato { background-image: url("img/2.jpg") !important; height: 400px; } HTML: <script type="text/javascript" src="jquery.js"></script> <div id="detalhes" class="prlx"></div> <div id="contato" class="prlx"></div> JQUERY $('.prlx').each(function() { var obj = $(this); obj.css('background-position', '50% 0'); obj.css('background-attachment', 'fixed'); $(window).scroll(function() { var offset = obj.offset(); var yPos = -($(window).scrollTop() - offset.top) / 10; var bgpos = obj.css('background-position-x') + ' ' + yPos + 'px'; obj.css('background-position', bgpos); }); });

Pessoal, bom dia! Tenho o código abaixo que faz um efeito de parallax e está funcionando normalmente CSS #top { background: url("img/1.jpg"); height: 300px; } #mid { background: url("img/2.jpg"); height: 400px; } #bot { background: url("img/3.jpg"); height: 500px; } HTML <script type="text/javascript" src="jquery.js"></script> <body> <div id="top" class="prlx"></div> <div id="mid" class="prlx"></div> <div id="bot" class="prlx"></div> </body> JQUERY $('.prlx').each(function() { var obj = $(this); obj.css('background-position', 0); obj.css('background-attachment', 'fixed'); $(window).scroll(function() { var offset = obj.offset(); var yPos = -($(window).scrollTop() - offset.top) / 10; var bgpos = '50% ' + yPos + 'px'; obj.css('background-position', bgpos); }); }); Fui aplicar no meu site https://acweb.net.br/ e o efeito parallax não funcionou embora no inspector dá para ver os cálculos sendo feitos e adicionado às sections Alguém me ajuda a descobrir onde errei? Já estou faz um tempão e não acho! As sections afetadas são as que começam com os textos Fazemos todo o trabalho por você e contato,

Estou fazendo um slide, Nele, tenho 2 problemas que não encontro solução e peço a ajuda de vocês! Problemas que existem agora: A) Quando o slide começa, no arranque, está sem o efeito. Mas só o arranque mesmo, depois tudo sai corretamente e o feito funciona tanto na ida quanto na volta. B) Perceba que eu crio uma UL clone, e, em algumas rodadas a primeira LI dela está sobrepondo um pouco sobre a ultima LI da UL anterior em uma volta. Já em outra volta vai normal e numa outra volta acaba dando um espaço maior entre as LIs. Acho que erro de arredondamento ou de conta! Pode notar no inicio do JS o trecho $(".itens").css('transition','all 1s ease'); Que tecnicamente deveria adicionar o efeito antes mesmo do loop começar. Sendo assim, não consigo ver motivo do arranque não ter o efeito Coloquei no codepen.io para vocês verem os problemas acontecendo!: https://codepen.io/carcleo/pen/RwPGeMN CSS: * { border:0; padding: 0; margin: 0; outline: 0; box-sizing: border-box; } body { display:flex; width: 1040px; margin: 0 auto; justify-content: center; } .slider > * { border:0; padding: 0; margin: 0; outline: 0; box-sizing: border-box; } .slider { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; height: 130px; border: 0; } .slider > #holder { position: relative; display: flex; overflow: hidden; } .slider > #holder > #uls { position: relative; display: flex; } .slider > #holder > #uls > ul { position: relative; display: flex; } .slider > #holder > #uls > ul > li { position: relative; display: flex; align-items: center; justify-content: center; width: 200px; height: 100px; } .slider > #holder > #uls > ul > li > a { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .slider > #holder > #uls > ul > li > a > img { height: 100%; } .slider > #title { position: absolute; align-items: center; justify-content: center; display: none; width: 100px; height: 30px; top: 50px; right: calc(50% - 25px); background: #999; border: 1px solid #ccc; } .slider > #controles { display: flex; align-items: center; justify-content: center; width: 100%; height: 30px; } .slider > #controles > button { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; cursor: pointer; margin: auto 5px; border-radius: 50%; opacity: .2; } .slider > #controles > button:hover { opacity: 1; border: 1x solid #ccc; } HTML: <div class="slider"> <div id="holder"> <div id="uls"> <ul class="itens"> <li><a href=''><img src='img/sites/ctemcasb.png'></a></li> <li><a href=''><img src='img/sites/fielcard.png'></a></li> <li><a href=''><img src='img/sites/funerariasaopedro.png'></a></li> <li><a href=''><img src='img/sites/gasmuriae.png'></a></li> <li><a href=''><img src='img/sites/hotplateprensas.png'></a></li> <li><a href=''><img src='img/sites/mariasvaidosas.png'></a></li> </ul> </div> </div> <span id="title">Pausado</span> <div id="controles"> <button id="back"> < </button> <button id="next"> > </button> </div> </div> <script type="text/javascript" src="scripts/js/jquery.js"></script> JAVASCRIPT $(document).ready( function() { //cria as variáveis NÃO modificáveis; var container = $("div.slider"), holder = $(container).find("div#holder"), uls = $(holder).find("div#uls"), ul = $(uls).find("ul"), lis = $(ul).find("li"), tamanhoLi = Math.round ( $(lis).first().width() ), numeroLis = Math.round ( $(lis).length ), tamanhoUl = Math.round ( tamanhoLi * numeroLis ), controles = $(container).find("div#controles"), span = $(container).find("span#title"), btnVoltar = $(controles).find("button#back"), btnAvancar = $(controles).find("button#next"); //cria as variáveis modificáveis; var numeroSlidesMostra = 4, tempoIntervalo = 2000; //determina a largura da div que abrigará as UL's. $(holder).width(numeroSlidesMostra * tamanhoLi); //determina a largura das ULs partindo do produto entre a largura de cada LI e a quantidade de LI's $(ul).width(tamanhoUl); //acresenta efeito de transição na UL $(".itens").css('transition','all 1s ease'); //fazendo um clone no final da da div de ULs $(ul).clone().appendTo(uls); //função avançar function avancar () { $(".itens").each (function() { console.log ( Math.round ( $(this).position().left ) ); if ( Math.round ( $(this).position().left ) <= -Math.round ( $(ul).width() ) ) $(this).css({ "transition" : "none", "left" : "+=" + ( ( 2 * tamanhoUl ) - tamanhoLi ) }) ; else $(this).css({ "transition" : "all 1s ease", "left" : "-=" + tamanhoLi }) ; }); } //função voltar function voltar () { $(".itens").each (function() { console.log ( Math.round ( $(this).position().left ) ); if ( Math.round ( $(this).position().left ) >= Math.round ( $(holder).width() ) ) $(this).css({ "transition" : "none", "left" : "-=" + ( ( 2 * tamanhoUl ) - tamanhoLi ) }) ; else $(this).css({ "transition" : "all 1s ease", "left" : "+=" + tamanhoLi }) ; }); } //código do onClick no botão avancar btnAvancar.click ( function (e) { clearInterval(loop); avancar(); loop = setInterval( avancar, tempoIntervalo); }); //código do onClick no botão voltar btnVoltar.click ( function (e) { clearInterval(loop); voltar(); loop = setInterval( avancar, tempoIntervalo); }); //dispara o loop na função avançar var loop = setInterval( avancar, tempoIntervalo ); //para e reinicia o loop ao passar/retirar o mouse sobre o slide holder.mouseover(function(){ clearInterval(loop); //mostra a mensagem span.css("display", "flex"); }).mouseout(function(){ loop = setInterval( avancar, tempoIntervalo ); //esconde a mensagem span.css("display", "none"); }); })

Tenho um botão, que pega a primeira li da ul e joga ela para a ultima posição ininterruptamente e assim eu faço um efeito de slideshow. HTML: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="slider"> <ul> <li> Slide 1 </li> <li> Slide 2 </li> <li> Slide 3 </li> <li> Slide 4 </li> </ul> <button id="back"> BACK </button> <button id="next"> NEXT </button> </div> CSS: * { margin: 0; padding: 0; } body { display: flex; width: 1000px; margin: 0 auto; } .slider { position: relative; display: flex; flex-direction: column; width: 1000px; height: 200px; overflow: hidden; border: 1px solid #000; } .slider > ul { display: flex; flex-wrap: wrap; width: 5000px; } .slider > ul > li { display: flex; justify-content: center; width: 500px; height: 150px; margin: 10px; } .slider > ul > li:hover { cursor: crosshair; } .slider > button { position: absolute; display: flex; justify-content: center; top: calc(45% - 15px); width: 30px; height: 30px; opacity: 0.2; } .slider > button:hover { opacity: 1; cursor: pointer; } .slider > button#back { left: 10px; } .slider > button#next { right: 10px; } .animacao { animation-duration: 4s; animation-name: identifier; } @keyframes identifier { 0% { right: 0; } 50% { right: 50%;} 75% { right: 75%; } 100% { right: 100%; } } JQUERY: function intervalo () { $(".slider > #next").click (); } var interval = setInterval(intervalo,4000); $(".slider > ul > li") .mouseover(function(){ clearInterval(interval); }) .mouseout(function(){ interval = setInterval(intervalo,4000); }) .addClass("animacao"); $(".slider > #back").click ( function(){ var liMover = $('.slider ul li:last-of-type'); // copia o conteudo da última $(liMover).insertBefore('.slider ul li:first-of-type'); // insere antes da primeira }); $(".slider > #next").click ( function(){ var liMover = $('.slider ul li:first-of-type'); // copia o conteudo da primeira $(liMover).insertAfter('.slider ul li:last-of-type'); // insere depois da última }); Tudo funciona bem. Mas estou tentando adicionar um efeito de transição tipo quando as lis mudarem de posição, elas correrem da direita para a esquerda em vez de aparecerem abruptamente. Será que tem como?

Estou tentando criar um slideshow mas personalizado sem depender de biblioteca de terceiros (salvo, jQuery); O objetivo é: A) O slide rodar interminavelmente. B) Ao passar o mouse no slide, ele deve parar; C) Ao deixar o slide, ele deve continuar rodando de onde parou! D) AQUI ESTÁ O PROBLEMA => Ao passar o mouse novamente o interval deve parar. Mas não está parando, function intervalo () { $(".slider > #next").click (); } interval = setInterval(intervalo,4000); $(".slider > ul > li").mouseover(function(){ clearInterval(interval); }).mouseout(function(){ interval = setInterval(intervalo,4000); }); $(".slider > #back").click ( function(){ var liMover = $('.slider ul li:last-of-type'); // copia o conteudo da última $('slider ul li:last-of-type').remove(); // remove a última $(liMover).insertBefore('.slider ul li:first-of-type'); // insere antes da primeira }); $(".slider > #next").click ( function(){ var liMover = $('.slider ul li:first-of-type'); // copia o conteudo da primeira $('.slider ul li:first-of-type').remove(); // remove a primeira $(liMover).insertAfter('.slider ul li:last-of-type'); // insere depois da última }); * { margin: 0; padding: 0; } body { display: flex; width: 1000px; margin: 0 auto; } .slider { position: relative; display: flex; flex-direction: column; width: 1000px; height: 150px; overflow: hidden; border: 1px solid #000; } .slider > ul { display: flex; flex-wrap: wrap; width: 5000px; } .slider > ul > li { display: flex; width: 500px; height: 150px; } .slider > button { position: absolute; display: flex; justify-content: center; top: calc(45% - 15px); width: 30px; height: 30px; opacity: .2 } .slider > button:hover { opacity: 1; cursor: pointer; } .slider > button#back { left: 10px; } .slider > button#next { right: 10px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="slider"> <ul> <li> Slide 1 </li> <li> Slide 2 </li> <li> Slide 3 </li> <li> Slide 4 </li> </ul> <button id="back"> BACK </button> <button id="next"> NEXT </button> </div> O que estará errado!?