Criação Automatizada de Página Web com PHP

Há certos momentos na vida em que você precisa de uma página da Web para fazer algo mais do que apenas ficar sentado em uma página da web. Você precisa disso para ganhar seu sustento. Uma maneira de fazer isso é colocá-lo para trabalhar para você, para que você não precise codificar manualmente cada atualização ou modificação de página. A maneira mais fácil de aprender como fazer algo assim é realmente fazê-lo, então, no restante deste artigo, mostrarei uma maneira de implementar um sistema que criará novas páginas da Web para você com o toque de um botão.

Neste cenário, assumimos que o seu cliente é um restaurante que deseja oferecer vales para diferentes ocasiões especiais ao longo do ano. Mas é claro que eles não querem pagá-lo para atualizá-lo para eles, então é melhor você cobrar por eles o suficiente para esse sistema de automação que fará as atualizações para eles

1. Primeiro, precisamos criar um modelo básico de página da web.

Este é apenas um esqueleto de página da web padrão. Você pode dar um nome como "pageBuilder.php" ou algo assim. Você não precisa usar o PHP para isso. Você poderia usar outra linguagem de programação, mas para este exemplo vamos manter as coisas simples e fazer tudo em PHP.

Captura de tela em 2016 05-30 1.56.52-AM

2. Adicionar Bootstrap

Isso ajudará a tornar o formulário melhor sem qualquer trabalho extra. Claro que você precisará ter o Bootstrap para isso funcionar.

Captura de tela em 2016 05-30 1.56.56-AM

3. Configurar um contêiner

Para ajudar a manter tudo limpo e arrumado, devemos definir um contêiner no qual armazenaremos o conteúdo da página.

Captura de tela em 2016 05-30 1.56.48-AM

4. Crie um formulário da web

Defina um formulário da Web e também adicionaremos um título sofisticado ao formulário, que é opcional, mas é uma boa ideia.

Captura de tela em 2016 05-30 1.56.43-AM

5. Adicione os campos do formulário

Isso é muito simples. Nós só precisamos coletar alguns detalhes básicos que o robô usará para criar uma nova página da web. Os dados que precisamos saber incluem:

  • A imagem de fundo da página
  • Nome do evento que está sendo comemorado
  • Manchete
  • Declaração de abertura
  • Algumas citações banais ou declarações adicionais
  • Atribuição para citações banais
  • Estilo de fonte a ser usado para cada um dos quatro elementos de texto de enquadramento (individualmente).
  • Período em que os comprovantes serão válidos para
  • Ofereça 1 e Ofereça 2 que será anunciado nos vouchers.
  • Mensagens adicionais de vouchers (termos e condições, por exemplo)
  • Dados para os códigos QR do comprovante que serão gerados

Veja como isso parece:

Captura de tela em 2016 05-30 1.56.00-AM

Captura de tela em 2016 05-30 1.55.54-AM

Captura de tela em 2016 05-30 1.55.36-AM

E depois de todo esse esforço, acabaremos com uma página parecida com essa:

Captura de tela em 2016 05-30 1.55.22-AM

A boa notícia é que metade do trabalho já está completo e foi a metade mais difícil e demorada. O resto é muito mais fácil.

6. Crie o arquivo do processador de formulários

Depois de criar um formulário, você precisa de algum software que processará os dados enviados e fará algo com eles. Nesse caso, usaremos os dados enviados para gerar um novo HTML página.

Agora, tenha em mente que isso não é a mesma coisa que uma resposta normal do PHP, em que os dados são usados ​​em tempo real e refletidos dinamicamente para o usuário. Em vez disso, estamos criando uma página estática que existirá permanentemente até que a sobrescrevamos.

O arquivo precisa ser nomeado da mesma açao valor de atributo na declaração de formulário, por isso, no nosso exemplo que seria voucherGen.phpe como não especificamos um caminho, ele precisaria ser armazenado no mesmo local que pageBuilder.php para que ele funcione.

7. Inicializar variáveis

Os dados submetidos de pageBuilder.php foi retornado como um array associativo chamado $ _POST, e todos os valores de dados na matriz podem ser acessados ​​através do seu controle de formulário HTML nome atributos. Portanto, inicializar nossas variáveis ​​é realmente muito fácil. Também é opcional, mas faz com que o código fique um pouco mais organizado e fácil de ler. Você certamente poderia trabalhar diretamente com o $ _POST valores, se preferir.

