O Mvc e o Javascript – A parte Server

Eta feriado prolongaaaaaado, acordei no sábado mais cedo só pra ficar mais tempo sem fazer porra nenhuma…

Andei meio sumido mas cá estou eu para mais um post da nossa série sobre MVC em javascript. Demorou mais saiu a segunda parte do post, não será a última, porque é um assunto um pouco complexo, ao meu ver…

Tudo bem, lembram que eu comentei sobre as premissas do nosso mini-framework MVC em javascript? Pois então, deixem elas de lado por enquanto, porque neste post vou querer mostrar um pouco da parte server, que não deve ser ignorada, mesmo que nosso papel seja a Interface.

Por que temos que tratar da parte Server?

Primeiro porque é importante para qualquer Desenvolvedor, Engenheiro ou Arquiteto de Interface que trabalha efetivamente com Javascript ter conceitos bons em programação e ter noções de como a parte Server funciona, até para pensar numa boa solução para um problema que envolve as duas partes, Server e Client-side.

E segundo, é o Server que é responsável pela indexação do site, uma vez que o Javascript ( por enquanto ) nessa parte falha. Então o site DEVE FUNCIONAR SEM JAVASCRIPT!!!!

É muito importante que se diga isso, então, nada de fazer a validação do seu formulário apenas no Javascript!!!!

Então para que serve o Javascript?
Para otimizar o site e melhorar a experiência do usuário e claro, para viadagens também. Eu tenho visto que ultimamente o Javascript tem outra serventia, fazer propaganda do HTML5. Sim, porque mostram um site com um monte de luzinhas, vacas voando, efeitos 3D e o carayo a quatro e dizem: Olha!!! HTML5!!!

Senhores, aquilo é Javascript né… pode usar as API do HTML5, mas é JAVASCRIPT. Portanto, não fique achando que vai poder fazer todos aqueles efeitos aprendendo apenas HTML5. Mas deixando toda essa papagaiada de HTML5 de lado, vamos falar do que nos interessa.

Então, a idéia é montar nossa aplicação funcionando todinha sem javascript. E o que vai ser nossa aplicação ???

Uma galeria de imagens!!! \o/

Regras de negócio:
– A galeria terá uma área de visualização da imagem.
– Terá também os Thumbnails, que são as versões em miniatura das imagens.
– Ao clicar em um thumbnail, a página exibirá sua versão de tamanho original na área de visualização da imagem.

Um dos motivos que me levou a fazer esse post do lado Server é que eu erroneamente achava que para se fazer uma aplicação que funcionasse com ou sem javascript fosse duas vezes mais demorado de se fazer e que a parte server teria de ser feita duas vezes, uma para funcionar com javascript e outra para funcionar sem.
NOT!

Depende de como programa a sua parte Server. Quem me ajudou a compreender isso foi o William Martins, ( aka Zóio ) que trabalha na agência F.biz comigo, quando me disse que eu estava enganado. Decidi então fazer a parte Server da nossa galeria para provar para mim mesmo de que era possível fazer uma aplicação ajax com retrabalho nulo em Server-side.

Então este post servirá também para mostrar à outros céticos ( como eu era ) de que não é necessário esforço a mais por se usar ajax.

Me perdoem os experientes programadores back-end, vou usar querystrings feias mesmo e vou direto ao assunto, não vou ficar tratando os dados nem exceções, nem tentar proteger a localização das imagens porque minha preocupação é inteiramente a Interface.

Vou fazer a aplicação em php, porque estou engatinhando ainda em rails, e gostaria de fazer tudo em Ruby puro, mas meu server não dá suporte então pela facilidade e velocidade, vai o nosso querido PHPzão.

Eu montei uma Classe no php que pega dois parâmetros, o primeiro é localização da pasta das imagens grandes, e o segundo o nome da pasta que vai conter as versões em miniatura.
A classe assume que você tem uma pasta no seu server contendo as imagens, e dentro dessa pasta uma outra pasta contendo as versões em miniatura com os mesmos nomes das imagens maiores, utilizei esse padrão apenas para facilitar na programação, nenhum motivo especial.

Utilizei então 4 arquivos php, para criar essa aplicação.
wallpaper.class – Classe de paginação
config.php – Arquivo de configuração
index.php e home.php – Index contendo o html geral e o home.php contendo apenas o conteúdo da home.

A classe de paginação ficou assim:

<?php
	
	class Pagination {
		
		private 
			$q, $pg, $n, $url, $thumbnail,
			$images, $size, $pages, $html;
				
		public $page;
		
		function __construct( $folder, $thumb_folder ){
		
				$this->url = $folder;
				$this->q = $_GET["q"];
				$this->pg = $_GET["pg"];
				$this->n = $_GET["n"];
				
				$this->thumb_folder = $thumb_folder;
				$this->thumb_name = array_pop( explode('/', $thumb_folder) );
				
				$this->images = $this->rearray( scandir( $this->n ) );	
				$this->size = sizeof( $this->images );
				$this->pages = floor( $this->size / $this->q ) + ( ($this->size % $this->q) ? 1:0 );
				
				$this->start();
			
		}
		
		private function rearray($nArray){
			$aux = array();
				foreach( $nArray as $v )
					if( !( $v==".." || $v=="." || $v==$this->thumb_name ))
						array_push($aux, $v);
			return $aux;
		}
		
		private function start(){
			
			$this->page->name = $this->n;
			$this->page->current = $this->pg;	
			$this->page->image = array();
			$this->page->list = array();
						
				for($i=1; $i<=$this->pages; $i++)
					array_push($this->page->list, "q=" . $this->q . "&pg=" . ($i) . "&n=".$this->n );
						
				for( $i=( ( $this->pg-1) * $this->q ); $i < (($this->pg-1)*$this->q)+1+($this->q-1); $i++)
					
					if($i>$this->size-1) 
						break;
					
					else
						array_push(
							$this->page->image, 
							array(
								"link" => $this->url. $this->n ."/". $this->images[$i],
								"url"  => $this->url. $this->n . $this->thumb_folder .'/'. $this->images[$i]
							) 
						);
						
			$this->page->preview = $this->page->image[0]['link'];
		}
	}
