Você já viu essas páginas de captura que vendem milhões na internet como por exemplo do Eric Rocha ou outros grandes players do marketing digital no vídeo de hoje nós vamos fazer um desafio de criar uma página de captura do zero absoluto funcional usando apenas ferramentas de Inteligência Artificial e o editor cursor ai Será que deu certo vem junto comigo [Música] o nosso desafio Então dessa aula vai ser a gente fazer aqui um formulário de captura de e-mail e telefone e fazer isso tudo funcionar para que a gente possa ter salvo no banco de dados esses dados pra gente usar como a gente quiser né Poderia por exemplo a pessoa disparar um funil de e-mail ou alguma coisa assim do tipo a nossa ideia é fazer o mais rápido possível com inteligência artificial essa parte aqui principalmente de cima né do da página aqui de captura né claro que a página dele tem muito mais coisas aqui eu tenho um print screen que eu tirei da página de exemplo mas a gente vai se concentrar nessa parte de cima aqui só que eu quero fazer um projeto aqui com vocês nessa aula completinho tá pessoal então a gente vai fazer aqui a parte visual a gente vai fazer as capturas a gente vai salvar isso no banco de dados e vamos ver isso rodando online Realmente você colocar isso em produção para que você veja isso funcionando em minutos e o nosso desafio é tentar fazer isso o mais rápido possível então sem perder tempo o que que eu vou fazer vou bater um print screen aqui dessa nossa imagem aqui que a gente tem de referência e vou entrar aqui no cursor onde eu já tô com o projeto aberto já com uma pasta com duas imagens aqui ó eu astronauta e esse logo aqui que eu criei só pra gente facilitar os nossos trabalhos tá criei uma pastinha e joguei aqui dentro numa boa né Essa pasta pessoal eu criei dentro da pasta do shamp né para quem não conhece o shamp é esse programinha aqui que roda PHP e MySQL né você pode entrar no site lá apach FRS apachefriends. org baixar esse daqui que é um servidor PHP com banco de dados já para você fazer seus testes aí usando PHP que é a linguagem que a gente vai estar trabalhando nessa aula baixou instalou liga aqui o apach o SQL né vai est os botões aqui start Ó você liga esses dois aqui e boa depois você vai entrar no descolocar C vai vir aqui dentro da pasta shamp aqui dentro da pasta shamp vai ter uma pasta chamada HT dox que é onde a gente faz os nossos projetos com PHP e aqui a gente criou essa pasta chamada estilo Érico que eu joguei aqui para dentro do cursor Beleza então agora o que que a gente vai fazer a gente vai colar aqui Aquela nossa imagem de referência e aí eu vou pedir para ela fazer o seguinte então eu fiz o Prom assim ó usando a imagem e anexo de referência crie uma sessão Hero de captura os campos input de e-mail e telefone devem ter máscaras de Campo input para só permitir a entrada de dados correta ou seja o telefone Deve estar formatado corretamente pode usar J Carry mask plugin para facilitar quando a pessoa clicar no botão de ação para se inscrever o backend deve fazer a validação dos Campos e salvar numa tabela chamada leads a parte visual pode pode criar usando te indice CSS o banco de dados será mys e o projeto deve ser feito em PHP preciso dos esquemas paraa criação do banco e da tabela as imagens que devem ser usadas estão dentro da pasta IMG que são as imagens que a gente já deixou ali vamos ver então como é que ela vai se sair beleza pessoal terminou eu vou aceitar aqui né então aqui ela falou o que que a gente precisa fazer agora pro projeto funcionar ela fez um esquema aqui ó Database esquema scare que a gente pode usar para criar o nosso banco então a gente pode copiar esse código aqui e a gente pode fazer o seguinte a gente vai abrir aqui o navegador e a gente vai acessar o PHP my admin né dá para fazer assim pelo painel do shamp mesmo né clica aqui em admin para abrir aqui o PHP my admin que é onde a gente faz o gerenciamento dos nossos bancos de dados aqui na aba SQL a gente vai colocar aquele comando que ela fez ó de criar banco de dados estilo Eric vai se chamar aqui ela criou a tabela e a gente vai clicar aqui para executar isso aqui é pra gente fazer os testes primeiro da nossa máquina para depois a gente colocar no ar tá pessoal se a gente der um atualizar aqui ó agora a gente vai ver que a gente tem aqui o estilo Érico que é esse banco a nossa tabela leads aqui onde a gente vai ter as informações que a gente vai estar capturando beleza vamos ver então como é que ficou o projeto propriamente dito para a gente acessar a gente vai ter que entrar lá pela URL né aqui ela tá falando o que que tá fazendo tal verifique se as configurações do banco estão certo ão aqui na config ó database. php tá aqui o caminho pro banco local po é o padrão quando a gente tá fazendo teste na nossa máquina Rot é o servidor mesmo o usuário melhor dizendo né padrão aqui do shamp a senha vazia e o nome do banco estilo Érico beleza é isso aí mesmo tá certa a configuração pra gente acessar isso aqui a gente vai fazer o seguinte caminho aqui no navegador localhost barra aí a gente vai colocar o nome da pasta que a gente tem no nosso projeto que é estilo traço Érico então estilo traço Érico Barra aqui novamente ele vai entrar na index.
php que é essa página aqui olha só que sensacional pessoal que legal que ficou a nossa página aqui de exemplo né a gente Claro poderia ainda dar uma caprichada melhor dar uma melhorada um pouco no aspecto visual Mas já ficou bem joia aqui ó bem legal mesmo o nosso teste né vamos ver se funciona a questão da captura aqui vamos colocar um e-mail aqui ó teste @ teste. com né Primeiro vamos tentar enviar vazio aqui para ver se ele envia ó t em preencher o campo beleza teste @test pcom aqui no telefone Vou tentar colocar letras ol já não tá permitindo Então vou colocar um número qualquer aqui ó 99 999 99 tá formatado certinho e vamos ver agora quando clicar no Quero me inscrever agora o que que vai acontecer cliquei inscrição realizada com sucesso deu esse retorno e a gente for lá no banco e der um atualizar aqui tarã tá lá salvo a informação do e-mail do telefone e a data do cadastro né Muito legal então a gente tá armazenando aquelas informações em algum lugar que a gente pode usar depois para fazer o que a gente quiser a gente pode eh depois fazer ali uma programação para disparar um e-mail para fazer qualquer coisa que a gente queria né aqui no caso a gente fez ele tá aparecendo um balão dizendo inscrição realizada com sucesso mas a gente poderia também pedir para ele criar uma página de Obrigado alguma coisa assim para redirecionar a pessoa então que r pessoal em questão ali de minutos a gente já fez uma página de captura já com os dados aqui clicou em em inscrever enviou pro banco de dados e salvou nota 10 já estamos pegando essa informação para nós que é o que nos interessa OK agora vamos fazer o seguinte vamos colocar isso aqui no ar para valer na internet ali pra gente poder ver isso funcionando se você quisesse poderia até usar isso como uma página já de captura de verdade para algum projeto que você tá fazendo então o que que a gente vai fazer a gente vai acessar aqui ó uma hospedagem gratuita que se chama Infinity free então digita no Google lá Infinit free dessa forma aqui vai entrar nesse primeiro link aqui ó infinityfree. com que é uma hospedagem de sites com PHP MySQL 100% gratuito então não tem que pagar absolutamente nada você vai vir aqui em register para se registrar né se cadastrar você pode se cadastrar aqui com uma conta do Google que fica fica mais fácil conectei uma nova conta do Google beleza agora a gente vai criar aqui uma nova conta ó você não tem nenhuma conta ainda vamos criar uma nova conta que ele vai ficar aparecendo as propagand dinhas Afinal é gratuito por causa disso né a gente vai clicar aqui ó em Criar novo né que criar uma nova conta ali gratuita aí aqui ele pede pra gente escolher o nome do domínio depois aqui se você quiser você pode trocar né se você colocar um domínio seu próprio mas aqui ele oferece já um subdomínio já nesse rf.
gd né então vamos colocar assim ó teste traço teste de captura Vou Colocar assim ó então vai ficar teste de captura rfgd né Vamos verificar aqui a você tá disponível aqui vai falar aoun li Website for test captura rf. gd beleza aqui vai ter um password uma senha que ele tá mostrando aqui para nós a gente a gente pode copiar até essa senha aqui né pra gente ter guardado se for o caso eu não me lembro se a gente vai precisar disso aqui depois mas copia para garantir então guardei aqui num bloco de notas aqui só para facilitar aqui é que pode usar o o e-mail que a Gente Se cadastrou né para contato beleza e vamos criar aqui a conta então o nosso e-mail o nosso site vai ficar esse aqui né teste captura P rf. gd aqui ó beleza vamos dar um criar com daí aqui ele tá avisando né que pode levar uns minutos para fazer o setup da sua conta diz que pode levar até 72 horas para que esse novo domínio venha ficar visível para todo mundo dependendo do DNS dele se propagar né então isso é normal isso acontece com qualquer tipo de página então a gente pode simplesmente aguardar que ele fazer o setup ele tá falando aqui que dentro de alguns minutos essa página vai continuar automaticamente né Beleza daí a gente é redirecionado para essa página e a primeira coisa que a gente vai ter que fazer vai ser clicar aqui em MySQL databases aqui a gente pode clicar até com o botão direito para abrir numa nova guia pra gente poder configurar um novo banco né em todas as páginas que a gente entrar ele vai ficar avisando que pode levar 72 horas aqui pro domínio ficar acessível tá isso é normal quando você cria uma nova conta então aqui a gente tem o nome do usuário do nosso banco a nossa senha né Aqui tem o nome da de um banco aqui tal a porta que a gente quer o host name e tal e e a gente pode criar aqui uma nova uma um novo banco de dados ó Create Database vamos clicar aqui nesse botão aqui a gente pode colocar o nome do banco que a gente quer Vamos fazer assim estilo underline Érico desse jeito aqui deixa eu ver como é que tava ali no nosso projeto ó estilo underline errico isso mesmo esse essa forma aqui só que o nome do o banco completo nosso vai ser esse todo ó if zero tal mais o estilo underline Érico né então a gente pode até copiar isso aqui para deixar no de notas Apesar que a gente vai ter ali depois só para facilitar aqui como é que vai ficar ó então vai ficar tudo isso daqui dessa forma aqui o nome do nosso banco certo vamos clicar aqui em Create Database aí já criou aqui o nosso banco a gente vai vir aqui em PHP my admin ele vai abrir um painel administrativo Pardo com aquele que a gente tinha antes lá ó e aqui no SQL a gente vai colocar o comandinho para nossa tabela Então a gente vai vir aqui ó onde a gente tem o nosso esquema skl e aqui a gente vai pegar o comando da criação da tabela olha só que legal criação da tabela leads aqui a gente não precisa dessa primeira parte porque aqui é a criação do banco em si a gente só vai querer a nossa tabela né então vamos colocar aqui a nossa tabelinha vamos dar aqui um executar E aí beleza já foi criada a nossa tabelinha aqui ó tabelinha leads da nossa do nosso banco aqui do estilo Érico né Beleza tá aqui os nossos dados fechou Beleza então tá feito isso daqui para nós agora a gente vai precisar então copiar aqui só o username e a senha né Vamos pegar aqui ó usuário dois pontos e a senha dois pontos e aqui a gente vai pegar também e copiar ela porque a gente vai precisar desses dados para configurar lá depois no nosso arquivo PHP ali que a gente fez né Beleza então tá feita aqui a questão do banco o banco tá pronto vamos voltar aqui na nossa home né hoje a gente de aberto aqui ó agora o que que a gente vai fazer a gente vai vir aqui em File Manager né pra gente poder colocar os arquivos que a gente vai subir aqui pro nosso servidor e a gente vai entrar dentro da pasta htdc e aqui dentro dessa pasta htdc é onde a gente vai colocar o nosso conteúdo mas primeiro a gente vai ter que vir aqui ó e fazer as alterações aqui no Nossa configuração ó no nosso config database.
php né então a gente vai colocar aqui ó no local host aqui ó o host é local host mesmo aqui o usuário a gente vai colocar aqui só deixa eu conferir aqui se tá certo ó é host name aqui ó no HOST name a gente pode colocar acho que local host mesmo eu tenho certeza se a gente tem que colocar esse endereço aqui mas depois a gente testa vou deixar local host mesmo só vou colocar aqui ó então no usuário a gente vai colocar qual que o usuário aqui que no caso é esse aqui que a gente pegou ali a senha vamos pegar aqui e colocar aqui dentro e aqui no nome do banco tem que ser o nome completo aqui ó do banquinho que a gente criou lá beleza OK então a gente já colocou aqui as configurações agora a gente vai precisar lá no nosso File Manager fazer o upload aqui dos arquivos né então primeira coisa que a gente vai fazer aqui ó é criar uma nova pasta vamos chamar ela de config que dentro dessa pasta config é onde a gente vai colocar aquela a nossa configuração aquele nosso arquivo ali né então vamos fazer upload upload file achamos aqui a pasta então colocar o c vamos achar aqui a pasta champ HT dox estilo Érico aí a pasta config E aí aqui a gente vai colocar esse arquivo database. php vamos esperar ele fazer aqui o upload beleza fez vamos voltar uma pasta para trás Lembrando que a estrutura vai ter que ficar exatamente igual a que a gente tem aqui tá pessoal então vamos fazer agora uma pasta chamada IMG Vamos criar aqui uma nova pasta clica o botão direito aqui qualquer parte branca criar pasta IMG Vamos dar um ok E aí dentro dessa pasta IMG vamos fazer o upload das imagens aqui então Vamos colocar essas duas imagens aqui aqui deu uma mensagem dizendo que a minha cota foi cedida de arquiv upload de arquivos foi bloqueado por segurança acho que talvez o tamanho da imagem aqui ele não permitiu né talvez por algum motivo o tamanho das imagens aqui não foram permitidas então depois a gente pode colocar essas imagens aí num banco de imagens e fazer a referência do link fica mais fácil tá paraa a gente não ter nenhum problema OK agora vamos colocar aqui então Ó fazer o upload aqui dos arquivos fazer o upload do arquivo principal aqui da nossa página que é index. php e o sav Lead também aqui que é os dois arquivos que vão fazer aqui o trabalho aqui para nós né de funcionamento prático beleza vamos deletar esse arquivo aqui index 2.
php que não tem necessidade aqui ó vamos deletar ele beleza e já temos esses arquivos feitos Eh vamos fazer um teste então para ver se vai funcionar né Vamos dar uma olhadinha lá no nosso site testec captura rf. gd Vamos ver se esse site já já tá disponível online ou não ó ó lá já tá onine já tá disponível só que repar aqui que as imagens ó ficaram quebradas porque a gente não consegui fazer o upload delas né deixa eu tentar fazer o upload delas individualmente para ver se vai aqui ó vou enviar uma de cada vez Vamos fazer aqui o upload do arquivo V mandar primeiro esse daqui foi e vamos tentar fazer o upload do outro arquivo para ver se vai foi também deu certo então fazendo separado agora vamos dar um F5 aqui para atualizar a nossa página um cont control F5 ó para atualizar e fazer um refresh e tchans pessoal esse link já tá online tá embora ele tá como não seguro porque a gente não colocou ali um protocolo SSL né que pode ser feito aqui também no painel de controle dele ó você tem aqui ó free SSL certificates tá vendo Então você tem como colocar um certificado SSL para ficar AC cadeadinho né também mas a gente não vai se delongar muito nessa aula para não ficar muito demorado né mas o site já tá online já tá rodando Você poderia mandar esse link para alguém que você quisesse usar né Vamos fazer um teste aqui para ver se vai funcionar ó teste @ teste. com o telefone vou colocar assim 0099 9999 vamos ver se vai funcionar a gente salvar isso lá no nosso banquinho de dados aqui do eh Infinite free né vamos escrever correu um erro de conexão tente novamente então não deu certo aqui a conexão né Deixa eu atualizar ó não funcionou então o que que a gente vai precisar fazer provavelmente a gente vai ter que alterar as credenciais lá que não estão certas mesmo então vamos voltar aqui vamos entrar dentro da config e aqui a gente vai ter que colocar aqui as informações então aqui no caminho ó vamos colocar o caminho certo aqui ó do host name ó vamos colocar esse caminho e aqui os out outros dados eu acho que tá certo DB user username password né beleza OK beleza vamos salvar essas informações vamos fazer o upload de novo aqui no File Manager né Vamos carregar aqui ó fazer o upload do arquivo e vamos enviar agora alterado database.
php aqui para enviar que que você quer fazer a gente vai fazer o upload e reescrever né replace para sobrescrever sobre o que a gente já tinha Então vamos esperar ele fazer aí ó já sobre escreveu Vamos dar um atualizar aqui na nossa página cont F5 para ele reatualizar e vamos fazer mais um teste ó teste @test pcom e aqui um telefone qualquer Vamos colocar aqui quero me inscrever agora inscrição realizada com sucesso Ok se a gente for lá no nosso banquinho de dados aqui der um atualizar tá lá a informação colocada e gravada show de bola né pessoal fizemos uma página de captura completa colocamos ela no ar e ainda temos um banco de dados funcional tudo 100% gratuito e se você quiser ainda deixar isso aqui com certificado SSL você vem aqui no projeto vem aqui em free SSL certificates cria um novo certificado SSL que a sua página vai ficar aí ainda com a segurança né com aquele cadeadinho página seguro criptografia e SSL colocada show de bola e se você ficou nesse vídeoo até agora e ainda não deixou o seu like deixa seu like por favor porque eu ainda tenho mais uma dica que vai ser muito útil eu tenho certeza que você vai gostar eu tenho aqui então a imagem né que que eu usei de referência e a página de vendas aqui que eu tenho um print screen você sabe como bater um print screen de um site inteiro para você ter como referência é isso que eu vou te mostrar como é que você faz então por exemplo vou entrar num site qualquer aqui ó vou entrar aqui em curso e a. programation web. com.
