CONSTRUTOR DE WEBSITES UTILIZANDO FUNCIONALIDADES DO ZEND FRAMEWORK

INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA CAMPUS RIO DO SUL JEAN FELIPE DIEL CONSTRUTOR DE WEBSITES UTILIZANDO FUNCIONALIDADES DO ZEND FRAMEWORK RIO DO SUL 2013

INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA CAMPUS RIO DO SUL JEAN FELIPE DIEL CONSTRUTOR DE WEBSITES UTILIZANDO FUNCIONALIDADES DO ZEND FRAMEWORK Trabalho de Curso a ser apresentado ao Curso de Ciência da Computação da Área de Ciências Exatas do Instituto Federal de Educação, Ciência e Tecnologia, como requisito parcial para a obtenção do grau de Bacharel em Ciências da Computação. Prof. Orientador: Fernando Augusto Salla RIO DO SUL 2013

JEAN FELIPE DIEL CONSTRUTOR DE WEBSITES UTILIZANDO FUNCIONALIDADES DO ZEND FRAMEWORK Trabalho de Curso de Ciência da Computação da Área de Ciências Exatas do Instituto Federal de Educação, Ciência e Tecnologia, a ser apreciado pela Banca Examinadora, formada por: Prof. Orientador: Fernando Augusto Salla Banca Examinadora: Prof. MSc. Rodrigo Curvêllo Prof. Dr. Paulo César Rodacki Gomes Rio do Sul, Dezembro de 2013

Dedico este trabalho aos meus pais, meus irmãos e minha noiva que de uma forma ou de outra contribuíram para que eu pudesse viver este momento.

AGRADECIMENTOS Agradeço a Deus por dar força e saúde para que eu pudesse enfrentar e superar todos os desafios nesta jornada de formação profissional. Aos meus pais Lademir e Marileny, por seu apoio incondicional, por me mostrar a importância da educação, por seu amor, incentivo e paciência durante esta caminhada. Aos meus irmãos Miguel, André e Laís, que diretamente ou indiretamente me apoiaram nesta conquista. A minha noiva Ana Carla da Silva, que sempre esteve ao meu lado direta ou indiretamente e que me apoiou deste o início da faculdade. Aos meus colegas, que me ajudaram a alcançar este objetivo. Aos meus professores por seus ensinamentos. Em especial, o professor Juliano T. Brignoli, por sua colaboração na construção deste trabalho. Ao meu orientador, Fernando Augusto Salla, por ter acreditado e me auxiliado no desenvolvimento e conclusão deste trabalho.

No que diz respeito ao desempenho, ao compromisso, ao esforço, à dedicação, não existe meio termo. Ou você faz uma coisa bem-feita ou não faz. Ayrton Senna da Silva

RESUMO Com o crescente aumento na utilização da Internet, aumenta-se o consumo de informações. Disponibilizar estas informações exige agilidade e praticidade, independente de conhecimento técnico. Este trabalho apresenta a proposta de um construtor de websites que utiliza funcionalidades do Zend Framework, afim de reduzir o tempo na construção de projetos voltados para a Web. O construtor adotou padrões de projetos, as novas funcionalidades do HTML5 e CSS3 e programação orientada a objetos. Com este construtor é possível criar websites sem visualizar qualquer linha de código, apenas arrastando o elemento desejado, como imagens, textos ou tabelas. O construtor gera os arquivos, salva-os e os envia ao FTP especificado. Palavras-chave: website, Zend Framework, construtor de websites, interatividade.

ABSTRACT With the growing of the Internet, increases the information consumption. Providing this information requires agility and practicality, regardless of technical knowledge. This work presents a website builder that uses Zend Framework s features, to reduce the time to build projects for the Web. The constructor has adopted design patterns, the new features of HTML5 and CSS3 and object-oriented programming. With this constructor you can create website without visualize any line of code, just dragging the desired element, with images, text or tables. The constructor generates the files, saves it and then sends to the specified FTP. Keywords: website, Zend Framework, website builder, interactivity.

LISTA DE ABREVIATURAS E SIGLAS AJAX - Asynchronous JavaScript and XML ASCII - American Standard Code for Information Interchange CSS - Cascading Style Sheets HTML - HyperText Markup Language HTTP - Hypertext Transfer Protocol IP - Internet Protocol JSON - JavaScript Object Notation MVC - Model View Controller PHP - Hypertext Preprocessor TCP - Transmission Control Protocol UML - Unified Modeling Language URL - Uniform Resource Locator XML - Extensible Markup Language W3C - World Wide Web Consortium