Captura de tela em 2016 05-30 1.55.15-AM

8. Use condicionais para alterar as fontes para seus valores corretos

Fazer isso cedo economizará tempo e problemas mais tarde. Nós apenas verificamos quais valores foram selecionados e então os substituímos pelos nomes reais das fontes.

Captura de tela em 2016 05-30 1.55.10-AM9. Começar a construir a cadeia geradora

Realmente tudo o que precisamos fazer aqui é criar uma string realmente longa que contenha tudo o que for necessário para criar a nova página. Usaremos a concatenação de strings para mantê-lo legível e facilitar a visualização de onde os valores de dados foram inseridos. Isso começa com a configuração básica da página HTML:

Captura de tela em 2016 05-30 1.55.06-AM

Você provavelmente pode ver onde estamos indo com isso. Observe o ponto e vírgula no final. Isso é importante. Além disso, qualquer ponto-e-vírgula que ocorra no texto (como parte de uma declaração CSS ou de um script do lado do cliente) deve estar contido dentro de aspas.

10. Comece adicionando o corpo da página à cadeia geradora

Existem maneiras mais eficientes de construir essa string, mas eu gosto de deixar o código organizado, para facilitar a leitura. Você pode usar métodos curtos para fazer isso, e você também não precisa fazer isso como um processo separado para a etapa 9. Sinto que é mais fácil entender quando as diferentes seções da página são divididas dessa maneira.

Captura de tela em 2016 05-30 1.55.00-AM

11. Escreva a string do gerador para um HTML

Neste caso, estamos codificando o nome do arquivo, mas você pode (e provavelmente deve) torná-lo um campo no formulário pageBuilder.

Captura de tela em 2016 05-30 1.54.55-AM

12. Adicione um link de teste

Quando você clica no botão BUILD IT, porque ele não redireciona para uma página da Web como um programa PHP normal, você precisa adicionar um link ou algo para ir e ver qual foi o resultado.

Captura de tela em 2016 05-30 1.54.50-AM

13. Crie o arquivo CSS personalizado

Você pode armazenar instruções de estilo adicionais neste arquivo, mas por enquanto a única importante é a instrução de estilo para o arquivo. principal div.

Captura de tela em 2016 05-30 1.54.45-AM

14. Criar e fazer upload de wrap.png

Para que isso funcione corretamente, você precisa criar uma única imagem de pixel translúcida e nomeá-la wrap.png em seguida, faça o upload para o caminho que você especificou no custom.css arquivo.

15. Faça upload de algumas imagens de plano de fundo adequadas e teste seu pageBuilder

Você ficará feliz em saber que estamos quase terminando e, na verdade, agora é só uma questão de testar e corrigir quaisquer erros que ocorram. Escolha algumas imagens simples e agradáveis ​​que não sejam muito ocupadas e que sejam adequadas para se relacionar com eventos ou ocasiões especiais (no nosso exemplo, eu fui com o Dia das Mães e o Dia dos Pais). Carregue as imagens para o caminho onde você armazena suas imagens para o seu site. Em seguida, preencha o formulário, clique no botão e veja o que acontece. Veja um exemplo do formulário com todos os campos de dados preenchidos.

Picture1

Qual deve resultar em criar algo bastante similar a este:

Captura de tela em 2016 05-30 1.54.11-AM

Nós já imaginamos que você não iria querer digitar tudo isso do zero, então você pode baixar o código-fonte para pageBuilder.php e voucherGen.php neste zip.

Você pode aplicar essa técnica de criação de arquivos HTML como cadeias de caracteres e, em seguida, gravá-los em arquivos em todos os tipos de situações. Apenas tome cuidado para nunca colocar algo assim em um loop recursivo ou você vai encher o seu disco rígido e travar o servidor.

Catalin Zorzini

Eu sou um blogueiro de web design e comecei este projeto depois de passar algumas semanas lutando para descobrir o que é a melhor plataforma de comércio eletrônico para mim. Confira minha corrente top 10 construtores de sites de comércio eletrônico.