PHP: Os Primeiros Passos Para se Tornar um Programador

Programador Viking 7 de março de 2019 2 Comentários Leitura: 11 min

PHP os primeiros passos para se tornar um programador php

Agora que já fizemos a Instalação do XAMPP e aprendemos a Sintaxe Básica do PHP. Vamos iniciar nosso projeto.

Nessa série de artigos, veremos como fazer com que páginas estáticas fiquem dinâmicas, ou seja, sites que reagem de acordo com a ação do usuário. E para isso vamos utilizar a linguagem PHP, que é uma tecnologia que vai nos ajudar nessa tarefa.

Um excelente exemplo são os sites de lojas virtuais, como por exemplo Amazon e etc. Dentro desses sites, você consegue adicionar e remover produtos do carrinho, alterar produtos e etc. A melhor parte é que essas informações ficam salvas em servidores na internet. Dessa forma, qualquer pessoa pode acessar a lista de produtos sempre atualizada. Legal né?

Veja também: Os Melhores Cursos GRATUITOS Com Certificado

Ou seja, nessa série de artigos vamos criar uma loja de produtos, e o disponibilizaremos na internet. A aplicação será grande, nos vamos poder:

Adicionar produtos;
Categorizar produtos;
Listar produtos;
e muito mais.

No meio do desenvolvimento precisaremos aprender diversos fundamentos da web.

Como funciona o process de termos um servidor e um cliente, distantes um do outro?
Como vários clientes conseguem acessar o mesmo servidor?

Para iniciar, você já deve ter instalado na sua máquina o XAMPP. O XAMPP nada mais é do que um utilitário que já instala o PHP, o Apache e o MySql, que são todas as ferramentas que vamos precisar para trabalhar.

Se você ainda não instalou. Clique Aqui para acessar o artigo de instalação.

Confira neste artigo:

Conferindo a Instalação do XAMPP

Primeiramente, vamos conferir se a instalação do XAMPP esta correta.

No diretório que criamos as nossas páginas (que é o diretório de instalação do XAMPP, por exemplo: /Applications/XAMPP/xamppfiles/htdocs). Vamos criar um diretório: /loja

Em seguida vamos abrir esse diretório em algum editor de texto, para que possamos lidar com os diversos arquivos que criaremos ao longo do tempo durante os artigos.

Nosso primeiro arquivos vai se chamar: index.php e vai ter apenas uma mensagem simples:

<html>
    <h1>Seja Bem vindo!</h1>
</html>

Para fazer o teste, basta abrirmos o browser e acessar o endereço: http://localhost/loja/

Localhost quer dizer que sua própria máquina. o /loja é justamente o sub-diretório que criamos. Poderíamos acessar o endereço de outra forma também: http://localhost/loja/index.php

O resultado esperado deve ser igual a imagem abaixo:

Entendendo o que aconteceu

Vamos entender o que aconteceu? Quando você digitou um endereço no navegador, ele foi até o servidor, e o servidor devolveu uma resposta para o browse, que a mostrou.

Porém, é possível ver o HTML que chegou no browser, por meio da opção View > Developer > View Source do navegador Chrome

No caso acima, ambas as URLs devolvem o mesmo conteúdo, isso acontece porque o servidor é inteligente:

Ou seja, se você faz uma requisição para uma pasta, e não especifica um arquivo exato (como um .php ou .html), ele então procura por um arquivo chamado “index.php“, e devolve o conteúdo dele.

Uma outra maneira também de ver a requisição e a resposta acontecendo é usando a aba de Desenvolvedor do Chrome. View > Developer > Developer Tools. Outros navegadores também tem a opção semelhantes. Se dermos um refresh na página, podemos vê-la na aba Network. Se olharmos ali, vemos que a requisição funcionou (voltou status 200, que significa sucesso, e entenderemos melhor mais pra frente)

Adicionando Produto

Agora começa a parte divertida do projeto. Vamos criar a página que vai adicionar um produto, para isso crie um arquivo chamado: adiciona-produto.php

Logo depois, vamos iniciar colocando uma mensagem de cadastro feito com sucesso:

<html>
Produto NOME adicionado com sucesso!
</html>

Agora vamos abrir o browser e testar: http://localhost/loja/adiciona-produto.php

Ele exibe a mensagem.

Resultado da pagina adiciona produto em php

Vamos agora passar parâmetros para essa página, pela própria URL. Acesse o seguinte endereço:

http://localhost/loja/adiciona-produto.php?nome=carro&preco=5000

Veja que usamos o sinal de interrogação ? e passamos uma lista de chaves e valores: nome=carro, preco=5000, e assim por diante. Separamos cada item com o &

