Como desenvolver MVC modular para web. Básico com CodeIgniter. (Parte 1/4)

Objetivo

No primeiro passo você aprenderá a configurar seu ambiente de desenvolvimento e a baixar e instalar o CodeIgniter.

Neste tutorial, o meu objetivo é conseguir responder as seguintes questões:

  • Como começar a desenvolver para a web?
  • Quais serviços (aplicações) são importantes para um servidor web?
  • Como configurar meu ambiente de desenvolvimento?
  • Qual é uma boa maneira de se organizar um projeto web? Bem vindo ao MVC modular!
  • Como eu crio minha primeira aplicação? Cadastrar Treinadores e seus Pokémons!

Esta é a primeira parte do tutorial. Se deseja ver a segunda, terceira e quarta parte, os links estão logo abaixo:

Se tiver algum interesse nas capas, baixe-as em formato PSD. Edite-as livremente. 🙂

1. Configurar o ambiente de desenvolvimento

Um Ambiente de Desenvolvimento (ou Workspace) é um conjunto de equipamentos e ferramentas para desenvolvimento de softwares. No nosso caso, precisaremos de um computador (equipamento), com as seguintes ferramentas: Apache2 (serve páginas web), PHP7 (linguagem de programação), MySQL (banco de dados) e phpMyAdmin (aplicação para gerenciar bancos de dados MySQL).

Para este tutorial, vou utilizar o Codeanywhere. É um ambiente virtualizado com interface web. Tudo o que você precisará será um navegador atualizado, de preferência o Firefox ou o Google Chrome. Siga os passos:

1.1. Criar workspace

  • Crie uma conta em http://codeanywhere.com/
  • Crie um novo “Project“.
  • Crie um novo Container
    • Vá em File” > “New connection” > “Container”.
    • Defina o “Name” do container. Sem espaços.
    • Em “Stack” selecione “PHP7 / CentOS 6.4“.
    • Clique em “Create“.

1.2. phpMyAdmin

O container com PHP 7 do Codeanywhere já vem como o phpMyAdmin instalado. Para você ter acesso, basta acessar a URL base com “/phpmyadmin” no final.

O usuário será “root” e a senha será “[vazia]”

 

1.3. Executando o Web Server

No Codeanywhere os servidores web e banco de dados estarão sempre ativos enquanto o container que os contém estiver ligado.

Para obter informações de como acessar o servidor web, clique com o botão direito no container e vá em “Info”:

Informações do Container

 

Agora será exibida uma página com todas as informações relevantes para acessar, via browser, seu container e suas aplicações:

Todos os endereços para acessar o container via browser


2. Criar base de dados

2.1. Acessar o phpMyAdmin

Vá para o phpMyAdmin. A url foi fornecida no passo anterior.

O seu login será “root”. E a senha, é só deixar em branco:

phpMyAdmin - User and Pass

2.2. Criar um novo Banco de Dados

Vá em “Databases” na topbar:

C9 - Creating a new MySQL Database 1/2

Crie um novo banco de dados. No meu caso, eu dei o nome de “ci_lesson”:

C9 - Creating a new MySQL Database 2/2

 

2.3. Criar a estrutura do banco

Com o banco de dados “ci_lesson” criado, acesse-o pelo menu lateral, à esquerda:

phpMyAdmin Access Database

Vá para a aba “SQL” no menu superior, cole o script SQL que está abaixo aperte o botão “Go” no canto inferior direito.

CREATE TABLE IF NOT EXISTS `pokemons` (
 `id_pokemon` int(11) NOT NULL AUTO_INCREMENT,
 `id_trainer` int(11) NOT NULL,
 `name` varchar(255) NOT NULL,
 `description` text NOT NULL,
 `nick` varchar(255) DEFAULT NULL,
 `type_1` varchar(255) DEFAULT NULL,
 `type_2` varchar(255) DEFAULT NULL,
 `created` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
 PRIMARY KEY (`id_pokemon`),
 KEY `id_pokemon` (`id_pokemon`),
 KEY `id_trainer` (`id_trainer`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

CREATE TABLE IF NOT EXISTS `trainers` (
 `id_trainer` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(255) NOT NULL,
 `description` text NOT NULL,
 `money` float NOT NULL DEFAULT '0',
 `discovered_pokemons` int(11) NOT NULL DEFAULT '0',
 `created` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
 PRIMARY KEY (`id_trainer`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

ALTER TABLE `pokemons`
 ADD CONSTRAINT `pokemons_ibfk_1` FOREIGN KEY (`id_trainer`) REFERENCES `trainers` (`id_trainer`) ON DELETE CASCADE ON UPDATE NO ACTION;

phpMyAdmin Run a SQL Script

Esta é a estrutura do banco que acabamos de criar:

Database - Pokémon

 


3. Obter e configurar o CodeIgniter + HMVC

Esse passo seria um pouco mais complicado, ainda que exija apenas a leitura da documentação tanto do CodeIgniter, quanto do HMVC.

Por isso, para evitar dificuldades e focar mais no aprendizado do desenvolvimento de aplicações MVC, eu criei um repositório com todos os arquivos necessários para começar um projeto. Basta baixá-lo e configurar corretamenta a URL base e as credenciais de acesso ao banco de dados. E é isso o que vamos fazer:

3.1. Clonar um projeto-base do CodeIgniter + HMVC

Vá no terminal e apenas execute essas duas linhas de comando. A primeira baixa o projeto e a segunda apenas renomeia para um nome mais curto, para facilitar o acesso:

$ git clone https://github.com/thenets/codeigniter-hmvc-bootstrap.git
$ mv codeigniter-hmvc-bootstrap ci

Clonando um projeto do GitHub

 

Como resultado, deve surgir um diretório chamado “ci” na árvore de arquivos no menu esquerdo:

Árvore do projeto

 

3.2. Configurar o CodeIgniter (Base URL + Database)

Primeiro precisamos definir qual é a URL base ou raiz da nossa aplicação. Essa parte não é realmente necessária para fazermos funcionar o CodeIgniter, mas evita diversos tipos de erros, tanto por parte de código, quanto por parte de configuração do servidor.

Essa é a estrutura da URL, no caso deste tutorial:
servidor/aplicação/
http://myphpcontainer-phelip931321.codeanyapp.com/ci/

(...)
$config['base_url'] = 'https://ci-lesson-thenets.c9users.io/ci/';
(...)

Outra coisa precisamos configurar antes de começar a utilizar o CodeIgniter é o banco de dados. Neste exemplo, a única coisa que precisa ser alterada é o usuário, se você estiver usando o Cloud9 e não alterou o nome da base de dados. Basta trocar o usuário e nome da base de dados, como está no exemplo abaixo:

(...)
$db['default'] = array(
 'dsn' = '',
 'hostname' = '127.0.0.1',
 'username' = 'thenets',
 'password' = '',
 'database' = 'ci_lesson',
 'dbdriver' = 'mysqli',
 'dbprefix' = '',
 'pconnect' = FALSE,
 'db_debug' = (ENVIRONMENT !== 'production'),
 'cache_on' = FALSE,
 'cachedir' = '',
 'char_set' = 'utf8',
 'dbcollat' = 'utf8_general_ci',
 'swap_pre' = '',
 'encrypt' = FALSE,
 'compress' = FALSE,
 'stricton' = FALSE,
 'failover' = array(),
 'save_queries' = TRUE
);

Agora temos tudo o que precisamos para começar a desenvolver. Próximo passo será começar com os códigos e criarmos nosso primeiro “Hello World”.

Ir para a Parte 2