HUFERSIL.WEBDEVELOPER - Soluções em desenvolvimento Web - Tecnologia - TI PHP, Lumine Framework e afins http://www.revistaphp.com.br pt-br <![CDATA[Criando um catálogo de produtos com Lumine e CodeIgniter - Parte 3]]> Hoje veremos:

Como organizar nossos diretórios
Criar uma tela de login para a parte administrativa

 

Como organizar nossos diretórios

Nesta aplicação, iremos criar uma área administrativa e uma área publica.

A parte administrativa, iremos chamar de admin. A pública, de site.

Tudo que está dentro da pasta "application" não poderá ser acessado externamente quando o sistema estiver em produção. Portanto, as imagens, arquivos CSS e JavaScript deverão estar fora da pasta "application". Então, criaremos uma pasta para podermos armazenar estes tipos de arquivo.

Tendo isto em mente, crie a seguinte estrutura de diretórios:

  • c:\www\vitrine\assets
  • c:\www\vitrine\assets\css
  • c:\www\vitrine\assets\imagens
  • c:\www\vitrine\assets\js
  • c:\www\vitrine\application\views\admin
  • c:\www\vitrine\application\views\site

Para cada controller criada, seja administativa ou pública, iremos também criar um diretório na área correspondente para podermos armazenar as visualizações de comportamento. Cada método dentro de uma controller é um comportamento, e ficará extremamente mais simples de manter o sistema se criarmos um arquivo view para cada método.

Seguindo esta linha de raciocínio, criaremos mais um diretório:

  • c:\www\vitrine\application\views\admin\login

Como podemos ver facilmente, este diretório armazenará os arquivos de visualização da controller "login" da parte administrativa.

Para facilitarmos o desenvolvimento, vamos criar um "template principal" para a parte administrativa. As visualizações de comportamento de cada método serão, na verdade, trechos menores que irão ser incorporados dentro do template principal. Em outras palavras, vamos fazer um "include" do trecho a ser visualizado dentro do template principal. Este template principal já terá as partes mais importantes, como topo, rodapé, menu principal de navegação, etc. As visualizações terão somente o "miolo", que serão incorporadas ao template.

Antes de criarmos o template, abaixo o arquivo CSS usado para o admin. Salve o arquivo em assets/css/admin.css

@CHARSET "UTF-8";
/*************************************/
/* Tela de Login
/*************************************/
* {
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	font-style: normal;
}
.login-box {
	margin-top: 200px;
	width: 450px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #999999;
	padding: 5px;
	border-radius: 5px;
}
.login-box p {
	clear: both;
	padding-bottom: 5px;
}
.login-box label {
	display: block;
	float: left;
	width: 120px;
	padding-top: 2px;
	padding-right: 10px;
	text-align: right;
}
.login-box #btnLogin {
	margin-left: 160px;
	padding: 4px;
}
.login-box h1 {
	border-radius: 5px;
	font-size: 14px;
	font-weight: bold;
	color: #555555;
	margin-bottom: 10px;
	background-color: #EFEFEF;
	padding: 4px 4px 4px 25px;
	background-image: url("http://www.iconfinder.com/ajax/download/png/?id=36090&s=16");
	background-position: 3px center;
	background-repeat: no-repeat;
}
.login-box .erro{
	padding: 4px;
	background-color: #FFFF55;
	color: #FF0000;
	font-weight: bold;
	margin-bottom: 10px;
}

Nosso arquivo de template por enquanto será bem simples, para poder facilitar nossos estudos. Vamos criar uma estrutura básica e fazer a verificação de existência do arquivo que será incluido. Salve este arquivo em application/views/admin/template.php:

	<!DOCTYPE html>
	<html>
	<head>
		<title>Sistema de Gerenciamento de Conteudo</title>
		<meta charset="UTF-8" />
		
		<link rel="stylesheet" type="text/css"  href="<?php echo base_url('assets/css/admin.css'); ?>" />
		
	</head>
	<body>

	<?php 
	// o arquivo de template a ser incluido foi informado?
	if(!empty($_template)){
		// procuramos ele a partir deste arquivo
		$_template = dirname(__FILE__) . '/' . $_template;
		// se existir, fazemos o include
		if(file_exists($_template)){
			include $_template;
			
		// se nao existir, enviamos uma mensagem
		} else {
			echo 'Template "', $_template, '" não existe!';
		}

	// se nao informou, enviamos uma mensagem
	} else {
		echo 'Template nao informado!';
	}
	?>

	</body>
	</html>

Pronto! Agora nossas visualizações de comportamento (views) da área administrativa serão bem mais simples!

Vamos agora criar nossa visualização da tela de login. Salve o arquivo em application/views/admin/login/index.php

