4

Obtendo o Codeigniter 4
• Faça o download:
• https://codeigniter.com/download
Ferramentas necessárias
• Codeigniter 4
• IDE (NetBeans ou VisualStudio Code)
• XAMPP ou WAMP para Windows ou LAMPP para
Linux
• Após a instalação:
• XAMPP: Pasta do servidor: c:\xampp\htdocs
• WAMP: Pasta do servidor: c:\wamp\www
Configurando o php.ini
• Procure arquivo php.ini na pasta do xampp\php ou
wamp\php.
• Retire o comentário “;” da linha:

• Ficando assim:
Configurando...
• Descompacte o arquivo e em seguida copie a sua pasta para dentro de:
C:\xampp\htdocs ou C:\wamp\www, conforme você prefere.
• Em seguida abra na sua IDE de preferencia. Eu estou no Netbeans 8.2.
• Então, crie um novo projeto PHP, clique na opção com códigos fontes
existentes, busque a pasta raiz do Codeigniter que você copiou para o
Xampp ou wamp e, em seguida clique em abrir.
Configurando..

2
Esquema de diretórios
Bem vindos ao CodeIgniter 4. Abaixo segue a sua estrutura de
diretórios:
Configuração principal
1. Primeiramente, devemos iniciar o servidor.
2. Abra o Prompt de comando
3. Vá até a pasta raiz do projeto CodeIgniter
4. Digite: php spark serve

5. O que aconteceu foi a configuração do arquivo .htaccess,

possibilitando a URL limpa, sem o public/index.php
a) A URL deverá ser: Localhost:8080/controler/método/paramentro, onde
método e parâmetro será opcional.
6. OBS: O CMD terá que permanecer aberto, para que as requisições
sejam registradas.
Página inicial
• Ao informar: localhost:8080
O que aconteceu?
• A o informar o localhost:8080, foi carregado o controller principal com
sua view. Que no Codeigniter já vem configurado conforme abaixo:
• O controller Home.php é o principal, ou seja, está configurado para ser
chamado automático, ao digitar a raiz da URL: localhost:8080

• A view welcome_message.php, é a view que está sendo carregada pelo

método index do controller Home.php:
O arquivo “env”
• O arquivo env fica na raiz e possibilitará as
configurações necessárias.
• Primeiro, devemos renomeá-lo para: “.env”. Dessa
forma ele não será exposto no Git, pois terá as
nossas configurações de Base de Dados, por ex.
Diretórios principais
• Seque a estrutura da pasta App:

Nossa aplicação ficará distribuída da

seguinte forma:
Controllers: Aqui ficará o comando da
aplicação e a comunicação com a view e
o model.
Models: Aqui será escrito os métodos
responsável pelo acesso à base de dados.
INSERT, UPDATE, DELETE, SELECT, etc.
Views: Aqui será a visão da aplicação, ou
seja, a comunicação com o controller e
visão do usuário.
Botando a mão na massa...
• Vamos criar uma aplicação para uma espécie de jornal.
• Devemos criar a base de dados:
• Jornal
• Em seguida, dentro da base jornal, uma tabela chamada:
• News
Inserindo um registro na base
• Clique na aba INSERE do phpmyadmin e preencha os campos com os dados de
uma notícia. Você pode copiar da internet. Após clique em EXECUTAR
Criando um controller: News
• Na pasta controller, crie um .php com o nome de:
• News.php
O método index
Testando...
• Digite no browser: localhost:8080/news
Criando o Model:
• O Model será para acesso a base de dados:
NewsModel.php e ficará na pasta Models.
• Crie o arquivo abaixo:
O arquivo: NewsModel.php
• Digite o código abaixo no NewsModel.php:
Atributos que receberão o nome da tabela e a
chave primária. Necessário para a conexão
Array com os campos que deverão ser salvos na
tabela.

Atributos que ocultam o registro quando

deletado, sem necessariamente ser excluído
de fato.

Método que busca todos os registros da

tabela.

Nesta linha um único registro é

buscado e trazido em um
array. Também pode ser em
objeto, que veremos adiante.
Configurando o .env
• Abra o arquivo .ENV que está na raiz e procure
pelas linhas abaixo. Em seguida retire o
comentário, retirando o # do inicio da linha e
configure conforme abaixo:
Modificando o método index do
controller News.

OBS: Essa parte será a

