Classe Crud com PDO e MYSQLi - #2

03/05/2018

Hoje vamos estilizar o layout do nosso site CRUD. Para tanto vamos criar um banner .jpg na pasta Images e vamos criar a página Includes que vai receber o Header.php e o Footer.php. Vamos desenvolver também o nosso CSS que contará com a folha de estilos do nosso site.

Estilizando o layout da Classe Crud com HTML5

Os arquivos Header.php e Footer.php possuirão os códigos que repetirão em todas as páginas, como por exemplo os links e o banner:

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

<head>
    <meta charset="UTF-8">
    <title>Class Crud</title>
    <link rel="stylesheet" href="Style.min.css">
</head>

<body>
    <div class="Banner">
        <img src="Images/Banner.jpg" alt="Banner Crud">
    </div>

    <div class="Nav">
        <li><a href="cadastro">Cadastro</a></li>
        <li><a href="selecao">Seleção</a></li>
        <li><a href="delete">Delete</a></li>
        <li><a href="atualizacao">Atualização</a></li>
    </div>

    <!-- Footer.php -->
</body>

</html>

Estilizando o layout da Classe Crud com CSS

Utilizaremos o CSS para estilizar nossos componentes HTML.

*{margin: 0;}

.Banner{float:left; width: 100%;}
    .Banner img{width: 100%; vertical-align: middle;}

.Nav{float:left; width: 100%; background: #000;}
    .Nav li{float:left; width: 25%; text-align: center; list-style: none;}
    .Nav a{display:block; width: 100%; padding: 10px 0; color:#fff; font-weight: bold; text-decoration: none; font-size: 20px;}
    .Nav a:hover{background: #666;}

.Content{float:left; width: 100%; padding: 15px; }

No próximo vídeo já iniciamos com o cadastro.

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Classe Crud com PDO e MYSQLi - #1

Vamos aprender durante as próximas aulas a criar uma classe CRUD utilizando PDO e MYSQLi, passando pela conexão, inserção, update, delete e select.

Classe Crud com PDO e MYSQLi - #3

Hoje abordaremos a temática "Prepared Statements" ou Delarativas Preparatórias. Elas são de extrema importância para segurança do sistema contra SQL Injection.