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 sentar ali, sendo 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 não precise codificar manualmente cada atualização ou mod de página. A maneira mais fácil de aprender como fazer algo assim é realmente fazendo, então, no restante deste artigo, vou mostrar uma maneira de implementar um sistema que irá construir novas páginas da web para você com o toque de um botão.

Neste cenário, vamos supor que seu cliente seja um restaurante que deseja oferecer vouchers para diferentes ocasiões especiais ao longo do ano. Mas é claro que eles não querem te pagar para atualizá-lo, então é melhor você se certificar de cobrá-los o suficiente por este 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 padrão de página da web. Você pode dar a ele um nome como “pageBuilder.php” ou algo assim. Você não precisa usar PHP para isso. Você poderia usar outra linguagem de programação, mas neste 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 melhorar a aparência do formulário sem nenhum trabalho extra. Claro, você precisará do Bootstrap para que isso funcione.

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. Precisamos apenas 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 (emdividuplamente).
  • 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 agora está concluído 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 um software que processará os dados enviados e fará algo com eles. Nesse caso, usaremos os dados enviados para gerar um novo HTML Disputas de Comerciais.

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

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 apenas faz com que o código pareça 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

Na verdade, tudo o que precisamos fazer aqui é criar uma string muito longa que conterá tudo o que é necessário para criar a nova página. Usaremos concatenação de string para mantê-la legível e tornar mais fácil ver onde os valores dos 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 um script do lado do cliente) deve estar contido entre aspas.

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

Existem maneiras mais eficientes de construir esta string, mas eu gosto de deixar o código organizado, para que seja fácil de ler. Você pode usar métodos curtos para fazer isso, e também não precisa fazer isso como um processo separado para a etapa 9. Acho 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á emocionado em saber que estamos quase terminando, e agora é apenas 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 relacionar a eventos ou ocasiões especiais (em nosso exemplo, escolhi o Dia das Mães e o Dia dos Pais). Faça upload das imagens para o caminho onde você as armazena para o seu site. Em seguida, preencha o formulário, clique no botão e veja o que acontece. Aqui está 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 strings e depois 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ê encherá 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 meu atual top 10 construtores de sites de comércio eletrônico.

Comentários Respostas 2

Deixe um comentário

Seu endereço de email não será publicado.Os campos obrigatórios são marcados com *

NOTA *

Este site usa o Akismet para reduzir o spam. Saiba como seus dados de comentário são processados.

Torne-se um especialista em comércio eletrônico

Digite seu e-mail para começar a festa