Primeiras aulas do curso PHP e MySQL: Criando uma webapp

PHP e MySQL: Criando uma webapp

Começando com PHP e HTML - Apresentação

Tudo bem? Sejam bem-vindos nesse curso vamos aprender como construir um site com PHP. Vamos dar os nossos primeiros passos no desenvolvimento web. No projeto deste Curso vamos desenvolver um blogue e para construí-lo vamos enfrentar várias dificuldades.

Dificuldades que temos no desenvolvimento web, como conectar com banco de dados e inserir dados nele, vamos fazer uma lista de artigos e vamos poder clicar nesses artigos e visualizá-los numa página inteira.

Vamos também ter no nosso blogue uma página administrativa, na qual vamos poder entrar e adicionar um artigo. Também vamos poder editar um artigo que temos e poderemos ainda excluir um dos artigos que publicamos.

Tudo vamos desenvolver com o código bem simples, bem introdutório, justamente para quem quer dar esse passo no desenvolvimento web, não vamos utilizar conceitos muito avançados, porque veremos isso depois mais para frente. É isso! Vejo vocês no curso.

Começando com PHP e HTML - Sobre HTML e HTTP

Bem-vindos ao curso! É muito importante que antes que você comece, você tenha um ambiente de PHP configurado no seu computador. Logo no início do Curso existe uma seção mostrando como configurar o seu ambiente e você vai instalar um programa que chama Xampp.

No Xampp tem todas as instruções detalhadas. Mas se você tiver qualquer dúvida na instalação pergunta no fórum, que tanto eu quanto outros instrutores poderão te ajudar. Vamos usar esse programa eu vou acessar ele no meu disco C, se você tiver um atalho com o nome de painel de controle Xampp no seu menu iniciar, você pode acessar.

Eu não tenho, mas eu vou acessar na pasta, vou entrar na pasta e depois de instalar você verá que tem uma pasta/diretório chamada*o “Xampp”, então, entramos e tem o arquivo “xampp-control.exe”.

O arquivo abre o painel de controle do Xampp, temos o painel de controle aberto e para começar o Curso vai precisar iniciar o programa que chama Apache; eu vou iniciar, vou clicar em start, pronto, se ele ficar verde sinal que pode começar.

Assim que tivermos nosso ambiente configurado, vamos precisar baixar os arquivos do nosso projeto. Eles estão no começo do curso em uma em um arquivo zip, que assim que vocês baixarem conseguirá utilizar como base do que vamos vai construir ao longo do Curso.

Então, eu descompactei em uma pasta específica, eu aconselho que vocês façam o mesmo, eu descompactei dentro da pasta do Xampp, dentro de htDocs, ele tem umas outras pastas.

Mas eu descompactei os arquivos do curso em “blog”, dentro dessa pasta blog é muito importante que ela tenha esse nome; dentro da pasta tem os arquivos do Zip passados no começo do curso.

São os arquivos ‘html’, tem um arquivo index, o que é metodologia ágil, primeiro passo com Spring, tem uma pasta que chama admin - tem mais alguns arquivos html.

Vamos lá. Já tem os arquivos descompactados, no diretório do Xampp. E se abre o painel de controle o Apache estiverem verdes, pode começar eu vou abrir o Google Chrome; você pode utilizar qualquer navegador. Eu vou usar que o Google Chrome. Mas você pode usar Firefox ou qualquer outro que você quiser.

Eu vou acessar o endereço especial que chama ‘local host’, esse endereço quer dizer que eu estou acessando o nosso próprio computador, eu vou apertar enter e ele mandou para uma página do Xampp - que quer dizer que o nosso servidor Apache está funcionando. eu vou entrar

Na pasta do nosso projeto vou entrar, que eu descompactei em blog então se eu acessar/blog eu vou conseguir ver. Vou dar um zoom par conseguir ver melhor. É um projeto que vamos construir ao longo do curso é um blogue.

O blogue na primeira página lista todos os nossos artigos e o primeiro artigo se eu clicar no título dele ele manda para uma página nota até que mudou a URL, mas que ele mandou para uma página que lista somente ele. Se eu clicar em voltar ele vai voltar e se clicar no de baixo ele vai mostrar, assim que o nosso blogue vai funcionar.

