{"id":40740,"date":"2025-07-26T13:52:02","date_gmt":"2025-07-26T16:52:02","guid":{"rendered":"https:\/\/portifolioos-prontos.com\/?post_type=product&p=40740"},"modified":"2025-10-11T14:53:50","modified_gmt":"2025-10-11T17:53:50","slug":"programacao-web-para-back-end","status":"publish","type":"product","link":"https:\/\/portifolioos-prontos.com\/index.php\/product\/programacao-web-para-back-end\/","title":{"rendered":"Programa\u00e7\u00e3o web para Back-End"},"content":{"rendered":"

Programa\u00e7\u00e3o web para Back-End<\/h3>\n

Disciplina: Programa\u00e7\u00e3o web para back-endROTEIRO DE AULA PR\u00c1TICA 1<\/p>\n

Unidade:<\/p>\n

Aula (White Label<\/a>)\/Se\u00e7\u00e3o (KLS):<\/p>\n

SOFTWARE<\/p>\n

\u2612Software \/ \u2610 Acesso on-line<\/p>\n

\u2610Pago \/ \u2612 N\u00e3o Pago<\/p>\n

Infraestrutura:<\/p>\n

Computador;<\/p>\n

Software de ambiente de desenvolvimento para codifica\u00e7\u00e3o de p\u00e1ginas web emJSF (Java) comEclipse IDE. Descri\u00e7\u00e3o do software:<\/p>\n

Eclipse \u00e9 uma IDE para desenvolvimento Java, por\u00e9m suporta v\u00e1rias 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\u00c1TICA 1<\/p>\n

Atividade proposta:<\/p>\n

Desenvolver um pequeno projeto de um curr\u00edculo web utilizando HTML5 e CSS3. Notequeainda n\u00e3o dever\u00e1 ser utilizado JSF. Nessa primeira atividade, pretende-se familizar comoambiente de desenvolvimento, utilizando linguagem b\u00e1sica de programa\u00e7\u00e3o web. Objetivos:<\/p>\n

– 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\u00e7\u00e3o de um curr\u00edculo web. – Compreender o processo de configura\u00e7\u00f5es necess\u00e1rias para funcionamento do ambientededesenvolvimento Eclipse. Procedimentos para a realiza\u00e7\u00e3o da atividade:<\/p>\n

Para cumprir com o proposto dessa aula pr\u00e1tica, \u00e9 necess\u00e1rio ter previamente instaladooEclipse e o Temurin. Tendo isso garantido, crie uma forma de organiza\u00e7\u00e3o de pastasparareceber os arquivos de seu projeto. 1 – Criar dentro da pasta eclipse-workspace, definida durante o processo de instala\u00e7\u00e3odaferramenta, uma subpasta chamada “Atividade1″, para o armazenamento dos arquivosdesse<\/p>\n

projeto. Crie um novo projeto indo ao menu File > New > Dynamic Web Project.<\/p>\n

2 – Depois do projeto criado, clique com o bot\u00e3o direito em cima da pasta webapp (queficaemsrc > main), escolha a op\u00e7\u00e3o 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\u00e3o direito em cima de webapp e coloque onomede_css. Dentro dela, crie um arquivo de estilo, clicando com o bot\u00e3o direito sobre ela(_css), New > CSS File.<\/p>\n

4 – Construa o c\u00f3digo em HTML para cria\u00e7\u00e3o de um mini projeto de curr\u00edculo web comseusdados pessoais. Para isso, previamente, \u00e9 necess\u00e1rio reunir todas as informa\u00e7\u00f5es necess\u00e1riaspara isso. Escolaridade, Dados pessoais, Cursos, Experi\u00eancias profissionais, e etc. Al\u00e9mdisso, escolha uma bela foto para compor o seu curr\u00edculo web. Note que toda a parte de estilodeseuprojeto dever\u00e1 ser implementada com CSS. Coisas como tipo de fonte, cores, tamanhoeetc,<\/p>\n

tudo deve ser implementado em CSS. N\u00e3o esque\u00e7a que ser\u00e1 necess\u00e1rio ligar seu arquivoeestilo ao seu arquivo HTML. 5 – Para que a etapa anterior possa ser completada com \u00eaxito, voc\u00ea precisar\u00e1 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:<\/p>\n

<head><\/p>\n

<meta charset=”ISO-8859-1″><\/p>\n

<title>Atividade1<\/title><\/p>\n

<link rel=”stylesheet” href=”_css\/style.css”><\/p>\n

<\/head><\/p>\n

6 – Dentro do arquivo index.html, voc\u00ea dever\u00e1:<\/p>\n

    \n
  1. a) Conferir se a estrutura do HTML foi criada adequadamente no momento da cria\u00e7\u00e3odoarquivo;<\/li>\n
  2. b) Utilizando elementos simples como elmentos de par\u00e1grafo, de hieraquias (<h1>a<\/li>\n<\/ol>\n

    <h6>), e outros de seu conhecimento, compor o seu projeto de modo que ele contenhasuas informa\u00e7\u00f5es essenciais para um curr\u00edculo. c) Organizar seus dados em sess\u00f5es, como: Dados pessoais, Experi\u00eancias profissionais, Forma\u00e7\u00e3o, Trabalhos volunt\u00e1rios, e outros. d) Utilize hiperlinks para colocar na sess\u00e3o 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\u00e3o “Dados pessoais”. 7 – O arquivo de estilo, deve se chamar style.css para padroniza\u00e7\u00e3o. No entanto, \u00e9poss\u00edvel<\/p>\n

    nome\u00e1-lo de outras formas. 8 – Dentro do arquivo de estilo, certifique-se de iniciar o arquivo com a regra corretaparaespecificar a codific\u00e7a\u00e3o 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\u00ea tem a utiliza\u00e7\u00e3o de um elemento <h1>, em seguida de um elemento <h4> e por fim, umelemento <p>, organize os seletores nessa mesma ordem. Pode n\u00e3o parecer, mas faztodadiferen\u00e7a quando se trabalhar em um projeto mais robusto. Adicione as regras de estilos deseuinteresse em seu curr\u00edculo web. Checklist:<\/p>\n

    1 – Download das ferramentas e prepara\u00e7\u00e3o do ambiente de desenvolvimento comEclipse. 2 – Cria\u00e7\u00e3o de um projeto e organiza\u00e7\u00e3o dos arquivos e pastas criados. 3 – Cria\u00e7\u00e3o de arquivo HTML e constru\u00e7\u00e3o do projeto utilizando elementos simplesparacomposi\u00e7\u00e3o de um curr\u00edculo web;<\/p>\n

    4 – Cria\u00e7\u00e3o de uma pasta para armazenar o arquivo de estilo e cria\u00e7\u00e3o do arquivo de estiloparaescrita das regras de estiliza\u00e7\u00e3o. 5 – Configura\u00e7\u00e3o do servidor Wildfly para apresenta\u00e7\u00e3o do resultado do projeto pelo navegadorde internet, utilizando o referido servidor. Resultado: Aluno, voc\u00ea dever\u00e1 entregar:<\/p>\n

    Constru\u00e7\u00e3o de um projeto de curr\u00edculo web com estrutura utilizando linguagemde marca\u00e7\u00e3oHTML5 e linguagem de estilo CSS3, a partir da correta configura\u00e7\u00e3o do ambientededesenvolvimento Eclipse, com Temurin e o servidor de aplica\u00e7\u00f5es WildFly para apresenta\u00e7\u00e3odo projeto desenvolvido em um browser. Todo o projeto dever\u00e1 contar comestrutura depastassugerida na cria\u00e7\u00e3o de projeto do Eclipse e, adicionalmente, com uma pasta _css queabrigar\u00e1o arquivo de estilos, um arquivo de HTML e uma imagem. CRefer\u00eancias:<\/p>\n

    Alura – Novo projeto web usando eclipse. Dispon\u00edvel em: <https:\/\/www.alura.com.br\/apostilajava-web\/novo-projeto-web-usando-eclipse>. Acesso em: 18, agosto de 2022.<\/p>\n

    ROTEIRO DE AULA PR\u00c1TICA 2<\/p>\n

    Unidade: Digite aqui<\/p>\n

    Aula (White Label)\/Se\u00e7\u00e3o (KLS): Digite aqui<\/p>\n

    SOFTWARE<\/p>\n

    \u2612Software \/ \u2610 Acesso on-line<\/p>\n

    \u2610Pago \/ \u2612 N\u00e3o Pago<\/p>\n

    Infraestrutura:<\/p>\n

    Computador;<\/p>\n

    Software de ambiente de desenvolvimento para codifica\u00e7\u00e3o de p\u00e1ginas web emJSF (Java) comEclipse IDE. Descri\u00e7\u00e3o do software:<\/p>\n

    Eclipse \u00e9 uma IDE para desenvolvimento Java, por\u00e9m suporta v\u00e1rias 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\u00c1TICA 2<\/p>\n

    Atividade proposta:<\/p>\n

    Criar um projeto utilizando JavaServer Faces, onde dever\u00e1 ser constru\u00eddo umformul\u00e1riodecontato, semelhante aos formul\u00e1rios utilizandos na grande maioria das empresas quecontamcom sistema e-commerce. Empresas como: Americanas, Magazine Luiza e outros, contamcomum modelo de formul\u00e1rio semelhante ao proposto nessa atividade. Objetivos:<\/p>\n

    Compreender o processo de cria\u00e7\u00e3o de projeto web para utiliza\u00e7\u00e3o do framework JavaServer<\/p>\n

    Faces;<\/p>\n

    Realizar configura\u00e7\u00f5es b\u00e1sicas do JSF para o projeto em quest\u00e3o;<\/p>\n

    Construir formul\u00e1rio de cadastro utilizando JSF. Procedimentos para a realiza\u00e7\u00e3o da atividade:<\/p>\n

    Ser\u00e1 necess\u00e1rio a constru\u00e7\u00e3o de um projeto novo. Sugere-se utilizar o nome Atividade2paraefeito de organiza\u00e7\u00e3o considerando esse roteiro de atividades. O processo de cria\u00e7\u00e3odoreferido projeto \u00e9 semelhante ao da atividade1, contudo agora, ser\u00e1 necess\u00e1rio configurar oJSFpara utiliz\u00e1-lo nesse projeto. O JSF utilizado neste projeto, foi o de verd\u00e3o 2.3. Veja:<\/p>\n

    1 – Em seguida, deve-se realizar a configura\u00e7\u00e3o do campo de implementa\u00e7\u00e3o de biblioteca, o\u201cJSF Implementation Library\u201d e deix\u00e1-lo desativado, como na imagem a seguir:<\/p>\n

    2 – Ser\u00e1 neces\u00e1rio instalar a biblioteca do JSF no projeto. Para isso, deve-se acessar oendere\u00e7o: <https:\/\/maven.java.net\/content\/repositories\/releases\/org\/glassfish\/javax.faces\/2.3.0\/>e produrar a vers\u00e3o 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).<\/p>\n

    3 – Duas configura\u00e7\u00f5es novas devem ser feitas no momento de construir uma p\u00e1ginaHTML. Agora, iremos criar um arquivo de nome formulario.xhtml e na tela seguinte, o templateaserusado \u00e9 \u201cNew XHTML file (1.0 transitional), veja nas imagens:<\/p>\n

    4 – Agora ser\u00e1 necess\u00e1rio fazer uma pequena altera\u00e7\u00e3o na estrutura de c\u00f3digo criadanoarquivo. Note, na linha 3, que ser\u00e1 necess\u00e1rio fazer uma inclus\u00e3o, adicionando oseguintec\u00f3digo:<\/p>\n

    <html xmlns=”http:\/\/www.w3.org\/1999\/xhtml”<\/p>\n

    xmlns:h=”http:\/\/java.sun.com\/jsf\/html”><\/p>\n

    5 – Ser\u00e1 necess\u00e1rio criar o c\u00f3digo utilizando essa \u201cvari\u00e1vel\u201d h utilizada no escopo doprojeto. Defina, pelo menos, 4 campos em seu formul\u00e1rio para informa\u00e7\u00f5es como: Nome, Sobrenome, Fone e e-mail. 6 – Crie o arquivo de CSS, dentro de uma pasta com o mesmo nome s\u00f3 que escritotudoemmin\u00fasculo, _css. O nome do arquivo, dessa vez, pode se main.css. Emseguida, fa\u00e7aas<\/p>\n

    configura\u00e7\u00f5es 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\u00e1 a respons\u00e1vel por aplicar a estiliza\u00e7\u00e3o desejada. Veja:<\/p>\n

    7 – Cuidado para realizar a indenta\u00e7\u00e3o do c\u00f3digo corretamente. Basta utilizar a indenta\u00e7\u00e3ocriada pelo pr\u00f3prio editor. 8 – Adicione o projeto ao servidor WildFly clicando com o bot\u00e3o direito emcima do nomedoprojeto, \u201cRun As\u201d > \u201cRun on Server\u201d, escolha o WildFly na lista de servidor localhost queaparecer\u00e1 na tela e pressione o bot\u00e3o Finish. 9 – Para visualizar o resultado de seu projeto, basta clicar com bot\u00e3o direito emcima donomedo arquivo XHTML, nesse caso, formulario.xhtml, \u201cRun As\u201d > \u201cRun on Server\u201d, escolha oWildFlyna lista de servidor localhost que aparecer\u00e1 na tela e pressione o bot\u00e3o Finish. Notequeaoabrir o navegador padr\u00e3o em seu computador, o caminho do servidor apresentar\u00e1onomefaces, como isso: <localhost:8080\/Atividade2\/faces\/formulario.xhtml>. Isso \u00e9 necess\u00e1rioparaque a biblioteca JSF seja carregada no seu projeto. Checklist:<\/p>\n

    1 – Ambiente de desenvolvimento Eclipse, JDK e WildFly devidamente configuradoefuncionando. 2 – Cria\u00e7\u00e3o de um projeto e organiza\u00e7\u00e3o dos arquivos e pastas criados. 3 – Download e configura\u00e7\u00e3o da biblioteca javax.faces-2.3.0.jar no projeto, para utiliza\u00e7\u00e3odoframework JavaServer Faces. 3 – Cria\u00e7\u00e3o de arquivo XHTML e constru\u00e7\u00e3o do projeto para cria\u00e7\u00e3o de umformul\u00e1riodeconsulta utilizando JavaServer Faces. 4 – Cria\u00e7\u00e3o de uma pasta css e do arquivo main.css para codifica\u00e7\u00e3o da folha de estiloutilizadano projeto. 5 – Utiliza\u00e7\u00e3o dos principais elementos javaServer Faces para constru\u00e7\u00e3o de umformul\u00e1riosimples de contato. Resultados da aula pr\u00e1tica: Aluno, voc\u00ea dever\u00e1 entregar:<\/p>\n

    Cria\u00e7\u00e3o, estrutura, organiza\u00e7\u00e3o e codifica\u00e7\u00e3o de um projeto simples de constru\u00e7\u00e3odeumformul\u00e1rio de contato, utilizando o framework JavaServer faces de forma integrada ao CSSparaestiliza\u00e7\u00e3o do referido formul\u00e1rio. Al\u00e9m disso, ser\u00e1 necess\u00e1rio levantar o projeto utilizandoochamamento do framework mencionado na URL a ser digitada no navegador, incluindoopadr\u00e3o de mapeamento, o URL Mapping Patterns que deve ser configurado no momentodecria\u00e7\u00e3o do projeto. Refer\u00eancias:<\/p>\n

    Tutorial das Ferramentas JSF – Construir um Aplicativo JSF 2.0. Dispon\u00edvel em:<\/p>\n

    <https:\/\/www.ibm.com\/docs\/pt-br\/rsm\/7.5.0?topic=started-jsf-tools-tutorial-jsf-20>. Acessoem:<\/p>\n

    18, agosto de 2022. Java Server Faces Technology. Dispon\u00edvel em:<\/p>\n

    <https:\/\/www.oracle.com\/java\/technologies\/javaserverfaces.html>. Acesso em: 18, agostode2022.<\/p>\n

    ROTEIRO DE AULA PR\u00c1TICA 3<\/p>\n

    Unidade: Digite aqui<\/p>\n

    Aula (White Label)\/Se\u00e7\u00e3o (KLS): Digite aqui<\/p>\n

    SOFTWARE<\/p>\n

    \u2612Software \/ \u2610 Acesso on-line<\/p>\n

    \u2610Pago \/ \u2612 N\u00e3o Pago<\/p>\n

    Infraestrutura:<\/p>\n

    Computador;<\/p>\n

    Software de ambiente de desenvolvimento para codifica\u00e7\u00e3o de p\u00e1ginas web emJSF (Java) comEclipse IDE. Descri\u00e7\u00e3o do software:<\/p>\n

    Eclipse \u00e9 uma IDE para desenvolvimento Java, por\u00e9m suporta v\u00e1rias 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\u00c1TICA 3<\/p>\n

    Atividade proposta:<\/p>\n

    Implementar um pequeno projeto para cria\u00e7\u00e3o de um formul\u00e1rio utilizando JavaServer FaceseManagedBean para cadastro de nome de usu\u00e1rio e, utilizando ArrayList, imprimir nateladonavegador o nome cadastrado. O projeto deve utilizar linguagem CSS para estiliza\u00e7\u00e3odoscampos. Objetivos:<\/p>\n

    Compreender e utilizar JavaServer Faces, ManagedBeans e ArrayList para inser\u00e7\u00e3o denomede usu\u00e1rios numa lista de nomes e exibir no navegador, no momento de sua inser\u00e7\u00e3o, onomeinserido. Procedimentos para a realiza\u00e7\u00e3o da atividade:<\/p>\n

    Para realiza\u00e7\u00e3o dessa atividade, ser\u00e1 necess\u00e1rio fazer uso do ManagedBeans. Nessemomento, utilizaremos a bean @Named e @RequestScoped. \u00c9 preciso frisar que aprimeira, substituiu a @ManagedBean que foi descontinuada. 1 – Crie um novo projeto, semelhante \u00e0 constru\u00e7\u00e3o realizada nas atividades anteriores. V\u00e1emFile > New > Dynamic Web Project. 2 – D\u00ea o nome de CadastroUsuarios ao projeto, marque o campo \u201cTarget Runtime\u201d comWidlfly23.0 e, em seguida, no campo \u201cConfiguraration\u201d, sete para a op\u00e7\u00e3o JavaServer Facesv2.3Project. 3 – Avance at\u00e9 a tela que mostra o campo \u201cJSF Implementation Library\u201d pois deixaremosessecampo marcado com a op\u00e7\u00e3o \u201cDisable Library Configuration\u201d. Isso, porque copiaremosa<\/p>\n

    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\u00e3o direito sobre a mencionada pasta, New, HTMLFile. Natelaque surge, voc\u00ea dever\u00e1 substituir o nome do arquivo para cadastro.xhtml e, emseguida, clicarno bot\u00e3o Next. Na lista de templates que aparece, escolha a op\u00e7\u00e3o New XHTMLFile(1.0transitional). N\u00e3o esque\u00e7a de alterar a linha do elemento <html> do arquivo para:<\/p>\n

    <html xmlns=”http:\/\/www.w3.org\/1999\/xhtml”<\/p>\n

    xmlns:h=”http:\/\/java.sun.com\/jsf\/html”><\/p>\n

    6 – No arquivo cadastro.xhtml, voc\u00ea dever\u00e1 construir um c\u00f3digo, que dever\u00e1 contar comapenasum campo para inser\u00e7\u00e3o e nome. 7 – Agora \u00e9 a hora de construir estilo de p\u00e1gina para o seu arquivo. V\u00e1 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, \u00e9 necess\u00e1riocriar umpacakge. Para isso, v\u00e1 para JavaResources, src\/main\/java, clique com o bot\u00e3o direitosobreessa op\u00e7\u00e3o Other. Na janela que abrir\u00e1, pesquise no campo Wizards pelo termo package, comona imagem a seguir:<\/p>\n

    9 – Na tela seguinte, voc\u00ea poder\u00e1 definir um nome. Ent\u00e3o, utilize br.com.cadUser. CliqueemFinish e, em cima do pacote criado, clique com o bot\u00e3o direito do mouse, New, Class d\u00eaonomePessoa no campo que aparecer\u00e1. N\u00e3o altere nenhuma outra configura\u00e7\u00e3o. Veja:<\/p>\n

    10 – A raiz de diret\u00f3rio dever\u00e1 ficar da seguinte forma:<\/p>\n

    11 – Finalmente, crie o c\u00f3digo da classe, um atributo nome do tipo privado e umatributoprivadodo tipo ArrayList, para armazenar os nomes digitados. N\u00e3o esque\u00e7a de criar os m\u00e9todos getterse setters de ambos os atributos. Checklist:<\/p>\n

    1 – Ambiente de desenvolvimento Eclipse, JDK, pacote e WildFly devidamente configuradoefuncionando. 2 – Cria\u00e7\u00e3o de um projeto e organiza\u00e7\u00e3o dos arquivos e pastas criados. 3 – Download e configura\u00e7\u00e3o da biblioteca javax.faces-2.3.0.jar no projeto, para utiliza\u00e7\u00e3odo<\/p>\n

    framework JavaServer Faces. 3 – Cria\u00e7\u00e3o de arquivo XHTML e constru\u00e7\u00e3o do projeto para cria\u00e7\u00e3o de umformul\u00e1riocomumcampo para preenchimento de nome. 4 – Cria\u00e7\u00e3o de um pacote. 5 – Cria\u00e7\u00e3o de uma pasta css e do arquivo main.css para codifica\u00e7\u00e3o da folha de estiloutilizadano projeto. 6 – Cria\u00e7\u00e3o de um arquivo de classe java para compor o back-end do projeto. 7 – Utiliza\u00e7\u00e3o dos principais elementos javaServer Faces para constru\u00e7\u00e3o de umformul\u00e1riosimples de contato. 8 – Utilizar nota\u00e7\u00f5es bean @Named e @RequestScoped para funcionamento do projeto. Resultados da aula pr\u00e1tica: Aluno, voc\u00ea dever\u00e1 entregar:<\/p>\n

    Cria\u00e7\u00e3o, estrutura, organiza\u00e7\u00e3o e codifica\u00e7\u00e3o de um miniprojeto de p\u00e1gina web comformul\u00e1riocontando com um campo para preenchimento de nome. O referido formul\u00e1rio dever\u00e1exibir onome digitado logo abaixo, utilizando ArrayList que dever\u00e1 ser implementado comframeworkJavaServer faces de forma integrada ao CSS para estiliza\u00e7\u00e3o do referido formul\u00e1rio. Al\u00e9mdisso, ser\u00e1 necess\u00e1rio empregar nota\u00e7\u00f5es de ManagedBean no projeto e configurar ochamamento do framework mencionado na URL a ser digitada no navegador, incluindoopadr\u00e3o de mapeamento, o URL Mapping Patterns que deve ser configurado no momentodecria\u00e7\u00e3o do projeto. Refer\u00eancias:<\/p>\n

    Criando e configurando um proejto web – JSF 2, Primefaces 3 e CDI. Dispon\u00edvel em:<\/p>\n

    <https:\/\/www.devmedia.com.br\/criando-e-configurando-um-projeto-web-jsf-2-primefaces-3-e- cdi\/25251#:~:text=Para%20configurar%2C%20clique%20com%20o,em%20OK%2C%20confirme%20figura%208.>. Acesso em: 18, agosto de 2022.<\/p>\n

    ROTEIRO DE AULA PR\u00c1TICA 4<\/p>\n

    Unidade: Digite aqui<\/p>\n

    Aula (White Label)\/Se\u00e7\u00e3o (KLS): Digite aqui<\/p>\n

    SOFTWARE<\/p>\n

    \u2612Software \/ \u2610 Acesso on-line<\/p>\n

    \u2610Pago \/ \u2612 N\u00e3o Pago<\/p>\n

    Infraestrutura:<\/p>\n

    Computador;<\/p>\n

    Software de ambiente de desenvolvimento para codifica\u00e7\u00e3o de p\u00e1ginas web emJSF (Java) comEclipse IDE. Descri\u00e7\u00e3o do software:<\/p>\n

    Eclipse \u00e9 uma IDE para desenvolvimento Java, por\u00e9m suporta v\u00e1rias 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\u00c1TICA 4<\/p>\n

    Atividade proposta:<\/p>\n

    Configurar a integra\u00e7\u00e3o da ferramenta Eclipse com o sistema de controle de vers\u00e3ogit<\/p>\n

    juntamente com a plataforma de hospedagem de c\u00f3digo fonte e arquivos, github. Objetivos:<\/p>\n

    – Compreender os detalhes necess\u00e1rios para configura\u00e7\u00e3o e integra\u00e7\u00e3o da ferramentaeclipsecom sistema de controle de vers\u00e3o Git e a plataforma de hospedagem de c\u00f3digo-fonte, github. – Realizar as etapas de cria\u00e7\u00e3o de reposit\u00f3rio local e remoto e realizar registros de commitsdealtera\u00e7\u00e3o desses reposit\u00f3rios. – Configurar reposit\u00f3rio git em projetos j\u00e1 criados na IDE Eclipse. Procedimentos para a realiza\u00e7\u00e3o da atividade:<\/p>\n

    Para realiza\u00e7\u00e3o dessa atividade, ser\u00e1 necess\u00e1rio ter configurado o ambientededesenvolvimento Eclipse com projetos j\u00e1 criados. Al\u00e9m disso, \u00e9 importante ter contanaplataforma github criada. 1 – Vamos criar a conta na plataforma github. Incialmente, acesse a plataformaem:<\/p>\n

    <https:\/\/github.com\/> e, em seguida, clique no bot\u00e3o Sign up que aparecer\u00e1 na tela. 2 – Na sequ\u00eancia ser\u00e1 necess\u00e1rio preencher alguns campos como:<\/p>\n

    email, senha, nome de usu\u00e1rio, que n\u00e3o pode conter espa\u00e7os e\/ou caracteres especiaiscomo\u201c\u00e7\u201d, e na \u00faltima pergunta, voc\u00ea pode teclar a letra \u201cn\u201d para n\u00e3o receber mensagensdaplataforma. Basta seguir as etapas seguintes. Voc\u00ea deve inserir ume-mail v\u00e1lidopois, possivelmente, voc\u00ea receber\u00e1 uma confirma\u00e7\u00e3o por e-mail, em forma de c\u00f3digo ou link, paraativar sua conta. 3 – Agora, vamos abrir o projeto no Eclipse que pretendemos controlar comgit. Emseguida, acesse sua conta no github e crie um novo reposit\u00f3rio. V\u00e1 no bot\u00e3o New e crie umreposit\u00f3riocom o nome Atividade-JSF. No campo Description coloque algo como \u201cProjeto de aplica\u00e7\u00e3oJava com Eclipse.\u201d Marque a op\u00e7\u00e3o \u201cAdd a README file\u201d e clique sobre o bot\u00e3o\u201cCreaterepository\u201d. 4 – Fa\u00e7a o upload da pasta do seu projeto para o reposit\u00f3rio criado. Sugere-se arrastar apastapara cima do espa\u00e7o dedicado ao upload na p\u00e1gina do git. Veja:<\/p>\n

    5 – Depois de soltar a pasta do projeto sobre a \u00e1rea, aparecer\u00e1 todos os arquivos queforamcarregados e ser\u00e1 poss\u00edvel realizar o primeiro commit, na \u00e1rea Commit changes. Ocommit, emlinhas gerais, deve ser escrito para registrar quais altera\u00e7\u00f5es foram realizadas no reposit\u00f3rio. Neste caso, acabamos de inserir arquivos de c\u00f3digo do projeto ao reposit\u00f3rio. 6 – Depois de escrever o texto do commit, basta clicar no bot\u00e3o Commit changes. 7 – Agora podemos nos desconectar da conta no github pois o processo de configura\u00e7\u00e3o, agora,<\/p>\n

    acontece no eclipse. Abra a ferramenta. 8 – Remova o projeto completamente de sua IDE, e, em seguida, fa\u00e7a a configura\u00e7\u00e3odosreposit\u00f3rio do git. Para isso, v\u00e1 em Window > Show View > Other > Git > Git Repositories. 9 – Na janela que abrir\u00e1, vamos escolher a op\u00e7\u00e3o Clone a Git repository. Ser\u00e1 necess\u00e1riocopiara URL do reposit\u00f3rio criado. Veja um exemplo: <https:\/\/github.com\/leonardossrocha\/Atividade-JSF>. 10 – Depois que o reposit\u00f3rio for clonado, ser\u00e1 necess\u00e1rio clicar com o bot\u00e3o direito domousesobre o nome do reposit\u00f3rio e clicar na op\u00e7\u00e3o Import Projects. 11 – Para finalizar, vamos fazer uma pequena altera\u00e7\u00e3o no reposit\u00f3rio, vamos inserir umcoment\u00e1rio em um dos arquivos do projeto. Sugere-se a inclus\u00e3o de um coment\u00e1rio noarquivocadastro.xhtml, logo depois do elemento <h:body>, dessa maneira:<\/p>\n

    <h:body><\/p>\n

    <!– Formul\u00e1rio de cadastro –><\/p>\n

    <h1>Cadastro de usu\u00e1rio<\/h1><\/p>\n

    <h:form id=”cadastro”><\/p>\n

    12 – Clique com o bot\u00e3o direito do mouse sobre o projeto \u00e9 escolha a op\u00e7\u00e3o Team>Commit. Paracer\u00e1 uma tela e nela, haver\u00e1 uma \u00e1rea escrita Commit Message. Nela, voc\u00ea insereamensagem de registro da altera\u00e7\u00e3o realizada. 13 – Por fim, \u00e9 necess\u00e1rio escolher o bot\u00e3o Commit and Push, para commitar e j\u00e1 enviar asaltera\u00e7\u00f5es para o reposit\u00f3rio remoto. Caso voc\u00ea n\u00e3o tenha internet, \u00e9 poss\u00edvel realizar s\u00f3ocommit localmente, escolhendo a op\u00e7\u00e3o Commit. Ser\u00e1 solicitado as credenciais de acesso\u00e1conta, basta informar e clicar em Log In. Checklist:<\/p>\n

    1 – Criar a conta na plataforma github. 2 – Iniciar processo de configura\u00e7\u00e3o do Git na IDE eclipse. 3 – Criar um reposit\u00f3rio remoto e carregar os arquivos do projeto para ele. 4 – Clonar e importar o reposit\u00f3rio na IDE Eclipse. 5 – Realizar altera\u00e7\u00f5es no c\u00f3digo executar um commit com push para o reposit\u00f3rio remoto. Resultados da aula pr\u00e1tica: Aluno, voc\u00ea dever\u00e1 entregar:<\/p>\n

    Aplica\u00e7\u00e3o com reposit\u00f3rio remoto devidamente criado. C\u00f3digo da aplica\u00e7\u00e3o commitada, clonepara m\u00e1quina local feito e primeiro commit e push direto da IDE Eclipse para a plataformagithub. Refer\u00eancias:<\/p>\n

    Git no Eclilpse. Dispon\u00edvel em: <https:\/\/git-scm.com\/book\/pt-pt\/v2\/Appendix-A%3A-Git-em-Outros-Ambientes-Git-no-Eclipse>. Acesso em: 18, agosto de 2022.<\/p>\n

    \n

    Como se realizam os envios?<\/strong><\/p>\n<\/div>\n

    O seu trabalho \u00e9 disponibilizado pronto, respondido e nas normas j\u00e1 na mesma hora aqui em nosso site na sua \u00e1rea de downloads e tamb\u00e9m no seu e-mail.<\/p>\n

    Em quanto tempo recebo o portf\u00f3lio?<\/strong><\/p>\n

    Os envios s\u00e3o imediatos. Ap\u00f3s sua compra, o trabalho j\u00e1 \u00e9 disponibilizado instantaneamente aqui em nosso site e no seu e-mail.<\/p>\n

    E se o portf\u00f3lio que comprei precisar de corre\u00e7\u00e3o?<\/strong><\/p>\n

    Caso haja alguma solicita\u00e7\u00e3o de corre\u00e7\u00e3o\/altera\u00e7\u00e3o por parte do tutor, basta entrar em contato conosco pelo\u00a0WhatsApp\u00a0que provid\u00eanciaremos sem custo algum.<\/p>\n

    Qual o formato do arquivo?<\/strong><\/p>\n

    Os arquivos s\u00e3o enviados em formato Word e s\u00e3o edit\u00e1veis.<\/p>\n

    Caso eu tiver alguma d\u00favida, terei suporte no p\u00f3s venda?<\/strong><\/p>\n

    Sim, com certeza. Basta clicar no \u00edcone do WhatsApp no cantinho da tela. Ser\u00e1 um prazer atend\u00ea-lo(a).<\/p>\n

    \n

    Quais os seus canais de contato?<\/strong><\/p>\n<\/div>\n

    \n

    Whatsapp: 53 984751621 \u2013 Clicar no canto da tela ou ESCANEIE O QRCODE ABAIXO<\/p>\n

    \"projeto<\/h4>\n<\/div>\n
    \n
    \n

    E-mail:portifoliosp@gmail.com<\/p>\n

    \n
    \n

    \"PORTFOLIO<\/a><\/p>\n

    Portf\u00f3lioem Word, respondido, completo e j\u00e1 nas normas<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

    \n
    \n

    Pague pelo PIX ou cart\u00e3o e fa\u00e7a o download agora mesmo.<\/strong><\/p>\n<\/div>\n

    \n
    \n

    \"portf\u00f3lio\"portf\u00f3lio\"portf\u00f3lio\"portfolio<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"featured_media":40743,"template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"%%post_title%% %%sitetitle%%","_seopress_titles_desc":"%%post_content%%","_seopress_robots_index":""},"product_cat":[15],"product_tag":[],"class_list":{"0":"post-40740","1":"product","2":"type-product","3":"status-publish","4":"has-post-thumbnail","6":"product_cat-uncategorized","8":"first","9":"instock","10":"downloadable","11":"virtual","12":"purchasable","13":"product-type-simple","14":"col-xs-6 col-sm-4","15":"col-mf-5","16":"un-5-cols"},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/portifolioos-prontos.com\/index.php\/wp-json\/wp\/v2\/product\/40740","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/portifolioos-prontos.com\/index.php\/wp-json\/wp\/v2\/product"}],"about":[{"href":"https:\/\/portifolioos-prontos.com\/index.php\/wp-json\/wp\/v2\/types\/product"}],"version-history":[{"count":1,"href":"https:\/\/portifolioos-prontos.com\/index.php\/wp-json\/wp\/v2\/product\/40740\/revisions"}],"predecessor-version":[{"id":45797,"href":"https:\/\/portifolioos-prontos.com\/index.php\/wp-json\/wp\/v2\/product\/40740\/revisions\/45797"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/portifolioos-prontos.com\/index.php\/wp-json\/wp\/v2\/media\/40743"}],"wp:attachment":[{"href":"https:\/\/portifolioos-prontos.com\/index.php\/wp-json\/wp\/v2\/media?parent=40740"}],"wp:term":[{"taxonomy":"product_cat","embeddable":true,"href":"https:\/\/portifolioos-prontos.com\/index.php\/wp-json\/wp\/v2\/product_cat?post=40740"},{"taxonomy":"product_tag","embeddable":true,"href":"https:\/\/portifolioos-prontos.com\/index.php\/wp-json\/wp\/v2\/product_tag?post=40740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}