subdivisão das views, que
serão criadas a diante.
Criando as views:
• Dentro da pasta views crie a estrutura conforme
baixo:
Criando as views
• Dentro da pasta template, criaremos o arquivo header.php

OBS: A ideia é que esse dois

arquivos sejam o cabeçalho e o
• Em seguida o arquivo footer.php rodapé. E dentro do <body>, ou
seja, entre o header e o footer
teremos nossas outras views
Criando as views
• Agora, copie o link do bootstrap abaixo e coloque na tag
<head> do arquivo header.php
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">

• Ou vá até a página:

https://getbootstrap.com/docs/4.5/getting-started/introduction/
Criando as views
• A view header.php deverá ficar assim:
Bootstrap compilado
• Caso prefira ter o bootstrap baixado, faça o download do bootstrap 4 na
página:
• https://getbootstrap.com/docs/4.5/getting-started/introduction/
• Em seguida, descompacte em uma pasta bootstrap e copie esta pasta
para a pasta public do projeto.

• O link no cabeçalho da view header ficará assim:

Criando as views
• Agora, criaremos a view overview.php, que será responsável por listar
as notícias.
Detalhando o overview.php
• Aqui acontece a navegação no array “$news” que vem do controller
News.php:
• No if verificamos duas situações: SE o array não está vazio E SE é um array.

• Já o foreach percorrerá o array $news colocando cada linha em

$news_item, para que seja preenchida cada linha da tabela com
cada registro vinda da tabela da base de dados.
O resultado...
• Ao informar na URL do browser:
• localhost:8080/news
Criando o restante das views
• Modificando a estrutura dentro da pasta views:
Cadastrando uma notícia
• Formulário de cadastro: create.php
View create
Criando o método create
• No controller News, crie um método create para carregar o
formulário de cadastro.
• O helper(‘form’) indica que vamos trabalhar com envio de
informações via formulário.
Criando o método save
• O método save() será criado no contrller News e fará o salvamento da
notícia:

O que será
tudo isso?
Comentando o método save
• helper(‘form’) – permite trabalhar com formulários, ou seja,
permite o envio de informações via post.
• $rules – relaciona quais são os critério de validação:
• required – campo requerido
• min-length – tamanho mínimo
• max_length – tamanho máximo
• No IF é testado se o a validação foi bem sucedida. Caso seja,
o $model->save() grava as informações, o $data[‘success’]
cria uma msn de sucesso para ser enviado para a view
create logo em seguida. Caso algum ou alguns campos não
passem na validação, os erros são mostrados na view
create.
Modificando o overview.php
• Para carregar a página de cadastro, teremos que modificar a view overview.
Inserir um botão “Cadastrar”, para chamar a view create. Segue abaixo:
Traduzindo as msn de erros
• Entre no link:
https://github.com/natanfelles/CodeIgniter4-pt-BR

Clique no Download Zip e baixe o

arquivo
Traduzindo as msn de erros
• Descompacte o arquivo e copie a pasta pt-br para o
diretório: system\language dentro do CI-4.

• Agora, vá na pasta app\config e abra o arquivo

app.php. Em seguida, altere a linha:

• Para
Testando o cadastro..

Bom, temos um cadastro que deverá

funcionar. Rode sua aplicação, cadastre uma
notícia e veja o resultado. Caso haja algum
erro reveja o código.
E agora, vamos editar a notícia?
Bem, para editarmos a notícia vamos
utilizar a mesma view de cadastro, com
algumas modificações, é claro.
Modificando a view create
• Deveremos modificar a view conforme abaixo:

O método nativo set_value() vai

devolver os dados para a view, quando
a view for enviada com dados
incompatíveis, evitando assim que o
usuário tenha que digitar tudo
novamente.
Criando o método edit.
• Dentro do controller news, crie o método abaixo:
Busco a notícia que foi clicada na view,
na opção editar

Verifico se a busca está vazia, para dar

uma resposta pro usuário.

Aqui monto um array com as

informações da notícias, para ser
enviadas para a view create.
E, por último, o overview
• Criaremos o link para chamar o controller: news/edit com os dados da
notícias devolvidas para a view de cadastro, create.

