E aí [Música] [Música] o Olá pessoal tudo bem sejam bem-vindos a mais um vídeo do canal script Case aqui quem fala é a Camila e no vídeo de hoje a gente vai atender aí eu pedido de um colega nosso de desenvolvimento que é o Braille para quem não sabe nós realizamos um sorteio no perfil do Instagram do scriptcase e ele foi um dos ganhadores desse sorteio a gente teve um seminário com ele ao vivo e ele fez a solicitação para gente ele tava precisando adicionar um filtro dentro de um dashboard para que esse filtro pudesse atualizar as outras telas dashboard Então esse foi o pedido dele a gente fez o seminário ao vivo enfim eu mostrei para ele como que ele faria isso e agora a gente está liberando esse vídeo aqui para vocês poderem usufruir dessa ideia também tá então a ideia desse vídeo vai ser exatamente isso para quem não viu aqui ó a gente tem um filtro aqui no topo na esquerda é onde a gente vai ter uma seleção de empresa e quando a gente selecionar a empresa e clicar em e ele vai atualizar para gente os cards com esse parâmetro aqui de empresa então eu selecionei aqui Squad web Ele trouxe para a gente aqui os funcionários 2 cod web assim como se eu selecionar a netmake e pesquisar ele vai trazer aqui para mim os funcionários da netmake um plus aí que eu coloquei para vocês é o seguinte além de utilizar a atualização do dashboard através do botão a gente vai atualizar esse dashboard aqui da lateral também clicando nesse ícone que fica dentro de um campo da consulta então eu vou mostrar para vocês duas formas da gente ter esse vínculo né essa atualização entre telas dentro do dashboard Então esse daqui por exemplo a gente tem uma galeria aqui na lateral que é uma Grid no formato de slide e quando eu clico aqui no item ele vai abrir para mim aqui a galeria desse funcionário eu vou trocar aqui para escolhe web ó e vou selecionar que a minha galeria quando eu clico aqui ele traz para mim os itens da minha galeria Ok então ele vai atualizar e vai trazer aqui o que você passar de parâmetro ele vai buscar essas informações no banco para trazer aqui na tela claro que a que eu tô utilizando um exemplo meio bobo né só para mostrar de fato como que funciona mas isso aqui vai ser de acordo com a necessidade de vocês então A ideia é que vocês capturem a ideia e consigam replicar isso no projeto de vocês e é muito fácil vocês vão ver que não tem mistério nenhum tá então eu vou mostrar pra vocês agora vamos entrar na parte do código vou mostrar para vocês Quais foram as telas que a gente criou para montar para trabalhar em cima disso daqui e qual foi o código de fato que a gente chegou no final para ter esse resultado aqui beleza então vamos lá bom eu vou tentar ser o mais breve possível para o vídeo não ficar tão longo mas eu também não quero deixar de explicar todos os detalhes para que vocês consigam entender tá para a gente o tempo eu já tô com as aplicações criadas só que a gente não tem nenhum código dentro delas eu vou explicar para vocês ao longo desenvolvimento para que que serve cada aplicação como que vai funcionar enfim mas a gente vai executar que o dashboard para que vocês consigam entender como que ele funcionam aquele tá trazendo todos os dados né como eu removi todo o código ele tá trazendo aqui todos os funcionários sem o ícone da galeria e tá trazendo aqui todas as imagens Independente de quem é tá trazendo todas as imagens do banco porque a gente não tem nenhum filtro né E aqui seu clicar e selecionar uma empresa e pesquisar ele não vai fazer nada porque a gente tá sem código então é isso daqui que a gente vai começar a modificar agora voltando aquele script Case eu vou abrir aplicação de dashboard e mostrar para vocês que ele é um dashboard normal não tem nada demais o que que a gente tem aqui dentro no topo e a esquerda a gente vai ter o filtro que é uma aplicação de filtro realmente não vamos abrir aqui também ó e é uma aplicação de filtro onde eu selecionei a tabela empresas já que eu quero utilizar o ID da empresa como parâmetro né e dentro do campo eu selecionei aqui o id e o nome porque o nome é o que eu quero mostrar e o ID é o que eu vou passar como parâmetro Então eu só tenho isso daqui nessa parte do filtro aqui embaixo do filtro eu vou ter a lista de funcionários que é uma consulta nada mais nada menos do que uma consulta é só passando um SQL também normal tá sem cláusula Where nenhuma e de nome empresa esse empresa até não precisaria Mas como eu montei o select ele veio já montado eu não mexi mas não precisaria porque não está aparecendo a gente não vai utilizar ele aqui na lateral direita nós temos a galeria que também é uma consulta só que é uma consulta Em um formato de slide eu mudei a orientação né dessa Consul O slide E aí ele cria essas imagens como vocês estão vendo aqui o meu lado da outra e obviamente está desconfigurado Por que a gente precisa mexer né Aí eu apliquei um pouco de CSS para a gente ter um tamanho padrão em tudo enfim depois eu vou mostrar para vocês então essa galeria é simplesmente uma consulta em orientação slide e o cria um campo aqui no funcionários que é o campo galeria ele é um campo do tipo texto e a gente vai jogar dentro dele um ícone do Font awesome que o ícone de foto né para quando a gente clicar ele direcionava para a galeria é o ID do funcionário e trazer as fotos somente daquele funcionário aqui no filtro é isso tá outra coisa que a gente vai ter é aqui na parte da galeria nós vamos criar um botão tá sem nada mas nós vamos criar um botão para adicionar uma foto então o que que acontece a gente vai estar aqui vai clicar na galeria vai trazer as fotos e em cima nós vamos ter um botão que quando a gente clicar ele vai abrir um modal com um formulário que é este formulário aqui onde a gente vai poder cadastrar uma nova foto na galeria para esse funcionário Então a gente tem que os campos funcionário e foto esse funcionário inclusive ele já tem que vir selecionado com o funcionário que a gente clicou aqui na Galeria né então se a gente selecionar aqui a Camila quando eu clicar em novo e abrir o modal eu já quero que venha a Camila selecionado dentro do modal para não ter que selecionar Então a gente vai fazer isso também ó e aqui a foto de fato que é uma imagem banco de dados que a gente vai salvar no banco mas você pode salvar no diretório enfim Aonde você quiser não tem problema nenhum tá bom bom essas aplicações que a gente vai utilizar a princípio e tem essa última aplicação aqui ó limpa variáveis que eu não vou comentar sobre ela agora ela vai ser lá para o final e aí eu explico certinho a primeira coisa que a gente vai fazer é o seguinte vamos entender Qual que é a ideia aqui tá a gente precisa ter um escopo entender como que é a ideia disso daqui ó Então vamos lá o que que a gente vai fazer aqui a gente vai pegar o dia da empresa e vai passar para baixo aqui a gente vai pegar o ID do funcionário e vai passar para a direita Então são duas dois códigos que a gente vai ter que trabalhar o código do filtro que atualiza o funcionário e o código do funcionário que atualiza a galeria além do filtro atualizar o funcionário ele vai ter que atualizar galeria também é porque toda vez que eu trocar empresa eu tenho que trocar os funcionários da empresa e tenho que limpar galeria do funcionário antigo certo então a gente vai precisar fazer isso também vamos começar fazendo o seguinte eu quero selecionar empresa e que era atualizar aqui agride de funcionários que que a gente vai fazer para isso eu vou fechar todas as guias e vou abrir novamente conforme a gente for trabalhando para ficar mais fácil da gente entender tá então eu vou abrir aqui o filtro que eu dá um zoom Acho que fica melhor para vocês um pouquinho o que que a gente vai fazer dentro do evento onvalidate é onde a gente vai rodar um código para a gente armazenar a empresa selecionada dentro de uma variável Global esse evento Vale dente ele vai funcionar quando a gente clicar no botão pesquisa então eu vou vir aqui dentro e vou colocar o seguinte eu vou criar uma variável Global chamada SW company-wide e ela vai receber o valor do meu select e toda vez que eu clicar aqui em pesquisa eu vou pegar o valor do ID da empresa e vou salvar essa variável Global Ok Isso aqui é um item feito agora a gente vai abrir a consulta de funcionários não vamos ver aqui e na consulta de funcionários como eu falei a gente não tem nenhuma cláusula Where porque dentro do evento ou script Unity a gente vai fazer o seguinte a gente precisa saber se a variável Global Company aí de existe esse ela está preenchida se ele existe ele estiver preenchida é porque a gente tem informação Então nós vamos adicionar dinamicamente uma cláusula Where no nosso SQL agora se ela não existiram não estiver preenchida a gente vai passar uma condição qualquer para que a consulta retorna para gente que não existem registros então eu vou utilizar esse código aqui ó o quê que esse código faz se Av a Global Company de existir e ela não for vazia então eu quero utilizar a macro SC select ué add para adicionar essa cláusula Where aqui ou seja onde empresa é igual a variável Global senão ele vai adicionar uma cláusula era que qualquer só para a gente ter um erro na na com ele e ele não retornou nenhum dado perguntar colocando onde um é diferente de um só que um não é diferente de um é igual a um Então essa cláusula era aqui ela vai ser falsa então ela vai trazer para gente que não existem registros Tá eu vou salvar isso aqui eu vou vir aqui em aplicação variáveis globais e tenho que ter certeza que está assentado como entrada Beleza agora aqui na empresa no surf empresas no filtro eu preciso ir em aplicação variáveis globais e definir como saída porque eu tô tirando o valor daqui e mandando para consulta Então ela é como saída tá Vou salvar e vou vir aqui já vou atualizar essas duas aplicações para a gente poder já testar Essa parte é não está completo Ainda Mais a gente ia consegue testar tá só deixou gerar essas duas eu vou dar um F5 aqui ó e a gente vai fazer o seguinte eu vou selecionar netmake e vou clicar em pesquisa ó ele atualizou nota em que ele não atualizou aqui embaixo Mas se o clicar em atualizar frame ele vai atualizar e vai trazer para mim os funcionários da netmake agora se eu clicar em escolhe web pesquisa e clicar aqui em atualizar frame ele vai alterar para mim também porque quando eu clico aqui ele altera o valor da variável global e quando eu altero aqui ele identifica o valor que foi alterado o que a gente precisa fazer agora é deixar automático essa transação toda vez que eu clicar aqui ele tem que atualizar automaticamente aqui para mim né então vamos voltar aquele script case e a gente vai fazer o seguinte vamos criar um método PHP que inclusive já tá criado aqui ó esse método a gente vai utilizar somente essa primeira parte aqui eu chamei o método de rir load dashboard e dentro do método eu coloquei um jovem scripts nesse JavaScript a gente vai e a gente vai pegar o e frame que a gente quer atualizar Então a gente vai ter que fazer o seguinte e inspecionar elemento eu pego a setinha seleciona que o HTML vou na tag e frame e pega o ID dela e esse é o dedo e frame qualquer atualizar volto lá no Script case e altero aqui ó esse é o dedo em frente que eu quero atualizar beleza e aí ele vai fazer o quê quando eu clicar ele vai passar para o agarre fiz um novo link que é o link da mesma aplicação então basicamente o que ele vai fazer é somente atualizar aquele frame como mesmo link com a mesma aplicação por isso que eu passo dessa forma aqui ó ponto. /O nome da aplicação poderia passar também index. ph p mas quando a gente não passa nada ele automaticamente pega o índice então a gente não precisa passar tá como a gente sabe que a gente vai no endereço a gente não precisa passar Então dessa forma que ele já vai funcionar eu vou salvar e agora eu preciso pegar o nome dessa função aqui desse método pega P vir aqui no evento onvalidate e fazer a chamada de é tão fácil chamada aqui isso daqui vai fazer com que ele Rode esse método pega a pena né e consequentemente atualiza dashboard para gente então eu vou gerar o código fonte aqui novamente e a gente vai atualizar para poder ver se ele já vai fazer essa atualização de frente vou dar um F5 e ele trouxe dados porque a variável ela está preenchida a gente vai ter que ir lá no final do vídeo fazer um esquema para limpar essas variáveis Então vou vir aqui vou selecionar netmake pesquisei Olha lá já atualizou sozinho ou selecionar discord.
web pesquisei Já atualizou sozinho Beleza então essa atualização do filtro para os funcionários a gente já tem pronta show agora a gente vai começar a trabalhar na galeria porque além de utilizar o botão a gente pode também tem um clique no campo né da consulta para atualizar outro item Então a gente vai fazer isso vamos fechar essas aplicações aqui por enquanto e vamos fazer o seguinte na Grid de funcionários eu já deixei criado um campo chamado galeria que ele é do tipo texto Dentro do evento onrecord e a gente vai jogar um código que é esse código aqui isso daqui por enquanto nós não vamos utilizar a gente vai utilizar só assim só para vocês entenderem bom e o que a gente tá fazendo a gente tá jogando dentro do campo o texto um ícone do Font awesome essa tag é uma tag de link porque daqui a pouco a gente vai criar um link né quando a gente clicar a gente que atualizar outro item é então por enquanto a gente só vai jogar a imagem aqui dentro vamos atualizar para a gente ver se ele vai trazer a imagem para quem não sabe escrito que ele já utiliza o Font awesome nativo então a gente pode simplesmente Abrir o site aqui do Font awesome se eu botar aqui ó bom tchau e some na verdade ele vai pegar o 5 né que é o que o script Case tem importado esse aqui é o quatro a gente quer ir para os 5 e é esse site aqui ó e aí a gente pode procurar aqui qualquer ícone que a gente quiser utilizar de preferência o frio né porque eu critiquei trabalha com frio a gente clica em cima de silicone e copia esse HTML que vai ter aqui ó copiando HTML a gente vem aqui dentro do script case e cola nesse caso aqui ó eu já tenho um código essa classe aqui eu coloquei só para dar um tamanho nesse ícone porque por padrão ele vem pequeno ele vem desse tamanho aqui ó então eu tô utilizando a classe 2 x fa-2x para que ele fique desse tamanho aqui ou seja fique maior tá então vou remover isso aqui que era só para mostrar para vocês vou aqui ó e vou mandar ele atualizar Olha lá já trouxe o ícone da galeria seu clicar ele não vai fazer nada porque a gente não tem nada aqui dentro ainda agora qualquer ideia que eu fechar esse aqui E esse aqui quando a gente clicar a gente tem que atualizar aqui isso daqui vai ser atualizado o código do funcionário por esse motivo dentro dessa aplicação da galeria que eu vim aqui e Abrir aplicação da galeria a gente vai precisar fazer o mesmo que a gente fez aqui no funcionário no Script a gente vai precisar verificar uma variável global que a gente vai definir se ela tiver preenchido a gente coloca uma cláusula Where senão não então vamos vir aqui ó e se existir a variável Global emploi Aide e ela não for vazia eu vou adicionar o negócio é onde funcionária igual variável Global se não o é um é diferente de um pronto isso aqui já vai montar a variável global para a gente aqui dentro do nosso select beleza aqui dentro do funcionário agora a gente não consegue colocar um evento de clique dentro desse Campo passando a variável Global Então a gente vai ter que trabalhar com o JavaScript para isso acontecer e aí o que que a gente vai precisar fazer vamos voltar no evento ou scripts init um salvar aqui e voltar aqui no evento ou script and a gente vai ter que criar uma função JavaScript para gente poder fazer isso acontecer então eu vou colocar aqui embaixo o seguinte código e esse código aqui é exatamente o mesmo código aliás exatamente entre aspas daqui pra cá é praticamente o mesmo código que a gente está utilizando aqui o que muda é que a gente vai fazer a passagem de parâmetro aqui ó através da URL ao invés de ser variável Global com variável Global a gente vai passar uma variável Jet para uma variável Global Então a gente tem aqui o mesmo código passando o dedo em frente que a gente quer atualizar então eu quero atualizar esse Frame 2 aqui ó olha aqui e de e Frame 2 Beleza então mesmo código ali ó e daí Frame 2 ia que eu vou passar. /O nome da aplicação que eu vou atualizar que é agride galeria chamo o index.