Mas existe um problema ai, quando acessamos a página, parece que ele não considerou o nome que passamos, pois a mensagem ainda tem o texto “NOME”. É neste momento que vamos começar de fato a programar em PHP.

Precisamos dizer na nossa página que temos uma variável nome, que vem do usuário. Para isso, precisamos programar em PHP.

Veja também: Os 6 Melhores Livros Para Aprender PHP Sozinho

Primeiros passos com PHP

Código PHP não é código HTML, e precisamos separar bem ambos para que o servidor entenda e processe corretamente. Repare o <?php:

<html>
<?php
$nome = $_GET["nome"];
?>
Produto NOME adicionado com sucesso!
</html>

Repare que dentro do código PHP, declaramos uma variável “nome”, utilizando o carácter: $, e usamos o $_GET[], que é um array, e pega os valores que foram passados pelo usuário na URL.

No caso fizemos $_GET[‘nome’], porque o parâmetro enviado pela URL se chama “nome”. Podemos fazer a mesma coisa para o “preco”. Vamos já também imprimir a variável “nome” também no lugar da palavra “NOME”:

<html>
<?php
$nome = $_GET["nome"];
$preco = $_GET["preco"];
?>
Produto: <?php echo $nome; ?> - adicionado com sucesso!
</html>

Quando o comando php é escrito em uma única linha, o ponto-e-virgula é opcional. Aqui vamos usar para manter um padrão. Vamos dar um refresh na página e ver o resultado. O nome agora apareceu no lugar certo!

Vamos exibir o preço também

<html>
<?php
$nome = $_GET["nome"];
$preco = $_GET["preco"];
?>
Produto: <?php echo $nome; ?>, preco: <?php echo $preco; ?> - adicionado com sucesso!
</html>

Também funciona! Como exibiremos informação o tempo todo no PHP, existe um atalho que facilita na hora de programar: <?= $nome; ?>

<html>
<?php
$nome = $_GET["nome"];
$preco = $_GET["preco"];
?>
Produto: <?= $nome; ?>, preco: <?= $preco; ?> - adicionado com sucesso!
</html>

O resultado deve ser igual a imagem abaixo:

Criando um Formulário

Agora vamos criar o formulário que vai mandar essas informações, afinal não queremos que o usuário digite direto na URL.

Vamos criar o arquivo produto-formulario.php e vamos escrever o código abaixo:

<html>
    <form>
        Nome: <input type="text" name="nome" /><br/>
        Preço: <input type="number" name="preco" /><br/>

        <input type="submit" value="Cadastrar" />
    </form>
</html>

Veja que demos nomes aos campos de texto, pois é através desse nome, que conseguiremos recuperar a informação lá no PHP.

Ou seja, se acessarmos o formulário pelo browser, teremos a seguinte tela:

Se preenchermos o formulário, e clicarmos no botão Cadastrar, ele vai enviar as informações. Mas repare que ele enviou para a página errada. Ele enviou para a própria página.

Precisamos mudar isso, pois precisamos mandar para a página adiciona-produto.php. Então vamos fazer essa mudança no form:

<form action="adiciona-produto.php">

</form>

Testando novamente

Abrimos o formulário, preenchemos as informações e clicamos em Cadastrar. Agora funcionou!

Resultado do formulário de produto em php

Ou seja, os dados que foram digitados no formulário, foram submetidos para o arquivo adiciona-produto.php, que por sua vez pegou os valores informados pelo usuário e os exibiu.

Veja que aqui tivemos 2 requisições:

Uma para pedir o formulário, e a resposta foi o formulário;
A outra foi o envio das informações, e a resposta foi a mensagem de sucesso confirmando a adição.

Utilizando Bootstrap

Vimos que o nosso sistema esta funcionando, mas ele esta bem feio né?

Vamos fazer uso de uma biblioteca muito famosa, chamada Bootstrap, que vem com um conjunto de CSS que vai ajudar bastante no layout do nosso sistema.

Para baixar o Bootstram basta acessar o site: getbootstrap.com, e clicar em Download BootStrap.

Depois de baixar e descompactar a biblioteca, vemos que ela é composta por 3 diretórios: css, font, js. Vamos copiar as 3 pastas para nosso projeto.

Para usa-lo, basta importar o CSS. Vamos na nossa página principal, criar a tag HEAD, e importar o CSS do Bootstrap. Além disso, vamos fazer uso da classe do bootstrap, que deixarão nosso site mais bonito:

<html>
<head>
    <title>Minha loja</title>
    <meta charset="utf-8">
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/loja.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="principal">
            <h1>Seja Bem vindo!</h1>
        </div>
    </div>
</body>
</html>

Repare que colocamos também o loja.css dentro da pasta CSS do projeto, que será o css da nossa loja. Vamos criá-lo, pois precisamos escrever a classe “principal”:

