Vamos agora configurar o projeto e para isso abra o arquivo config/config.php e faça:
- Configurando o Banco de Dados
Para configurar o banco de dados altere os valores das constantes:
SERVIDOR:
BANCO:
USUARIO:
SENHA:
- Configurando a url do seu projeto
para configurar a url base do seu projeto, altere o valor da constante
URL_BASE
Configuração do Banco de Dados
define("SERVIDOR", "localhost");
define("BANCO", "metodoagora_agenda");
define("USUARIO", "root");
define("SENHA", "");
define("CHARSET","UTF8");
URL_BASE
define('URL_BASE', 'http://' . $_SERVER["HTTP_HOST"].'/metodoagora/projeto-agenda/');Para fatiar o layout é importante observar a estrutura html do arquivo index e verificar dentro desta estrutura o que representa a página home, o cabecalho, rodapé, menu, etc. Então siga os passos abaixo para iniciar a configuração:
- Copie o conteúdo do arquivo index do layout baixado para o arquivo template.php
-Para que os recursos possam aparecer é necessário setá-los, ou seja, informar o caminho completo e para isso vamos usar a constante URL_BASE que é a constante que define o caminho do nosso projeto e a pasta assets que é onde estão os recursos.
- Sete todos os recursos necessários do arquivo template para que possa linkar o css, imagem e js e em seguida rode o projeto e o mesmo deverá ter a mesma aparência do arquivo index.html baixado.
CSS
<link rel="stylesheet" type="text/css" href="<?php echo URL_BASE ?>/assets/css/auxiliar.css">
<link rel="stylesheet" href="<?php echo URL_BASE ?>assets/css/grade.css">
<link rel="stylesheet" href="<?php echo URL_BASE ?>assets/componentes/css/style_Componente.css">
<link rel="stylesheet" href="<?php echo URL_BASE ?>assets/js/datatables/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="<?php echo URL_BASE ?>assets/js/datatables/css/responsive.dataTables.min.css">
<link rel="stylesheet" href="<?php echo URL_BASE ?>assets/css/style.css">
Imagem
<a href="index.html" class="logo"><img src="<?php echo URL_BASE ?>/assets/img/logo.png" class="img-fluido"></a>
JavaScript
<script src="<?php echo URL_BASE ?>assets/js/jquery.mask.js"></script>
<script src="<?php echo URL_BASE ?>assets/componentes/js/js_modal.js"></script>
<script src="<?php echo URL_BASE ?>assets/componentes/js/js_util.js"></script>
<script src="<?php echo URL_BASE ?>assets/componentes/js/js_mascara.js"></script>
<script src="<?php echo URL_BASE ?>assets/js/datatables/js/jquery.dataTables.min.js"></script>
<script src="<?php echo URL_BASE ?>assets/js/datatables/js/dataTables.responsive.min.js"></script>
<script src="<?php echo URL_BASE ?>assets/componentes/js/js_data_table.js"></script>Para configurar o arquivo cabecalho, façamos o seguinte procedimento:
- Do arquivo template recorte o conteúdo que você considera fazer parte do cabeçalho do projeto
- Abra o arquivo cabecalho e cole o conteúdo recortado
- No arquivo template no local onde estava o conteúdo do cabecalho faça um include ao arquivo cabecalho
Para configurar o arquivo menu, façamos o seguinte procedimento:
- Do arquivo template recorte o conteúdo que você considera ser o rodapé do projeto
- Abra o arquivo menu e cole o conteúdo recortado
- No arquivo template no local onde estava o conteúdo do menu faça um include ao arquivo rodape.php
Comando do Include no template
<?php include "rodape.php" ?>
Conteúdo do Rodapé
<footer class="rodape">
<p>CopyRight - mjailton</p>
</footer>Para configurar o arquivo home, façamos o seguinte procedimento:
- Do arquivo template recorte o conteúdo que você considera como sendo o conteúdo da página inicial
- para esta parte é importante você abrir mais de um arquivo do projeto para encontrar qual div permanece igual para todas as páginas dinâmicas
- Abra o arquivo home e cole o conteúdo recortado
- No arquivo index no local onde estava o conteúdo do home faça um include ao arquivo home
Comando do Include no template
<?php include "home.php" ?>
Conteúdo do home
<div class="conteudo">
<section class="caixa">
<div class="base-home">
<h2 class="titulo end items-center">Adicionar novo cadastro <a href="cadastro.html" class="btn-verde btn btn-pequeno radius-50"><svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.5 4.66667V8.33333M8.33333 6.5H4.66667M12 6.5C12 7.22227 11.8577 7.93747 11.5813 8.60476C11.3049 9.27205 10.8998 9.87836 10.3891 10.3891C9.87836 10.8998 9.27205 11.3049 8.60476 11.5813C7.93747 11.8577 7.22227 12 6.5 12C5.77773 12 5.06253 11.8577 4.39524 11.5813C3.72795 11.3049 3.12163 10.8998 2.61091 10.3891C2.10019 9.87836 1.69506 9.27205 1.41866 8.60476C1.14226 7.93747 1 7.22227 1 6.5C1 5.04131 1.57946 3.64236 2.61091 2.61091C3.64236 1.57946 5.04131 1 6.5 1C7.95869 1 9.35764 1.57946 10.3891 2.61091C11.4205 3.64236 12 5.04131 12 6.5Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Novo</a></h2>
<div class="grade">
<div class="rows justify-content-space-between">
<div class="col-6">
<div class="cx-home excluidos">
<div class="cx-body">
<div>
<small>Últimas alterações</small>
<strong>120</strong>
</div>
<span>Ítens excluídos</span>
</div>
</div>
</div>
<div class="col-6">
<div class="cx-home alterados">
<div class="cx-body">
<div>
<small>Últimas alterações</small>
<strong>200</strong>
</div>
<span>Ítens Alterados</span>
</div>
</div>
</div>
<div class="col-6">
<div class="cx-home cadastrados">
<div class="cx-body">
<div>
<small>Últimas alterações</small>
<strong>5000</strong>
</div>
<span>Ítens cadastrados</span>
</div>
</div>
</div>
<div class="col-6">
<div class="cx-home geral">
<div class="cx-body">
<div>
<small>Últimas alterações</small>
<strong>3500</strong>
</div>
<span>Total geral</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>O arquivo template representa a estrutura fixa do sistema que envolverá todas as views, teoricamente seria o conteúdo do arquivo index, excluindo a parte que foi tirada para o cabeçalho, o menu e home. vamos fazer alguns procedimentos para o arquivo template
<!doctype html>
<html language="pt-br">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<head>
<title>mjailton</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="<?php echo URL_BASE ?>/assets/css/auxiliar.css">
<link rel="stylesheet" href="<?php echo URL_BASE ?>assets/css/grade.css">
<link rel="stylesheet" href="<?php echo URL_BASE ?>assets/componentes/css/style_Componente.css">
<link rel="stylesheet" href="<?php echo URL_BASE ?>assets/js/datatables/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="<?php echo URL_BASE ?>assets/js/datatables/css/responsive.dataTables.min.css">
<link rel="stylesheet" href="<?php echo URL_BASE ?>assets/css/style.css">
<!--font icones-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="<?php echo URL_BASE ?>assets/js/jquery.min.js"></script>
</head>
<body>
<?php include_once "cabecalho.php" ?>
<?php
$this->verErro();
$this->verMsg();
?>
<div class="conteudo">
<?php $this->load($view, $viewData) ?>
</div>
<?php include_once "rodape.php" ?>
<!--Fundo Preto-->
<div id="fundo_preto"></div>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="<?php echo URL_BASE ?>assets/js/jquery.mask.js"></script>
<script src="<?php echo URL_BASE ?>assets/componentes/js/js_modal.js"></script>
<script src="<?php echo URL_BASE ?>assets/componentes/js/js_util.js"></script>
<script src="<?php echo URL_BASE ?>assets/componentes/js/js_mascara.js"></script>
<script src="<?php echo URL_BASE ?>assets/js/datatables/js/jquery.dataTables.min.js"></script>
<script src="<?php echo URL_BASE ?>assets/js/datatables/js/dataTables.responsive.min.js"></script>
<script src="<?php echo URL_BASE ?>assets/componentes/js/js_data_table.js"></script>
</body>
</html>
Para tornar o layout dinâmico, precisamos ajustar o include do home da seguinte forma:
Ao invés de incluir o arquivo diretamente pelo include iremos chamar o método load e passar como parâmetro duas variável: view e viewData,
ficando: $this->load($view, $viewData)
<?php $this->load($view, $viewData) ?>
No arquivo template crie uma variável javascript chamada base_url, a qual deverá o valor da constante URL_BASE configurada no arquivo config.php
no template também iremos configurar os recursos principais do projeto como o css e o javascript e outras bibliotecas necessárias
<script >
var base_url ="<?php echo URL_BASE ?>";
</script>Abra o arquivo cabecalho e o arquivo home e modifique os links colocando os valores corretos:
- Pagina inicial: URL_BASE
- lista: URL_BASE ."/cliente"
- Cadastro: URL_BASE ."cliente/create"
- Logoff : URL_BASE . "login/logoff"
mjailton.com.br