LISTA DE FIGURAS Figura 1 Funcionamento da arquitetura cliente/servidor.......17 Figura 2 Exemplo de código HTML.......18 Figura 3 Exemplo de regras CSS.......20 Figura 4 Exemplo de código JavaScript....22 Figura 5 Exemplo de código Jquery....22 Figura 6 Exemplo de código PHP....25 Figura 7 Fluxo de eventos em informações em uma arquitetura MVC....27 Figura 8 Visão geral do construtor....34 Figura 9 Modelo entidade-relacionamento....36 Figura 10 Diagrama de caso de uso....37 Figura 11 Diagrama de classe....38 Figura 12 Diagrama de atividades....39 Figura 13 Diagrama de sequência....41 Figura 14 Tela inicial do construtor....43 Figura 15 Página de banco de dados....44 Figura 16 Página de informacões....45 Figura 17 Página de detalhes....46 Figura 18 Tela principal do construtor....47 Figura 19 Exemplo de website criado em modo de visualização....48 Figura 20 Página de dados de acesso ao FTP....49

LISTA DE QUADROS Quadro 1 Padrões de projeto GoF....29 Quadro 2 Requisitos funcionais do construtor....32 Quadro 3 Requisitos não funcionais do construtor....33

SUMÁRIO 1 INTRODUÇÃO... 14 1.1 OBJETIVOS DO TRABALHO...15 1.2 ESTRUTURA DO TRABALHO...15 2 FUNDAMENTAÇÃO TEÓRICA...15 2.1 ARQUITETURA CLIENTE/SERVIDOR...16 2.2 HTML...17 2.3 CSS...19 2.4 JAVASCRIPT...21 2.5 AJAX...23 2.6 PHP...23 2.7 PROGRAMAÇÃO ORIENTADA A OBJETOS...25 2.8 MVC...27 2.9 DESIGN PATTERNS...28 2.10 ZEND FRAMEWORK...29 2.11 TRABALHOS CORRELATOS...30 3 DESENVOLVIMENTO... 32 3.1 REQUISITOS...32 3.2 ESPECIFICAÇÃO...33 3.2.1 Visão geral do construtor...33 3.2.2 Modelagem de dados...35 3.2.3 Diagrama de caso de uso...36 3.2.4 Diagrama de classe...37 3.2.5 Diagrama de atividades... 38 3.2.6 Diagrama de sequência... 39 3.3 IMPLEMENTAÇÃO...42 3.3.1 Técnicas e ferramentas utilizadas...42 3.2.2 Implementação do construtor de websites...42 4 CONCLUSÕES... 50 4.1 EXTENSÕES...51

REFERÊNCIAS... 52

14 1 INTRODUÇÃO O mundo está em constante evolução. O tempo hoje é fator determinante durante cada etapa de desenvolvimento de um projeto. A competitividade exige produtividade e agilidade, ambas aliadas a qualidade como formas de conquistar o mercado e cumprir os prazos em um tempo menor do que de um possível concorrente. Ter presença na Web hoje, passou de um diferencial para quase que uma obrigação. Fowler (2004), define um website como qualquer sistema utilizado em um navegador Web, que seja processado em um servidor Web através de uma requisição HTTP e que interaja recebendo e enviando dados ao usuário. A Web permite cada vez mais a criação de aplicações robustas e de alto desempenho. Torna-se inviável a construção de softwares que necessitam ser instalados e executados máquina por máquina. Hoje, é possível acessar uma aplicação de qualquer parte do mundo, sendo necessário apenas um navegador Web. Não há necessidade de se instalar a aplicação e a responsabilidade pelo processamento fica quase sempre com o servidor e não em cada computador. Outra vantagem de aplicações construídas para Web, se dá na hora de atualizá-las e dar suporte. É necessário fazer estes processos uma única vez e apenas em um único local. O desenvolvimento é uma etapa que toma muito tempo na produção de um projeto. E na maioria dos casos, este tempo é limitado. Este trabalho propõe otimizar este tempo através da implementação de um construtor de websites. Serão adotadas as funcionalidades do Zend Framework, que tem como proposta, dar agilidade no desenvolvimento de um projeto. O construtor tem como objetivo facilitar a criação de websites dinâmicos sem a necessidade de desenvolvimento por meio de código, necessitando apenas da manipulação visual dos componentes, tendo como ambiente de execução um navegador Web.

15 1.1 OBJETIVOS DO TRABALHO O objetivo deste trabalho é desenvolver um construtor de websites dinâmico e interativo sem a necessidade de escrever código fonte, seguindo os padrões de desenvolvimento propostos pelo Consórcio World Wide Web (W3C), tendo como ambiente de execução um navegador Web. Os objetivos específicos do trabalho são: possibilitar a criação de websites dinâmicos sem a necessidade de conhecimento em programação Web ou contato com código-fonte; reduzir o tempo dedicado a criação de um website; seguir o padrão de codificação proposto pela W3C; criar websites acessíveis para todos os dispositivos. 1.2 ESTRUTURA DO TRABALHO A estrutura deste trabalho está apresentada em quatro capítulos, onde o segundo capítulo contém a fundamentação teórica necessária para o entendimento deste trabalho. O terceiro capítulo apresenta como foi desenvolvido construtor de websites, o diagrama de casos de uso, diagrama de classe, diagrama de sequência e o diagrama de atividades. Neste capítulo, também são representados a especificação que define o construtor, uma visão geral do seu funcionamento e a modelagem da base de dados gerada pelo construtor. Por fim, o quarto capítulo refere-se às conclusões do presente trabalho e sugestões para trabalhos futuros.

