Exercício de Programação #07 - PHP - CSS Dinâmico

05/12/2020

Nesse tutorial eu ensinarei como realizar um CSS dinâmico através do PHP, habilitando opções de alteração do CSS através do backend.

Alterando CSS com PHP

index.php

Vamos criar o arquivo index.php que receberá os elementos html e linkará ao CSS de forma dinâmica.

<!doctype html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.php">
    <title>Document</title>
</head>

<body>
    <form method="post" action="ControllerColor.php">
        <select name="cor" id="cor" required>
            <option value="">Selecione a cor de fundo</option>
            <option value="black">Preta</option>
            <option value="red">Vermelha</option>
            <option value="blue">Azul</option>
        </select>
        <input type="submit" value="Trocar a cor">
    </form>
</body>
</html>

style.php

No arquivo style.php vamos criar um cabeçalho setando o arquivo como tipo css e vamos receber dados dinâmicamente.

<?php header("Content-type: text/css"); ?>

body{
    background: <?php echo $_COOKIE['cor']; ?>
}

ControllerColor.php

Vamos criar um controller de exemplo também para alterar a cor através do PHP:

<?php
$cor=filter_input(INPUT_POST,'cor',FILTER_DEFAULT);
setcookie('cor',$cor);
header("location: index.php");

Por hoje é só! Sucesso nos códigos e na vida!

Quer aprender mais? Suporte premium: webdesignemfoco@gmail.com

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Exercício de Programação #06 - CSS - Divisão de Template com CSS Grid

Na aula de hoje faremos um exercício de CSS Grid, onde poderemos praticar o fatiamento do layout de um website passando pelas propriedades do CSS e do HTML.