PHP Classes

How to Use a PHP HTML Generator to Generate Common Types of Pages that Use Materialize CSS Library Based on Material Design Using the Package Fast Pages: Generate HTML for several types of pages

Recommend this page to a friend!
     
  Info   Example   View files Files   Install with Composer Install with Composer   Download Download   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2024-06-14 (3 months ago) RSS 2.0 feedNot yet rated by the usersTotal: 12 All time: 11,400 This week: 47Up
Version License PHP version Categories
fastpages 1.0MIT/X Consortium ...5HTML, PHP 5, Code Generation
Description 

Author

This package can generate HTML for several types of pages.

It provides PHP scripts for Web pages that can be generated for several types of HTML pages.

The generated HTML uses the Materialize CSS library.

In Portuguese:

Este projeto é um gerenciador de páginas web desenvolvido em PHP utilizando o framework CSS Materialize.

Ele permite criar, personalizar e gerenciar páginas web de forma dinâmica e interativa através de um formulário multi-step

Innovation Award
PHP Programming Innovation award nominee
June 2024
Number 6
Material Design is a design language created by Google to define aspects of presentation that can be used to generate screens of Web pages and mobile device applications.

The Materialize CSS is a CSS stylesheet library that any developer can use to implement Material Design concepts in Web pages.

This package provides PHP scripts that can generate common types of HTML pages that use Materialize CSS to define the presentation as specified by the Material Design language.

Manuel Lemos
Picture of Rodrigo Faustino
  Performance   Level  
Name: Rodrigo Faustino <contact>
Classes: 27 packages by
Country: Brazil Brazil
Age: 41
All time rank: 2509173 in Brazil Brazil
Week rank: 4 Up1 in Brazil Brazil Up
Innovation award
Innovation award
Nominee: 17x

Winner: 2x

Example

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <title>Gerenciador de Páginas</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link href="public/css/materialize.css" rel="stylesheet">
    <link href="public/css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
    <style>
.step {
    display: none;
}
.step.active {
    display: block;
}
#splashScreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #rgba(0, 0, 25, 0.6);
    backdrop-filter: blur(20px);
    z-index: 9999;
  }
 
  #loading {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    transform: translate(-50%, -50%);
    text-align: center;
  }
 
  #loadingBar {
    width: 80%;
    height: 20px;
    margin: 20px auto;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
  }
 
  #loadingPercentage {
    width: 0%;
    height: 100%;
    background-color: yellow;
    border-top: solid 8px teal;
    border-bottom: solid 8px blue;
  }
    </style>
</head>
<body>
<?php
$results
= [];
function
limit_requests($ip, $limit, $time_window) {
   
$requests = file_get_contents('requests.json');
   
$requests = json_decode($requests, true);

    if (!isset(
$requests[$ip])) {
       
$requests[$ip] = array(time());
    } else {
        foreach (
$requests[$ip] as $key => $time) {
            if (
$time < time() - $time_window) {
                unset(
$requests[$ip][$key]);
            }
        }
        if (
count($requests[$ip]) >= $limit) {
            return
false;
        }
       
$requests[$ip][] = time();
    }
   
file_put_contents('requests.json', json_encode($requests));
    return
true;
}
$user_agent = $_SERVER['HTTP_USER_AGENT'];
$ip = $_SERVER['REMOTE_ADDR'];
$dia=3600*24;
$details = json_decode(file_get_contents("http://ip-api.com/json/{$ip}"));
if (!
limit_requests($ip, 5, $dia)) {
   
$results = "
    <div id='menu-container'></div>
    <div id='splashScreen' >
    <div id='loading'>
        <p>Você excedeu o limite de solicitações. </p>
            <div class='progress'>
            <div class='indeterminate'></div>
        </div>
        <p>Por favor volte, amanhã</p>
    </div>
</div>
<script src='js/menuAndFooter.js'></script>
<div id='footer-container'></div>
    "
;
    echo
$results;
   exit;
}
?>
<div id="menu-container"></div>
<div class="container">
    <h3>Gerenciador de Páginas</h3>
    <form id="multi-step-form" action="gerar_paginas.php" method="post" enctype="multipart/form-data">
        <div class="step active" id="step-1" style="height:250px">
            <div class="input-field">
                <input type="number" name="num_pages" id="num_pages" required>
                <label for="num_pages">Quantas páginas?</label>
            </div>
            <button type="button" class="btn waves-effect waves-light" onclick="nextStep()">Próximo <i class="material-icons">arrow_forward</i></button>
        </div>

        <div class="step" id="step-2">
            <div id="pages-section"></div>
            <button type="button" class="btn waves-effect waves-light" onclick="prevStep()"><i class="material-icons">arrow_back</i> Voltar</button>
            <button type="button" class="btn waves-effect waves-light" onclick="nextStep()">Próximo <i class="material-icons">arrow_forward</i></button>
        </div>

        <div class="step" id="step-3">
            <div id="sections-content"></div>
            <button type="button" class="btn waves-effect waves-light" onclick="prevStep()"><i class="material-icons">arrow_back</i> Voltar</button>
            <button type="submit" class="btn waves-effect waves-light">Gerar Páginas <i class="material-icons">cloud_download</i></button>
        </div>
    </form>