16 2 FUNDAMENTAÇÃO TEÓRICA Neste capítulo, serão introduzidos alguns conceitos fundamentais e necessários para entendimento dos componentes utilizados neste trabalho. 2.1 ARQUITETURA CLIENTE/SERVIDOR Com a intenção de ligar hipertextos entre computadores diferentes utilizando links globais ou também conhecidos como hiperlinks, Tim Berners-Lee, em 1990, desenvolveu um software próprio e um protocolo para recuperar estes hipertextos. O protocolo era o HTTP e o texto deste protocolo, o HTML, assim dava início a Web. A Web é baseada na arquitetura cliente/servidor. O cliente, em sua maioria é um navegador Web que faz requisições a um servidor através do protocolo HTTP. O servidor, por sua vez, responde ao cliente enviando informações formatadas geralmente pela linguagem de marcação HTML. Para Forouzan (2004, p. 592): Um cliente é um programa, rodando na máquina local, que solicita os serviços de um servidor. Um programa cliente é inicializado por um usuário ou outra aplicação e é finalizado quando o serviço é terminado. Um cliente estabelece um canal de comunicação usando o endereço IP do host1 remoto e o número de porta conhecida do programa servidor específico que deseja acessar. O servidor, segundo Forouzan (2004, p. 593), é um programa, rodando na máquina remota, que oferece serviços aos clientes. Quando inicializado, o programa servidor abre portas de entrada para receber solicitações de clientes, mas nunca inicia um serviço até que seja solicitado a fazê-lo. Um servidor HTTP, utiliza a porta TCP 80 para receber as solicitações dos clientes. 1 Host - é uma máquina ou computador conectado a uma rede, que oferece informações, recursos, serviços e aplicações aos usuários.

17 Figura 1 - Funcionamento da arquitetura cliente/servidor. O HTTP, Hypertext Transfer Protocol ou Protocolo de Transferência de Hipertexto, segundo Gehrke (2002, p. 186): É o protocolo de comunição mais comum usado na Internet. É do tipo cliente-servidor no qual um cliente (normalmente um navegador Web) envia uma solicitação a um servidor HTTP, que, por sua vez, envia uma resposta de volta ao cliente. Costa (2008, p. 86) diz que o protocolo HTTP utiliza diretamente os serviços do protocolo de transporte TCP. 2.2 HTML HTML é a sigla em inglês para HyperText Markup Language, ou em português, linguagem para marcação de hipertexto. O HTML está nas versões 4.01 (versão atual) e HTML5 (versão em fase de desenvolvimento). O HTML foi criado em 1990 pelo cientista Tim Berners-Lee. A sua finalidade era tornar possível o acesso e a troca de informações e documentação de pesquisas entre cientistas de diferentes universidades. Até a versão 5, o HTML passou por sete versões oficiais e recomendadas pela W3C. A versão atual do HTML (4.01), foi recomendada em dezembro de 1999 pela W3C. Já a versão 5, teve suas especificações lançadas em maio de 2007. Até a escrita deste trabalho, a HTML5 encontra-se em fase de desenvolvimento, sendo

18 utilizada por muitos desenvolvedores em diversos projetos Web, porém, ainda não foi homologada pela W3C. Silva (2010a, p. 22) cita que: A linguagem de marcação HTML destina-se a estruturar uma página Web, não se devendo empregá-la para adicionar estilos ou apresentação visual aos elementos que constituem a página, sendo tais tarefas função das folhas de estilo em cascata. Os arquivos HTML são arquivos de textos no formato ASCII, que contém textos simples e é composto por tags. As tags, em sua grande maioria, são compostas por pares de abertura e fechamento, sendo que a tag de fechamento possui o mesmo nome da tag de abertura, porém, é precedida por uma barra(/), indicando onde o conteúdo começa e onde termina. A figura 2, a seguir, apresenta a estrutura básica de um arquivo HTML. <!DOCTYPE html> <html lang="pt"> <head> <meta charset="utf-8" /> <title>exemplo de código HTML</title> </head> <body> <main> <form> <label>digite seu nome</label> <input type="text" name="nome" /> </form> </main> </body> </html> Figura 2 - Exemplo de código HTML. Silva (2011, p. 36) em seu livro, diz que: As principais diferenças entre a HTML5 e a HTML 4, têm suas origens no fato de a HTML5 estar sendo desenvolvida com o propósito de substituir tanto a HTML criada nos anos 90 quanto a XHTML, que foi uma tentativa frustrada de reformular a HTML 4 como uma aplicação XML.