<form action="<?php echo site_url('admin/login/do_login'); ?>" method="post">
	<div class="login-box">
		<h1>Efetue seu login</h1>
		<?php 
		// pegando o segmento de informacao na URL
		switch($this->uri->segment(4)){
			case 'informe_seus_dados':
				echo '<div class="erro">Usuário ou senha em branco</div>';
			break;
			case 'usuario_nao_encontrado':
				echo '<div class="erro">Nenhum usuário encontrado com as credenciais informadas</div>';
			break;
		}
		?>
		<p>
			<label for="email">E-mail</label>
			<input type="email" value="" id="email" name="email" />
		</p>
		<p>
			<label for="senha">Senha</label>
			<input type="password" value="" id="senha" name="senha" />
		</p>
		
		<input type="submit" value="Efetuar Login" id="btnLogin" name="btnLogin" />
	</div>
</form>

Note que para este arquivo fizemos somente o formulário de login sem a necessidade de outras informações, como topo, rodapé, etc, pois estas informações já estão no arquivo template.php. Bem mais simples, não?.

Agora que já criamos nosso arquivo de visualização principal (template.php) e login (login/index.php), vamos criar nossa controller para podermos fazer o login no sistema.

Para isso, crie uma controller chamada login.php com o conteúdo abaixo:

<?php
/**
* Controller para efetuar o login e logout do sistema administrativo.
*
* @author Hugo Ferreira da Silva
* @link http://www.hufersil.com.br
*
*/
class Login extends AdminController {
	/**
	 * Carrega a visualização de login
	 * 
	 * @author Hugo Ferreira da Silva
	 */
	public function index(){
		$this->display('login/index');
	}
	
	/**
	 * Efetua a validação do usuário no sistema e efetua o login do mesmo.
	 * 
	 * Caso as credenciais estejam corretas, gravamos as informações de login
	 * na sessão.
	 * 
	 * @author Hugo Ferreira da Silva
	 */
	public function do_login(){
		// nova instancia de usuario
		$user = new Usuario();
		
		// pegamos as informações do formulario.
		$user->email = $this->input->post('email');
		$user->senha = $this->input->post('senha');
		
		// se uma informação ficou em branco,
		// redirecionamos para a tela de login
		if(empty($user->email) || empty($user->senha)){
			redirect('admin/login/index/informe_seus_dados');
		}
		
		// colocamos a senha em md5
		$user->senha = md5($user->senha);
		
		// faz a consulta obtendo o numero de resultados
		$total = $user->find(true);
		
		// se não encontrou nada
		if( $total == 0 ){
			redirect('admin/login/index/usuario_nao_encontrado');
		}
		
		// se encontrou, colocamos os dados do usuario na sessão
		$_SESSION['usuario'] = $user->toArray();
		
		// redirecionamos o usuario para a tela de produtos.
		redirect('admin/produtos/index');
	}
	
	/**
	 * Efetua o logout do usuario
	 * 
	 * Limpa os dados da seção e envia o usuário para a tela de login
	 * 
	 * @author Hugo Ferreira da Silva
	 */
	public function do_logout(){
		$_SESSION = array();
		redirect('admin/login/index');
	}
}

Salve este arquivo como application/controllers/admin/login.php

Se tudo foi seguido corretamente, ao acessar a URL http://localhost/vitrine/admin/login/index você deverá ver a tela abaixo:

Para praticar, tente fazer a controller de produtos com um método index e uma visualização simples.

Na próxima matéria vamos fazer a controller de usuários.

@braços e fiquem com Deus!

]]> http://www.hufersil.com.br/post/criando_catalogo_produtos_lumine_codeigniter_parte_3 <![CDATA[Criando um catálogo de produtos com Lumine e CodeIgniter - Parte 2]]>  Dando continuidade ao post anterior, vamos ver hoje como:

Configurar a base do CodeIgniter
Criar uma controller base
Criar uma controller base de administração
 
Para não estender muito o tutorial e ficar complicado, a tela de login vamos deixar para o próximo post, juntamente sobre como configurar as "Views" de nosso projeto.

Configurar a base do CodeIgniter

Para torar as URL's mais amigáveis, vamos tirar o "index.php".
É necessário que o ModRewrite do Apache esteja ativo.
Crie um arquivo chamado ".htaccess" na pasta raiz do projeto (c:\www\vitrine).
Coloque o conteúdo abaixo dentro deste arquivo:

 

RewriteEngine On

