Pessoal,
Preciso criar uma tela de consulta, onde tenho:
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…
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.
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)
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.
Entendi agora… vou ver onde hospedam se da para colocar JS.
ow onde consigo ver um exemplo pra aprender um desse que vocês falaram aí ?
Ué pra javasritp ou angular ou node precisa de um servidor especial não pode ser em qualquer um ??
Poxa eu preciso ver um exemplo disso urgente eu preciso alguém sabe onde ?
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;
Então, geralmente, esses servidores free deixam usar javascript. Vou montar um exemplo pra você colocar na hospedagem e ver se funciona.
poxa faz sim eu preciso eu quero por favor mostra um exemplo aíi véio
por favor lucas faz sim mostra aí, e pode deixar teu canal que vai ganhar muitos likes aqui em Santa Catarina
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: '(11) 11111111'},
{nome: 'Ciclano', sobrenome: '222', endereco: 'Rua BBB', telefone: '(22) 22222222'},
{nome: 'Beltrano', sobrenome: '333', endereco: 'Rua AAA', telefone: '(33) 33333333'}, // mesmo endereço de AAA
{nome: 'Fuleco', sobrenome: '444', endereco: 'Rua DDD', telefone: '(44) 44444444'},
{nome: 'Marreco', sobrenome: '555', endereco: 'Rua EEE', telefone: '(55) 55555555'},
{nome: 'Juscelino', sobrenome: '666', endereco: 'Rua FFF', telefone: '(66) 66666666'},
{nome: 'Juarez', sobrenome: '777', endereco: 'Rua GGG', telefone: '(77) 77777777'},
];
});
</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>
Cara… vc é #oda
Teria como deixar oculto? e só mostrar o resultado?
é realmente temos que admitir eu duvidava mas o cara é foda mesmo
Teria como Lucas? eu deixar os dados ocultos? e só mostrar quando eu clicar em pesquisar
<!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: '(11) 11111111'},
{nome: 'Ciclano', sobrenome: '222', endereco: 'Rua BBB', telefone: '(22) 22222222'},
{nome: 'Beltrano', sobrenome: '333', endereco: 'Rua AAA', telefone: '(33) 33333333'}, // mesmo endereço de AAA
{nome: 'Fuleco', sobrenome: '444', endereco: 'Rua DDD', telefone: '(44) 44444444'},
{nome: 'Marreco', sobrenome: '555', endereco: 'Rua EEE', telefone: '(55) 55555555'},
{nome: 'Juscelino', sobrenome: '666', endereco: 'Rua FFF', telefone: '(66) 66666666'},
{nome: 'Juarez', sobrenome: '777', endereco: 'Rua GGG', telefone: '(77) 77777777'},
];
$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>
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…
<!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: '(11) 11111111'},
{nome: 'Ciclano', sobrenome: '222', endereco: 'Rua BBB', telefone: '(22) 22222222'},
{nome: 'Beltrano', sobrenome: '333', endereco: 'Rua AAA', telefone: '(33) 33333333'}, // mesmo endereço de AAA
{nome: 'Fuleco', sobrenome: '444', endereco: 'Rua DDD', telefone: '(44) 44444444'},
{nome: 'Marreco', sobrenome: '555', endereco: 'Rua EEE', telefone: '(55) 55555555'},
{nome: 'Juscelino', sobrenome: '666', endereco: 'Rua FFF', telefone: '(66) 66666666'},
{nome: 'Juarez', sobrenome: '777', endereco: 'Rua GGG', telefone: '(77) 77777777'},
];
$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">×</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>