19 Neste trabalho, o HTML é utilizado como linguagem de marcação e serve como base para interface com o usuário. Foi adotado a versão HTML5, que possui novos elementos como barra de progresso, máscara para campos de formulário e validação de campos, dispensando assim o uso de JavaScript. O HTML5 também permite a utilização do atributo draggable, responsável por possibilitar um elemento possa ser arrastado dentro de um documento. É necessário que o usuário utilize um navegador Web atualizado e que este possua suporte a HTML5. 2.3 CSS CSS é a abreviação para o termo folhas de estilo em cascata (Cascading Style Sheet). O CSS está nas versões 2.1 (versão atual) e CSS3 (versão em fase de desenvolvimento). O CSS foi proposto por Tim Berners-Lee em setembro de 1994. A estilização dos elementos era resolvido apenas pelos navegadores. Em dezembro de 1996, a versão CSS1 foi lançada como uma recomendação oficial pela W3C. A versão 2.1 foi proposta em agosto de 2002 e passou a status de recomendação pela W3C em junho 2011. Já a versão 3, foi proposta no ano de 2006, porém, ainda encontra-se em fase de desenvolvimento. Gomes (2010, p. 11) afirma que o CSS não é uma linguagem de programação nem uma linguagem de marcação. É uma sequência de declarações de propriedades e seus valores para a manipulação da forma como o conteúdo de uma página web será exibido. Na figura seguinte pode-se visualizar um exemplo código CSS que poderá ser utilizado para formatação de diversas páginas HTML.

