Home
Button Mobile Webdesign em Foco
Newsletter Webdesign em Foco
Support Webdesign em Foco
Contribuition Webdesign em Foco
Doe para a Webdesign em Foco
Suporte da Webdesign em Foco
Fechar

MVC Completo - #11 View I

14/04/2018

Hoje iniciamos a construção das nossas views. As views serão divididas basicamente em três arquivos: ClassRender, ControllerView e os arquivos da view.

Criando o Layout em HTML5

O primeiro passo para criarmos a view é construir um arquivo Layout.php dentro do app/view que ficará responsável pela base do layout. Esse arquivo conterá os elementos que não mudam de uma página para outra como por exemplo a barra de links, o footer...

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Webdesign em Foco">
    <meta name="description" content="<?php echo $this->getDescription(); ?>">
    <meta name="keywords" content="<?php echo $this->getKeywords(); ?>">
    <title><?php echo $this->getTitle(); ?></title>
    <link rel="stylesheet" href="<?php echo DIRCSS.'Style.css' ?>">
    <?php echo $this->addHead(); ?>
</head>

<body>
    <div class="Nav">
        <a href="<?php echo DIRPAGE; ?>">Home</a>
        <a href="<?php echo DIRPAGE.'contato'; ?>">Contato</a>
    </div>
    
    <div class="Header">
        <img src="<?php echo DIRIMG.'Banner.jpg'; ?>" alt="Banner"><br>
        TEL.: (XX) XXXXXXXX <br>
        <?php echo $this->addHeader(); ?>
    </div>
    
    <div class="Main">
        <?php echo $this->addMain(); ?>
    </div>
    
    <div class="Footer">
        2019 - TODOS OS DIREITOS RESERVADOS WEBDESIGN EM FOCO <br>
        <?php echo $this->addFooter(); ?>
    </div>
</body>

</html>

Criando a classe de renderização do Layout

A classe de renderização terá a função de abrigar os métodos que exibirão o layout e exibirão características específicas de cada controller.

namespace Src\Classes;

class ClassRender{

    #Propriedades
    private $Dir;
    private $Title;
    private $Description;
    private $Keywords;

    public function getDir() { return $this->Dir; }
    public function setDir($Dir) { $this->Dir = $Dir; }
    public function getTitle() { return $this->Title; }
    public function setTitle($Title) { $this->Title = $Title; }
    public function getDescription() { return $this->Description; }
    public function setDescription($Description) { $this->Description = $Description; }
    public function getKeywords() { return $this->Keywords; }
    public function setKeywords($Keywords) { $this->Keywords = $Keywords; }

    #Método responsável por renderizar todos o layout
    public function renderLayout()
    {
        include_once(DIRREQ."app/view/Layout.php");
    }

    #Adiciona características específicas no head
    public function addHead()
    {
    }

    #Adiciona características específicas no header
    public function addHeader()
    {
    }

    #Adiciona características específicas no main
    public function addMain()
    {
    }

    #Adiciona características específicas no footer
    public function addFooter()
    {
    }
}

Criando o Controller

Via de regra, cada página terá seu controller específico. Na aula de hoje criamos o controller da home, exibindo as características individuais dessa página.

namespace App\Controller;
use Src\Classes\ClassRender;
use Src\Interfaces\InterfaceView;

class ControllerHome extends ClassRender implements InterfaceView{
    public function __construct()
    {
        $this->setTitle("Página Inicial");
        $this->setDescription("Esse é o nosso site de MVC");
        $this->setKeywords("mvc completo, curso de mvc, webdesign em foco");
        $this->setDir("home");
        $this->renderLayout();
    }
}

Na próxima aula vamos desenvolver os métodos de adição de caracterísitcas individuais das páginas, são eles: addHead, addHeader, addMain e addFooter. Até lá!

Receba as aulas da Webdesign em Foco em Seu Email
Suporte Webdesign em Foco

Posts Relacionados

MVC Completo - #10 Arquivo Despachante III
No vídeo de hoje vamos finalizar nosso arquivo despachante criando o método addParam. Esse método dará a oportunidade de inserirmos parâmetros dinâmicos.
Saiba mais!
MVC Completo - #12 View II
Nessa aula finalizaremos a parte de programação das nossas views, terminando os métodos de renderização e os métodos para adicionar conteúdo.
Saiba mais!
MVC Completo
Neste curso aprenderemos como criar o padrão de projeto MVC completo, analisando desde sua estrutura até a programação.
Saiba mais!