Tem também uma página administrativa se quiser adicionar, editar ou excluir um desses artigos. Se eu acessar blog/admin ele manda para uma página administrativa e vai poder, por exemplo, ver o artigo e vou poder editar só que não apareceu nada ainda, nem se clicar em editar não funciona.

Porque é isso que vamos implementar ao longo do curso. Eu vou voltar, também a opção de excluir não está implementada ainda, mais uma coisa que vamos fazer e para adicionar, também precisa implementar essa funcionalidade ainda.

Esse é o projeto que vamos usar e é muito importante que, para você entender esse curso e começar a aprender a partir dele é muito importante que você tenha feito o Curso de HTTP da Alura, que ele vai servir como base em tudo que formos fazer.

Se você viu o curso você vai lembrar que quando acessamos essa página – ‘Primeiros passos com Spring’, por exemplo, se você vir na minha página primeiros passos com Spring, estamos utilizando um cliente e um servidor.

Temos um programa que é distribuído entre duas localidades, temos nosso Google Chrome e tem Apache que é o nosso servidor - e o Google Chrome é o nosso cliente.

Para entender melhor tem uns slides e podemos ver nosso navegador Chrome e o nosso servidor que é o Apache – que você instalou assim que utilizou Xampp. Xampp é uma sigla para Apache, MySQL, PHP, então, o Apache vem junto com o Xampp.

É importante de entender por que o curso de HTTP é relevante, porque o navegador quando quer entrar em alguma página, por exemplo, você quer entrar em ‘http://localhost/blog’ nota o comecinho (http) que é o protocolo que vamos usar.

Vamos acessar o nosso próprio computador, o local host e vamos solicitar o recurso que chama blog, o Chrome, o navegador ele faz uma requisição http e vai lá para o servidor Apache. Manda uma requisição para ele, o Apache recebe essa requisição, processa os arquivos que foram pedidos e prepara uma resposta http -que vai conter arquivos html no caso.

Ele manda isso de volta para o navegador e assim que mandou para o navegador, o navegador renderiza e mostra “bonitinho” na tela o nosso blogue com as postagens e tudo mais.

Essa é uma visão de cima de como o http funciona, se você voltar pode acessar os arquivos desse blogue, entrando com um editor naquela pasta. Eu vou acessar pelo Visual Studio Code.

Você pode cessar por qualquer outro editor, pode acessar pelo [ininteligível] vão funcionar. Tenho os arquivos pasta e pode ver que tem um arquivo Index que traz o texto ‘Meu Blog’ depois mostra uma tag que é um link escrito “primeiros-passos- com-spring”.

O texto do nosso primeiro post está escrito, estaticamente está no arquivo. Até para as primeiras postagens tem arquivos HTML separados, tem um arquivo de “Como é o funil de Growth Hacking?”

Está escrito nele direto, vamos adicionar uma nova postagem e vermos o que podemos fazer. Vamos adicionar um post e vai ter que aparecer na nossa lista. Apareceu no endereço “localhost/blog/index”, mas se eu acessar apenas ‘/blog’, como funciona?

O que acontece é uma configuração do Apache do nosso servidor que para quando não digitarmos o nome de arquivo no final, digitar no diretório, ‘/blog’ da pastinha ‘blog’ que nossos arquivos, tanto que quanto entramos no “Como é o funil de Growth Hacking?”, por exemplo, ele muda o caminho do endereço para ‘localhost/blog/como-e-o-funil-de-growth-hacking.html’.

Por que que quando acessamos apenas ‘/blog’ isso funciona? Não deveríamos ter de digitar ‘index.html’? O Apache tem essa configuração que quando acessar um diretório ele vai procurar se tem um arquivo com nome de ‘index.html’.

Esse arquivo vai carregar automaticamente se não digitar nada, por isso que funciona desse jeito. Quando acessar é importante saber que está utilizando o arquivo index da pasta.

