Programação web para Back-End
CLIQUE AQUI! PARA VISUALIZAR O MANUAL!
ROTEIRO DE AULA PRÁTICA 1
Unidade:
Aula (White Label)/Seção (KLS):
SOFTWARE
☒Software / ☐ Acesso on-line
☐Pago / ☒ Não Pago
Infraestrutura:
Computador;
Software de ambiente de desenvolvimento para codificação de páginas web emJSF (Java) comEclipse IDE. Descrição do software:
Eclipse é uma IDE para desenvolvimento Java, porém suporta várias outras linguagens apartirde plugins como C/C++, PHP, ColdFusion, Python, Scala e Kotlin. Ele foi feito emJavaesegueo modelo open source de desenvolvimento de software. ATIVIDADE PRÁTICA 1
Atividade proposta:
Desenvolver um pequeno projeto de um currículo web utilizando HTML5 e CSS3. Notequeainda não deverá ser utilizado JSF. Nessa primeira atividade, pretende-se familizar comoambiente de desenvolvimento, utilizando linguagem básica de programação web. Objetivos:
– Criar familiaridade com ambiente de desenvolvimento Eclise com servidor WildFly. – Construir estrutura de um projeto web no ambiente de desenvolvimento java, utilizandoaslinguagens HTML e CSS, para web, com Eclipse; – Desenvolver um um pequeno projeto de criação de um currículo web. – Compreender o processo de configurações necessárias para funcionamento do ambientededesenvolvimento Eclipse. Procedimentos para a realização da atividade:
Para cumprir com o proposto dessa aula prática, é necessário ter previamente instaladooEclipse e o Temurin. Tendo isso garantido, crie uma forma de organização de pastasparareceber os arquivos de seu projeto. 1 – Criar dentro da pasta eclipse-workspace, definida durante o processo de instalaçãodaferramenta, uma subpasta chamada “Atividade1”, para o armazenamento dos arquivosdesse
projeto. Crie um novo projeto indo ao menu File > New > Dynamic Web Project.
2 – Depois do projeto criado, clique com o botão direito em cima da pasta webapp (queficaemsrc > main), escolha a opção New e HTML File, para criar um arquivo do tipo HTML. Sigaospassos sugeridos pela ferramenta e nomeie o arquivo como index.html. 3 – Crie uma nova pasta clicando com o botão direito em cima de webapp e coloque onomede_css. Dentro dela, crie um arquivo de estilo, clicando com o botão direito sobre ela(_css), New > CSS File.
4 – Construa o código em HTML para criação de um mini projeto de currículo web comseusdados pessoais. Para isso, previamente, é necessário reunir todas as informações necessáriaspara isso. Escolaridade, Dados pessoais, Cursos, Experiências profissionais, e etc. Alémdisso, escolha uma bela foto para compor o seu currículo web. Note que toda a parte de estilodeseuprojeto deverá ser implementada com CSS. Coisas como tipo de fonte, cores, tamanhoeetc,
tudo deve ser implementado em CSS. Não esqueça que será necessário ligar seu arquivoeestilo ao seu arquivo HTML. 5 – Para que a etapa anterior possa ser completada com êxito, você precisará utilizar oelemento <link>, do HTML, para linkar o arquivo de estilo ao seu projeto. Para isso, bastainserira linha a seguir, entre os elementos <head> </head> do seu projeto, assim:
<head>
<meta charset=”ISO-8859-1″>
<title>Atividade1</title>
<link rel=”stylesheet” href=”_css/style.css”>
</head>
6 – Dentro do arquivo index.html, você deverá:
a) Conferir se a estrutura do HTML foi criada adequadamente no momento da criaçãodoarquivo;
b) Utilizando elementos simples como elmentos de parágrafo, de hieraquias (<h1>a
<h6>), e outros de seu conhecimento, compor o seu projeto de modo que ele contenhasuas informações essenciais para um currículo. c) Organizar seus dados em sessões, como: Dados pessoais, Experiências profissionais, Formação, Trabalhos voluntários, e outros. d) Utilize hiperlinks para colocar na sessão de Dados pessoais, links para redes sociaiscomo Linkedin e Instagram. e) Insira uma foto e ajuste-a para que ela fique do lado direito da tela, ou seja, oladooposto aos dados contidos na sessão “Dados pessoais”. 7 – O arquivo de estilo, deve se chamar style.css para padronização. No entanto, épossível
nomeá-lo de outras formas. 8 – Dentro do arquivo de estilo, certifique-se de iniciar o arquivo com a regra corretaparaespecificar a codificçaão de caracteres a ser utilizada na folha de estilo. 9 – Organize os seletores por ordem, de forma organizada e devidamente indentado. Tenteorganiza-lo de acordo com a estrutura do seu HTML. Por exemplo, se emsua estruturaHTMLvocê tem a utilização de um elemento <h1>, em seguida de um elemento <h4> e por fim, umelemento <p>, organize os seletores nessa mesma ordem. Pode não parecer, mas faztodadiferença quando se trabalhar em um projeto mais robusto. Adicione as regras de estilos deseuinteresse em seu currículo web. Checklist:
1 – Download das ferramentas e preparação do ambiente de desenvolvimento comEclipse. 2 – Criação de um projeto e organização dos arquivos e pastas criados. 3 – Criação de arquivo HTML e construção do projeto utilizando elementos simplesparacomposição de um currículo web;
4 – Criação de uma pasta para armazenar o arquivo de estilo e criação do arquivo de estiloparaescrita das regras de estilização. 5 – Configuração do servidor Wildfly para apresentação do resultado do projeto pelo navegadorde internet, utilizando o referido servidor. Resultado: Aluno, você deverá entregar:
Construção de um projeto de currículo web com estrutura utilizando linguagemde marcaçãoHTML5 e linguagem de estilo CSS3, a partir da correta configuração do ambientededesenvolvimento Eclipse, com Temurin e o servidor de aplicações WildFly para apresentaçãodo projeto desenvolvido em um browser. Todo o projeto deverá contar comestrutura depastassugerida na criação de projeto do Eclipse e, adicionalmente, com uma pasta _css queabrigaráo arquivo de estilos, um arquivo de HTML e uma imagem. CReferências:
Alura – Novo projeto web usando eclipse. Disponível em: <https://www.alura.com.br/apostilajava-web/novo-projeto-web-usando-eclipse>. Acesso em: 18, agosto de 2022.
ROTEIRO DE AULA PRÁTICA 2
Unidade: Digite aqui
Aula (White Label)/Seção (KLS): Digite aqui
SOFTWARE
☒Software / ☐ Acesso on-line
☐Pago / ☒ Não Pago
Infraestrutura:
Computador;
Software de ambiente de desenvolvimento para codificação de páginas web emJSF (Java) comEclipse IDE. Descrição do software:
Eclipse é uma IDE para desenvolvimento Java, porém suporta várias outras linguagens apartirde plugins como C/C++, PHP, ColdFusion, Python, Scala e Kotlin. Ele foi feito emJavaesegueo modelo open source de desenvolvimento de software. ATIVIDADE PRÁTICA 2
Atividade proposta:
Criar um projeto utilizando JavaServer Faces, onde deverá ser construído umformuláriodecontato, semelhante aos formulários utilizandos na grande maioria das empresas quecontamcom sistema e-commerce. Empresas como: Americanas, Magazine Luiza e outros, contamcomum modelo de formulário semelhante ao proposto nessa atividade. Objetivos:
Compreender o processo de criação de projeto web para utilização do framework JavaServer
Faces;
Realizar configurações básicas do JSF para o projeto em questão;
Construir formulário de cadastro utilizando JSF. Procedimentos para a realização da atividade:
Será necessário a construção de um projeto novo. Sugere-se utilizar o nome Atividade2paraefeito de organização considerando esse roteiro de atividades. O processo de criaçãodoreferido projeto é semelhante ao da atividade1, contudo agora, será necessário configurar oJSFpara utilizá-lo nesse projeto. O JSF utilizado neste projeto, foi o de verdão 2.3. Veja:
1 – Em seguida, deve-se realizar a configuração do campo de implementação de biblioteca, o“JSF Implementation Library” e deixá-lo desativado, como na imagem a seguir:
2 – Será necesário instalar a biblioteca do JSF no projeto. Para isso, deve-se acessar oendereço: <https://maven.java.net/content/repositories/releases/org/glassfish/javax.faces/2.3.0/>e produrar a versão javax.faces-2.3.0.jar, a escolhida para esse projeto. Baixe e coloqueoarquivo na pasta lib (para isso, basta copiar e colar o arquivo na pasta).
3 – Duas configurações novas devem ser feitas no momento de construir uma páginaHTML. Agora, iremos criar um arquivo de nome formulario.xhtml e na tela seguinte, o templateaserusado é “New XHTML file (1.0 transitional), veja nas imagens:
4 – Agora será necessário fazer uma pequena alteração na estrutura de código criadanoarquivo. Note, na linha 3, que será necessário fazer uma inclusão, adicionando oseguintecódigo:
<html xmlns=”http://www.w3.org/1999/xhtml”
xmlns:h=”http://java.sun.com/jsf/html”>
5 – Será necessário criar o código utilizando essa “variável” h utilizada no escopo doprojeto. Defina, pelo menos, 4 campos em seu formulário para informações como: Nome, Sobrenome, Fone e e-mail. 6 – Crie o arquivo de CSS, dentro de uma pasta com o mesmo nome só que escritotudoemminúsculo, _css. O nome do arquivo, dessa vez, pode se main.css. Emseguida, façaas
configurações de estilo para tamanho de campos imput, que nesse caso se chamam<h:inputText> e adicione a propriedade styleClass aos elementos no arquivo .XHTML, esta, será a responsável por aplicar a estilização desejada. Veja:
7 – Cuidado para realizar a indentação do código corretamente. Basta utilizar a indentaçãocriada pelo próprio editor. 8 – Adicione o projeto ao servidor WildFly clicando com o botão direito emcima do nomedoprojeto, “Run As” > “Run on Server”, escolha o WildFly na lista de servidor localhost queaparecerá na tela e pressione o botão Finish. 9 – Para visualizar o resultado de seu projeto, basta clicar com botão direito emcima donomedo arquivo XHTML, nesse caso, formulario.xhtml, “Run As” > “Run on Server”, escolha oWildFlyna lista de servidor localhost que aparecerá na tela e pressione o botão Finish. Notequeaoabrir o navegador padrão em seu computador, o caminho do servidor apresentaráonomefaces, como isso: <localhost:8080/Atividade2/faces/formulario.xhtml>. Isso é necessárioparaque a biblioteca JSF seja carregada no seu projeto. Checklist:
1 – Ambiente de desenvolvimento Eclipse, JDK e WildFly devidamente configuradoefuncionando. 2 – Criação de um projeto e organização dos arquivos e pastas criados. 3 – Download e configuração da biblioteca javax.faces-2.3.0.jar no projeto, para utilizaçãodoframework JavaServer Faces. 3 – Criação de arquivo XHTML e construção do projeto para criação de umformuláriodeconsulta utilizando JavaServer Faces. 4 – Criação de uma pasta css e do arquivo main.css para codificação da folha de estiloutilizadano projeto. 5 – Utilização dos principais elementos javaServer Faces para construção de umformuláriosimples de contato. Resultados da aula prática: Aluno, você deverá entregar:
Criação, estrutura, organização e codificação de um projeto simples de construçãodeumformulário de contato, utilizando o framework JavaServer faces de forma integrada ao CSSparaestilização do referido formulário. Além disso, será necessário levantar o projeto utilizandoochamamento do framework mencionado na URL a ser digitada no navegador, incluindoopadrão de mapeamento, o URL Mapping Patterns que deve ser configurado no momentodecriação do projeto. Referências:
Tutorial das Ferramentas JSF – Construir um Aplicativo JSF 2.0. Disponível em:
<https://www.ibm.com/docs/pt-br/rsm/7.5.0?topic=started-jsf-tools-tutorial-jsf-20>. Acessoem:
18, agosto de 2022. Java Server Faces Technology. Disponível em:
<https://www.oracle.com/java/technologies/javaserverfaces.html>. Acesso em: 18, agostode2022.
ROTEIRO DE AULA PRÁTICA 3
Unidade: Digite aqui
Aula (White Label)/Seção (KLS): Digite aqui
SOFTWARE
☒Software / ☐ Acesso on-line
☐Pago / ☒ Não Pago
Infraestrutura:
Computador;
Software de ambiente de desenvolvimento para codificação de páginas web emJSF (Java) comEclipse IDE. Descrição do software:
Eclipse é uma IDE para desenvolvimento Java, porém suporta várias outras linguagens apartirde plugins como C/C++, PHP, ColdFusion, Python, Scala e Kotlin. Ele foi feito emJavaesegueo modelo open source de desenvolvimento de software. ATIVIDADE PRÁTICA 3
Atividade proposta:
Implementar um pequeno projeto para criação de um formulário utilizando JavaServer FaceseManagedBean para cadastro de nome de usuário e, utilizando ArrayList, imprimir nateladonavegador o nome cadastrado. O projeto deve utilizar linguagem CSS para estilizaçãodoscampos. Objetivos:
Compreender e utilizar JavaServer Faces, ManagedBeans e ArrayList para inserção denomede usuários numa lista de nomes e exibir no navegador, no momento de sua inserção, onomeinserido. Procedimentos para a realização da atividade:
Para realização dessa atividade, será necessário fazer uso do ManagedBeans. Nessemomento, utilizaremos a bean @Named e @RequestScoped. É preciso frisar que aprimeira, substituiu a @ManagedBean que foi descontinuada. 1 – Crie um novo projeto, semelhante à construção realizada nas atividades anteriores. VáemFile > New > Dynamic Web Project. 2 – Dê o nome de CadastroUsuarios ao projeto, marque o campo “Target Runtime” comWidlfly23.0 e, em seguida, no campo “Configuraration”, sete para a opção JavaServer Facesv2.3Project. 3 – Avance até a tela que mostra o campo “JSF Implementation Library” pois deixaremosessecampo marcado com a opção “Disable Library Configuration”. Isso, porque copiaremosa
biblioteca java.faces-2.3.0.jar para a pasta src/webapp/WEB-INF/lib, como nos projetosanteriores. 4 – Agora, vamos criar a pasta css dentro de src/webapp/ e, dentro da pasta css, criaremosoarquivo main.css. 5 – Em seguida, ainda na pasta src/webapp/ vamor criar o arquivo XHTML comnomecadastro.xhtml, clicando com o botão direito sobre a mencionada pasta, New, HTMLFile. Natelaque surge, você deverá substituir o nome do arquivo para cadastro.xhtml e, emseguida, clicarno botão Next. Na lista de templates que aparece, escolha a opção New XHTMLFile(1.0transitional). Não esqueça de alterar a linha do elemento <html> do arquivo para:
<html xmlns=”http://www.w3.org/1999/xhtml”
xmlns:h=”http://java.sun.com/jsf/html”>
6 – No arquivo cadastro.xhtml, você deverá construir um código, que deverá contar comapenasum campo para inserção e nome. 7 – Agora é a hora de construir estilo de página para o seu arquivo. Vá para o arquivomain.csse, utilizando as propriedades de seu interesse, formate o seu campo utilizando recursosdecores, tamanhos, fontes e etc. 8 – Crie agora um arquivo de classe java em seu projeto. Mas antes, é necessáriocriar umpacakge. Para isso, vá para JavaResources, src/main/java, clique com o botão direitosobreessa opção Other. Na janela que abrirá, pesquise no campo Wizards pelo termo package, comona imagem a seguir:
9 – Na tela seguinte, você poderá definir um nome. Então, utilize br.com.cadUser. CliqueemFinish e, em cima do pacote criado, clique com o botão direito do mouse, New, Class dêonomePessoa no campo que aparecerá. Não altere nenhuma outra configuração. Veja:
10 – A raiz de diretório deverá ficar da seguinte forma:
11 – Finalmente, crie o código da classe, um atributo nome do tipo privado e umatributoprivadodo tipo ArrayList, para armazenar os nomes digitados. Não esqueça de criar os métodos getterse setters de ambos os atributos. Checklist:
1 – Ambiente de desenvolvimento Eclipse, JDK, pacote e WildFly devidamente configuradoefuncionando. 2 – Criação de um projeto e organização dos arquivos e pastas criados. 3 – Download e configuração da biblioteca javax.faces-2.3.0.jar no projeto, para utilizaçãodo
framework JavaServer Faces. 3 – Criação de arquivo XHTML e construção do projeto para criação de umformuláriocomumcampo para preenchimento de nome. 4 – Criação de um pacote. 5 – Criação de uma pasta css e do arquivo main.css para codificação da folha de estiloutilizadano projeto. 6 – Criação de um arquivo de classe java para compor o back-end do projeto. 7 – Utilização dos principais elementos javaServer Faces para construção de umformuláriosimples de contato. 8 – Utilizar notações bean @Named e @RequestScoped para funcionamento do projeto. Resultados da aula prática: Aluno, você deverá entregar:
Criação, estrutura, organização e codificação de um miniprojeto de página web comformuláriocontando com um campo para preenchimento de nome. O referido formulário deveráexibir onome digitado logo abaixo, utilizando ArrayList que deverá ser implementado comframeworkJavaServer faces de forma integrada ao CSS para estilização do referido formulário. Alémdisso, será necessário empregar notações de ManagedBean no projeto e configurar ochamamento do framework mencionado na URL a ser digitada no navegador, incluindoopadrão de mapeamento, o URL Mapping Patterns que deve ser configurado no momentodecriação do projeto. Referências:
Avaliações
Não há avaliações ainda.