• Esta coluna deverá ser inserida para a coluna de “Ações”. Será o link da
opção “editar” que aparecerá para cada notícia
Interessante..
• Você deverá observar que o método save do controller News, já está
preparado para salvar uma nova notícia e alterá-la quando for
necessário.
Mas, como?
• O método save() do Model já está preparado para tal procedimento.
Quando você passar o ‘ID’ ele entenderá que você quer que seja feito
um UPDATE, mas quando o ‘ID’ estiver nulo, será feito um INSERT.
Testando a alteração...

Bom, temos uma alteração que deverá

funcionar. Rode sua aplicação, vá até as notícias,
edite uma notícia e veja o resultado. Caso haja
algum erro reveja o código.
Deletando..
• Criando o método delete() no controller News

Método delete que excluirá o registro

Método index para recarregar a view

atualizada, sem o registro que foi
excluído
Deletando..
Crie uma função js excluir() no topo do overview. Esta função servirá para
interromper a exclusão com uma pergunta ao clicar no link para excluir.
E, por último, o overview
• Criaremos o link para chamar o controller: news/delete com os dados
da notícias devolvidas para a view de cadastro, create.

• Esta coluna deverá ser inserida para a coluna de “Ações”. Será o link da
opção “excluir” que aparecerá para cada notícia
Testando o a exclusão...

Bom, temos um delete que deverá funcionar.

Rode sua aplicação, exclua uma notícia e veja
o resultado. Caso haja algum erro reveja o
código.
Paginando a busca
Para criar a paginação é bem simples com o CI-4.
Existe o método do Model chamado paginate(), que
automatiza a paginação. Então, a busca no model
ficará da seguinte forma:

Observe a mudança na busca das

notícias na base de dados. O método
paginate() substituirá findAll() . O
parâmetro define a quantidade de
registros por página.
Paginando a busca
Já no controller será criada um atributo no array
$data:

O método pager permitirá que seja

criados links para as página. Estes
links deverão ser mostrados na view.
Paginando a busca
Já na view será criada uma div para mostrar os links
para navegação nas páginas:

Aqui será mostrado os links para

navegação.
Testando o a paginação...

Bom, temos uma paginação. Liste as notícias

e veja o resultado. Caso haja algum erro
reveja o código.
Mudando o layout da aplicação
• A seguinte mudança será feita:
• A msn que auxilia a exclusão de uma notícia, é mostrada
através de um alert() javascript.
• O que faremos adiante é substitui-la por uma mais
elegante. Uma janela modal bootstrap.
• Preparando a página:
• Deveremos acrescentar uma chamada de Jquery no
footer e head
Modificando o head
• Vá até a view: templates/head e acrescente a linha
abaixo ao <head></head>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXa
Rkfj" crossorigin="anonymous"></script>
Modificando o footer
• Vá até a view: templates/footer e acrescente a linha
abaixo depois da </div>

<script type="text/javascript" src="<?php echo

base_url('bootstrap/js/bootstrap.min.js')?>"></script
>
Trocando a msn de excluir
• Vá até o site: https://getbootstrap.com/docs/4.5/components/modal/
para pegar o código abaixo, ou copie este:
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5> <button type="button"
class="close" data-dismiss="modal" aria-label="Close"> <span aria-
hidden="true">&times;</span> </button>
</div>
<div class="modal-body"> <p>Modal body text goes here.</p> </div>
<div class="modal-footer"> <button type="button" class="btn btn-
secondary" data-dismiss="modal">Close</button> <button
type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Aonde incluir o modal?
• O modal deverá fazer parte do loop do foreach, para que cada registro tenha o
seu modal especificado para cada Id. O código deverá ser inserido logo abaixo
da linha do foreach, modificando assim a msn de exclusão. Note, que o link que
excluir de fato o registro está no button excluir do modal.
Aonde incluir o modal?
• Você deverá observar também, como ficará o link que chamará o modal:
Testando o modal...

Bom, temos um modal. Liste as notícias e

veja o resultado clicando no excluir. Caso haja
algum erro reveja o código.
Modificando o cadastro
• Agora, iremos incremento o projeto com uma view
de cadastro modal.
• Para isso, também trabalharemos com requisições
ajax, que para tanto, falaremos um pouco da
biblioteca ajax.
Configurando o Jquery
• Antes de tudo, devemos introduzir a chamada da
biblioteca Jquery, que podemos encontra-la em:
• https://www.w3schools.com/jquery/jquery_get_started.
asp
• Copie e coloque no <head> do templates/header
Criando a view modal
• Dentro do projeto, criaremos uma view chamada:
create_modal, com o código do modal que iremos
utilizar.
• A ideia é mantermos o código antigo até que o
novo esteja funcionando completamente.
• A estrutura das views deverá ficar assim:
E o código, de onde vem?
• A view create_modal, deverá receber o código de um modal
bootstrap, ficando assim:
• Você poderá pegar este código em:
https://getbootstrap.com.br/docs/4.1/components/modal/
Modificando a view create_modal
• Agora, iremos deixar a view create_modal semelhante a
view create, com o form e os campos de cadastro.
O id do modal deverá
receber o seu nome.