?>


Ela pega parâmetros via Query String:
q : Quantidade de thumbnails que a aplicação deve mostrar
n : Nome da psta contendo as imagens de tamanho original
pg: Página que se deseja visualizar

E constrói listas que contém a localização das imagens em miniatura, e das originais, com os parâmetros de acordo com sua página dinâmicamente.

Não sei se perceberam, mas roubei a lógica de paginação que fiz em Javascript. =D

Bom, a classe ainda guarda algumas informações importantes que serão úteis na hora da renderização, mas não quero ficar esmiuçando este código.

Tem a parte da home.php, que é onde eu faço a iteração na lista e gero o html final:




<div id="vitral">
	<img src="<?php echo $html->preview ?>" />
</div>

<div id="jsPagination">
	
	<ul id="thumbnails" class="hoverbox jsPagination">			
		<?php foreach($html->image as $image):?>
			<li>	
				<a href="?<?php echo $html->list[$html->current-1] . '&preview='. $image['link'];?>" class="thumb-link" >
					<img src="<?php echo $image['url']?>" class="preview" />
					<img src="<?php echo $image['url']?>" />
				</a>
			</li>
		<?php endforeach ?>			
	</ul>

	<ul id="pages" class="jsP-pages">								
		<?php foreach($html->list as $key => $list):?>
			<li>
				<a href="?<?php echo $list?>" class="<?php echo $key+1 == $html->current? 'current' : '' ?>">
					<?php echo $key+1?>
				</a>
			</li>
		<?php endforeach?>							
	</ul>
	
</div>

E agora a parte onde eu quero realmente chegar com este post. Que é a prova de que não é necessário refazer toda a lógica usada para fazer a parte Ajax depois de feita a aplicação sem javascript. Como eu armazenei os dados dos links, dos thumbnails e das imagens de tamanho original em listas, como fica a resposta Ajax?

Simples… assim:

config.php

if(isset($_GET['ajax'])){		
	echo json_encode( array($html->list, $html->image) );
	exit();
}

Simples assim…verifico se existe uma query string ajax na url e retorno apenas o JSON.
Uma maneira mais elegante seria verificar se a requisição que está sendo feita é uma requisição Ajax ao invés de usar QueryStrings, mas isso não é importante pra gente.

O importante é mostrar que o trabalho de se fazer duas versões do site não gera retrabalho, não é preciso refazer toda a lógica ou fazê-la duas vezes.

Então nossa aplicação está pronta, e funcionando sem Javascript =D.

Agora sim, podemos pensar no Javascript e como usar o Pattern MVC através dele.

Mas isso é assunto para o próximo post.

Aqui está o link com a aplicação funcionando e aqui está o link para o código fonte para quem quiser usar a galeria ou ver como fiz a paginação. Aceito sugestões, caso tenha algum programador back-end lendo o blog =).

Prometo que o próximo post desta série não vai demorar a sair…rsrs

Um grande abraço.

Anúncios

4 comentários sobre “O Mvc e o Javascript – A parte Server

  1. Rapaz.. Quando insiro &ajax na querystring, dá isso:

    Fatal error: Call to undefined function json_encode() in /www/110mb.com/e/d/u/_/_/_/_/_/edu/htdocs/galeria-sem-javascript/config.php on line 9

    Abraço!

    • Que meleca! =/

      Ainda bem que me avisou Felipe, esse ajax vai ser crucial pro próximo capitulo…
      Isso acontece porque meu server é grátis e não provê a função json_encode().

      Mas pode ver funcionando, pegando o código fonte e fazendo rodar em algum servidor php em localhost que vai ver o json retornado direitinho…

      Obrigado pelo toque cara, vou acabar migrando minhas coisas desse server para outro melhor. Pra que economizar né… ¬¬

      Grande abraço

      • Achei um tópico no fórum do meu capenga server, onde um desenvolvedor reclamava também da falta dessa feature. Ele acabou fazendo um work-around e codificando na mão o encoding.

        Utilizei a função dele, não cheguei a testar direitinho, dando uma olhada por cima parece que está tudo bem. =)

        Abraço, obrigado novamente Felipe.

  2. Oopa!

    Achei estranho quando vi, pq tudo parecia estar certo no código. Já que descobriu o problema, uma dor de cabeça a menos.

    E achei mto bom o post. E mto boa tbm a série sobre MVC. To doido pra ver os próximos posts.

    Abraços!

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s