Trabalho Desenvolvimeto web

•

Engenharias

1

0

1

0

Pit bicha

23.05.2022

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 3, do total de 5 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Análise, Projeto e Desenvolvimento III

32 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

CENTRO UNIVERSITÁRIO INTERNACIONAL UNINTER 
ESCOLA SUPERIOR POLITÉCNICA 
ANÁLISE E DESENVOLVIMETO DE SISTEMAS 
FERRAMENTAS DE DESENVOLVIMENTO WEB 
 
 
 
 
 
 
 
ATIVIDADE PRÁTICA 
 
 
 
 
 
GUILHERME A S PARRA, 3303901 
MARGARETE KLAMAS, ESP 
 
 
 
 
 
 
SÃO JOSÉ DOS PINHAIS-PARANÁ 
2021 
CRIANDO ARQUIVO.TS 
 
//criando classe com os requisitos pedidos 
export class Arquivo{ 
 
 //criando variaveis para a classe pedida no exercicio 
 //contentado os devidos dados pedidos 
 
 nome : string=""; 
 ru:number=0; 
 nomeCurso:string=""; 
 aniversario:string="" 
 
 //criando construtor para instanciar as variaveis 
 constructor(values:Object={}){ 
 Object.assign(this,values) 
 } 
 
} 
 
Criando dados pedido para gerar a tabela (app.components.ts) 
 
import { Component } from '@angular/core'; 
import { Arquivo } from './arquivo'; 
 
@Component({ 
 selector: 'app-root', 
 templateUrl: './app.component.html', 
 styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
 
 title = 'projeto-bootstrap'; 
 
 //cria uma variavel do tipo array com o tipo do arquivo que foi 
 //pedido 
 
 dadosTotais : Array<Arquivo>; 
 
 constructor(){ 
 
 //dentro do contrutor do component que será usado para renderizar a 
tela,criei a base 
 //de dados para que assim que ele for instaciado, tambem criar os 
dados do nosso array 
 //carregando os dados do Arquivo.ts que exportamos 
 
 this.dadosTotais=[ 
 
{nome:'guilherme',ru:3303901,aniversario:'20/12/1991',nomeCurso:'ADS'}, 
 
{nome:'mario',ru:12342131,aniversario:'12/10/2001',nomeCurso:'engenharia 
mecanica'}, 
 
{nome:'maria',ru:123,aniversario:'23/07/2015',nomeCurso:'psicologia'}, 
 
{nome:'jordana',ru:1123214234,aniversario:'01/09/2000',nomeCurso:'fisiote
rapia'}, 
 
{nome:'henrique',ru:1234434,aniversario:'09/09/1999',nomeCurso:'relações 
internacionais'} 
 
 ]; 
 } 
 
} 
 
 
Criando e usando o bootstrap na tabela (app.component.html) 
 
<h1>Tabela de Dados</h1> 
 
<table class="table table-dark"> 
 <thead> 
 <tr> 
 <th scope="col">Nome</th> 
 <th scope="col">RU</th> 
 <th scope="col">Aniversario</th> 
 <th scope="col">Curso</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr *ngFor="let people of dadosTotais"> 
 <td>{{people.nome}}</td> 
 <td>{{people.ru}}</td> 
 <td>{{people.aniversario}}</td> 
 <td>{{people.nomeCurso}}</td> 
 </tr> 
 </tbody> 
</table> 
 
 
 
 
 
Importando bootStrap na classe index.html 
 
 
<!doctype html> 
<html lang="en"> 
<head> 
 <meta charset="utf-8"> 
 <title>ProjetoBootstrap</title> 
 <base href="/"> 
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
 <link rel="icon" type="image/x-icon" href="favicon.ico"> 
 <link rel="stylesheet" 
 href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.m
in.css" integrity="sha384-
MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
 crossorigin="anonymous"> 
</head> 
<body> 
 <app-root> 
 
 </app-root> 
 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
 integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
 crossorigin="anonymous"></script> 
<script 
 src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.
min.js" integrity="sha384-
ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
 crossorigin="anonymous"></script> 
<script 
 src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min
.js" integrity="sha384-
ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
 crossorigin="anonymous"></script> 
</body> 
</html> 
 
 
 
 
 
 
 
 
Print localhost:4200 
 
 
 
Print estrutura da pasta 
 
 
Print dentro da pasta App 
 
http://localhost:4200/