CS50-MCZ

Lab 9: Birthdays

Crie uma aplicação web para acompanhar os aniversários de amigos.

Começando

Abra o VS Code.

Comece clicando dentro da janela do terminal e, em seguida, execute cd por si só. Você deve encontrar que seu "prompt" se assemelha ao abaixo.

$

Clique dentro dessa janela de terminal e execute

wget https://cdn.cs50.net/2022/fall/labs/9/birthdays.zip

digite Enter para baixar um arquivo ZIP chamado birthdays.zip em seu espaço de códigos. Tenha cuidado para não ignorar o espaço entre wget e a URL seguinte, ou qualquer outro caractere!

Agora execute

unzip birthdays.zip

para criar uma pasta chamada birthdays. Você não precisa mais do arquivo ZIP, então pode executar

rm birthdays.zip      

e responda com "y" seguido de Enter no prompt para remover o arquivo ZIP que você baixou.

Agora digite

cd birthdays

seguido de Enter para entrar (ou seja, abrir) nesse diretório. Seu prompt agora deve se parecer com o abaixo.

birthdays/ $    

Se tudo foi bem sucedido, você deve executar

ls    

e você deve ver os seguintes arquivos e pastas:

app.py  birthdays.db  static/  templates/    

Se você encontrar algum problema, siga os mesmos passos novamente e veja se consegue determinar onde errou!

Etendendo

No arquivo app.py, você encontrará o início de uma aplicação web Flask. A aplicação possui uma rota (/) que aceita tanto solicitações POST (após o if) quanto solicitações GET (após o else). Atualmente, quando a rota / é solicitada via GET, o modelo de index.html é renderizado. Quando a rota / é solicitada via POST, o usuário é redirecionado de volta para / via GET.

birthdays.db é um banco de dados SQLite com uma tabela, birthdays, que possui quatro colunas: id, name, month e day. Já existem algumas linhas nesta tabela, embora, em última análise, sua aplicação web dará suporte à capacidade de inserir linhas nesta tabela!

No diretório static há um arquivo styles.css contendo o código CSS para esta aplicação web. Não é necessário editar este arquivo, embora você possa fazê-lo, se desejar!

No diretório templates há um arquivo index.html que será renderizado quando o usuário visualizar sua aplicação web.

Detalhes de Implementação

Complete a implementação de uma aplicação web que permita aos usuários armazenar e acompanhar aniversários.

• Quando a rota / for solicitada via GET, sua aplicação web deve exibir, em uma tabela, todas as pessoas do seu banco de dados juntamente com seus aniversários.
  • Primeiro, em app.py, adicione a lógica no tratamento da solicitação GET para consultar o banco de dados birthdays.db de todos os aniversários. Passe todos esses dados para seu modelo index.html.
  • Em seguida, em index.html, adicione lógica para renderizar cada aniversário como uma linha na tabela. Cada linha deve ter duas colunas: uma coluna para o nome da pessoa e outra coluna para o aniversário da pessoa.
• Quando a rota / for solicitada via POST, sua aplicação web deve adicionar um novo aniversário ao seu banco de dados e depois renderizar novamente a página de índice.
  • Primeiro, em index.html, adicione um formulário HTML. O formulário deve permitir que os usuários digitem um nome, um mês de aniversário e um dia de aniversário. Certifique-se de que o formulário seja enviado para / (sua "action") com um método post.
  • Em seguida, em app.py, adicione lógica no tratamento da solicitação POST para INSERT uma nova linha na tabela birthdays com base nos dados fornecidos pelo usuário.

Opcionalmente, você também pode:

• Adicionar a capacidade de excluir e/ou editar entradas de aniversário.
• Adicionar quaisquer recursos adicionais de sua escolha!

Dicas

• Lembre-se de que você pode chamar db.execute para executar consultas SQL dentro de app.py.
  • Se você chamar db.execute para executar uma consulta SELECT, lembre-se de que a função irá retornar uma lista de dicionários, em que cada dicionário representa uma linha retornada pela consulta.
• Provavelmente, será útil passar dados adicionais para render_template() em sua função index para que você possa acessar dados de aniversário dentro de seu modelo index.html.
• Lembre-se de que a tag tr pode ser usada para criar uma linha de tabela e a tag td pode ser usada para criar uma célula de dados da tabela.
• Lembre-se de que, com o Jinja, você pode criar um loop for dentro do seu arquivo index.html.
• Em app.py, você pode obter os dados enviados pelo usuário por meio do envio do formulário usando request.form.get(campo), onde campo é uma string que representa o atributo name de um input do seu formulário.
  • Por exemplo, se em index.html, você tiver um <input name="foo" type="text">, você poderia usar request.form.get("foo") em app.py para extrair a entrada do usuário.

Testando

Não há check50 para este laboratório! Mas certifique-se de testar sua aplicação web adicionando alguns aniversários e garantindo que os dados apareçam na tabela como esperado.

Execute flask run no seu terminal enquanto estiver no diretório birthdays para iniciar um servidor web que sirva sua aplicação Flask.

Como enviar

No seu terminal, execute o seguinte para enviar seu trabalho.

submit50 cs50/labs/2023/x/birthdays