Assim, se quiser adicionar um novo post, vai ter de editar, eu vou copiar as duas tags, vou colocar embaixo, copiei e colei e vou digitar um título: “Esse é o título do meu novo post” e logo abaixo eu vou digitar também “Aqui ficaria o conteúdo do meu post”.

1359-Aula1.4_IntroduçãoAoHTMLeHTTP_Imagem1

Entrando no ‘localhost/blog’ o conteúdo da postagem será adicionado. Título e conteúdo. Ao clicar no título “Esse é o título do meu novo post”, o Google Chrome vai mostrar que acessaremos a mesma página.

Se quisermos a visualização de apenas um artigo, vamos ter de criar uma página, como temos as outras postagens. Não precisa nem estender muito para saber que isso é algo muito trabalhoso e algo que é uma pessoa que precisa escrever vai precisar ter conhecimento de HTML e vai ter um trabalho que pode ser muito propenso a erros.

Enquanto vamos adicionar uma nova postagem, vamos colocar um novo artigo, imagina que esquecemos uma tag, que abrimos a tag a e esquecemos de fechá-la, vou salvar, assim que salvei, vou abrir no Chrome.

O que acontece quando recarrega, fica roxo o texto, por que? Porque ele interpretou título e texto como um link. Aconteceu uma bagunça. Ou seja, estamos propensos a erros no processo muito manual de adicionar uma nova postagem, de editar.

É uma bagunça para quem não conhece HTML ou para quem vai precisar trabalhar com isso no cotidiano, não é a forma ideal.

O ideal seria gerarmos esse conteúdo de forma dinâmica, para podermos acessar na linha de comando a página de admin, adicionar o arquivo direto por ‘local/host/blog/adicionar-artigo.html’. Seria a melhor forma, mas como poderíamos fazer isso? Aqui que entra o PHP que vamos utilizar para as nossas páginas serem mais dinâmicas.

Começando com PHP e HTML - Utilizando o PHP

No último vídeo vimos que podemos utilizar o PHP para conseguir gerar um conteúdo dinâmico do nosso blog, mas pode fazer isso? Eu vou entrar no arquivo ‘index.html’ que é a nossa página inicial do blog, seria essa página que acessamos quando colocamos ‘localhost/blog’.

Nessa página, eu vou gerar o meu primeiro conteúdo via PHP. Para utilizar o PHP é muito importante que você faça o seguinte: renomeia o arquivo ‘.HTML’ não vai ter mais essa extensão, vai ser o arquivo ‘index.php’.

Assim, que mudamos a extensão já é um arquivo PHP, mesmo com as tags HTML dentro, para você conseguir utilizar um código PHP, pode em qualquer lugar desse arquivo - eu vou abrir no começo, mas pode ser em qualquer lugar, pode abrir uma tag PHP.

Vou abrir PHP e vou fechar, coloco interrogação e fechei a tag. Tudo que executar dentro dessas duas tags é código PHP. Igual vimos nos outros cursos, então, se você utilizar qualquer função, por exemplo, se eu chamar a função ‘echo’ ele vai executar.

Se eu colocar ‘echo “oi do PHP”’ vamos ver se funciona com o texto na tela, eu vou entrar na inicial, recarreguei e vemos PHP funcionando no nosso blog.

Pode utilizar qualquer código PHP, se teclar uma variável atribuir um valor, isso vai funcionar, para conseguir gerar nossos artigos de uma maneira mais fácil, podemos armazená-los em arrays.

Vou criar uma variável com nome de artigo1 e dentro vou iniciar colchetes e vou colocar uma chave com o nome de título, título eu vou colocar o título do blogue do primeiro artigo: “Primeiro passos com Spring”.

Recortei ou melhor vou copiar - copiei e colei; eu vou colocar também conteúdo, vou copiar o conteúdo dele. Copiei e colei o conteúdo. Agora eu vou armazenar mais uma coisa que é bem importante, vou armazenar o link.

O link vou copiar o que está dentro da tag dentro de ‘href=”primeiros-passos-com-spring.html”’, copiei o link, colei, salvei. Temos o nosso primeiro artigo, assim, podemos começar a tirar o título, apaguei, tirei. Abro uma tag PHP no meio ‘’, fechei e dentro ‘echo’.

