Controladores CodeIgniter, roteamento de visualizações: aprenda com o aplicativo de exemplo

Por: Fiona Brown Fiona Brown
Hours Atualização do

Neste tutorial, você aprenderá os seguintes tópicos.

  • Roteamento – o roteamento é responsável por responder às solicitações de URL. O roteamento corresponde a URL às rotas predefinidas. Se nenhuma correspondência de rota for encontrada, o CodeIgniter lança uma exceção para uma página não encontrada.
  • controladores – as rotas estão vinculadas aos controladores. Os controladores unem os modelos e as visualizações. A solicitação de dados/lógica de negócios do modelo e retorna os resultados na apresentação da visão. Depois que uma URL corresponde a uma rota, ela é encaminhada para uma função pública do controlador. Esta função interage com a fonte de dados, lógica de negócios e retorna a visualização que exibe os resultados.
  • Visualizações – as visualizações são responsáveis ​​pela apresentação. Uma visualização geralmente é uma combinação de HTML, CSS e JavaScript. Esta é a parte responsável por exibir a página da web para o usuário. Normalmente, os dados exibidos são recuperados do banco de dados ou de qualquer outra fonte de dados disponível.

Como criar um novo projeto CodeIgniter

Usaremos o Composer para criar um novo projeto. Usarei o servidor PHP integrado, portanto não é necessário ter software extra como apache. Neste tutorial, estamos usando o Windows sistema operacional. Portanto, criamos uma pasta Sites na unidade C. Você pode usar qualquer diretório que seja adequado para você.

Abra a linha de comando/terminal e execute o seguinte comando

cd C:\Sites

Agora criaremos um projeto CodeIgniter usando o Composer. Execute o seguinte comando

composer create-project CodeIgniter/framework ci-app

AQUI,

  • O comando acima cria um novo projeto CodeIgniter versão 3 usando a versão estável mais recente, ou seja, 3.1.9 em um diretório ci-app.

Quando a execução do comando acima for concluída, você deverá conseguir resultados semelhantes aos seguintes no terminal

Crie um novo projeto CodeIgniter

Execute o seguinte comando para navegar até o diretório do projeto recém-criado ci-app

cd ci-app

Vamos agora iniciar o servidor web integrado do PHP

 php -S localhost:3000

AQUI,

  • O comando acima inicia o servidor PHP integrado rodando na porta 3000.

Abra o navegador da web e navegue no seguinte URL: http://localhost:3000/

Você receberá a seguinte página

Crie um novo projeto CodeIgniter

Se você pode ver a página acima, parabéns, você instalou com sucesso CodeIgniter.

Como você pode ler na página da web acima, a página exibida acima é renderizada pela visualização localizada em application/views/welcome_message.php e o controlador responsável está localizado em application/controllers/Welcome.php

Roteamento CodeIgniter

Por enquanto, nosso aplicativo possui apenas uma URL que é a página inicial. Nesta seção, personalizaremos a seção inicial. Criaremos alguns novos URLs que responderão às diferentes solicitações.

Vamos começar com a rota da página inicial

Abra o arquivo de rotas conforme indicado pelo caminho abaixo

application/config/routes.php

Você deverá conseguir ver o seguinte conteúdo

$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

AQUI,

  • $route['default_controller'] = 'bem-vindo'; define o controlador padrão que responde às solicitações de URI
  • $rota['404_override'] = ”; esta rota permite definir uma rota personalizada para erros 404. Um erro 404 ocorre quando uma página não é encontrada. CodeIgniter possui um manipulador padrão para o erro, mas você pode definir o seu próprio, se desejar.
  • $route['translate_uri_dashes'] = FALSO; esta opção permite traduzir travessões em sublinhados. Falaremos sobre esta opção quando observarmos como as rotas funcionam no CodeIgniter.

Vejamos agora o método controller responsável por exibir a página inicial que vimos quando abrimos a URL http://localhost:3000/ no navegador da web.

Abra o seguinte arquivo

application/controllers/Welcome.php

Você deve conseguir ver o seguinte código

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller {

	public function index()
	{
		$this->load->view('welcome_message');
	}
}

AQUI,

  • Definido ('BASEPATH') OR exit('Não é permitido acesso direto ao script'); protege contra acesso direto à classe do controlador sem passar pelo arquivo index.php. Lembre-se, no paradigma MVC todas as solicitações possuem um único ponto de entrada, e para o CodeIgniter, seu index.php. Este código bloqueia todas as solicitações que não passam por index.php
  • class Welcome estende CI_Controller {…} define uma classe Welcome que estende a classe pai CI_Controller
  • função pública index() define uma função pública que é chamada por padrão quando você abre a página inicial
  • $this->carregar->view('welcome_message'); esta linha carrega a visualização Welcome_Message. O arquivo welcome_message está localizado no diretório application/views/welcome_message.php

Até agora, exploramos apenas o que sai da caixa com o CodeIgniter, vamos agora tentar fazer algumas alterações. Criaremos nossa página inicial e substituiremos a página padrão

Crie um novo arquivo em application/views/home.php

Adicione o seguinte código a home.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Hello CodeIgniter!</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
        <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
    </head>
    <body>
        <section class="section">
            <div class="container">
                <h1 class="title">
                    CodeIgniter Hello World
                </h1>
            </div>
        </section>
    </body>
</html>

AQUI,

O código HTML acima carrega a estrutura SSS da Birmânia e a fonte da rede CDN, criando um documento HTML muito básico. Aplica regras CSS muito simples da estrutura CSS da Birmânia.

Abra o seguinte URL em seu navegador: http://localhost:3000/

Você deve ser capaz de ver o seguinte

Roteamento CodeIgniter

Ótimo, acabamos de modificar com sucesso a página inicial. Seguindo em frente, vamos definir nossa rota. Vamos supor que nosso aplicativo também precise mostrar a página sobre nós.

Crie uma rota

Abra o arquivo de rotas application/config.routes.php

Adicione a seguinte rota

$route['about-us'] = 'welcome/about_us';

AQUI,

  • Quando um visitante visita a URL /about-us, estamos instruindo o CodeIgniter a procurar um controlador Welcome e executar o método about_us.

Crie um controlador

Vamos agora definir o método do controlador sobre nós

Abra aplicativo/controladores/Welcome.php

Adicione o seguinte método

public function about_us(){
            $this->load->view('about_us');
        }

AQUI,

  • O código acima define uma função about_us e carrega uma visualização about_us.

Crie uma visualização

Vamos agora criar a visualização que acabamos de referenciar na seção acima

Crie um novo arquivo about_us.php em application/views/about_us.php

Adicione o seguinte código

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>About CodeIgniter!</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
        <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
    </head>
    <body>
        <section class="section">
            <div class="container">
                <h1 class="title">
                    About us yap...                
                </h1>
            </div>
        </section>
    </body>
</html>

Estamos prontos, abra o seguinte URL em seu navegador: http://localhost:3000/index.php/about-us

Você verá a seguinte página

Crie uma View no CodeIgniter

Se você conseguiu ver a página acima, parabéns, você criou com sucesso um aplicativo simples no CodeIgniter.

Resumo

Neste tutorial, cobrimos três (3) componentes principais que compõem uma aplicação CodeIgniter. Vimos rotas e como defini-las, controladores e como criar métodos que respondem a solicitações de rota e criamos visualizações simples que são retornadas aos usuários quando eles solicitam um recurso.