As linhas escondidas, se
referem aos campos do
formulário.
Os campos do form:
• As linhas escondidas:
Carregando o modal
• Para que a view create_modal seja carregada,
deveremos introduzi-la à view overview, através de
uma função php: include_once:
• Note, que o botão Cadastrar, será modificado
conforme abaixo: Linha que introduz a view
create_modal na overview

Modificação que possibilita o O data_target deverá

carregamento da view receber o id do modal.
create_modal.
Feito tudo isso...
• Rode a aplicação e clique no botão Cadastrar. O
resultado deverá ser este:
E para cadastrar de fato?

Agora é com o Ajax. AJAX significa Asynchronous

JavaScript and XML, ou JavaScript e XML
Assíncronos, em bom português. Ele é um conjunto
de técnicas de desenvolvimento voltado para a web
que permite que aplicações trabalhem de modo
assíncrono, processando qualquer requisição ao
servidor em segundo plano.
Como o Ajax Web Funciona?
É importante lembrar que o AJAX não é uma única tecnologia, ou até
mesmo uma linguagem de programação. O AJAX é uma série de técnicas
de desenvolvimento voltadas para web. O sistema geralmente é composto
por:
• HTML/XHTML para linguagem principal e CSS para a apresentação.
• O Document Object Model (DOM) para exibição dinâmica dos dados e
interação.
• XML para a troca de dados e XSLT para a manipulação. Muitos
desenvolvedores começaram a substituir pelo JSON por ser mais
semelhante ao JavaScript.
• O objeto XMLHttpRequest para a comunicação assíncrona.
• Finalmente, a linguagem de programação JavaScript para juntar todas
essas tecnologias.
E como implementamos?
Dentro da view create_modal, deveremos escrever o
seguinte código ao final do arquivo: Quando clicar no botão salvar, a
função submit é chamada

Type: ‘POST’ indica que os dados serão enviados via post

Na url vai o
endereço do
método de
salvar no Em data: os dados do formulário
controller. serão serializados em um array
para serem enviados como Json
definido no dataType

Mensagem de sucesso

Mensagem de Erro
E o controller, como fica?
• O método do controller responsável por efetuar o
salvamento será o save_modal.
• Este método, devido a sua extensão, será mostrado por
partes. A seguir, a estrutura inicial do método:
E agora, dentro do isAjax
Logo no início, cuidamos na validação. Onde, criamos
um arrays com as regras.
E agora, dentro do isAjax
Agora, criaremos um array com os erros, caso a varável $valid esteja
armazenando algum erro. Em seguida, caso não haja erros, os dados serão
gravados e uma $msg de sucesso será devolvida ao modal, através da
função json_encode.
E a função ajax do create_modal.
Aqui, são os arrays que foram
criados no save_modal do
controller. O response é
encarregado de trazer o que
está no json_encode, que é o
msg. E dentro do msg, vem o
error ou o success.

Aqui, manipulamos a
class da div msn, para
colocarmos as mensagens
de erro ou sucesso.
E na view...
• Crie uma div com id = “msn” conforme a baixo, dentro da
view create_modal.
Essa div será palco das
respostas de erro ou sucesso,
que serão enviadas pelo
response do Ajax.
E por fim..
Devemos agora, cuidar em limpar os campos do formulário ao fechar o
modal. Assim, como também, Adicionar uma classe na div msn para torná-
la invisível. O método abaixo é chamado ao fechar o modal.

Ao fechar o modal, o método

addClass adiciona uma classe
“d-none” na div msn para
torná-la invisível. E o each,
que é um laço, limpará os
dados dos campos.
Testando o cadastro via modal...

Bom, temos um cadastro via form modal que

deverá funcionar. Rode sua aplicação, exclua
uma notícia e veja o resultado. Caso haja
algum erro reveja o código.