Construindo um sistema com login e senha

Nesse exercício você vai aprender como criar a funcionalidade de login e senha para um sistema gerenciador de atividades físicas usando um pouco de PHP e banco de dados. O objetivo aqui é partir de um protótipo criado em HTML e CSS no exercício anterior e exercitar suas hardskills para criar criar essa funcionalidade.

Esse exercício faz parte de uma série de conteúdos criados para você praticar o desenvolvimento de aplicações web. Nessa série você encontra exercícios específicos para HTML, CSS, Javascript ou então exercitar a construção de um sistemas completos usando linguagens de back-end como o PHP ou qualquer outra (como C#, Java, Javascript, etc.).

Clique aqui e acesse agora a página.

O que vamos usar? veja os pré-requisitos para esse exercício

Esse exercício é de nível intermediário e permitirá que você pratique alguns conceitos de HTML e CSS, no entanto o seu grande foco é na linguagem de back-end. Antes de começarmos, você deve entender que os pré-requisitos são:

• HTML – saber utilizar Tags HTML, propriedades (src, href etc.), conhecimento de Tags semânticas, estrutura básica de um website.
• CSS – saber manipular o CSS do projeto (link com arquivo CSS), seletores (classes, id), propriedades do CSS em geral (background, font, position, display), e também o flexbox.
• PHP – saber toda a parte básica do PHP (variáveis, if e else, for, while, funções, vetores, classes, etc.), compreender como funcionam sessões. conectar a bancos de dados relacionais (MySQL).
• Banco de dados – saber como criar bancos de dados e tabelas (com todas as características básicas como chave primária, chave estrangeira, etc), linguagem SQL básica para CRUD.

Preparando o ambiente

A preparação do ambiente foi detalhada no primeiro post da série, sugiro que você dê uma olhadinha lá na seção de preparação. Vamos usar aqui o mesmo ambiente (XAMPP) com o banco de dados MySQL instalado e rodando em uma máquina local.

Requisitos do cliente

Como foi mencionado anteriormente, o exercício trata-se de um sistema gerenciador de atividades físicas. Essas características já estavam presentes no post anterior, no entanto, aqui vamos retomar esses requisitos e adicionar alguns.

Coloquei destacado em negrito e azul os requisitos que foram adicionados e que precisam ser trabalhados nesse exercício, sendo assim, para começar a trabalhar nesse exercício você deverá baixar a versão anterior (V1) e começar a implementação.

Veja a lista de requisitos atualizada:

1. Requisitos Gerais

• RF1 – A página deverá conter um cabeçalho de navegação com as páginas disponíveis e também saudações de boas vindas ou botões de login e cadastre-se.

2. Requisitos específicos

• RF2 – O site deverá conter 5 páginas inicialmente, sendo elas: Homepage, dashboard do usuário, registro de novos treinos, página de login e página de cadastro.

2.1. Página inicial

• RF3 – A página inicial deve ser atrativa e fornecer exemplos de imagens e exemplos dos treinos que podem ser feitos na plataforma.
• RF4 – Deve existir uma seção que exiba um texto dizendo porquê devemos usar o aplicativo.
• RF5 – A página inicial ainda deve exibir um Ranking dos usuários mais acíduos na plataforma, mostrando suas pontuações e nomes formando um Ranking.

2.2. Página de login e cadastro

• RF6 – A página de login deve exibir apenas dois campos (username e senha) para inserção e o botão de login. Ao clicar no botão todos os dados devem ser verificados e caso estejam corretos o usuário será redirecionado para o seu dashboard.
• RF7 – A página de cadastro deverá solicitar a inserção de: username, senha, nome completo e o e-mail. Ao clicar no botão, o sistema deverá registrar os dados do cliente no banco de dados e automaticamente redirecionar o usuário para o seu dashboard.
• RF8 – Quando logado, o usuário deverá ver uma mensagem de boas vindas no cabeçalho da página e um botão para manipulação dos dados do seu perfil. Naturalmente, ao deslogar, o usuário novamente vê apenas os botões de cadastre-se e login.
• RF9 – O perfil deverá permitir que o usuário altere suas informações de cadastro (senha, nome, email). O username não poderá ser alterado.
• RF10 – Na página de perfil o usuário deve ter uma seção chamada de “área de perigo”, nessa área um aviso mostrando que ações feitas alí são sensíveis e poderão excluir toda sua conta. Após confirmar os alertas o usuário deve ser capaz de apagar sua própria conta.

2.3. Página do usuário

• RF8 – A página do usuário deverá mostrar os treinos que ele possui cadastrado (bem como o conjunto de exercícios em cada treino)
• RF9 – A página deverá mostrar um mini histórico de treinos feitos no passado
• RF10 – A página deverá mostrar qual é a sua posição no ranking de usuários do sistema, juntamente com os dois usuários acima e abaixo de você.

2.4. Página de cadastro de novo treinamento

• RF11 – Na página de registro de novo treinamento o usuário poderá ver quais exercícios já existem cadastrados na plataforma e estão disponíveis para uso.
• RF12 – A página deve permitir o cadastro de novos exercícios questionando características como: tempo, nome do exercício, velocidade, BPM ou inclinação (de acordo com cada exercício)

3. Requisitos não-funcionais

• RNF1 – O site deve apresentar cores e formas que representem a atividade física, deve ser moderno e atrativo para os usuários
• RNF2 – O site deverá ser intuitivo e fácil de usar
• RNF3 – A responsividade para dispositivos móveis é desejada, mas não obrigatória.

Modelagem da base de dados

A modelagem da base de dados é bastante simples, sendo assim, nós vamos usar apenas um script SQL para gerar toda nossa base:

CREATE DATABASE extremesports;

use extremesports;


CREATE TABLE usuario(
    username VARCHAR(100) PRIMARY KEY,
    senha VARCHAR(50),
    fullName VARCHAR(150),
    email VARCHAR(150)
);

INSERT INTO usuario VALUES("john", "js1", "John da Silva", "john@gmail.com");
INSERT INTO usuario VALUES("mary", "ms1", "Mary da Silva", "mary@gmail.com");
INSERT INTO usuario VALUES("silvia", "ss1", "Silvia da Silva", "silvia@gmail.com");
INSERT INTO usuario VALUES("allyson", "as1", "Allyson da Silva", "allyson@gmail.com");

Algumas regras

• Nesse exercício você precisa implementar uma funcionalidade limpa (usando conceitos de MVC, se possível).
• A utilização do conceito de classes DAO é altamente recomendado nesse caso.
• Não é mandatório, mas pesquise sobre SQL injection e como evitar isso em seus formulários de login e cadastro.
• Crie o seu código de forma limpa.