</div>

<script src="public/js/materialize.min.js"></script>
<script src="js/menuAndFooter.js"></script>
        <div id="footer-container"></div>
<script>
    let currentStep = 1;
    const form = document.getElementById('multi-step-form');

    function nextStep() {
        if (validateStep(currentStep)) {
            currentStep++;
            showStep(currentStep);
        }
    }

    function prevStep() {
        currentStep--;
        showStep(currentStep);
    }

    function showStep(step) {
        const steps = document.querySelectorAll('.step');
        steps.forEach(step => step.classList.remove('active'));
        document.getElementById('step-' + step).classList.add('active');
        if (step === 2) {
            createPagesForm();
        }
        if (step === 3) {
            createSectionsForm();
        }
    }

    function validateStep(step) {
        if (step === 1) {
            const numPages = document.getElementById('num_pages').value;
            return numPages > 0;
        } else if (step === 2) {
            const pagesSection = document.getElementById('pages-section');
            const inputs = pagesSection.querySelectorAll('input');
            for (let input of inputs) {
                if (!input.checkValidity()) {
                    input.reportValidity();
                    return false;
                }
            }
        } else if (step === 3) {
            const sectionsContent = document.getElementById('sections-content');
            const inputs = sectionsContent.querySelectorAll('input, textarea, select');
            for (let input of inputs) {
                if (!input.checkValidity()) {
                    input.reportValidity();
                    return false;
                }
            }
        }
        return true;
    }

    function createPagesForm() {
        const numPages = document.getElementById('num_pages').value;
        const pagesSection = document.getElementById('pages-section');
        pagesSection.innerHTML = '';
        for (let i = 1; i <= numPages; i++) {
            pagesSection.innerHTML += `
                <div class="input-field">
                    <input type="text" name="pagina[${i}][name]" required>
                    <label for="page_name_${i}">Nome da Página ${i}</label>
                </div>
                <div class="input-field">
                    <input type="number" name="pagina[${i}][num_sections]" required>
                    <label for="num_sections_${i}">Quantas Seções na Página ${i}?</label>
                </div>
            `;
        }
        M.updateTextFields();
    }

    function createSectionsForm() {
        const formData = new FormData(form);
        const numPages = formData.get('num_pages');
        const sectionsContent = document.getElementById('sections-content');
        sectionsContent.innerHTML = '';
        for (let i = 1; i <= numPages; i++) {
            const pageName = formData.get(`pagina[${i}][name]`);
            const numSections = formData.get(`pagina[${i}][num_sections]`);
            sectionsContent.innerHTML += `<h4>${pageName}</h4>`;
            for (let j = 1; j <= numSections; j++) {
                sectionsContent.innerHTML += `
                    <div class="input-field">
                        <select name="pagina[${pageName}][sections][${j}][type]" onchange="showSectionContentFields(this, '${pageName}', ${j})" required>
                            <option value="" disabled selected>Escolha o tipo de conteúdo</option>
                            <option value="text">Texto</option>
                            <option value="image">Imagem</option>
                            <option value="form">Formulário de Contato</option>
                        </select>
                        <label for="section_${pageName}_${j}_type">Tipo de Conteúdo para Seção ${j}</label>
                    </div>
                    <div id="section_${pageName}_${j}_content"></div>
                `;
            }
        }
        M.updateTextFields();
        M.FormSelect.init(document.querySelectorAll('select'));
    }

    function showSectionContentFields(select, pageName, sectionNumber) {
        const sectionContentDiv = document.getElementById(`section_${pageName}_${sectionNumber}_content`);
        sectionContentDiv.innerHTML = '';
        if (select.value === 'text') {
            sectionContentDiv.innerHTML = `
                <div class="input-field">
                    <textarea name="pagina[${pageName}][sections][${sectionNumber}][content]" class="materialize-textarea" required></textarea>
                    <label for="section_${pageName}_${sectionNumber}_content">Conteúdo da Seção ${sectionNumber}</label>
                </div>
            `;
            M.updateTextFields();
        } else if (select.value === 'image') {
            sectionContentDiv.innerHTML = `
                <div class="file-field input-field">
                    <div class="btn">
                        <span>Upload</span>
                        <input type="file" name="pagina[${pageName}][sections][${sectionNumber}][content]" accept="image/*" required>
                    </div>
                    <div class="file-path-wrapper">
                        <input class="file-path validate" type="text" placeholder="Envie uma imagem">
                    </div>
                </div>
            `;
        } else if (select.value === 'form') {
            sectionContentDiv.innerHTML = `
                <p>Formulário de Contato Padrão será gerado.</p>
            `;
        }
    }
