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.

Crud

Nesse curso aprenderemos como desenvolver uma ClassCrud com conexão ao banco de dados mysql através dos conectores PDO e MYSQLi.