20 body { background-color: #fff; color: #000; font-size: 12px; } div { width: 200px; height: 400px; margin: 10px auto; border: 1px solid #000; } h1 { font-weight: bold; text-align: center; } Figura 3 - Exemplo de regras CSS. Segundo Gomes (2010, p. 11): O CSS é responsável pelo aspecto da página, pelo layout, mas não somente para isso. Ele nasceu também com outra responsabilidade: garantir acessibilidade, tanto para máquinas quanto pessoas. Isso quer dizer que ele veio para agilizar a leitura das páginas web pelos navegadores e também facilitar a vida de usuários com necessidades especiais ou não. Algumas das mudanças da versão 3 da CSS em relação a versão 2.1, se dá na adoção de transições e animações de elementos, no uso de sombras em blocos e textos, bordas arredondadas, inclusão de fontes e suporte a media queries. A versão 3 dispensa em boa parte, o uso de linguagens como JavaScript, na interação dos elementos. O CSS foi utilizado no projeto para adicionar estilo aos elementos da ferramenta. Foi adotada a versão 3 do CSS, além da versão atual (2.1), reduzindo o uso de imagens e criando efeitos dinâmicos em textos e outros elementos. Para isso, é necessário que o usuário utilize um navegador que possua suporte aos principais módulos da CSS3.

21 2.4 JAVASCRIPT A linguagem JavaScript foi originalmente desenvolvida por Brendan Eich da Netscape em parceria com a Sun Microsystems com a finalidade de possibilitar aos desenvolvedores acrescentarem interatividade em uma página Web. Chamada de JavaScript 1.0, a primeira versão foi lançada em 1995 e introduzida no navegador Netscape 2.0 em 1996. O principal objetivo de sua criação era dar maior interação entre o usuário e a página e resolver o problema de validação de formulários no lado do cliente. Atualmente o nome oficial do JavaScript é ECMAScript e sua versão atual é a ECMA-262 v5.1. Em seu livro, Silva (2010a, p. 23) diz que: Em tese, precisamos apenas de um navgador para fazer funcionar scripts desenvolvidos com a linguagem JavaScript. Ao contrário, programas escritos em PHP, por exemplo, precisam ser hospedados em um servidor remoto configurado para rodar PHP ou visualizados localmente em um máquina na qual tenha sido instalado um servidor local com suporte para PHP. O JavaScript é uma linguagem que foi desenvolvida para rodar no lado cliente e seu funcionamento e interpretação dependem de funcionalidades implementadas no navegador do usuário. Os navegadores atuais hospedam um interpretador JavaScript e dão ao usuário a possibilidade de desabilitar a linguagem. Cansado da maneira de se escrever JavaScript para se chegar aos resultados pretendidos, John Resig, criou em 2006, a biblioteca jquery. Silva (2010b, p. 27) diz que: jquery é uma biblioteca JavaScript que possui as seguintes caracteríscas: - Utiliza seletores CSS para localizar elementos componentes da estrutura de marcação HTML da página; - Possui arquitetura compatível com instalação de plug-ins e extenções em geral; - É indiferente às inconsistências de renderização entre navegadores; - É capaz de interação implícita, isto é, não há necessidade de construção de loops para localização de elementos no documento; - Admite programação encadeada, ou seja, cada método retorna um objeto. - É extensível, pois admite criação e inserção de novas funcionalidades na biblioteca existente.

22 Nas figuras a seguir, são demonstrados exemplos de um código implementado em JavaScript e em seguida o mesmo código utilizando a biblioteca jquery. A sintaxe do código JavaScript pode ser observada na figura abaixo: <script type="text/javascript"> window.onload = function() { document.getelementbyid("btn").onclick = mudacor; }; function mudacor() { document.getelementbyid("cor").style.color = "#ff0"; }; </script> Figura 4 Exemplo de código JavaScript. A sintaxe do código implementado com a biblioteca jquery pode ser observada na figura a seguir: <script type="text/javascript"> $(document).ready(function() { $("#btn").click(function() { $("#cor").css("color","#ff0"); }); }); </script> Figura 5 Exemplo código biblioteca jquery. No dia 1 de julho de 2007, foi criada a biblioteca jquery UI por um grupo de desenvolvimento. Seu objetivo é possibilitar ao usuário criar elementos de interface de usuário com um mínimo de código e sintaxe idêntica à sintaxe da biblioteca jquery. Basicamente, sua função é utilizar eventos da jquery e acrescentar visual, como em menus, barras de progresso e botões. Neste trabalho, foi utilizado as bibliotecas jquery e jquery UI, ambas na versão 1.10.2, disponíveis em seus sites: jquery (http://www.jquery.com) e jquery UI (http://www.jqueryui.com). Elas dão suporte e dinâmica na movimentação dos

23 componentes escritos em HTML5 e em campos de seleção de cores. 2.5 AJAX O Ajax (Asynchronous JavaScript and XML), foi desenvolvido inicialmente por Jessé James Garret e, segundo Loundon (2010, p. 221), não se trata, na verdade, de uma nova tecnologia, mas sim de uma série de tecnologias sendo utilizadas de modo novo, unidas por um mecanismo que permite a comunicação entre o navegador e o servidor. Segundo Powers (2010, p. 352), o funcionamento do Ajax se dá com: Uma solicitação precisa ser enviada ao servidor, um serviço chamado e dados retornados. Entretanto, em vez de submeter um formulário e carregar uma nova página com a resposta, ou usar um iframe e scripting remoto, o Ajax lida com toda essa atividade dentro do contexto do mesmo documento da página web. Essa comunicação entre o cliente e o servidor, é chamada de comunicação assíncrona e é gerencia pelo objeto XMLHttpRequest do JavaScript. Para Powers (2010, p. 352), assícrona significa que a solicitação é enviada, mas o cliente não tem que parar e esperar até o processo terminar. Em vez disso, o cliente fornece uma função a ser chamada quando o estado da solicitação mudar. Loundon (2010), diz que: O nome do objeto (XMLHttpRequest) e o termo Ajax em si impliquem que o XML é o único formato para transferência de dados, na verdade também existem outros. Um deles, o JSON, é especialmente favorável, já que permite a passagem de uma string JavaScript sobre o qual você chama json_parse, para obter um objeto JavaScript. 2.6 PHP PHP é o acrônimo de Hypertext Preprocessor ou em português, pré-processador de hipertexto. É uma linguagem de programação open source,

24 criada em 1994 por Rasmus Lerdorf, voltada para o ambiente Web e que tem como uma de suas principais características a capacidade de se misturar ao HTML, tornando mais fácil a geração de páginas web-dinâmicas. Os programadores irlandeses, Zeev Suraski e Andi Gutmans, fundadores da Zend Company, desenvolveram os analisadores de sintaxe do PHP3 e do PHP4. Devido a necessidade de maior suporte a orientação a objetos, se fez necessário a criação de uma nova versão do PHP. Em julho de 2004 foi lançada a versão 5 com novos recursos, incluindo suporte a programação orientada a objetos. Soares (2010, p. 292) relata que: Uma das mais importantes mudanças no PHP, e provavelmente a principal, foi a total remodelação da linguagem para uma melhor aderência ao conceito de OO (orientação a objetos). Até a versão 4 o PHP tratava os objetos como tipos primitivos. Já na versão 5 do PHP a manipulação de objetos foi totalmente reescrita, permitindo uma melhor performance e muitas funcionalidades adicionais. A diferença principal está no fato de que no PHP5 os objetos são tratados como tais, existindo desta forma um ponteiro para o objeto. O PHP é uma linguagem de programação de código livre e possui diversas fontes disponíveis para pesquisa, como em artigos publicados na Internet e em publicações bibliográficas. Pode ser utilizado para se criar desde websites simples a aplicações robustas. A figura a seguir apresenta um exemplo de código PHP.

25 <?php $data = date("d-m-y"); $texto = "Exemplo de código PHP"; echo $data.' - '.$texto; $vetor = array(0,1,2,3,4,5,6,7,8,9,10); foreach ($vetor as $key => $value) { echo $value * 2; } $nome = $_POST['nome']; if(!empty($nome)) { echo 'O seu nome é: '.$nome; } else { echo 'Nenhum nome foi digitado'; } while($i < 50) { echo $i; $i++; }?> Figura 6 - Exemplo de código PHP A interpretação do código PHP é feita por servidores HTTP. Os dois servidores mais utilizados são o Apache e o Nginx. A função básica de um servidor HTTP é interpretar e executar o código e retornar ao cliente apenas código HTML puro como resposta. Assim, o PHP tem como principal vantagem ocultar informações no lado servidor, dando segurança em interações com serviços de bancos de dados ou aplicações que possuem informações confidenciais. O PHP, até o desenvolvimento deste trabalho, se encontra na versão 5.5.4 e foi utilizado como linguagem de interação. O PHP é a linguagem base na escrita do Framework Zend, que será descrito a seguir. 2.7 PROGRAMAÇÃO ORIENTADA A OBJETOS Segundo Silva Filho (2011, p. 2) a Programação Orientada a Objetos

26 (POO) é uma abordagem de programação que serve de elo entre os problemas existentes e as soluções computacionais apresentadas no campo da programação. Em seu livro, Sebesta (2003, p. 432) diz que o conceito de programação orientada a objetos tem suas raízes na SIMULA 67, mas não foi amplamente desenvolvido até a evolução da Smalltalk a única linguagem puramente orientada a objeto. A orientação a objetos tem como objetivo combinar em uma única entidade os dados e funções que trabalham sobres estes dados. Essa entidade recebe o nome de objeto. A classe é a estrutura onde são definidos os atributos (dados) e métodos (funções). O objeto, ao instanciar uma classe, passa a ter o comportamento e o estado definidos nesta classe. Engholm Júnior (2010, p. 119-120), define atributo como: Uma abstração de uma característica aplicável ao domínio de negócio e representa propriedades de objetos individuais como nome, idade, peso ou cor. Do ponto de vista técnico, o atributo representa variáveis que armazenam informações sobre objetos, por exemplo, para a classe Pessoa, nome, data de nasc., local de nasc., sexo e endereço representam atributos dessa classe. Para Engholm Júnior (2010), um método pode ser definido como uma função que possue um conjunto de operações a serem executadas. Estas, recebem ou não valores por meio de parâmetros e ao serem chamadas por um objeto e podem retornar um determinado valor. Na classe podem ser definidos os tipos de acesso de seus atributos e métodos. O acesso é a possibilidade de outras classes ou objetos poderem executar ou não seus métodos e visualizar ou alterar seus atributos. Os tipos de acessos podem ser: público: o método ou atributo está disponível para todas as classes; protegido: o método ou atributo só poderá ser acessado pela própria classe ou sua hierarquia; privado: somente a própria classe poderá acessar o método ou atributo. Métodos e atributos podem ser chamados de membros

27 da classe. Outro recurso importante da programação orientada a objetos é a herança. Esta, é definida por Engholm Júnior (2010, p. 128), como um mecanismo permite criar novas classes a partir de classes já existentes, princípio conhecido em modelagem de sistemas como especialização. 2.8 MVC O MVC (Model-View-Controller), ou em português, Modelo, Visão e Controlador, é um padrão de projeto (design pattern) que visa dividir a aplicação em três camadas. Foi proposto Trygve Reenskaug na década de 70, quando este trabalhava na plataforma Smaltalk. A figura 7, apresenta o funcionamento do padrão de projeto MVC. Figura 7 Fluxo de eventos em informações em uma arquitetura MVC. Fonte: Almeida (2007). O Controlador (Controller), para Booch (2012), tem a função de controlar todo o fluxo de informações que passam pelo sistema. Ele define quais informações devem ser geradas, quais regras devem ser acionadas e para onde as informações devem ir. O controlador serve como uma camada intermediária entre a camada de visão e a camada de modelo. Dall`Oglio (2009) em seu livro, diz que a camada modelo (Model), é utilizada para manipular informações de forma mais detalhada. Esta camada é considerada o coração da aplicação e é responsável por tudo que será feito. Sua

28 função é modelar os dados e o comportamento por atrás do processo de negócios, se preocupando apenas com a persistência, manipulação e geração dos dados. Booch (2012) descreve a camada de visão (View), como a responsável por tudo que o usuário final visualiza. É sua função organizar e distribuir os componentes da interface na tela do usuário baseadas nas informações passadas pelo modelo. 2.9 DESIGN PATTERNS Design Patterns ou padrões de projeto, segundo Melo Junior (2007, p. 61): São como receitas de bolos, ou seja, práticas recomendadas para resolver problemas comuns e recorrentes, encontrados pelos analistas e arquitetos de sistemas. Ao mesmo tempo, representam uma técnica excelente para reduzir os custos de manutenção de aplicativos, através do privilégio da Composição sobre a Herança. Existem inúmeros padrões de projeto. Porém a grande maioria dos padrões foi criada especificamente para uma linguagem de programação ou framework, onde foram modelados seguindo as características das linguagens. O conceito de Design Patterns pode ser empregado em todo o tipo de ambiente de desenvolvimento orientado a objetos. Koscianski (2007, p. 289) em seu livro, diz que a referência atual mais conhecida para padrões de projeto de software são os chamados GoF Patterns. A sigla GoF vem de Gang of Four, em referência aos quatro autores do livro. O livro em questão, é o Design Patterns Elements of Reusable Object-Oriented Software, lançado em 1994, onde descrevem 23 padrões de projeto com soluções genéricas para os problemas mais comuns do desenvolvimento de software orientado a objetos.

29 Segundo Koscianski (2007, p. 290): Os padrões de projeto GoF são classificados em três tipos: creational (criacional ou de criação), structural (estrutural) e behavioral (comportamental): Criacional: ajuda a tornar o software independente de como os objetos são criados, compostos e representados; Estrutural: usado para identificar como agrupar objetos e classes para formar uma estrutura maior; Comportamental: usado em colaboração dos objetos para atingir um objetivo, com enfoque na interconexão dos objetos. O quadro 1 a seguir apresenta os 23 padrões GoF e sua classificação nas três categorias. Criação Estrutural Comportamental Abstract method Adapter Interpreter Factory method Bridge Template method Builder Composite Chain of responsability Prototype Decorator Command Singleton Facade Iterator Proxy Mediator Memento Flyweight Observer State Strategy Visitor Quadro 1 Padrões de projeto GoF Fonte: Koscianski (2007, p. 290). 2.10 ZEND FRAMEWORK Segundo Jobstraibizer (2009, p. 44):

30 Um framework é um conjunto de componentes que contém uma arquitetura e uma estrutura interna básicas para o desenvolvimento de uma aplicação. Funciona como uma aplicação semipronta que precisa deve ser estendida e personalizada para que um sistema desenvolvido funcione corretamente. Geralmente são conhecidos como ambientes RAD (Rapid Development) framework. Em seu livro, Evans (2008) diz que, o Framework Zend é um framework híbrido, que pode ser usado em uma faixa mais ampla de projetos do que os frameworks de aplicação. Quanto a seus componentes, Evans (2008) cita que, no Framework Zend podem ser usados sozinhos como uma biblioteca de componentes, mas em seu núcleo, ele é uma implementação do padrão de projetos Model-View-Controller (MVC). Criado em 2005 pela Zend Technologies, o Framework Zend possui além das classes de MVC, componentes para todos os tipos de aplicações. Ele pode ser utilizado para persistência e gravação de dados, cálculos matemáticos, serviços de e-mail ou tratamento e manipulação de arquivos e dados. O Framework Zend está na sua versão 2. Nesta versão o framework deixou de ser apenas uma biblioteca de componentes que eram inclusos dentro da aplicação e passou a ser uma espécie de interface para o servidor de execução do PHP. Assim é necessário que ele seja instalado no computador para que se possa utilizar seus componentes. A versão 1 do framework também encontra-se disponível para dowload no site do framework e diferente da versão atual, não precisa ser instalado. Neste trabalho foi adotada a versão 1.12.3 do Framework Zend. Esta versão não necessita ser instalada e pode ser usada em qualquer computador que possua suporte ao PHP 5. Ele será utilizado para interações com o serviço de banco de dados e validação dos dados enviados pelo usuário. 2.11 TRABALHOS CORRELATOS Como trabalhos correlatos foram encontradas as ferramentas Froont e

31 LayoutIt!. Ambas funcionam dentro de um navegador Web e possuem determinadas limitações. O Froont, é uma ferramenta para criação de websites responsivos, utilizando uma interface com elementos que podem ser arrastados ou editados. Está disponível apenas para usuários que possuam o navegador Chrome, da Google, sendo necessário a criação de uma conta para se ter acesso e salvar seus projetos. Por estar em fase de testes a ferramenta é um tanto confusa, lenta e a quantidade de código gerado é grande e desnecessária. O LayoutIt!, é um site ainda em fase beta, que tem como objetivo permitir a criação de websites utilizando o framework front-end Bootstrap, do Twitter. O usuário tem a possibilidade de arrastar o componente ao local desejado no website. O usuário tem a disponibilidade de baixar seu projeto, porém precisará se registrar. Tanto o Froont quanto o LayoutIt!, são alternativas limitadas, geram códigos extensos e são voltadas para o front-end, impossibilitando o usuário criar projetos com acesso a banco de dados ou processamento de dados de formulários, limitando-o a criar sites estáticos.

32 3 DESENVOLVIMENTO O presente capítulo, descreve os requisitos, a especificação e a implementação do projeto. São detalhados aspectos importantes acerca dos padrões de projetos, frameworks, bibliotecas e ferramentas que foram adotados no desenvolvimento deste projeto. 3.1 REQUISITOS O construtor desenvolvido, tem como objetivo ajudar as pessoas a criarem seus próprios websites, sem ajuda de um profissional ou de conhecimento técnico. Na sequência são apresentados os Requisitos Funcionais (RF) e os Requisitos Não Funcionais (RNF) atendidos pelo construtor. No Quadro 1 podem ser observados os RF e no Quadro 2 os RNF. REQUISITOS FUNCIONAIS RF01 Permitir ao usuário cadastrar as informações básicas do website RF02 Disponilizar interface para alteração das informações do website RF03 Interface para informações de acesso ao serviço de banco de dados RF04 Possibilitar o cadastro de logotipo, cores e fontes RF05 Propiciar área para arrastar e criar componentes no projeto RF06 Possibilitar a criação de uma nova página RF07 Permitir ao usuário modificar o conteúdo de uma página RF08 Conceder página de pré-visualização do projeto RF09 Viabilizar interface para preenchimento dos dados de conexão FTP RF10 Interface para publicação do projeto Quadro 2 - Requisitos funcionais do construtor. REQUISITOS NÃO FUNCIONAIS RNF01 Ser executado integralmente na Web

33 RNF02 Interface agradável, objetiva e trivial ao usuário RNF03 Ser implementado nas linguagens JavaScript e PHP 5 RNF04 Disponibilizar ao usuário um menu de ajuda RNF05 Utilizar banco de dados MySQL ou PostgreSQL RNF06 Ser compatível com os navegadores Web: Mozilla Firefox, Google Chrome e Opera Quadro 3 - Requisitos não funcionais do construtor. 3.2 ESPECIFICAÇÃO Nas subseções seguintes são abordadas as especificações do projeto desenvolvido. Foi utilizada a Unified Modeling Language (UML), com auxílio da ferramenta Astah, sendo criados os diagramas de caso de uso, atividades, classe e sequência. Para a criação do modelo entidade-relacionamento, foi utilizado a ferramenta MySQL Workbench 6.0. 3.2.1 Visão geral do construtor A figura 8 a seguir, foi criada para demonstrar de forma simplificada o fluxo de comunicação do construtor. Esta, não foi baseada em qualquer diagrama pertencente a UML, pois seu objetivo é demonstrar como é feita a ligação dos componentes no construtor e entre quais destes existem tais ligações.

34 Figura 8 Visão geral do construtor O construtor de websites pode ser divido em quatro partes principais conforme a figura 8. O usuário é responsável por fornecer os dados ao construtor. Ele deve informar dados de acesso ao base de dados, informações pessoais e do projeto a ser criado. Sua interação com o construtor se dá por meio de um navegador Web e é nele que o usuário irá criar seu projeto. O navegador é responsável pela execução do construtor e pela ligação com o usuário. É através dele que são feitas as requisições ao servidor Web e onde são mostradas as resposta do construtor ao usuário. O padrão de projetos MVC é uma abstração do código-fonte. É divido em três camadas. A camada view (visão), é responsável por se comunicar com o navegador, trazendo os dados e telas que serão visualizadas pelo usuário. O model é a camada responsável pela funções de lógica e persistência do construtor. No model, são utilizados os métodos do Zend Framework para gravação dos dados. A

35 camada de controller (controlador), faz a comunição entre o model (modelo) e a view. O controller também faz a junção dos dados da view com as funções do model e comunica-se com o banco de dados, solicitando ou enviando os dados. O padrão de projetos Singleton, é implementado e utilizado na camada model. Este padrão, permite que o construtor possa criar uma única instância de uma classe, mantendo um acesso global ao objeto dentro desta aplição. Com isso, evita-se reescrever um mesmo código ou instanciar várias vezes uma mesma classe. Seu uso no construtor, será descrito a seguir no item diagrama de classe. O banco de dados é responsável por armazenar os dados informados pelo usuário do construtor. Seu dever é gravar os dados enviados pelo controller ou retornar quando este é solicitado pelo controller. O sistema de banco de dados à ser utlizado será de escolha do usuário e as tabelas, serão criadas de forma automática pelo construtor. 3.2.2 Modelagem de dados Modelagem de dados consiste em representar as estruturas de dados e regras de negócio necessárias para suportar uma determinada área de negócios. Na figura a seguir, será apresentado o modelo físico onde pode-se observar a estrutura da base de dados gerada pelo construtor.

36 Figura 9 - Modelo entidade-relacionamento. As tabelas detalhe, informacao e usuario do modelo entidade-relacionamento da figura 9, são geradas pelo construtor após o preenchimento dos dados de acesso ao banco de dados de preferência do usuário. Os dados técnicos e informações do website a ser criado pelo construtor, são preenchidos em etapas pelo usuário e são armazenados nas tabelas da figura 9, correspondente a cada etapa executada. 3.2.3 Diagrama de caso de uso O diagrama de caso de uso, é um dos diagramas dísponíveis na UML. É aplicado na modelagem do comportamento de um sistema. O diagrama de caso de uso indica os passos necessários para o funcionamento do construtor. A figura 10 representa os casos de usos levantados.