</script>
</body>
</html>


Details

Gerenciador de Páginas Web

Este projeto é um gerenciador de páginas web desenvolvido em PHP utilizando o framework CSS Materialize. Ele permite criar, personalizar e gerenciar páginas web de forma dinâmica e interativa através de um formulário multi-step. Ideal para pequenos negócios, instituições educacionais, agências de marketing, profissionais autônomos, entre outros.

Linguagens e Tecnologias Utilizadas

  • PHP: Linguagem principal utilizada para o backend do projeto.
  • HTML/CSS: Estrutura e estilo das páginas.
  • Materialize: Framework CSS utilizado para estilização.
  • JavaScript: Utilizado para funcionalidades do formulário multi-step.

Funcionalidades

  • Formulário Multi-step: Interface intuitiva para a criação de páginas e seções.
  • Geração Automática de Páginas: Cria páginas HTML com navegação entre elas.
  • Personalização Dinâmica: Permite definir o nome das páginas, o número de seções e o conteúdo de cada seção.
  • Menu de Navegação: Cada página gerada inclui um menu de navegação para facilitar a navegação entre as páginas.

Potencialidades e Usos

Este gerenciador de páginas pode ser utilizado em diversos nichos devido à sua flexibilidade e capacidade de personalização. Aqui estão algumas das principais áreas de aplicação:

Pequenos Negócios e Startups

  • Criação rápida de landing pages para novos produtos, serviços ou campanhas de marketing.
  • Desenvolvimento de websites institucionais informando sobre a empresa, seus serviços, equipe e contato.

Educação e Instituições Acadêmicas

  • Portais de cursos, facilitando a criação de páginas para cursos específicos com informações sobre aulas e material de apoio.
  • Sites para projetos estudantis, apresentações e trabalhos acadêmicos.

Agências de Marketing Digital

  • Criação de campanhas personalizadas para clientes, com páginas específicas para cada campanha.
  • Apresentação de relatórios e dados de desempenho de forma interativa e visual.