RewriteCond $1 !^(index\.php|images|css|robots\.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$2 [L]

Com isto, toda requisição feita para o servidor que não possua um arquivo ou pasta existente será redirecionada para o CodeIgniter tratar.

A segunda coisa que iremos fazer, será configurar a URL base do nosso projeto.
Abra o arquivo "application/config/config.php".

Altere a linha:

$config['index_page'] = 'index.php';

// para

$config['index_page'] = '';

Com isto, o segmento "index.php" não será mais apresentado quando formos construir URL's internas com a funções de criação de link do CodeIgniter.

Agora, precisamos colocar no arquivo "application/config/autoload.php" quais bibliotecas iremos carregar por padrão.

Ele nos permite indicar vários tipos de arquivos, mas por enquanto, vamos nos atentar somente à algumas bibliotecas que já vem com o CI.

Abra o arquivo mencionado e procure pela linha:

$autoload['libraries'] = array('');
// e troque para 
$autoload['libraries'] = array('uri');

A biblioteca URI nos dá acesso aos "segmentos" formados pelo endereço acessado pelo usuário.
Exemplo: quando acessamos a URL:
http://www.hufersil.com.br/post/nome_do_post

Você pode recuperá-la com o CodeIgniter desta forma:

echo $this->uri->segment(1); // exibirá "post";
echo $this->uri->segment(2); // exibirá "nome_do_post";

Entre outras funções úteis que veremos durantes os tutoriais. Você pode conferir a lista de métodos na documentação do CodeIgniter.

Depois, procure:

$autoload['helper'] = array('');
// e troque para 
$autoload['helper'] = array('url');

Este "helper" na verdade é um conjunto de funções de auxilio na criação de URL's.
Você também pode ver melhor quais são estes métodos na documentação do CodeIgniter (http://codeigniter.com/user_guide/helpers/url_helper.html)

A última coisa que precisamos configurar no momento é a "rota" padrão do CI.
Como vamos começar primeiro pelo admin, vamos configurar a rota padrão sendo a nossa tela de autenticação.
Para isto, abra o arquivo "application/config/routes.php".

Procure pela linha:

$route['default_controller'] = "welcome";

// e troque para

$route['default_controller'] = "admin/login/index";

Isto fará com que o CodeIgniter procure na pasta "admin" uma controller chamda "login" e acesse o método "index".

Pronto! A configuração básica do CI está montada!

Agora podemos avançar um pouco mais.

Criar uma controller base

A controller que vem com o CodeIgniter é bem básica.
Para melhorarmos o nosso trabalho, vamos criar a nossa própria controller base extendendo a controller base do CI.

Por padrão, quando queremos que o CodeIgniter carregue nossas implementações ao invés das implementações dele, criamos nossas classes com o prefixo "MY_".
Este prefixo também pode ser alterado no arquivo de configuração (application/config/config.php), mas por enquanto vamos deixar o padrão.

O que queremos é "criar nossa controller base", extendendo a classe CI_Controller (que é base padrão de todas as controllers do CI).
Então, para isso, crie um arquivo chamado "MY_Controller.php" dentro da pasta "application/core". Sua estrutura deverá ser:
C:\www\vitrine\application\core\MY_Controller.php

Agora, implemente a classe abaixo (nos comentários estão as responsabilidades de cada método implementado):

/**
 * Controller base para as implementações de nosso Catalogo de Produtos
 * 
 * @author Hugo Ferreira da Silva
 * @link http://www.hufersil.com.br
 *
 */
class MY_Controller extends CI_Controller {

	/**
	 * Indica se a sessão já foi iniciada
	 * @var boolean
	 */
	protected static $sessionStarted = false;

	/**
	 * Indica o arquivo de layout padrão
	 * @var string
	 */
	protected $layoutFile = 'template.php';
	
	/**
	 * Dados para serem enviados para o template
	 * @var array
	 */
	protected $data = array();
	
	/**
	 * Construtor
	 * 
	 * @author Hugo Ferreira da Silva
	 */
	public function __construct(){
		// chamamos o construtor pai
		parent::__construct();
		
		// carregamos a configuracao de Lumine
		// o CI já cria a instancia
		$this->load->library('Lumine_ApplicationContext');
		
		// se a sessão ainda não foi iniciada
		if(!self::$sessionStarted){
			// iniciamos e marcamos como iniciada
			session_start();
			self::$sessionStarted = true;
		}
	}
	
	/**
	 * Adiciona um valor para ser enviado para o template
	 * 
	 * @param string $key Nome da chave
	 * @param mixed $value Valor a ser enviado
	 * @author Hugo Ferreira da Silva
	 */
	public function assign($key, $value){
		$this->data[$key] = $value;
	}
	
	/**
	 * Renderiza uma view.
	 * 
	 * @link http://codeigniter.com/user_guide/general/views.html
	 * 
	 * @param string $tpl Nome do template "miolo".
	 * @param boolean $return Indica se vamos renderizar na tela (false) ou retornar o resultado como string (true) 
	 * @author Hugo Ferreira da Silva
	 * @return string Resultado da renderização
	 */
	public function display($tpl, $return = false){
		// so para garantir que a extensao sempre existirá
		$tpl = preg_replace('@\.php$@i', '', $tpl) . '.php';
		$tpl = (empty($this->uriSession) ? '' : trim($this->uriSession, '/') . '/') . $tpl;
		$this->assign('_template', $tpl);
		
		return $this->load->view($this->layoutFile, $this->data, $return);
	}
}

E esta será nossa controller base.
Estes pequenos métodos farão uma grande diferença enquanto estivermos trabalhando com nossas controllers finais.

Criar uma controller base de administração

A controller base nos fornece comportamentos comuns entre o que iremos usar no administrador e na parte pública.
Porém, precisamos de um comportamos um pouco mais especializado na tela área de administração.
Para isso, criaremos uma controller base de administração.

Adicione ao final do arquivo
C:\www\vitrine\application\core\MY_Controller.php

A linha:

require_once dirname(__FILE__) . '/AdminController.php';

Precisamos colocar neste arquivo porque o CI não tem como carregar este arquivo de forma automática, mas ele carrega automaticamente a MY_Controller.
Quando formos implementar a parte publica, veremos como fazer este carregamento de forma condicional.

Agora, crie um arquivo na estrutura:
C:\www\vitrine\application\core\AdminController.php

E coloque o conteúdo abaixo dentro deste arquivo criado:

/**
 * Controller base para seção de administração
 *
 * @author Hugo Ferreira da Silva
 * @link http://www.hufersil.com.br
 *
 */
class AdminController extends MY_Controller {
	
	/**
	 * Caminhos que os usuários poderão acessar sem a necessidade
	 * de estarem autenticados.
	 * 
	 * Cada caminho é uma entrada no array em forma de expressão regular.
	 * O mostrado abaixo dá acesso sem necessidade de autenticação 
	 * a qualquer método da controller "login"
	 * 
	 * @var array
	 */
	protected $allowedPaths = array(
		'^admin/login/.*?'
	);
	
	/**
	 * Contrutor
	 * 
	 * @author Hugo Ferreira da Silva
	 */
	public function __construct(){
		// chamamos o construtor "pai"
		parent::__construct();
		
		// indicamos o arquivo de layout da área de administração
		$this->layoutFile = 'admin/template.php';
		
		// verifica se a permissão do usuário de acessar a URL indicada
		$this->verificarPermissao();
		
		// ja colocamos os dados do usuario da sessão para
		// podermos renderizar nos templates
		$this->assign('_usuario', $this->getUsuarioSessao());
	}
	
	/**
	 * Recupera os dados do usuário logado
	 * 
	 * @author Hugo Ferreira da Silva
	 * @return array
	 */
	protected function getUsuarioSessao(){
		return empty($_SESSION['usuario']) ? null : $_SESSION['usuario'];
	}
	
	/**
	 * Verifica a permissão de acesso do usuário.
	 * 
	 * 
Por enquanto, somente verificamos se o usuário está logado
;
	 * 
	 * @author Hugo Ferreira da Silva
	 */
	protected function verificarPermissao(){
		$user = $this->getUsuarioSessao();
		$uri = $this->uri->uri_string();
		
		// se não está logado e esta acessando uma URL não permitida.
		if(empty($user) && !preg_match('@' . implode('|', $this->allowedPaths) . '@', $uri)){
			// limpa a sessão
			$_SESSION = array();
			// envia para tela de login
			redirect('admin/login/index/sem_permissao');
		}
	}
}

Agora, nosso trabalho dentro da parte de administração será bem mais fácil ;)
No próximo post veremos como organizar nossas views e criaremos nossa tela de login.

@braços e fiquem com Deus!

]]> http://www.hufersil.com.br/post/geracao_imagem_drag_drop_jquery_jqueryui_php_parte_2 <![CDATA[Criando um catálogo de produtos com Lumine e CodeIgniter.]]> Criando um catálogo de produtos com Lumine e CodeIgniter.

