Guião para a quarta semana de aulas (RPCW2023)

Gestão de alunos

Tarefas a realizar na aula:

1. Apresentação sobre HTML Forms: Slides no drive

2. Dataset da UC:

   • Apresentação

   • Conversão de CSV para JSON

     1. Ler o ficheiro CSV para um dicionário

        import csv
        
        f = open('alunos.csv')
        csv_reader = csv.DictReader(f, delimiter=';')
        line_count = 0
        for linha in csv_reader:
            if line_count == 0:
                print(f'Column names are {", ".join(linha)}')
                line_count += 1
            print(f'\t{linha["nome"]} tem identificador {linha["id"]} e um repositorio git: {linha["gitlink"]}')
            line_count += 1
        print(f'Foram processados {line_count} registos.')
        

     2. Ler o ficheiro CSV para um dicionário e escrever o dicionário num ficheiro JSON

        import csv
        import json
        
        f = open('alunos.csv')
        csv_reader = csv.DictReader(f, delimiter=';')
        line_count = 0
        mybd = []
        for linha in csv_reader:
            if line_count == 0:
                print(f'Column names are {", ".join(linha)}')
                line_count += 1
            mybd.append(linha)
            line_count += 1
        f.close()
        
        f = open("alunos.json", "w")
        json.dump(mybd, f, ensure_ascii=False)
        f.close()
        print(f'Foram processados {line_count} registos.')
        

   • Colocar a API REST a funcionar com o json-server

   • Testar

3. Criar uma App Web com as seguintes funcionalidades:

   • Página principal com uma tabela de alunos com as colunas: id, nome, gitlink (o gitlink deve ser um link para o repositório GIT), e operações;
   • As operações são: Editar e Remover;
   • O id e o nome devem ser links para uma página individual do aluno com toda a informação deste; Para além, dos campos mencionados devem ser previstos 8 campos para registo dos TPC, 1 campo para registo do Projeto e 2 campos para registo dos exames de época normal e de recurso;
   • A operação Editar deve ser um link para uma página com um formulário exibindo a informação do aluno onde deverá ser possível alterar qualquer campo de informação; Os campos ainda não presentes no dataset deverão aparecer preenchidos com o valor por omissão: NA;
   • A operação Remover deverá recuperar o registo, mostrá-lo, e pedir ao utilizador que confirme a sua remoção;
   • Na página principal deverá ser acrescentado um botão para Adicionar um novo aluno;
   • ... estatísticas...

4. Criar uma pasta public para os recursos estáticos:

   • Explicar os recursos estáticos;
   • Explicar o servidor de recursos estáticos.

5. Criar as templates das páginas em falta;

6. Tratamento do POST:

case "POST":
    if(req.url == '/alunos'){
        recuperaInfo(req, resultado => {
            resultado['id'] = resultado['Id']
            console.log('POST de aluno:' + JSON.stringify(resultado))
            axios.post('http://localhost:3000/alunos', resultado)
                .then(resp => {
                    res.writeHead(200, {'Content-Type': 'text/html;charset=utf-8'})
                    res.write(geraPostConfirm( resp.data, d))
                    res.end()
                })
                .catch(erro => {
                    res.writeHead(200, {'Content-Type': 'text/html;charset=utf-8'})
                    res.write('<p>Erro no POST: ' + erro + '</p>')
                    res.write('<p><a href="/">Voltar</a></p>')
                    res.end()
                })
        })
    }

7. Recuperar a informação do body dum pedido:

   • form_server_example.js: apenas faz o handshake;
   • form_server_example2.js: consome a stream do request e imprime na consola( req.on: data e end);
   • form_server_example3.js: vai buscar a informação ao body e responde com a template preenchida;
   • form_server_example4.js: tudo arrumado numa função.

var {parse} = require('querystring')

// Aux function to process body

function collectRequestBodyData(request, callback) {
    if(request.headers['content-type'] === 'application/x-www-form-urlencoded') {
        let body = '';
        request.on('data', chunk => {
            body += chunk.toString();
        });
        request.on('end', () => {
            callback(parse(body));
        });
    }
    else {
        callback(null);
    }
}

8. Utilização da função anterior:

case "POST": {
                    // POST /persons -------------------------------------------------------------------
                    collectRequestBodyData(req, result => {
                        if(result){
                            console.dir(result)
                            res.writeHead(201, {'Content-Type': 'text/html;charset=utf-8'})
                            res.write(formTemplates.personPostConfirmPage(result, d))
                            res.end()
                        }
                        else{
                            res.writeHead(201, {'Content-Type': 'text/html;charset=utf-8'})
                            res.write("<p>Unable to collect data from body...</p>")
                            res.end()
                        }
                    });
                    break
}

9. Formulário para o aluno:

// Template para o formulário de aluno ------------------
function geraFormAluno( d ){
    return `
    <html>
        <head>
            <title>Registo de um aluno</title>
            <meta charset="utf-8"/>
            <link rel="icon" href="favicon.png"/>
            <link rel="stylesheet" href="w3.css"/>
        </head>
        <body>
        
        </body>
            <div class="w3-container w3-teal">
                <h2>Registo de Aluno</h2>
            </div>

            <form class="w3-container" action="/alunos" method="POST">
                <label class="w3-text-teal"><b>Nome</b></label>
                <input class="w3-input w3-border w3-light-grey" type="text" name="Nome">
          
                <label class="w3-text-teal"><b>Número / Identificador</b></label>
                <input class="w3-input w3-border w3-light-grey" type="text" name="Id">

                <label class="w3-text-teal"><b>Link para o repositório no Git</b></label>
                <input class="w3-input w3-border w3-light-grey" type="text" name="Git">
          
                <input class="w3-btn w3-blue-grey" type="submit" value="Registar"/>
                <input class="w3-btn w3-blue-grey" type="reset" value="Limpar valores"/> 
            </form>

            <footer class="w3-container w3-teal">
                <address>Gerado por galuno::RPCW2022 em ${d}</address>
            </footer>
        </body>
    </html>
    `
}