Portfólios e Currículos Online

  • Profissionais autônomos podem criar portfólios para mostrar seu trabalho.
  • Criação de currículos digitais detalhados para profissionais em busca de emprego.

Eventos e Conferências

  • Desenvolvimento de sites para eventos, conferências e workshops, incluindo agenda, palestrantes, inscrições e locais.
  • Facilitação do processo de inscrição e fornecimento de informações adicionais para participantes.

Blogs e Publicações

  • Sistema de blogs onde os usuários podem publicar posts, artigos e conteúdos relacionados a diferentes tópicos.
  • Edições digitais de revistas e publicações periódicas.

Serviços de Consultoria

  • Consultores independentes podem criar páginas de serviços, estudos de caso, depoimentos de clientes e formas de contato.
  • Empresas de consultoria podem criar sites dinâmicos para diferentes áreas de atuação, projetos e serviços oferecidos.

Organizações Sem Fins Lucrativos

  • Páginas para campanhas de arrecadação de fundos, eventos de caridade e outras atividades.
  • Informações sobre causas, projetos e formas de envolvimento e doação.

Comunidades e Fóruns Online

  • Plataformas de comunidade para grupos de interesse, fóruns de discussão e redes de apoio.
  • Perfis de membros, atividades destacadas e comunicação entre participantes.

E-commerce e Vendas Online

  • Lojas virtuais simples para pequenos comerciantes.
  • Landing pages específicas para novos lançamentos ou produtos em destaque.

Como Usar

  1. Clone o repositório:
    git clone https://github.com/faustinopsy/fastPages.git
    
  2. Navegue até o diretório do projeto:
    cd fastPages
    
  3. Abra o projeto em seu servidor local (XAMPP, WAMP, etc.).
  4. Acesse o index.php pelo navegador e siga os passos do formulário multi-step para criar suas páginas personalizadas.

Contribuições

Contribuições são bem-vindas! Sinta-se à vontade para abrir issues e pull requests com melhorias, correções de bugs ou novas funcionalidades.

Licença

Este projeto está licenciado sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

Feito com :heart: por faustinopsy


  Files folder image Files (17)  
File Role Description
Files folder imagejs (1 file)
Files folder imagepublic (1 file, 2 directories)
Accessible without login Plain text file gerador.php Aux. Auxiliary script
Accessible without login Plain text file gerar_paginas.php Aux. Example script
Accessible without login Plain text file index.php Example Example script
Accessible without login Plain text file index_old.php Aux. Auxiliary script
Accessible without login Plain text file processar.php Aux. Auxiliary script
Accessible without login Plain text file readme.md Doc. Documentation
Accessible without login Plain text file requests.json Data Auxiliary data

  Files folder image Files (17)  /  js  
File Role Description
  Accessible without login Plain text file menuAndFooter.js Data Auxiliary data

  Files folder image Files (17)  /  public  
File Role Description
Files folder imagecss (4 files)
Files folder imagejs (4 files)
  Accessible without login Plain text file icones.pdf Example Example script

  Files folder image Files (17)  /  public  /  css  
File Role Description
  Accessible without login Plain text file material.woff2 Data Auxiliary data
  Accessible without login Plain text file materialize.css Data Auxiliary data
  Accessible without login Plain text file materialize.min.css Data Auxiliary data
  Accessible without login Plain text file style.css Data Auxiliary data

  Files folder image Files (17)  /  public  /  js  
File Role Description
  Accessible without login Plain text file init.js Data Auxiliary data
  Accessible without login Plain text file jquery-2.1.1.min.js Data Auxiliary data
  Accessible without login Plain text file materialize.js Data Auxiliary data
  Accessible without login Plain text file materialize.min.js Data Auxiliary data

The PHP Classes site has supported package installation using the Composer tool since 2013, as you may verify by reading this instructions page.
Install with Composer Install with Composer
 Version Control Unique User Downloads Download Rankings  
 100%
Total:12
This week:0
All time:11,400
This week:47Up