Como tive vários pedidos para mostrar melhor uma forma de integrar o Lumine com CodeIgniter, resolvi fazer um exemplo um pouco mais complexo, que estaremos montando ao longo de alguns tutoriais.
Neste primeiro artigo, iremos:
Baixar os pacotes necessários e configurando a pasta corretamente;
Criar o banco de dados;
Efetuar a engenharia reversa;
Testar se tudo está correto.

Baixar os pacotes necessários e configurando a pasta corretamente

A pasta raiz durante esta série de tutoriais será a "C:\www\vitrine", sendo "C:\www" o document-root do servidor web.
Sendo assim, a nossa URL padrão será: http://localhost/vitrine/

Para este exemplo, vamos utilizar o Lumine versão 1.6 e CodeIgniter 2.1.0.

Baixe primeiramente o CodeIgniter e descompacte dentro da pasta raiz. Sua estrutura de pastas e arquivos deverá ser:

C:\www\vitrine\application
C:\www\vitrine\system
C:\www\vitrine\user_guide
C:\www\vitrine\index.php
C:\www\vitrine\license.txt

Se quiser, você poderá apagar a pasta "user_guide". Não usaremos ela durante o desenvolvimento.
Feita esta estrutura, baixe o Lumine, versão 1.6

 

Descompacte os arquivos de Lumine dentro do diretório "C:\www\vitrine\application\libraries\lumine".