body {
    padding-top: 50px;
}

.principal {
    padding: 40px 15px;
    text-align: center;
}

Se abrirmos o index.php no browser, vemos que a fonte já está mais elegante, o texto centralizado, e etc. Aos poucos vamos usando mais coisas do Bootstrap.

Alterando as outras páginas com Bootstrap

Por fim, vamos levar o mesmo layout pra outra página:

<html>
<head>
    <title>Minha loja</title>
    <meta charset="utf-8">
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/loja.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="principal">
            <?php
            $nome = $_GET["nome"];
            $preco = $_GET["preco"];
            ?>
            Produto: <?= $nome; ?>, preco: <?= $preco; ?> - adicionado com sucesso!
        </div>
    </div>
</body>
</html>

Além disso, da pra melhorar ainda mais, já que o Bootstrap tem bastante coisa legal. Vamos pegar a mensagem de sucesso e colocar num parágrafo com a classe “alert-success”:

    <p class="alert-success">
        Produto: <?= $nome; ?>, preco: <?= $preco; ?> - adicionado com sucesso!
    </p>

Adiciona produto em php com alert success

Vamos fazer a mesma coisa agora na página de formulário, e colocar um H1 para indicar que é um formulário:

<html>
<head>
    <title>Minha loja</title>
    <meta charset="utf-8">
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/loja.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="principal">
        <h1>Formulário de Cadastro</h1>
        <form action="adiciona-produto.php">
            Nome: <input type="text" name="nome" /><br/><br/>
            Preço: <input type="number" name="preco" /><br/><br/>
            <input type="submit" value="Cadastrar" />
        </form>
        </div>
    </div>
</body>
</html>

Resultado do formulário após inserir o bootstrap

O formulário também já está melhor. Mas o problema é que nesses arquivos temos um monte de copy-and-paste.

Todo copiar e colar é ruim, pois se precisarmos mudar algo, precisaremos mudar em todos, e o trabalho será muito grande!

Logo depois, vamos então separar esse código repetido e colocar em um único arquivo, começando pela parte de cima, vamos criar o arquivo: cabecalho.php e colocar o código abaixo dentro desse arquivo.

<html>
<head>
    <title>Minha loja</title>
    <meta charset="utf-8">
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/loja.css" rel="stylesheet" />
</head>

<body>
    <div class="container">

        <div class="principal">

Agora vamos fazer a mesma coisa para parte de baixo criando o arquivo: rodape.php e inserir o código abaixo.

        </div>

    </div>

</body>
</html>

Vamos agora fazer uso desses arquivos que criamos. Nos arquivos anteriores, vamos jogar fora o “código repetido” e incluir ambos os PHPs que criamos, utilizando o comando include() do PHP:

<?php include("cabecalho.php"); ?>

        <h1>Formulário de cadastro</h1>
        <form action="adiciona-produto.php">
            Nome: <input type="text" name="nome" /><br/>
            Preço: <input type="number" name="preco" /><br/>

            <input type="submit" value="Cadastrar" />
        </form>

<?php include("rodape.php"); ?>

Repare como o código esta muito mais limpo. Se precisarmos mudar algo no cabeçalho ou rodapé, mudaremos em um único lugar e o resultado será replicado para todas páginas que estão utilizando esses arquivos.

Show de bola né?

Conclusão

Enfim, nesse artigo aprendemos muitas coisas sobre o PHP, dentre elas. Como o mundo web funciona através de requisições e respostas. O servidor processa a requisição e envia uma resposta de volta ao browser.

além disso, também aprendemos que para programar em PHP no meio do código HTML, basta abrir a tag PHP.

E para finalizar conseguimos uma forma bem legal de reaproveitar o código, utilizando a tab Include. Dessa forma nosso código fica muito mais limpo e legível, evitando possíveis retrabalhos.

Portanto, espero que este artigo tenha te ajudado a dar mais um passo em busca de seus objetivos. 😉

Gostou do conteúdo?
Comente aqui em baixo o que você achou desse artigo.

Caso queira aprender PHP do zero recomendo clicar no botão abaixo:

ACESSAR CURSOS COM CERTIFICADO

Um forte abraço!

2 Comentários

Deixe um comentário Cancelar resposta

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

Lauro Pogozelski disse:

9 de maio de 2021 às 21:56

Muito bom o conteúdo para new bie, (novatos) em programação PHP, a partir dai a regra é estudar, estudar de maneira prática, se acostumar com os bit e bytes.
Conselho: evitem o control “C” e o control “V” se você realmente que ser um bom programador meta a mão na massa ôps! no teclado. Boa sorte!

Responder
- Programador Viking disse:
  
  10 de maio de 2021 às 11:18
  
  Exatamente isso, sem prática não tem como virar um programador.
  
  Responder