Tutorial Blog PHP com Bootstrap e CSS - Guia Passo a Passo

BLOG PHP E BOOSTRAP BLOG PHP E BOOSTRAP BLOG PHP E CSS BLOG PHP E CSS Crie uma pasta para o projeto dentro do htdocs do XAMPP caso esteja usando outro programa verifique a pasta onde precisará salvar os arquivos PHP dentro dela faça as pastas admin config css images e uploads aproveite e crie o indexphp Faça a estrutura de HTML na página crie um head com Blog Seu Nome Inclua a chamada do Boostrap via CDN acesse aqui copie os dois códigos css only e javascript e cole dentro do head do indexphp Dentro do body aplique um título h1 com o texto Blog Salve e teste no navegador Apague o título criado para teste Dentro da pasta css crie o arquivo stylecss aproveite faça o link para o arquivo no cabeçalho do index abaixo dos llinks do boostrap aplique uma cor no body para testar o link Salve e teste BLOG PHP E CSS Vamos aproveitar o navbar do Boostrap Acesse a documentação do Boostrap navegue até a opção Components e depois Navbar Escolha a opção de navbar ao lado copie do site do Boostrap e cole dentro do Body do seu documento Aproveite para mudar as classes navbarlight e bglight navbarbg bgdark escolhendo uma cor de sua preferência ver segunda imagem Mude a classe da div interna para apenas container na opção está containerfluid assim vamos limitar a largura do conteúdo da página Altere o conteúdo da barra de navegação coloque a marca do seu Blog escolha uma opção no Flaticon e os links necessários nav classnavbar navbarexpandlg navbarbg bgdark div classcontainer Após o ajuste do topo é hora de inserir o slide acesse a página do carousel do Boostrap e copie o fonte para o seu projeto Inclua a imagens do slide na pasta images e chame no código fonte BLOG PHP E CSS Agora devemos criar o grupo de cards para receber as postagens do Blog Após o slide crie uma div como o nome container e dentro dela vamos colar o fonte dos cards Insira as imagens que deverão representar as postagens Aplique um afastamento na vertical para os cards fique atento para aplicar em todos os cards usando as propriedades do Boostrap col gy5 Fonte httpsgetbootstrapcomdocs40utilitiesspacing div classcontainer div classrow rowcols1 rowcolsmd3 g4 div classcol gy5 BLOG PHP E CSS O próximo passo será criar um footer Crie a tag semântica footer e aplique as classes para margens e afastamentos mt5 p5 além de aplicar um background cinza que é padrão do Boostrap bglight Dentro do footer vamos criar uma div com a classe container Dentro do container iremos criar 3 parágrafos sendo o primeiro para inserir uma opção de seta onde deverá ser um link para voltar ao topo o segundo deverá receber os créditos e por último os links das redes sociais Acesse o css aplique uma cor de fundo para o footer cinza escuro com a fonte branca salve o arquivo e teste no navegador footer classmt5 p5 bglight div classcontainer p classfloatend mb1 a hrefÍcone setaa p p classmb1Todos os Direitos Reservadosp p classmb0Ícones das Redes Sociaisp div footer BLOG PHP E CSS httpsgetbootstrapcom REFERÊNCIAS PHP CRIANDO TEMPLATE BLOG Crie as páginas navphp e footerphp na raiz Recorte o código do indexphp do começo do código até o fechamento da nav e cole na página navphp Recorte o código da abertura do footer até o fim do código e cole na página footerphp No topo da página indexphp coloque um include para chamar a página navphp no topo depois faça o mesmo com o footer Abra o navegador e teste o funcionamento Agora será possível criar as demais páginas de forma mais simples basta chamar os includes no começo e final da página sem a necessidade de digitar o código No começo da página php includenavphp No fim da página php includefooterphp BLOG PHP E CSS indexphp PHP PAINEL ADMIN BLOG Dentro da pasta config um arquivo com nome connectionphp Acesse o PHPMyAdmin e crie um banco de dados com o nome blog Prepare o arquivo de conexão usando o PDO salve e faça o teste php conectar new PDOmysqldbnameblog hostlocalhost root BLOG PHP E CSS Crie uma tabela com o nome posts com os seguintes campos id inteiro não nulo e auto incrementável Lembrando que deverá ser uma chave primária title do tipo varchar de 30 e também não nulo description do tipo texto longo longtext data do tipo date image do tipo varchar com 150 CREATE TABLE posts id int NOT NULL autoincrement title varchar30 NOT NULL description longtext data date image varchar150 primary key id DEFAULT CHARSET utf8 BLOG PHP E CSS Acesse a pasta admin e crie a página insertphp dentro da pasta admin Crie a estrutura de html dentro do body abra a tag semântica main e dentro dela uma div com a classe container Crie um formulário aproveite do Boostrap e apenas edite os campos fique atento que você precisará linkar o Boostrap neste arquivo pois o primeiro link ficou para os arquivos fora da pasta admin informe a action para que ele envie os dados para o arquivo enviaphp defina o método como POST e inclua o enctype como multipartformdata opção para fazer o upload das imagens Insira os campos para o título do tipo text data do tipo date descrição do tipo text imagem do tipo file e botão de enviar Fique atento aos names dos campos de input e textarea Utilize a validação para usar o preenchimento dos campos como obrigatório veja a referência abaixo No arquivo enviaphp vamos primeiro imprimir os elementos na tela para ver se está tudo certo Verifique se os valores dentro do POST são os mesmos dos campos name do form Teste a página insertphp no navegador e verifique se os dados inseridos no formulários serão abertos na página enviaphp Referência httpsgetbootstrapcomdocs51formsvalidation insertphp dentro do admin form actionenviaphp methodPOST enctypemultipartformdata ocultei parte do código input typefile idformGroupExampleInput3 placeholderInsira uma imagem nameimage enviaphp dentro do admin title POSTtitle data POSTdata description POSTdescription echo titlebr echo databr echo descriptionbr BLOG PHP E CSS A página deverá ficar como na imagem ao lado BLOG PHP E CSS Vamos avançar Faça a inclusão do arquivo de conexão pois agora as informações deverão ser inseridas no banco de dados Lembre de apontar para a pasta e usar o para que o arquivo saia da pasta admin indo para a raiz do site e depois acesse a pasta config Vamos criar uma variável que recebe a variável de conexão e a função prepare que prepara a query do banco Mantenha a chamada dos posts e inclua a chamada do arquivo imagem usando a função FILES Depois utilize a função moveuploadfile para mover o seu arquivo A função receberá dois valores o primeiro será o filename o nome do arquivo que será enviado e deverá ser um arquivo de formato válido e o segundo será o destination destino do arquivo que será movido Concluindo o upload do arquivo crie uma variável para indicar a pasta o nome da pasta será uploads e deverá ter sido criada e concatenar chamando a variável do nome do arquivo Aplique o bindParam para a ligação dos valores Execute o PDO No final iremos acrescentar uma chamada temporária para a página insertphp usando a função header assim a página irá redirecionar automaticamente para a página insertphp Salve e teste verifique se o banco foi atualizado e se a imagem foi para a pasta uploads includeonceconfigconnectionphp stmt conectarprepareINSERT INTO posts title description data image VALUESTITLE DESCRIPTION DATA IMAGE title POSTtitle data POSTdata description POSTdescription arquivo FILESimage moveuploadedfilearquivotmpname uploadsarquivoname image uploadsarquivoname stmtbindParamTITLE title stmtbindParamDESCRIPTION description stmtbindParamDATA data stmtbindParamIMAGE image stmtexecute redireciona o arquivo headerLocation insertphp BLOG PHP E CSS CREATE Faça o arquivo viewphp Abra o arquivo enviaphp e mude o location apontando para o viewphp Assim toda vez que um arquivo for incluído o sistema irá redirecionar para a página de visualização Retorne para o arquivo view e aplique a conexão com o banco de dados Prepare a query para ser enviada a query Select ao banco de dados Execute para que ele deixe disponível os dados o próximo passo será aplicar um laço para chamar os dados Crie uma variável e dê o nome de results faça com que a variável results receba a variável stmt com um fetchALL array multidimensional também chamado de matriz para chamar todos os registros no banco de dados Depois iremos criar um foreach dentro de um foreach para receber os resultados Salve e faça o teste verifique se a página viewphp vai exibir o resultado php includeonceconfigconnectionphp stmt conectarprepareSELECT FROM posts ORDER BY id stmtexecute results stmtfetchALLPDOFETCHASSOC foreach results as row foreach row as key value echo strongkeystrongvaluebr echo br BLOG PHP E CSS READ Vamos criar uma visualização um pouco mais completa em relação à estrutura anterior agora vamos acrescentar um botão de ver e excluir Faça o arquivo view2php Abra o arquivo enviaphp e mude o location apontando para o view2php Retorne para o arquivo view2 e aplique a conexão com o banco de dados Prepare a conexão com o banco de dados e ordene o conteúdo em ordem decrescente Execute para que ele deixe disponível os dados o próximo passo será aplicar um laço para chamar os dados Crie uma variável e dê o nome de results faça com que a variável results receba a variável stmt com um fetchALL array multidimensional também chamado de matriz para chamar todos os registros no banco de dados Depois iremos criar uma estrutura com divs e tabelas para organizar a estrutura php includeonceconfigconnectionphp stmt conectarprepareSELECT FROM posts ORDER BY id DESC stmtexecute results stmtfetchALLPDOFETCHASSOC continua no próximo slide BLOG PHP E CSS VIEW 02 Crie uma estrutura de html Link com boostrap Dentro do body crie uma tag semântica mais e dentro dela uma div com a classe container Dentro dela coloque um título como Meus Posts Vamos criar uma tabela com a classe table e um id como contactstable Aplique um thead e divida as colunas com Título Descrição e Ações main div classcontainer h1 idmaintitleMeus Postsh1 table classtable idcontactstable thead tr th scopecolth th scopecolTítuloth th scopecolDescriçãoth th scopecolAçõesth tr thead Continua no próximo slide BLOG PHP E CSS VIEW 02 Abra um tboby e deixe uma coluna para o id outra para o título outra para a descrição outra com um texto Ver e com o X representando o apagar Salve e teste th scopecolAçõesth tr thead tbody tr td scoperowidtd td scoperowTítulotd td scoperowDescriçãotd td classactions a href Ver use um ícone a a href X use um ícone a td tr tbody table div main Continua no próximo slide BLOG PHP E CSS VIEW 02 O resultado deve ser como na imagem ao lado Continua no próximo slide BLOG PHP E CSS VIEW 02 Atualize o código aplicando o foreach para chamar os dados veja ao lado Na opção Ver crie um link para a página viewBlogphp com o id sendo passado via url O mesmo faça para as opções editar e deletar Salve e teste veja se aparece a lista de elementos na tela Vamos criar a página de visualização do post crie o arquivo viewBlog segue próximo slide tbody php foreachresults as post tr td scoperow postid td td scoperow posttitle td td scoperow postdescription td td classactions a hrefviewBlogphpid postid i classfas faeye checkiconVeri a a hrefeditarphpid postid i classfas faeye checkiconEditari a a hrefdeletephpid postid Xa td tr php endforeach tbody BLOG PHP E CSS VIEW 02 Faça o arquivo viewBlogphp dentro do admin Vamos chamar o include do connectionphp no topo do arquivo Crie uma variável para carregar o id passado pela URL Faça a conexão porém chamando apenas as colunas desejadas e aplicando um Where para o id recebido Execute a variável stmt porém passando um array do id dentro dela Faça um foreach chamando os campos desejados dentro do HTML Arrume a estrutura da página deixando o layout mais próximo do ideal utilize o Boostrap Para testar abra o arquivo view2php e clique na opção Ver No começo da página php includeonceconfigconnectionphp id GETid stmt conectarprepareSELECT id titledescription FROM posts WHERE id id stmtexecutearrayid id results stmtfetchALLPDOFETCHASSOC aqui entra o HTML chame o Boostrap dentro do body faça o código abaixo php foreachresults as post h1 posttitle h1 p postdescription p php endforeach BLOG PHP E CSS READ POST Aproveitaremos o conhecimento adquirido para editar os cards do index da raiz do site não é do admin Os cards do index deverão ter apenas a imagem e o título sendo que o título será um link para a página viewPostphp externa a página viewBlog feita agora foi do admin Crie a página viewPostphp código ao lado na raiz principal do site a qual deverá receber o título a imagem de destaque a data e a descrição Não faça o teste agora deixe para fazer quando concluir o código dos cards do index pois a página viewPost precisa receber o id no GET e isto só vai ocorrer quando os cards do index estiverem prontos BLOG PHP E CSS READ POST php include configconnectionphp include navphp id GETid stmt conectarprepareSELECT FROM posts WHERE id id stmtexecutearrayidid results stmtfetchALLPDOFETCHASSOC div classcontainer php foreach results as post h1 posttitle h1 p datedmY strtotimepostdata p p img src postimage alt posttitle p p postdescription p php endforeach div footer php include footerphp O trecho dos cards do indexphp da raiz deverá ficar como no código abaixo Para testar a viewPost acesse o indexphp da raiz e clique no título dos cards BLOG PHP E CSS READ POST Topo do nav php include configconnectionphp stmt conectarprepareSELECT FROM posts ORDER BY id DESC stmtexecute results stmtfetchALLPDOFETCHASSOC DOCTYPE html html langptbr head topo do index php include navphp Card do index início card div classcontainer div classrow rowcols1 rowcolsmd3 g4 php foreachresults as post div classcol gy5 div classcard img src postimage classcardimgtop alt div classcardbody h5 classcardtitle posttitle h5 p classcardtext postdescription p a hrefviewBlogphpid postid i classfas faeye checkiconVeri a div div div php endforeach div fim card Retorne para a pasta admin e crie o arquivo deletephp Abra o arquivo view2php e verifique a chamada da página via id deletephpid postid no link Salve a página view2php e retorne para a página deletephp Insira a inclusão do arquivo connectionphp Aplique a variável para preparar o delete de acordo com o id resgatado Crie a variável id e chame via get o valor do id Ligue a variável id através do bindParam Execute a variável Imprima o texto Registro Apagado Salve abra a página view2php e faça o teste php includeonceconfigconnectionphp stmt conectarprepareDELETE FROM posts WHERE id ID id GETid stmtbindParamID id stmtexecute echo Registro apagado BLOG PHP E CSS DELETE Crie o arquivo indexphp dentro da pasta admin Crie uma estrutura em html Vamos criar uma tela de login usando o boostrap faça o link com o boostrap Aplique a classe textcenter no body ver imagem abaixo para centralizar todo o conteúdo Crie um arquivo styleindexcss e faça a chamada link abaixo dos links do boostrap No styleindexcss aplique uma altura de 100 para o html e para o body Para o body aplique display com valor flex alignitems com valor center e utilize uma imagem como background centralizado baixe uma imagem com tamanho médio no site Unsplash Salve e verifique se a imagem de background foi aplicada html body height 100 body display flex alignitems center background urlimagesbgjpg center BLOG PHP E CSS LOGIN E SENHA Crie a tag semântica main e aplique a classe formlogin Retorne ao css e aplique os seguintes valores largura máxima de 350 pixels um afastamento de 15 pixels margem automática para centralizar background na cor branca com 80 de opacidade e um raio na borda de 5 pixels Retorne ao arquivo indexphp do painel admin crie um formulário dentro do main principal aplique o método POST e uma ação para a página logarphp Baixe um ícone para inserir como marca do Painel httpswwwflaticoncom coloque na pasta imagens insira a tag img para chamar a imagem aplique a classe mb4 e ponha largura e altura como 70 pixels Insira um título 3 aplique a classe h3 e digite Painel Administrativo Salve os arquivos e faça o teste stylecss formlogin maxwidth 350px padding 15px margin auto backgroundcolorrgba255 255 255 08 borderradius 5px indexphp body classtextcenter main classformlogin form methodpost actionlogarphp img classmb4 srcimageslogopng alt width70 height70 h3 classh3Painel Administrativoh3 BLOG PHP E CSS LOGIN E SENHA Busque um formGroup do Boostrap copie para o site e coloque após o título Aproveite e edite os campos para Login Senha e LOGAR Salve e teste h3 classh3Painel Administrativoh3 div classmb3 label forformGroupExampleInput classformlabelLoginlabel input typetext classformcontrol idformGroupExampleInput namelogin placeholderLogin div BLOG PHP E CSS LOGIN E SENHA O próximo passo será criar a tabela users dentro do banco de dados do blog Veja a imagem ao lado e proceda como na criação da tabela anterior Obs Use a senha varchar de 255 BLOG PHP E CSS LOGIN E SENHA Vamos aproveitar e inserir um usuário usando o próprio banco Com a tabela users selecionada clique no botão Insere preencha os campos e clique em Executar Note que o próprio banco vai gerar o SQL Obs Não precisa digitar o ID pois ele é adicionado automaticamente BLOG PHP E CSS LOGIN E SENHA O próximo passo será criar a página logarphp dentro do admin Faça a conexão com o banco de dados Aplique a função para iniciar a sessão Segundo o manual do site PHPnet sessionstart cria uma sessão ou resume a sessão atual baseado em um id de sessão passado via GET ou POST ou passado via cookie Fonte httpswwwphpnetmanualptBRfunctionsession startphp Crie uma variavel login e uma variável senha para receber via post os dados enviados pelos campos login e senha do formulário Prepare os dados usando o prepare e selecionando todos os campos da tabela usuários quando os valores do login e senha enviados forem iguais aos valores encontrados no banco de dados Faça o tratamento dos dois campos usando o bindParam Depois execute Até esse momento o processo foi muito parecido do que já fizemos no projeto e durante as aulas includeconfigconnectionphp sessionstart login POSTlogin senha POSTsenha stmt conectarprepareSELECT FROM users WHERE login LOGIN AND senha SENHA stmtbindParamLOGIN login stmtbindParamSENHA senha stmtbindValueLOGIN md5senha stmtexecute Segue no próximo slide BLOG PHP E CSS LOGIN E SENHA Crie uma condicional com o if para verificar se a contagem de linhas registros é igual a 1 ou seja se o login e senha apresentaram 1 registro vindo do banco de dados Caso a variável stmt seja igual a 1 será criada uma variável info que receberá a variável stmt e que deverá setar um fecth 1 registro De acordo com o site PHP net PDOStatement fetch Busca a próxima linha de um conjunto de resultados Fonte httpswwwphpnetmanualptBRpdostatementfe tchphp Aplique um vardump na variável info para mostrar os valores da variável e verificar se os dados do usuários serão chamados Salve a página Abra o arquivo indexphp faça o teste digitando o login e senha cadastrados no banco de dados e observe se os dados são apresentados no vardump includeconfigconnectionphp sessionstart login POSTlogin senha POSTsenha stmt conectarprepareSELECT FROM users WHERE login LOGIN AND senha SENHA stmtbindParamLOGIN login stmtbindParamSENHA senha stmtexecute ifstmtrowCount 1 info stmtfetch vardumpinfo BLOG PHP E CSS LOGIN E SENHA Substitua o vardump criando as variáveis de sessão sendo que a primeira variável de sessão será logado e deverá receber um valor verdadeiro true Faça variáveis de sessão para o id nome login e senha recebendo a variável info com os valores recebidos Vamos criar um header e apontar para o arquivo mainphp será criado mais adiante Conforme o site PHPnet o header envia um cabeçalho HTTP bruto Fonte httpswwwphpnetmanualptBRfunctionheader php Assim se o usuário for encontrado a página será redirecionada para o arquivo view2php Na opção else da condicional aplique um echo para apresentar a mensagem de Usuário não cadastrado ifstmtrowCount 1 info stmtfetch vardumpinfo exit SESSIONlogado true SESSIONid infoid SESSIONnome infonome SESSIONlogin infologin SESSIONsenha infosenha headerLocation view2php else echo Usuário não cadastrado BLOG PHP E CSS LOGIN E SENHA Abra a página view2php e coloque a div main dentro de duas divs a primeira com a classe containerfluid e a segunda com a classe row Dentro do body vamos criar uma div com a classe containerfluid para ocupar todo espaço Dentro dela vamos criar uma div com a classe row Dentro do row faça uma barra de navegação com o nav com identificador sidebarMenu e classes colmd3 para aplicar 3 colunas em larguras médias 720 pixels collg2 para aplicar a largura de 2 colunas em telas largas um textwhite e um bgdark e aplique um afastamento em relação ao topo de valor 3 pt3 Dentro do Nav vamos colocar para chamar um nome de usuário dentro do h2 e criar um parágrafo com um linque cego para Deslogar apenas para teste Salve o arquivo e abra no navegador Resultado temporário ao lado div classcontainerfluid div classrow nav idsidebarMenu classcolmd3 collg2 textwhite bgdark pt3 h2Bom dia Tido Ferraz h2 pa hrefDeslogarap nav main div classcontainer h1 idmaintitleMeus Postsh1 BLOG PHP E CSS LOGIN E SENHA Crie uma lista não ordenada com as classes nav e flexcolumn abaixo do título e do parágrafo dentro da lista insira os itens Controlar Posts e Controlar Slides com a classe navitem Aplique os links para as páginas e aplique também a classe navitem Como desafio no final você deverá aplicar depois os ícones para os links aplicar afastamentos e fazer os ajustes finais Salve e teste navegador ul classnav flexcolumn li classnavitem a href classnavitemControlar Postsa li li classnavitem a href classnavitemControlar Slidesa li ul BLOG PHP E CSS LOGIN E SENHA Crie dentro do admin o arquivo headerphp Remova o html da view2php até o fechamento do nav e não remova o php antes e coloque na página headerphp Na página view2php insira um include chamando o header Salve e teste para ver se vai abrir corretamente Agora vamos inserir um início de sessão sessionstart Crie uma condicional para caso a sessão logado seja diferente de verdadeiro para que a página retorne para tela de login encerre com a função die é o mesmo que exit Crie um novo if para o deslogar a condição buscará a palavra sair via GET existindo ela destruirá a sessão irá carregar a página indexphp e receberá um die Salve e teste para ver se o login e senha vão acessar a página não esqueça de testar com um usuário e senha errados Iniciando a sessão if sessionstatus PHPSESSIONACTIVE Definindo o prazo para a cache expirar em 60 minutos sessioncacheexpire60 sessionstart BLOG PHP E CSS LOGIN E SENHA php includeonceconfigconnectionphp sessionstart ifSESSIONlogado true headerLocation indexphp die ifissetGETsair sessiondestroy headerLocation indexphp die stmt conectarprepareSELECT FROM posts ORDER BY id DESC stmtexecute results stmtfetchALLPDOFETCHASSOC includeonceheaderphp Vá ao arquivo headerphp e insira uma variável de sessão para carregar o nome No link do deslogar coloque sair para carregar o valor sair via GET Salve e teste nav idsidebarMenu classcolmd3 collg2 textwhite bgdark pt3 h2Bom dia php echo SESSIONnome h2 pa hrefsairDeslogarap ul classnav flexcolumn li classnavitem a href classnavitemDashboarda li li classnavitem a href classnavitemInserira li ul pa hrefsairDeslogarap nav BLOG PHP E CSS LOGIN E SENHA Crie uma página sessionphp remova o sessionstart e a condicional da sessão do arquivo view2php e cole dentro de uma tag de php no arquivo sessionphp Salve os arquivos e faça um teste logando novamente no painel administrativo Dica Iniciando a sessão if sessionstatus PHPSESSIONACTIVE Definindo o prazo para a cache expirar em 60 minutos sessioncacheexpire60 sessionstart view2php php includeconfigconnectionphp includesessionphp stmt conectarprepareSELECT FROM posts ORDER BY id stmtexecute results stmtfetchALLPDOFETCHASSOC sessionphp php sessionstart ifSESSIONlogado true headerLocation indexphp die ifissetGETsair sessiondestroy headerLocation indexphp die BLOG PHP E CSS LOGIN E SENHA crie o arquivo footer insira o fechamento das divs body e html Salve e teste Na página view2php insira duas classes para limitar a largura da região principal e deixar a barra de navegação do lado esquerdo aplique as classes colmd9 e collg10 Salve e teste Veja o resultado na imagem abaixo footerphp BLOG PHP E CSS LOGIN E SENHA main classcolmd9 collg10 div classcontainer h1 idmaintitleMeus Postsh1 table classtable idcontactstable thead tr th scopecolth th scopecolTítuloth th scopecolDescriçãoth th scopecolAçõesth Agora será a hora de criar a página para editar a postagem crie o arquivo editarphp Acrescente os includes ao lado na página editarphp Mude o título para Editar Post Salve e teste o arquivo php includeonceconfigconnectionphp includeoncesessionphp includeonceheaderphp main classcolmd9 collg10 div classcontainer h1 idmaintitleEditar Posth1 div main php include footerphp BLOG PHP E CSS EDITAR O próximo passo é aplicar a mecânica de edição Dentro do bloco inicial do PHP crie uma variável id para receber via GET o valor do id pois ele será a referência para o SQL editar o registro postagem Prepare os arquivos selecionando o id title e description quando o valor do id for igual ao valor do id recebido Execute uma array contendo o valor do id para a variável id Crie uma variável montando um fetchALL Note que parte do código usado é muito parecido com os anteriores php includeonceconfigconnectionphp includesessionphp id GETid stmt conectarprepareSELECT id titledescription FROM posts WHERE id id stmtexecutearrayid id results stmtfetchALLPDOFETCHASSOC php includeonceheaderphp BLOG PHP E CSS EDITAR Agora você deverá criar um formulário para editar os valores recebidos coloque uma ação apontando para o arquivo editarfimphp será criado posteriormente com método post Crie um foreach com uma variável resultado com uma variável post Crie 3 campos de input do tipo texto com valor recebendo via posts os campos deverão ser editados e com seus respectivos names Após o foreach crie um botão do tipo submit form actioneditarfimphp methodpost enctypemultipartformdata php foreachresults as post pinput typehidden value postid nameidp pinput typetext value posttitle nametitlep pinput typetext value postdescription namedescriptionp php endforeach input typesubmit valueEDITAR form BLOG PHP E CSS UPDATE Vamos criar o arquivo editarfimphp faça o arquivo de inclusão no começo do php Crie as variáveis para receber via POST os valores do id title description Prepare o PDO para fazer o Update setando os campos id title e description onde o valor do id for igual ao id recebido Trate os dados com o bindParam Execute o PDO Aplique a variável results montando o fecthALL Para concluir o arquivo faça com que após a edição o arquivo retorne para o arquivo mainphp use a função header Salve e teste no navegador php includeonceconfigconnectionphp id POSTid title POSTtitle description POSTdescription stmt conectarprepareUPDATE posts SET id id title title description description WHERE id id stmtbindParamtitle title stmtbindParamdescription description stmtbindParamid id stmtexecute results stmtfetchALLPDOFETCHASSOC headerLocation view2php BLOG PHP E CSS UPDATE Como desafio faça melhorias estéticas no layout do Blog Salve e teste BLOG PHP E CSS CONCLUSÃO PHP USUÁRIOS Faça a página caduserphp dentro da pasta admin para cadastrarmos os usuários Aponte o formulário para a página caduserOKphp via Post Crie os campos de texto para nome login e senha form actioncaduserOKphp methodPOST div classmb3 label classformlabelDigite o nome do usuáriolabel input typetext classformcontrol namenome div div classmb3 label classformlabelDigite o login do usuáriolabel input typetext classformcontrol namelogin div div classmb3 label classformlabelDigite a senha do usuáriolabel input typetext classformcontrol namesenha div div classmb3 button typesubmit classbtn btndarkCadastrar Usuáriobutton div form BLOG PHP E CSS CONCLUSÃO Agora crie a página caduserOkphp dentro da pasta admin para enviar os dados cadastrados Faça o include do arquivo de conexão e chame as variáveis para carregar os valores via post Dê um eco para imprimir as variáveis Salve e teste o arquivo php include configconnectionphp nome POSTnome login POSTlogin senha POSTsenha echo nome login senha BLOG PHP E CSS CONCLUSÃO Acrescente a função para criptografia md5 na variável senha Crie a variável stmt e prepare a conexão para inserir dados na tabela users com os dados recebidos Trate os dados usando o bindParam Execute a variável stmt Salve e teste a página Se estiver Ok faça o redirecionamento para a página caduserphp salve e faça um novo teste php include configconnectionphp nome POSTnome login POSTlogin senha md5POSTsenha preparar stmt conectarprepareINSERT INTO users nome login senha VALUESnome login senha tratar stmtbindParamnome nome stmtbindParamlogin login stmtbindParamsenha senha executar stmtexecute headerLocationcaduserphp BLOG PHP E CSS CONCLUSÃO Como foi aplicada a criptografia no campo senha será necessário mudar também no arquivo logar Abra o arquivo logar e insira a função md5 na variável senha Obs Caso não tenha mudado o tamanho da coluna senha mude para varchar de 255 Salve e teste login para verificar se vai passar php include configconnectionphp sessionstart login POSTlogin senha md5POSTsenha stmt conectarprepareSELECT FROM users WHERE login login AND senha senha stmtbindParamlogin login stmtbindParamsenha senha stmtexecute BLOG PHP E CSS CONCLUSÃO PHP BUSCA Acrescente na barra de navegação uma busca pesquise o form de busca no bootstrap com uma ação apontando para a página buscarphp e o nome do input como buscar Na página buscarphp inclua o arquivo de conexão Crie uma variável busca que recebe o valor recebido do form Crie uma variável stmt que recebe a variável criada para conexão e prepara o select de todos os registros da tabela posts onde o título da variável recebe um like com o sinal de antes e depois o antes e depois da palavra permite que a palavra procurada esteja em qualquer posição do título Execute a variável stmt Crie uma variável com o nome de search a qual vai receber o fecthAll da variável stmt php includeonceconfigconnectionphp buscar POSTbuscar stmt conectarprepareSELECT FROM posts WHERE title LIKE buscar stmtexecute search stmtfetchAll BLOG PHP E CSS BUSCA Para apresentar o resultado da busca iremos criar uma div com a classe container Dentro da div iremos criar um título 2 com Resultado da Busca O resultado será apresentado dentro de foreach com a variável search como chave e setando valor Dentro do laço criaremos um h5 com a classe cardtitle do Boostrap E para que o resultado apresentado seja clicável e leve para a página com o conteúdo final crie um link a apontando para a página viewPostphp onde o id será igual ao valor do id Salve a página e teste no navegador div classcontainer h2Resultado da buscah2 php foreachsearch as key value h5 classcardtitle a hrefviewPostphpid valueid valuetitle a h5 php endforeach div BLOG PHP E CSS BUSCA PHP CRIANDO CATEGORIAS É possível criar categorias para as postagens e fazer filtros para chamar o conteúdo específico Primeiro vamos acrescentar uma coluna com o nome category na tabela Posts aplique o tipo varchar Defina o nome das categorias no próprio banco de dados basta editar as colunas faça pelo menos 2 categorias para testar Agora vá ao arquivo navphp crie as duas categorias no menu e aplique o link via URL paras a página categoryphp que deverá ser criada e indicando as categorias li classnavitem a classnavlink hrefcategoryphpcatCat1Cat 1a li li classnavitem a classnavlink hrefcategoryphpcatCat2Cat 2a li BLOG PHP E CSS CRIANDO CATEGORIAS Crie a página categoryphp Crie o php e faça a inclusão do arquivo de conexão Faça a variável cat e carregue via GET o valor do cat que é passado pela URL Prepare a ação para chamar os campos do post onde a coluna category criada no banco de dados seja igual ao valor do cat Execute através de um array onde cat deve receber cat Monte o resultado do array via FetchALL Faça o HTML da sua página para receber os arquivos Mantenha o design do site na página Aplique um para cada com os resultados como uma variável posts Através da variável post carregue os elementos da sua postagem Salve o arquivo e teste através do indexphp Aproveite para inserir o campo category em todo o projeto Aperfeiçoe o projeto Obs Note que a estrutura é parecida com o viewBlogphp a diferença é que carregamos os valores da coluna category do Banco de Dados php includeonceconfigconnectionphp cat GETcat stmt conectarprepareSELECT id title image description data FROM posts WHERE category cat stmtexecutearraycat cat results stmtfetchALLPDOFETCHASSOC php foreachresults as post h1 posttitle h1 pimg src postimage classcardimgtop altp p postdescription p p datedmY strtotimepostdata p php endforeach BLOG PHP E CSS CRIANDO CATEGORIAS PHP TRABALHANDO CHAVES ESTRANGEIRAS Obs Não precisa fazer a chave estrangeira Na tabela posts crie uma coluna e chame de idCategory Crie uma tabela com o nome category Crie duas colunas a primeira será idcat do tipo INT Chave Primária e autoincrementável a segunda coluna será namecat do tipo VARCHAR com tamanho 50 O idCategory deverá receber a chave primária da tabela Category BLOG PHP E CSS CHAVES ESTRANGEIRAS Retorne à tabela posts clique em Estrutura e escolha a opção Visão de Relaçãoões Daremos um nome para relação de fkpostscategory Foreign Key tabela atual tabela secundária clique na opção Guarda para concluir Importante como estaremos aplicando uma chave estrangeira que exige um campo não nulo insira categorias na tabela categoria Indo na área desenhador será possível identificar a relação das tabelas BLOG PHP E CSS CHAVES ESTRANGEIRAS Vamos mudar o select aplicando um inner join para amarrar as duas tabelas No foreach acrescente uma linha para carregar a coluna categoria Aproveite e estilize stmt conectarprepareSELECT categorynamecat poststitle postsimage postsdescription postsdata FROM category INNER JOIN posts ON categoryidcat postsid WHERE id id php foreachresults as post h1 posttitle h1 pimg src postimage classcardimgtop altp p postnamecat p p postdescription p p datedmY strtotimepostdata p php endforeach BLOG PHP E CSS CHAVES ESTRANGEIRAS EXPORTANDO E IMPORTANDO UM BANCO DE DADOS Acesse o banco que contém os dados que devem ser exportados no exemplo será de um servidor local localhost Selecione o banco que deseja exportar clique no botão Exportar e depois Executar Para importar clique sobre o banco desejado EXPORTANDO E IMPORTANDO UM BANCO DE DADOS Para importar usaremos como exemplo o servidor 000webhost Acesse a sua conta clique sobre a opção Gerenciador de Sites escolha a opção Ferramentas e depois Gerenciador de banco de dados Crie um novo banco e Salve os dados de acesso para mudar no arquivo de conexão do projeto Após criar o banco acesse o SGBD PhpMyAdmin Ao entrar no Painel selecione o banco de dados criado clique na opção Importar carregue o arquivo sql que foi gerado na exportação do banco e clique em Executar Verifique se as tabelas e registros foram importados EXPORTANDO E IMPORTANDO UM BANCO DE DADOS PHP IMPLEMENTANDO UM EDITOR Fica mais interessante quando usamos um editor do tipo wysiwyg What You See Is What You Get ou o que você vê é o que você recebe para os campos de descrição Uma dica é usar o TinyMCE pois é um dos mais conhecidos no mercado e bem fácil de ser aplicado no site Acesse a página do TinyMCE procure pela opção com o editor na configuração básica Clique na opção HTML copie o código e substitua o seu textarea dos formulários Importante lembre de manter o campo name do formulário Selecione aba JS e copie o código crie as tags de script scriptscript antes do body e cole o código dentro Salve o arquivo e teste no navegador Verifique se o texto está sendo inserido no banco de dados BLOG PHP E CSS IMPLEMENTANDO UM EDITOR PHP DICAS PHP DICAS Converta a data do banco datedmY strtotimepostdata Interpreta qualquer descrição de datahora em texto em inglês em timestamp Unix Criptografia md5 ARQUIVO ENVIAR senha md5POSTsenha ARQUIVO LOGAR senha md5POSTsenha Altura do navbar 100 incorporado styleheight 100vh