A estrutura final deverá ficar semelhante a 

C:\www\vitrine\application\libraries\lumine\lib\
C:\www\vitrine\application\libraries\lumine\changelog.txt
C:\www\vitrine\application\libraries\lumine\Lumine.php

Pronto. Agora vamos criar o nosso banco de dados.

Criar o banco de dados.

Crie um banco de dados chamado "vitrine".

Importe a estrutura abaixo para criar as tabelas necessarias.

Este "dump" já vem com um usuário padrao (e-mail: hufersil@gmail.com, senha: "123456").

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;
/*!40103 SET TIME_ZONE='+00:00' */;
/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;

--
-- Table structure for table `categoria`
--

DROP TABLE IF EXISTS `categoria`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `categoria` (
  `codcategoria` int(11) NOT NULL AUTO_INCREMENT,
  `codpai` int(11) DEFAULT NULL,
  `nome` varchar(100) DEFAULT NULL,
  `permalink` varchar(100) DEFAULT NULL,
  `ordem` int(11) DEFAULT NULL,
  PRIMARY KEY (`codcategoria`),
  KEY `codpai` (`codpai`),
  CONSTRAINT `categoria_ibfk_1` FOREIGN KEY (`codpai`) REFERENCES `categoria` (`codcategoria`) ON DELETE CASCADE ON UPDATE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
/*!40101 SET character_set_client = @saved_cs_client */;

--
-- Dumping data for table `categoria`
--

LOCK TABLES `categoria` WRITE;
/*!40000 ALTER TABLE `categoria` DISABLE KEYS */;
/*!40000 ALTER TABLE `categoria` ENABLE KEYS */;
UNLOCK TABLES;

--
-- Table structure for table `foto`
--

DROP TABLE IF EXISTS `foto`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `foto` (
  `codfoto` int(11) NOT NULL AUTO_INCREMENT,
  `codproduto` int(11) NOT NULL,
  `thumb` varchar(100) NOT NULL,
  `grande` varchar(100) NOT NULL,
  `ordem` int(11) NOT NULL DEFAULT '1',
  PRIMARY KEY (`codfoto`),
  KEY `codproduto` (`codproduto`),
  CONSTRAINT `foto_ibfk_1` FOREIGN KEY (`codproduto`) REFERENCES `produto` (`codproduto`) ON DELETE CASCADE ON UPDATE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
/*!40101 SET character_set_client = @saved_cs_client */;

--
-- Dumping data for table `foto`
--

LOCK TABLES `foto` WRITE;
/*!40000 ALTER TABLE `foto` DISABLE KEYS */;
/*!40000 ALTER TABLE `foto` ENABLE KEYS */;
UNLOCK TABLES;

--
-- Table structure for table `produto`
--

DROP TABLE IF EXISTS `produto`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `produto` (
  `codproduto` int(11) NOT NULL AUTO_INCREMENT,
  `codcategoria` int(11) NOT NULL,
  `nome` varchar(200) DEFAULT NULL,
  `permalink` varchar(200) DEFAULT NULL,
  `descricao` text,
  `valor` float DEFAULT NULL,
  `observacoes_tecnicas` text,
  `data_cadastro` datetime DEFAULT NULL,
  PRIMARY KEY (`codproduto`),
  KEY `codcategoria` (`codcategoria`),
  CONSTRAINT `produto_ibfk_1` FOREIGN KEY (`codcategoria`) REFERENCES `categoria` (`codcategoria`) ON DELETE CASCADE ON UPDATE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
/*!40101 SET character_set_client = @saved_cs_client */;

--
-- Dumping data for table `produto`
--

LOCK TABLES `produto` WRITE;
/*!40000 ALTER TABLE `produto` DISABLE KEYS */;
/*!40000 ALTER TABLE `produto` ENABLE KEYS */;
UNLOCK TABLES;

--
-- Table structure for table `usuario`
--

DROP TABLE IF EXISTS `usuario`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `usuario` (
  `codusuario` int(11) NOT NULL AUTO_INCREMENT,
  `nome` varchar(150) NOT NULL,
  `email` varchar(150) NOT NULL,
  `senha` varchar(32) NOT NULL,
  PRIMARY KEY (`codusuario`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
/*!40101 SET character_set_client = @saved_cs_client */;

--
-- Dumping data for table `usuario`
--

LOCK TABLES `usuario` WRITE;
/*!40000 ALTER TABLE `usuario` DISABLE KEYS */;
INSERT INTO `usuario` VALUES (1,'Hugo Silva','hufersil@gmail.com','e10adc3949ba59abbe56e057f20f883e');
/*!40000 ALTER TABLE `usuario` ENABLE KEYS */;
UNLOCK TABLES;
/*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */;

/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;

Efetuando a engenharia reversa

 

Com a estrutura do banco de dados criada, fica fácil gerar as classes de acesso.
Para isso, basta efetuar a engenharia reversa que Lumine (http://www.hufersil.com.br/lumine/engenharia_reversa) já oferece.
Acesse pelo browser: http://localhost/vitrine/application/libraries/lumine/lib/ui/reverse.php

Nota: caso apareça a mensagem "Forbidden", é porque existe um arquivo chamado ".htaccess" dentro do diretório "application". 
Renomeie este arquivo para poder acessar os arquivos dentro da pasta "application" durante o processo de desenvolvimento.
Quando terminar e for colocar em produção, restaure este arquivo.

Deverá ser exibida a seguinte tela:

Preencha as abas como mostrado abaixo:

 

Na aba "Tabelas", clique em "Atualizar Tabelas".

Deverão ser exibidas as tabelas em seu banco de dados "vitrine", como na tela abaixo:

 

 

Selecione todas elas e clique no botão "Gerar Classes". Você será direcionado para a aba "Log de geração" onde poderá acompanhar o que Lumine está fazendo.

Caso corra tudo sem problemas, a mensagem final deverá ser "Engenharia reversa terminada!".

 

Nota: o servidor web deverá ter permissão de escrita nas pastas:
C:\www\vitrine\application
C:\www\vitrine\application\libraries
C:\www\vitrine\application\models

Os seguintes arquivos deverão ter sido criados:
 
C:\www\vitrine\application\lumine-conf.php
C:\www\vitrine\application\libraries\Lumine_ApplicationContext.php
C:\www\vitrine\application\models\Categoria.php
C:\www\vitrine\application\models\Foto.php
C:\www\vitrine\application\models\Produto.php
C:\www\vitrine\application\models\Usuario.php
Confira se estes arquivos foram criados corretamente.
 
Abra o arquivo "Lumine_ApplicationContext.php" e troque a linha

 

require_once 'lumine/Lumine.php';

por

require_once APPPATH . '/libraries/lumine/Lumine.php';

e a linha

include 'lumine-conf.php';

por

include APPPATH . '/lumine-conf.php';

Pronto! Agora podemos testar nossa aplicação.

Testar se tudo está correto

Abra a controller padrão que vem com a instalação do CodeIgniter.
Ela deverá estar em "application/controllers/welcome.php".

Apague o método "index" que ela possui e coloque este:

public function index(){
	// trocando o timezone para nao ficar aparecendo varios warnings
	// isto depende da configuracao do servidor, e nao do Lumine ou CodeIgniter
	date_default_timezone_set('America/Sao_Paulo');
	// importando a inicializacao de Lumine
	$this->load->library('Lumine_ApplicationContext');
	// ligando o log
	Lumine_Log::setLevel(3);
	// listando os usuarios
	$userList = new Usuario();
	$userList->find();
	
	while($userList->fetch()){
		echo 'Nome do usuario: ', $userList->nome, '
';
		echo 'E-mail: ', $userList->email, '
';
	}
}

 

Se aparecer um log e as informações:
Nome do usuario: Hugo Silva
E-mail: hufersil@gmail.com

Significa que está tudo certo!

Na próxima matéria vamos aprender a:

configurar a base do CodeIgniter
criar uma controller base
criar uma controller base de administração
criando a tela de login

@braços e fiquem com Deus!

 

]]> http://www.hufersil.com.br/post/criando_catalogo_produtos_lumine_codeigniter <![CDATA[Geração de imagem com JQuery/JQueryUI e PHP]]> Ajudando uma pessoa no fórum do iMasters, fiz um exemplo bem bacana de como gerar imagens com feedback visual de Drag-Drop.

Assim, a pessoa monta uma imagem composta por outas imagens. Bem simples porém bem divertido e fácil de fazer.

Vamos ver como fazê-lo!

Iremos criar apenas dois arquivos e duas pastas para esta tarefa. As pastas são:

  • imagens - coloque suas imagens originais aqui
  • geradas - pasta onde as imagens geradas serão salvas. Não esqueça de alterar o permissionamento para escrita.

Depois de criar as pastas, vamos criar os arquivos. Os arquivos devem estar no mesmo nível das pastas.

Arquivo de entrada e composição das imagens (index.php).

 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Imagens</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
	<script type="text/javascript">
	// quando terminar de carregar o script
	$(function(){
		// fazemos com que todas as imagens da lista possam ser arrastadas 
		$('.available li img').draggable({
			helper: 'clone'
		});

		// a área do "papel" será onde os itens podem ser soltos
		$('#area-itens').droppable({
			// quando soltar um item no "papel"...
			drop: function(evt, ui){
				// se o pai do item já for o "papel"
				if(ui.draggable.parent()[0] == this){
					// nao faz nada
					return;
				}

				// referencia ao "papel", mais curta
				var t = $(this);
				// copia do elemento arrastado
				var e = ui.draggable;
				// diferenca entre a posicao do mouse e a posicao do elemento quando for solto
				var diff = {x: evt.pageX - ui.position.left, y: evt.pageY - ui.position.top};
				// tiramos o "helper" do elemento ao ser arrastado
				e.draggable('option','helper','');
				// pegamos o elemento pai do elemento arrastado (a "li")
				var parent = e.parent();
				// colocamos o elemento arrastado no papel
				e.appendTo(t);
				// removemos o elemento pai anterior do elemento arrastado (a "li")
				parent.remove();

				// calculando novo posicionamento dentro do papel
				e.css({
					position: 'absolute',
					left: evt.pageX - t.offset().left - diff.x,
					top: evt.pageY - t.offset().top - diff.y
				});
			}
		});

		// ao clicar no botao de salvar a imagem
		$('#btnSalvar').click(function(evt){
			// elemento contendo o status
			var s = $('.status'), 
				// dados a serem enviados para o servidor
				data={}, 
				// area dos itens
				area = $('#area-itens'),
				// tamanho da pagina 
				pageSize = {width:area.width(),height:area.height()},
				// elementos escolhidos pelo usuario 
				itens=[];

			// para cada elemento dentro da pagina
			area.find('.itens').each(function(){
				// referencia ao elemento atual
				var t=$(this), 
					// criamos um novo objeto com as propriedades desejadas
					// para geração do arquivo final
					item = {
						src: this.src, 
						width: t.width(), 
						height: t.height(),
						x: t.position().left,
						y: t.position().top
					};
				// colocamos na lista de itens que serão usados para compor
				// a nova imagem
				itens.push(item);
			});

			// colocamos os dados no objeto para
			// enviar para geração da imagem
			data.area = pageSize;
			data.itens = itens;

			// muda o status para aguardar
			s.html('Aguarde...');
			// envia para o PHP gerar a imagem final
			$.post('gerar.php', data, function(link){
				// quando receber a resposta, mostra o Link para baixar a imagem
				s.html('Imagem gerada: <a target="_blank" href="'+link+'">Clique aqui para baixar</a>');
			});
		});
	});
	
	</script>	
	
	<style type="text/css">
		#area-itens {
			position: relative;
			float: left;
			width: 300px;
			height: 450px;
			border: 1px solid black;
			overflow: hidden;
		}
		
		.available {
			float: right;
		}
		
		.buttons {
			clear: both;
		}
		
	</style>
	
</head>
<body>
	
	<p>Arraste as imagens da direita para a "área do papel" abaixo</p>
	
	<!--  area do "papel"  -->
	<div id="area-itens">
	</div>
	
	<!--  lista de elementos que servem para o usuario compor a nova imagem -->
	<ul	class="available">
		<li><img src="imagens/imagem1.jpg" class="itens" /></li>
		<li><img src="imagens/imagem2.jpg" class="itens" /></li>
		<li><img src="imagens/imagem3.jpg" class="itens" /></li>
		<li><img src="imagens/imagem4.jpg" class="itens" /></li>
	</ul>
	
	<div class="buttons">
		<input type="button" value="Salvar Imagem" id="btnSalvar" />
	</div>
	
	<div class="status"></div>
	
</body>
</html>

Como podemos ver, este arquivo é composto apenas de HTML, CSS e JavaScript. Simples e direto.

Agora, vamos criar o arquivo que gera as imagens compostas (gerar.php):

<?php

// mudamos o timezone para nao termos problema com datas
date_default_timezone_set('America/Sao_Paulo');

// pegamos a largura da pagina enviada via post,  ou usamos 300 como padrao
$width = empty($_POST['area']['width']) ? 300 : sprintf('%d', $_POST['area']['width']);
// pegamos a altura da pagina enviada via post,  ou usamos 450 como padrao
$height = empty($_POST['area']['height']) ? 450 : sprintf('%d', $_POST['area']['height']);

// criamos a imagem e colocamos um fundo branco
$img = imagecreatetruecolor($width, $height);
$white = imagecolorallocate($img, 255, 255, 255);
imagefilledrectangle($img, 0, 0, $width, $height, $white);

// se enviou imagens
if(!empty($_POST['itens'])){
	// para cada imagem enviada
	foreach($_POST['itens'] as $item){
		// se tem o elemento "src"
		if(!empty($item['src'])){
			// pegamos somente o nome do arquivo e ignoramos o restante
			// vamos procurar por ela dentro da pasta "imagens"
			$filename = 'imagens/' . pathinfo($item['src'], PATHINFO_BASENAME);
			//se existir
			if(file_exists($filename)){
				// pegamos o restante das informacoes enviadas
				// via post para esta imagem
				$w = sprintf('%d', $item['width']);
				$h = sprintf('%d', $item['height']);
				$x = sprintf('%d', $item['x']);
				$y = sprintf('%d', $item['y']);
				
				// criamos o elemento de imagem no PHP a partir do conteudo do arquivo
				$item = imagecreatefromstring(file_get_contents($filename));
				
				// copiamos a imagem informada na imagem final, 
				// com as medidas e posições informadas
				imagecopy($img, $item, $x, $y, 0, 0, $w, $h);
			}
		}
	}
}

// geramos o arquivo final
$imageFileName = 'geradas/imagem-'.time().'.jpg';
imagejpeg($img, $imageFileName, 90);

// informamos o link
echo $imageFileName;

Como podemos ver, são dois arquivos simples e pequenos, fáceis de serem alterados para suas necessidades!

Você pode conferir um exemplo online ou baixar os arquivos do tutorial na seção de exemplos.

@braços e fiquem com Deus!

]]> http://www.hufersil.com.br/post/geracao_imagem_drag_drop_jquery_jqueryui_php <![CDATA[Exemplo de questionário]]> Fala galera.

Ajudando uma pessoa no fórum do iMasters / PHP esses dias atrás, fiz um para ele um exemplo de como criar um questionário e gravar as opções selecionadas.

O usuário também pode definir quantas opções podem ser selecionadas dentro de cada pergunta.

Também fiz um exemplo de como extrair os resultados do questionário.

O exemplo pode ser baixado na seção de exemplos.

@braços e fiquem com Deus!

]]> http://www.hufersil.com.br/post/exemplo_questionario <![CDATA[Exemplo de Jogo: Nave]]> Mais um exemplozinho de jogo em HTML + JS + CSS:

Link do Jogo

Link do JS

@braços e fiquem com Deus!

]]> http://www.hufersil.com.br/post/exemplo_jogo_nave <![CDATA[Lumine - 1.6!]]> Fala pessoal,

Coloquei hoje uma nova versão de Lumine.
Agora a forma de mapeamento pode ser feita através de annotations.
Lumine ainda continua sendo compatível com PHP 5.2.

Vocês podem baixa-lo na seção de downloads. Atenção para as anotações que coloquei nesta seção! Houveram alterações em nomenclaturas e formas de validação.

@braços e fique com Deus!
 

]]> http://www.hufersil.com.br/post/lumine_1_6 <![CDATA[Exemplo de Jogo: Batalha Naval]]>  Fala galera,

Mais um joguinho de exemplo em html / javascript

Jogar Batalha Naval
JavaScript do Jogo


@braços e fiquem com Deus!

]]> http://www.hufersil.com.br/post/batalha_naval <![CDATA[JS - Caça Palavras]]> Olá pessoas,

Há uns 5 anos atrás, fiz um exemplo de caça-palavras em ActionScript 2 para o portal MX Studio.
Até hoje recebo alguns pedidos dos fontes (arquivos FLA). Sinceramente, nem faço idéia de onde eles estejam.

Resolvi então fazer uma implementação em HTML.

O link você pode conferir aqui.

@braços e fiquem com Deus!

]]> http://www.hufersil.com.br/post/js_caca_palavras <![CDATA[Quer falar comigo? Pega senha!]]> Hoje a coisa tava corrida no trabalho.

Todo mundo queria falar comigo.

E claro, o companheiro de trabalho Paulo Muñoz não poderia deixar de me zoar, como ele sempre faz.

]]> http://www.hufersil.com.br/post/pega_senha