Eu vou colocar aquele array que tínhamos criado lá em cima, o array artigo1, eu vou imprimir na tela digital utilizando echo para colocar artigo1 que é um array utilizando a chave título.

Coloquei título, vemos na tela o que que estamos fazendo. eu vou imprimir, vou tirar esse outro PHP porque não vamos utilizar mais. Salvei. Eu posso vir no navegador e vou recarregar você ver que está igualzinho como antes.

Porém, o primeiro título, Primeiros Passos com Spring, não está vindo direto do HTML do blogue, ele está vindo a partir de um PHP e isso é muito legal. Dá muita flexibilidade para conseguir editar esse arquivo, basta mudar no início.

Vou fazer o mesmo para os outros artigos, copiar o conteúdo do artigo, com o conteúdo, fechei e na ‘href’ coloco o título, ‘a href=“”’, fecha PHP.

Se vier no navegador, recarrego a página, continua perfeito, utilizando PHP. Eu vou colocar o segundo artigo, vou abrir a tag PHP de novo, mas será muito cansativo se tiver de fazer isso para todos os nossos artigos. Vai ser muita coisa, é muito trabalho que vamos fazer.

O bom de estar utilizando uma linguagem de programação é que se pode aproveitar todas as características do PHP para o nosso blogue, inclusive uma estrutura de iteração, mood.

Podemos utilizar o for each, para não ter que ficar digitando toda hora os nossos artigos, então, eu vou colocar um array e vou colocar outra array, vai ser array de arrays vou colocar mais, vou dar o nome e só vou copiar o conteúdo que tínhamos.

E o link, não podemos nos esquecer do link, copiei e colei, agora ainda falta uma postagem, artigo, copiei, colei, mais um conteúdo dele e por último o link, peguei o link e colei.

Agora montamos depois de todo esse copia e cola, um “array de arrays”, temos todos os nossos artigos em formato de array e pode iterar sobre esse array. Em vez de repetir tudo isso embaixo no HTML, eu vou pegar a tag desde o último parágrafo, p, onde terminou o último post do último artigo e vou deletar.

Deletei, temos body, temos container e começa ‘blog’, dentro da tag h2 tem link com título e conteúdo, já podemos iterar sobre isso. Fechei e dentro vou iniciar.

Vou colocar ‘foreach’ como foi escrito anteriormente [1359-Aula1.5_UtilizandooPHP_Imagem2] e embaixo vou fechar, coloca chaves e fecha ele – o foreach.

Onde estamos imprimindo artigo link, artigo título, artigo conteúdo, não precisa mais imprimir específico do artigo 1 artigo; imprimimos do artigo 1 diz que está iteirando sobre.

Salvei, se eu entrar no navegador, apertar que o F5 – recarregáver, tem o mesmo comportamento, mas nota como reduziu o código . Viemos e armazenamos todos os artigos em um array.

E em baixo reduzimos muito o HTML, tanto que só tem o HTML para um artigo. E se colocar depois um outro artigo, não vai precisar modificar. Isso é muito bom, porque ganha uma agilidade quando desenvolve.

Uma coisa que pode fazer para facilitar, porque ficou meio estranho. Quando iniciamos o foreach tivemos de fechar com a chave, e o PHO tem uma sintaxe especial que permite colocar em vez de abrir uma chave, coloca “:” e digita ‘endforeach’.

É uma sintaxe. No entanto, quando estamos utilizando junto com HTML é melhor para ter melhor de legibilidade, porque sabemos que o comando é o final do foreach e não que é simplesmente o fechamento de uma chave que não sabe o que que é isso está ligando.

Isso ajuda a esclarecer melhor.

Sobre o curso PHP e MySQL: Criando uma webapp

O curso PHP e MySQL: Criando uma webapp possui 162 minutos de vídeos, em um total de 44 atividades. Gostou? Conheça nossos outros cursos de PHP em Programação, ou leia nossos artigos de Programação.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda PHP acessando integralmente esse e outros cursos, comece hoje!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas