Sobre • Acesse Aqui • Funcionalidades • Licença •
Um sistema escolar onde é possível adicionar alunos, lançar notas, lançar presença, entre outras coisas. Projeto realizado com HTML, CSS, Javascript e Bootstrap, com o objetivo de colocar em prática o que estudei, principalmente em Javascript.
Veja o projeto você mesmo: https://joaovitordomingos.github.io/My-Class/
Nesta sessão falarei o que o projeto faz e deixarei explícito quais conhecimentos, principalmente de Javascript, coloquei em prática.
Neste projeto, todas as informações referentes as notas dos alunos, as quantidades de aulas, dias que teve aulas e outras coisas são guardadas em uma simulação de banco de dados.
Este banco de dados é um script do tipo modulo, onde nele há um objeto literal, como este tipo de objeto não é independente não importa quantas instâncias há, é perfeito para uma simulação.
Este "Banco de Dados" guarda os alunos, que será um objeto padrão, guarda a quantidade total de aulas e atividades e também guarda os dias em que teve aulas.
Toda alteração que tiver, como adicionar um aluno novo, lançar presença, etc..., o Banco de Dados será atualizado, mas como é uma simulação, ao resetar a página, as informações também serão resetadas.
É possível acompanhar o banco de dados pelo inspetor do navegador, pois este objeto está armazenado em uma variável global.
Para acompanhar o Banco de Dados:
- Ative o Console do Navegador pressionando CTRL+SHIFT+I ou, também, em qualquer parte da página, clique direito do mouse, inspecionar, console.
- De início já terá o Banco de Dados dos Alunos, mas para ver o Banco de Dados completo digite no console: bancoDados
- Caso queira acessar algo em específico do Banco de Dados, digite: bancoDados.alunos, bancoDados.aulas, bancoDados.diasAulas, bancoDados.atividades.
Foi criado um script do tipo módulo chamado metodos onde ficará métodos que serão utilizados em várias partes do site, por exemplo um método que gera um número aleatório.
Os alunos e suas informações são feitos na hora que carrega a página. Utilizei a API do site Reqres para fazer os alunos.
Utilizando uma async function e fetch, acesso esta API e pego os alunos, porém so irei utilizar desta API o nome, sobrenome, foto e id. As outras informações dos alunos foram criadas.
Todas as informações dos alunos é armazenadas em um objeto do tipo padrão, que está num script separado do tipo módulo.
Os alunos terão idades de 16 a 19, para isso, com o metodo Date().getFullYear(), pego o ano atual e subtraio da idade mínima e máxima, guardando os dois valores para assim gerar anos aleátorios de nascimento. Agora o mês simplesmente utilizo a função de gerar números aleátórios. E para o dia, é realizado a mesma coisa, mas com uma verificação antes, já que fevereiro tem apenas 29 dias e os meses abril, junho, setembro e novembro tem 30 dias.
Para o sexo e endereço, apenas realizado uma condição, comparando o id, por exemplo o id 12 é uma menina, e seu endereço é "Rua do MasterX". Agora para o cpf, apenas gero números aleatórios de 0 a 9. As notas também são geradas aleatóriamentes, de 0 a 10.
Agora a presença do aluno, é escolhido aleatóriamente o número 0 ou 1(0 - falta, 1 - presença), para definir se o aluno veio ou não, isso se repete pela quantidade total de aulas. Este dado é armazenado no array de dias_presenca do objeto aluno, onde cada posição equivale a um dia de aula, sendo a primeira posição o primeiro dia de aula.
A foto do aluno é um link para uma imagem, então este link é guarda no objeto aluno e quando for mostrado se usa a propriedade background-image do CSS.
Após ter criado um objeto aluno, é feito uma linha de tabela que conterá algumas informações. No script "metodos", o método padrão(default) é o que irá criar esta linha da tabela.
Note que alguns dados são gerados aleatóriamente no momento que se carrega a página, então cada vez que recarrega a página, estes dados são perdidos e informações diferentes são geradas.
Após a criação dos alunos, é criado os dias em que teve aulas, para isso, se obtém o dia atual do usário, e a partir deste dia para trás é criado os dias que teve aula até atingir o máximo de aulas.
Porém, o final de semana não é considerado dias de aulas, então foi criado uma função que checa se o dia é um domingo ou sábado, se for, é pego o dia anterior até ser um dia de semana. Dias em que teve feriado não foi considerado.
Então quando é pego o dia atual do usuário, é chamado a função para checar o dia, para que a contagem das aulas comece em um dia da semana, a partir disto é subtraido um dia e checado para que este dia seja um dia da semana, isso se repete até o dar o máximo de aulas.
Observe que o dia que é pego do usuário será o último dia de aula. Estes dias de aulas são guardados no array dias_aulas em formato de array, onde a primeira posição é a data no formato "dd/mm/aaaa" e a segunda posição o objeto date.
O maior exemplo de modal dinâmico é o "Veja Mais" do aluno, foi se utilizado uma estrutura genérica de modal e por meio do Javascript foi se alterando o conteúdo do modal, este é o modal dinâmico do Bootstrap.
Cada ícone na parte "Veja Mais" tem um data-bs-whatever com o valor da matrícula do aluno, isso irá diferenciar os alunos, assim sabendo qual conteúdo mostrar.
Outro exemplo, é o modal de Criar/Editar Sessão/Atividade, ao apertar no botão de criar o modal vem com o título Criar Atividade/Sessão, agora quando se aperta no ícone de edição, o modal vem com o nome Editar Atividade/Sessão
No modal de Sessão a tabela também é alterada dinâmicamente, caso se adicione uma atividade nova ou altere o nome de uma atividade, ao abir o modal a tabela muda de acordo com os nomes das atividades.
Os formulários presentes nos modais, como lançar notas, lançar presença, entre outros, tem suas verificações, não é possível salvar sem que tudo esteja preenchido.
Alguns formulários tem suas verficações em específicas, segue a lista a seguir:
Neste formulário, além da verificação de preenchimento, há uma verificação na data e na nota. Não é possível lançar a nota em uma data antes do primeiro dia de aula, em uma data acima de 30 dias e nos finais de semana.
Também não é possível lançar uma nota abaixo de zero e acima de 10.
A mesma verificação de data que ocorre no "Lançar Notas", ocorre no modal "Lançar Presença", sendo assim, não é possível lançar uma presença antes do primeiro dia de aula ou em um dia acima de 30 dias após o último dia de aula e nos finais de semana.
Caso selecione uma data que já exista, a presença dos alunos selecionados neste dia irá alterar, ou seja, caso lance presença num dia já existente, é editado a presença.
Agora caso seja um dia que não exista e está dentro das condições, simplesmente este dia é adicionado no banco de dados e as presenças dos alunos no array "dias_presenca" de seus objetos.
OBS: a posição da presença no array "dias_presenca" de cada objeto aluno equivale ao dia naquela posição do array do banco de dados, ou seja, a presença do aluno na posição 0 equivale ao dia na posição 0 do banco de dados.
Como todos os alunos já presentes tem entre 16 a 19 anos, então não é possível adicionar um aluno mais novo que 16 ou mais velho que 19 anos, para isso existe uma verificação em sua data de nascimento.
Em seu nome não é possível adicionar números ou caracteres especiais, apenas aqueles utilizados em nomes como: ã,â,...
O CPF tem que seguir como é exemplificado, caso tenha algo de errado, irá acionar o alerta.
Neste formulário, não é possível imprimir datas que não existam aulas, a data final não pode ser menor que a data inicial, tem uma máximo de 30 dias que pode ser impresso e um mínimo de 5 dias.
É possível imprimir as informações dos alunos. Há 5 tipos de impressões:
Obs: Para melhor qualidade da impressão, é bom que ative os "gráficos de segundo plano" em "mais definições"
Além de todas estas funcionalidades apresentadas, há outras também importantes, como a navegação dinâmica que existe, feita com o Bootstrap.
Os botões de "Cancelar" dos modais resetam todas informações adicionadas neles e os fecham, enquanto o icone de "X" apenas fecha o modal sem resetar as informações. Já o botão de "Salvar" também reseta e fecha o modal, porém só se todas as informações estiverem corretas, caso não esteja, ele não fechará o modal e nem resetará.
É possível editar a atividade e a sessão, além de criar novas. Ao editar ou criar uma sessão é possível selecionar quais atividades estaram presentes nesta sessão, caso alguma que já esteja presente não for selecionada, ela continuará nesta sessão. E ao criar uma atividade nova, ela será adicionada na última sessão existente.
Também é possível editar a nota de um aluno em específico pelo "Veja Mais", na tabela refente as notas dos bimestres, clicando neste campo é possível editar, ao editar, é calculado a média e sua situação
A seguir está os principais conhecimentos de Javascript que apliquei neste projeto:
Veja a lincença do projeto: MIT License