Discussoes de Programacao e Tecnologia

Como Criar tela HTML com base de dados ocultos nela

20 respostas Resolvido
P
Pacato

Pessoal,

Preciso criar uma tela de consulta, onde tenho:

  • Uma lista com aulas
  • Número da aula
  • Escola

E preciso criar uma tela de consulta, onde digito o número e pesquisa a aula e retorna a aula e a escola.

até ai tranquilo… MAS… não posso usar BD… tipo esse site:

http://www.aliancaabc.org/eaeRegional/consultaAula.php

Pensei em algo taxado no próprio HTML… porque não são tantos dados… e onde está hospedado, só daria para acrescentar uma tela, nada em Java, BD, por isso a dificuldade…

Alura Desenvolvimento Front-End React Do primeiro componente à liderança técnica! HTML/CSS/JavaScript fundamental, React com hooks e...

20 Respostas

L
Lucas_Camara 1 like

Use um framework JS, como AngularJS. Assim, você conseguirá manter uma lista em memória e fazer um CRUD completo sem precisar utilizar um banco de dados.

P
Pacato

Olá Lucas… mas deixar em memória não vai apagar? com algum resete e tal? (É que não manjo disso, não sei o funcionamento)

Porque os dados serão só atualizados uma vez por ano. (Manualmente)

L
Lucas_Camara

A lista ficará fixa no javascript e não será perdida. Quando falo em memória, é que essa lista será carregada em memória quando a tela for aberta pelo navegador.

P
Pacato

Entendi agora… vou ver onde hospedam se da para colocar JS.

J
Junior_Domingos

ow onde consigo ver um exemplo pra aprender um desse que vocês falaram aí ?

J
Junior_Domingos

Ué pra javasritp ou angular ou node precisa de um servidor especial não pode ser em qualquer um ??

J
Junior_Domingos

Poxa eu preciso ver um exemplo disso urgente eu preciso alguém sabe onde ?

L
Lucas_Camara

https://docs.angularjs.org/guide/forms

P
Pacato

Oi Lucas…

Não vai dar… precisava colocar tudo em html mesmo… lá oculto de alguma maneira…

O servidor de hospedagem é free e tem várias limitações…

A pessoa só quer saber ao pesquisar o número de aula, mostrar na tela em qual escola e data vai ter aquela aula para reposição;

L
Lucas_Camara

Então, geralmente, esses servidores free deixam usar javascript. Vou montar um exemplo pra você colocar na hospedagem e ver se funciona.

J
Junior_Domingos

poxa faz sim eu preciso eu quero por favor mostra um exemplo aíi véio

J
Junior_Domingos

por favor lucas faz sim mostra aí, e pode deixar teu canal que vai ganhar muitos likes aqui em Santa Catarina

L
Solucao aceita
Lucas_Camara 1 like

Pegue o código e salve num .html e abra num navegador.

<!DOCTYPE html>
<html ng-app="app">

<head>
	<meta charset="UTF-8">
	<title>Consulta JS</title>
	
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
	
	<style>
		.row-padding {
			margin-bottom: 15px;
		}
		th {
			font-weight: bold;
		}
	</style>
	
	<script>
		var app = angular.module('app', []);
		
		app.controller('ConsultaCtrl', function($scope) {
			$scope.dados = [
				{nome: 'Fulano', sobrenome: '111', endereco: 'Rua AAA', telefone: '([telefone removido]'},
				{nome: 'Ciclano', sobrenome: '222', endereco: 'Rua BBB', telefone: '([telefone removido]'},
				{nome: 'Beltrano', sobrenome: '333', endereco: 'Rua AAA', telefone: '([telefone removido]'}, // mesmo endereço de AAA
				{nome: 'Fuleco', sobrenome: '444', endereco: 'Rua DDD', telefone: '([telefone removido]'},
				{nome: 'Marreco', sobrenome: '555', endereco: 'Rua EEE', telefone: '([telefone removido]'},
				{nome: 'Juscelino', sobrenome: '666', endereco: 'Rua FFF', telefone: '([telefone removido]'},
				{nome: 'Juarez', sobrenome: '777', endereco: 'Rua GGG', telefone: '([telefone removido]'},
			];
		});
	</script>
</head>

<body>
	<div ng-controller="ConsultaCtrl">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="panel panel-default">
						<div class="panel-heading">Consulta</div>
						
						<div class="panel-body">
							<div class="row row-padding">
								<div class="col-md-12">
								<form class="form-horizontal">
									<div class="form-group">
										<div class="col-xs-6">
											<input type="text" class="form-control" ng-model="filtro" placeholder="Filtro" />
										</div>
									</div>
									
									<input type="button" class="btn btn-primary" ng-click="filtrar()" value="Filtrar" />
								</form>
								</div>
							</div>
							
							<div class="row">
								<div class="col-md-12">
								<table class="table table-striped table-bordered">
									<thead>
										<th>Nome</th>
										<th>Sobrenome</th>
										<th>Endereço</th>
										<th>Telefone</th>
									</thead>
									<tbody>
										<tr ng-repeat="item in dados | filter:filtro">
											<td>{{item.nome}}</td>
											<td>{{item.sobrenome}}</td>
											<td>{{item.endereco}}</td>
											<td>{{item.telefone}}</td>
										</tr>
									</tbody>
									</div>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

</html>
P
Pacato

Cara… vc é #oda

Teria como deixar oculto? e só mostrar o resultado?

J
Junior_Domingos

é realmente temos que admitir eu duvidava mas o cara é foda mesmo

P
Pacato

Teria como Lucas? eu deixar os dados ocultos? e só mostrar quando eu clicar em pesquisar

L
Lucas_Camara 
<!DOCTYPE html>
<html ng-app="app">

<head>
	<meta charset="UTF-8">
	<title>Consulta JS</title>
	
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
	
	<style>
		.row-padding {
			margin-bottom: 15px;
		}
		th {
			font-weight: bold;
		}
	</style>
	
	<script>
		var app = angular.module('app', []);
		
		app.controller('ConsultaCtrl', ['$scope', '$filter', function($scope, $filter) {
			$scope.dadosFiltrados = [];
			$scope.filtro = null;
			
			$scope.dados = [
				{nome: 'Fulano', sobrenome: '111', endereco: 'Rua AAA', telefone: '([telefone removido]'},
				{nome: 'Ciclano', sobrenome: '222', endereco: 'Rua BBB', telefone: '([telefone removido]'},
				{nome: 'Beltrano', sobrenome: '333', endereco: 'Rua AAA', telefone: '([telefone removido]'}, // mesmo endereço de AAA
				{nome: 'Fuleco', sobrenome: '444', endereco: 'Rua DDD', telefone: '([telefone removido]'},
				{nome: 'Marreco', sobrenome: '555', endereco: 'Rua EEE', telefone: '([telefone removido]'},
				{nome: 'Juscelino', sobrenome: '666', endereco: 'Rua FFF', telefone: '([telefone removido]'},
				{nome: 'Juarez', sobrenome: '777', endereco: 'Rua GGG', telefone: '([telefone removido]'},
			];
			
			$scope.filtrarDados = function() {
				$scope.dadosFiltrados = $filter('filter')($scope.dados, $scope.filtro);
			};
		}]);
	</script>
</head>

<body>
	<div ng-controller="ConsultaCtrl">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="panel panel-default">
						<div class="panel-heading">Consulta</div>
						
						<div class="panel-body">
							<div class="row row-padding">
								<div class="col-md-12">
								<form class="form-horizontal" ng-submit="filtrarDados()">
									<div class="form-group">
										<div class="col-xs-6">
											<input type="text" class="form-control" ng-model="filtro" placeholder="Filtro" />
										</div>
									</div>
									
									<input type="submit" class="btn btn-primary" value="Filtrar" />
								</form>
								</div>
							</div>
							
							<div class="row">
								<div class="col-md-12">
								<table class="table table-striped table-bordered">
									<thead>
										<th>Nome</th>
										<th>Sobrenome</th>
										<th>Endereço</th>
										<th>Telefone</th>
									</thead>
									<tbody>
										<tr ng-repeat="item in dadosFiltrados | filter:filtro">
											<td>{{item.nome}}</td>
											<td>{{item.sobrenome}}</td>
											<td>{{item.endereco}}</td>
											<td>{{item.telefone}}</td>
										</tr>
									</tbody>
									</div>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

</html>
P
Pacato

Duas últimas coisas e não te encho mais a paciência… juro… Teria como esconder junto a parte do título das colunas?

Outra coisa, eu conseguiria colocar um botão junto na última coluna? para fazer um pop up com informações da escola? como na tela de exemplo que mandei?

Mas só se for fácil paar vc, senão já está ótimo, vc ajudou e muito…

L
Lucas_Camara 1 like 
<!DOCTYPE html>
<html ng-app="app">

<head>
	<meta charset="UTF-8">
	<title>Consulta JS</title>
	
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
	
	<style>
		.row-padding {
			margin-bottom: 15px;
		}
		th {
			font-weight: bold;
		}
	</style>
	
	<script>
		var app = angular.module('app', []);
		
		app.controller('ConsultaCtrl', ['$scope', '$filter', function($scope, $filter) {
			$scope.dadosFiltrados = [];
			$scope.filtro = null;
			
			// Utilizado na modal
			$scope.itemSelecionado = null;
			$scope.htmlModal = '';
			
			$scope.dados = [
				{nome: 'Fulano', sobrenome: '111', endereco: 'Rua AAA', telefone: '([telefone removido]'},
				{nome: 'Ciclano', sobrenome: '222', endereco: 'Rua BBB', telefone: '([telefone removido]'},
				{nome: 'Beltrano', sobrenome: '333', endereco: 'Rua AAA', telefone: '([telefone removido]'}, // mesmo endereço de AAA
				{nome: 'Fuleco', sobrenome: '444', endereco: 'Rua DDD', telefone: '([telefone removido]'},
				{nome: 'Marreco', sobrenome: '555', endereco: 'Rua EEE', telefone: '([telefone removido]'},
				{nome: 'Juscelino', sobrenome: '666', endereco: 'Rua FFF', telefone: '([telefone removido]'},
				{nome: 'Juarez', sobrenome: '777', endereco: 'Rua GGG', telefone: '([telefone removido]'},
			];
			
			$scope.filtrarDados = function() {
				$scope.dadosFiltrados = $filter('filter')($scope.dados, $scope.filtro);
			};
			
			$scope.mostrarDetalhe = function(item) {
				$scope.htmlModal = '';
				$scope.itemSelecionado = item;
				
				$scope.htmlModal += 'O nome é ' + item.nome + ', ';
				$scope.htmlModal += 'o telefone é o ' + item.telefone + ' e mora no endereço ' + item.endereco + '.';
				
				$('#modalDetalhes').modal();
			};
			
			$scope.fecharModal = function() {
				$scope.itemSelecionado = null;
				$scope.htmlModal = '';
			};
		}]);
	</script>
</head>

<body>
	<div ng-controller="ConsultaCtrl">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="panel panel-default">
						<div class="panel-heading">Consulta</div>
						
						<div class="panel-body">
							<div class="row row-padding">
								<div class="col-md-12">
								<form class="form-horizontal" ng-submit="filtrarDados()">
									<div class="form-group">
										<div class="col-xs-6">
											<input type="text" class="form-control" ng-model="filtro" placeholder="Filtro" />
										</div>
									</div>
									
									<input type="submit" class="btn btn-primary" value="Filtrar" />
								</form>
								</div>
							</div>
							
							<div class="row">
								<div class="col-md-12" ng-show="dadosFiltrados.length == 0">
									<div class="panel panel-default">
										<div class="panel-body">
											<div class="col-md-offset-5">
												Nenhum registro encontrado!
											</div>
										</div>
									</div>
								</div>
								
								<div class="col-md-12">
									<table ng-show="dadosFiltrados.length > 0" class="table table-striped table-bordered">
										<thead>
											<th>Nome</th>
											<th>Sobrenome</th>
											<th>Endereço</th>
											<th>Telefone</th>
											<th></th>
										</thead>
										<tbody>
											<tr ng-repeat="item in dadosFiltrados">
												<td>{{item.nome}}</td>
												<td>{{item.sobrenome}}</td>
												<td>{{item.endereco}}</td>
												<td>{{item.telefone}}</td>
												<td>
													<button type="button" class="btn btn-info" ng-click="mostrarDetalhe(item)">...</button>
												</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div id="modalDetalhes" class="modal fade" tabindex="-1" role="dialog">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						
						<h4 class="modal-title">{{itemSelecionado.nome}}</h4>
					</div>
					
					<div class="modal-body">
						<p>{{htmlModal}}</p>
					</div>
					
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="fecharModal()">Close</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

</html>
P
Pacato

Cara, vc salvou a hora… eu terei alguns projetos mais para frente e percebi que vc manja bem… me manda seu email inox pois entrarei em contato com vc para futuros negócios…

Vlw e abs

Criado 6 de julho de 2016
Ultima resposta 12 de jul. de 2016
Respostas 20
Participantes 3

Topicos relacionados

Aplicação Swing na WEB? 9 respostas Problema com checkbox 14 respostas Conexão de JDBC no servlet 8 respostas Chamar um alert dentro do JavaBean JSF [RESOLVIDO] 6 respostas Debugar EXTJS no Netbeans 6.9 ou Netbeans 7 16 respostas
Alura POO: o que é programação orientada a objetos? Aprenda os conceitos básicos da programação orientada a objetos, como classes, objetos, herança, encapsulamento e polimorfismo, com exemplos.
Casa do Codigo JavaScript Assertivo: Testes e qualidade de codigo em... Por Gabriel Ramos — Casa do Codigo