Criando websites com CodeIgniter

Neste artigo, você irá aprender a criar um site usando CodeIgniter, um framework PHP. Segundo sua seus desenvolvedores, “CodeIgniter é um framework PHP poderoso com uma pegada muito pequena, desenvolvido para desenvolvedores que precisam de um kit de ferramentas simples e elegante para criar aplicativos da web completos”.

Para este projeto, você precisará ter instalado o Composer e o PHP (alternativamente, você pode usar ferramentas como o XAMPP).

Criando um projeto com CodeIgniter

Abra o terminal, e digite:

composer create-project codeigniter4/appstarter nome-projeto

Agora, digite:

cd nome-projeto

php spark serve

Para iniciar o servidor PHP. No navegador digite: http://localhost:8080 ou http://localhost:8081.

Você verá a seguinte página.

Criando um template

Vamos começar criando um template para nossa aplicação. Um template é uma estrutura básica de leiaute que será incorporado em todas as páginas. Geralmente, ele inclui um cabeçalho e um rodapé. No diretório “app/Views/”, crie um arquivo chamado “template.php”.

app/Views/template.php

<!doctype html>

<html lang="pt-br">

<head>

    <title>Título do site</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap -->

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">  

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">

</head>

<body>

    <!-- PARTE DINÂMICA -->

    <?= $this->renderSection('conteudo') ?>

    <!-- / FIM PARTE DINÂMICA -->

    <!-- Bootstrap JavaScript -->

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>

</body>

</html>

Note que este arquivo será carregado para todas as views do nosso site. O que irá mudar a cada nova página é o conteúdo carregado pelo trecho:

<!-- PARTE DINÂMICA -->

    <?= $this->renderSection('conteudo') ?>

<!-- / FIM PARTE DINÂMICA -->

Agora vamos criar uma página inicial para nosso site. Crie um novo arquivo chamado “modelo.php”. E adicione o seguinte conteúdo:

app/Views/modelo.php

<?= $this->extend('template') ?>

<?= $this->section('conteudo') ?>

<!-- Conteúdo personalizado -->

<!-- / FIM Conteúdo personalizado -->

<?= $this->endSection() ?>

Note que toda vez que formos criar uma nova view, precisaremos fazer uma cópia deste arquivo. Para ilustrar isso, veja como podemos criar uma página inicial.

Crie um arquivo chamado “home.php” e adicione o seguinte conteúdo:

app/Views/home.php

<?= $this->extend('template') ?>

<?= $this->section('conteudo') ?>

<!-- Conteúdo personalizado -->

<p>Olá mundo!</p>

<!-- / FIM Conteúdo personalizado -->

<?= $this->endSection() ?>

Agora vamos configurar o controller para que ele seja a primeira coisa que aparece no site. Vá em app/Controllers/Home.php e altere o nome da view carregada:

Antes	Depois
`<?php namespace App\Controllers; class Home extends BaseController { public function index(): string { return view('welcome_message'); } }`	`<?php namespace App\Controllers; class Home extends BaseController { public function index():string { return view('home); } }`