Para iniciar o desenvolvimento desse artigo, precisamos ter em mente o conceito do modelo de arquitetura MVC (Model-View-Controller) em PHP e ter instalado em nossa máquina a última versão estável do Yii Framework, que é a 1.1.
Cenário da aplicação
Para este tutorial será criado o portal fictício de notícias Portal News, no qual serão cadastradas notícias diariamente. Estas notícias serão publicadas apenas por usuários administradores e devem possuir apenas uma categoria.
Nota: O sistema operacional utilizado neste exemplo é o Ubuntu 14.04 LTS, com o visual alterado e aplicado o tema Macbuntu. Trataremos aqui também dos passos para quem tem o sistema operacional Windows. Os passos diferenciados em cada sistema serão explicitados.
Para iniciar a aplicação, abra o terminal (no caso do Windows é o prompt de comando no modo de administrador) e navegue até o diretório onde está localizado a pasta do Yii.
Crie a aplicação pelo utilitário Yiic. Para isso, digite o seguinte código presente na Listagem 1.
Listagem 1. Criando aplicação em sistemas operacionais Linux.
sudo ./yiic webapp ../../PortalNews/Após criar o projeto será exibido uma mensagem semelhante à apresentada na Figura 1.
Figura 1. Aplicação criada com sucesso.
Se o sistema operacional da máquina for o Windows, digite o código presente na Listagem 2.
Listagem 2. Criando aplicação em sistemas operacionais Windows.
yiic webapp ../../PortalNews/Estrutura do banco de dados
Este é o ponto crucial do projeto, o banco de dados. É imprescindível para um sistema a modelagem lógica, pois é com ela que será criado todo o fluxo e ações do projeto. Ainda que não seja obrigatório criar o modelo lógico para sua aplicação, é de boa prática fazê-lo. Isso faz com que o software seja bastante denso e coeso. Para este artigo será utilizado o banco de dados MySQL, na versão 5.5.37-0ubuntu0.14.04.1, com o utilitário de gerenciamento PHPMyAdmin.
Nota: Com o intuito de facilitar a didática desta matéria, os assuntos mais específicos relacionados à modelagem e banco de dados terão uma visão superficial.
Na Figura 2 segue o modelo lógico aplicado ao site fictício “PortalNews”. A partir dele será implementado o modelo físico, onde ao invés de entidades têm-se tabelas. A seguir é explicado como devemos criar o modelo lógico corretamente.
Figura 2. Modelo lógico PortalNews.
Na Figura 2 acima é representada a modelagem dos dados que serão utilizados na aplicação. A seguir temos um pequeno resumo sobre o gráfico acima:
- Na entidade ADMINISTRADOR são atribuídas as propriedades: id, nome, e-mail, login e senha; além do fato de que um usuário com nível de administrador do PortalNews publicará artigos para o site. Devido à possibilidade do usuário publicar nenhum ou inúmeros artigos e um artigo ser necessariamente publicado por um usuário(administrador), a cardinalidade final entre as entidades ADMINISTRADOR e NOTÍCIA é definida como N:N.
- A entidade NOTÍCIA é a chave do modelo e por ela é baseada que todas as outras entidades nela presentes agem. Ela possui as propriedades: id, autor, título, data, conteudo. Esta entidade possui dois relacionamentos com outras entidades: a notícia é publicada por pelo menos um e no máximo um administrador, então podemos considerar o relacionamento 1:1 (NOTÍCIA->ADMINISTRADOR) e 0:N(ADMINISTRADOR->NOTÍCIA), caracterizando assim a cardinalidade final, já citada, N:N (muitos-para-muitos).
- NOTÍCIA possui também um relacionamento com a entidade CATEGORIA. Devido ao fato de a notícia possuir no mínimo uma e no máximo uma categoria, assim como a categoria é “possuída” por pelo menos uma ou mais notícias, a cardinalidade final é 1:N (um-para-muitos).
Modelo físico
A partir deste momento toda a lógica do software está pronta, então é hora de partir para o modelo físico. O modelo físico é basicamente a “conversão” dos dados lógicos (entidades) em dados físicos (tabelas). O recurso responsável por armazenar estes dados físicos é o banco de dados.
Então, para criar a base de dados digite o seguinte código presente na Listagem 3.
Listagem 3. Criando base de dados PortalNews.
CREATE DATABASE PortalNews;Uma vez criada a base de dados, é hora de colocar o modelo físico em prática. Antes de começar a escrever as querys (comandos) SQL para criar as tabelas, veja a seguir quais serão as alterações necessárias, sempre baseado no modelo lógico criado anteriormente:
- A entidade ADMINISTRADOR torna-se uma tabela
própria, contendo como campos (colunas): id, nome, e-mail, login e senha.
O campo id será chave primária, com autoincremento. Os campos: nome,
e-mail, login e senha serão todos do tipo VARCHAR(300), ou seja, contendo
no máximo 300 caracteres.
Nota: Não é uma boa prática armazenar senhas no banco de dados. O aconselhável é criptografar a senha antes de gravá-la no banco. Para uso didático, neste artigo, as senhas serão gravadas diretamente na base de dados. - A entidade NOTÍCIA também se tornará uma tabela, onde nela possuirá os campos (colunas): id, idAutor, idCategoria, titulo, data, conteudo. Assim como em ADMINISTRADOR, o campo id será chave primária, com autoincremento. O campo titulo será do tipo VARCHAR(400), ou seja, poderá possuir no máximo 400 caracteres, enquanto que o campo conteudo será do tipo TEXT.
- O atributo autor e a entidade CATEGORIA, presentes no modelo lógico, transformam-se aqui em idAutor e idCategoria, respectivamente. Estes dois serão chaves estrangeira, que se referenciam às tabela de Administradores e Categorias, respectivamente. Por último, o campo data será do tipo TIMESTAMP, com o valor default (padrão) e o atributo on update CURRENT_TIMESTAMP. Isso quer dizer que ao inserir ou atualizar alguma linha na tabela esse campo será alterado para o horário atual, no formato TIMESTAMP.
- A entidade CATEGORIA será uma tabela simples, que conterá apenas dois campos: id e nome. O campo id, como em todas as outras tabelas, será chave primária, com autoincremento. O campo nome será do tipo VARCHAR(200) e poderá possuir no máximo 200 caracteres.
Agora que já está clara a maneira com a qual cada entidade será representada no modelo físico, vamos à codificação. Veja o código da Listagem 4 para criar a tabela de usuários administradores do PortalNews.
Nota: É de suma importância seguir a ordem cronológica obedecida aqui para criar-se as tabelas. Devido ao fato de uma delas possuir chave(s) estrangeira(s), ocorrerá problemas ao executar suas querys (comandos) SQL em ordem inversa a proposta aqui.
Listagem 4. Criando tabela de Administradores.
CREATE TABLE IF NOT EXISTS `Administrador` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nome` varchar(300) NOT NULL,
`email` varchar(300) NOT NULL,
`login` varchar(300) NOT NULL,
`senha` varchar(300) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;Agora, siga o código da Listagem 5 para criar a tabela de Categorias.
Listagem 5. Criando tabela de Categorias.
CREATE TABLE IF NOT EXISTS `Categoria` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nome` varchar(200) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;Por último, é hora de criar a tabela de Notícias. Confira na Listagem 6.
Listagem 6. Criando tabela de Notícias.
CREATE TABLE IF NOT EXISTS `Noticia` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`idAutor` int(11) NOT NULL,
`idCategoria` int(11) NOT NULL,
`data` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
`titulo` varchar(400) NOT NULL,
`conteudo` text NOT NULL,
PRIMARY KEY (`id`),
KEY `idAutor` (`idAutor`,`idCategoria`),
KEY `idCategoria` (`idCategoria`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;Ativação dos utilitários Gii, MySQL e URL personalizada
Agora que a aplicação e o modelo de dados estão criados, faz-se necessário o uso do utilitário Gii, que é um script do Yii responsável por gerar models, controllers, CRUDs e modules. Primeiramente acesse localhost/PortalNews para ver se a aplicação está rodando sem problemas. Confira na Figura 3.
Figura 3. Página inicial do site.
Se a aplicação estiver funcionando corretamente, vá até o diretório do projeto e abra o arquivo main.php, presente na pasta protected/config. Utilize o editor de texto de sua preferência, aqui será utilizado o Sublime Text 2, que pode ser baixado em seu site oficial (http://www.sublimetext.com/2).
Pesquise pelo trecho “uncomment the following to enable the Gii tool”. Após achá-lo descomente o trecho de código correspondente. Atente-se para alterar a senha através do parâmetro password. Aqui a senha utilizada será 123. O código descomentado ficará como na Listagem 7.
Listagem 7. Ativando utilitário Gii.
'gii'=>array(
'class'=>'system.gii.GiiModule',
'password'=>'123',
// If removed, Gii defaults to localhost only. Edit carefully to taste.
'ipFilters'=>array('127.0.0.1','::1'),
),Agora ative o MySQL descomentando as linhas referentes à ele. Veja na Listagem 8 como fica o código descomentado.
Listagem 8. Ativando o serviço MySQL.
'db'=>array(
'connectionString' => 'mysql:host=localhost;dbname=PortalNews',
'emulatePrepare' => true,
'username' => 'root',
'password' => '123',
'charset' => 'utf8',
),Para ativar a URL estilo “controller/action”, descomente o código da Listagem 9.
Listagem 9: Ativando URL estilo “controller/action”.
'urlManager'=>array(
'urlFormat'=>'path',
'rules'=>array(
'<controller:\w+>/<id:\d+>'=>'<controller>/view',
'<controller:\w+>/<action:\w+>/<id:\d+>'=>'<controller>/<action>',
'<controller:\w+>/<action:\w+>'=>'<controller>/<action>',
),
),Criação dos Models
Acesse localhost/PortalNews/index.php/gii para acessar o Gii e criar os models. Confira na Figura 4 como é a página de login do Gii.
Figura 4. Tela inicial Gii.
Após logar-se no Gii com a senha definida anteriormente, clique em “Model Generator”, localizado à esquerda da tela. Confira na Figura 5 a página carregada.
Figura 5. Página “Model Generator” carregada.
No Gii é muito simples gerar models, basta colocar o nome da tabela em “Table Name”, automaticamente o nome da classe modelo (model) é preenchido. Após isso, basta clicar em “preview” e depois em “generate”. Uma mensagem semelhante à Figura 6 será exibida.
Figura 6. Model Administrador gerado com sucesso.
Execute este passo mais duas vezes e crie os models Noticia e Categoria, de acordo com as tabelas gravadas no banco de dados.
Criação dos Controllers e CRUD
Para criar os Controllers e CRUD, os passos são praticamente os mesmos. Preencha o “Controller ID” com o nome desejado. É uma boa pŕatica dar o nome ao Controller o mesmo nome da classe modelo (model), haja visto que o Yii adiciona automaticamente o sufixo “Controller” ao arquivo controlador.
Realize este passo mais duas vezes para gerar os controladores e CRUDs Categoria e Noticia. Após gerar o controller será exibida uma mensagem como na Figura 7.
Figura 7. Controller Administrador gerado com sucesso.
Cadastro de Usuários Administradores
Uma vez gerado os models, controllers e views necessários para rodar a aplicação, cadastre um novo usuário no sistema. Acesse localhost/PortalNews/index.php/administrador/create, entre com o login e senha para cadastrar um novo usuário.
Nota: A autenticação dos usuários por login e senha não será visto neste artigo, pois causaria uma larga extensão deste. Utilize o login padrão do Yii para se logar: admin/admin ou demo/demo.
Após logar-se no sistema, será carregada a página de cadastro de usuários e posteriormente a tela com usuário cadastrado. Confira nas Figuras 8 e 9.
Figura 8. Formulário de cadastro do Administrador.
Figura 9. Usuário de teste cadastrado como Administrador.
Cadastro de Categorias
Para cadastrar novas categorias no sistema acesse localhost/PortalNews/index.php/categoria/create, dê um nome à categoria e então clique em “Create”. Confira na Figura 10 a página de categoria cadastrada.
Figura 11. Formulário para cadastrar notícias.
Para tornar o formulário mais intuitivo e fácil de se cadastrar notícia, será colocado dois checkboxes com os nomes dos Autores e Categorias cadastradas, ao invés de mandar os textboxes criadas pelo padrão do Yii. Veja o código das Listagens 10, 11 e 12.
Com o intuito de tornar mais dinâmico os formulários da sua aplicação, o Yii cria o arquivo CREATE (localizado em protected/views/nomeDoControlador), que é o responsável por renderizar uma Visão Parcial, ou seja, é renderizado uma view “dentro” da outra. Esta ação ocorre através do método renderPartial(), da classe Controller. Devido a isso, é necessário primeiro passar os dados para o CREATE e depois encaminhá-los até o _form.php .
Listagem 10. Passando os Autores e Categorias para o arquivo CREATE, do cadastro de notícias.
// Action CREATE do model Noticia, arquivo NoticiaController.php
public function actionCreate()
{
$model=new Noticia;
$categorias = Categoria::model()->findAll();
$autores = Administrador::model()->findAll();
// Uncomment the following line if AJAX validation is needed
// $this->performAjaxValidation($model);
if(isset($_POST['Noticia']))
{
$model->attributes=$_POST['Noticia'];
if($model->save())
$this->redirect(array('view','id'=>$model->id));
}
// Passando os dados pegos da actionCreate para a View Create.
$this->render('create',array(
'model'=>$model,
'categorias'=>$categorias,
'autores'=>$autores,
));
}Listagem 11. Passando os dados resgatados na view Create.
// O código acima foi omitido para melhor visualização
<h1>Create Noticia</h1>
<?php $this->renderPartial('_form', array('model'=>$model, 'autores'=>$autores, 'categorias'=>$categorias)); ?>Listagem 12. Formulário com as checkboxes inseridas.
// Variáveis autores e categorias são adindas da view Create.
<div class="row">
<select name="Noticia[idAutor]">
<?php for ($i=0; $i < count($autores); $i++): ?>
<option value="<?php echo $autores[$i]['id']; ?>"><?php echo $autores[$i]['nome']; ?></option>
<?php endfor; ?>
</select>
</div>
<div class="row">
<select name="Noticia[idCategoria]">
<?php for ($i=0; $i < count($categorias); $i++): ?>
<option value="<?php echo $categorias[$i]['id']; ?>"><?php echo $categorias[$i]['nome']; ?></option>
<?php endfor; ?>
</select>
</div>Com isso o formulário ficou conforme o mostrado na Figura 12.
Figura 12. Formulário para cadastrar notícias.
Esta foi uma breve introdução sobre como funcionam os bancos de dados relacionais e como o Yii Framework tratam estes dados.
Gostou do artigo? Quer dar sua opinião? Deixe seu comentário e até a próxima!
