Preencher os dados e gerar uma nova página html permanente

Pessoal, gostaria de saber como faço para gerar uma nova página html que exiba todos os dados preenchidos na página anterior. Agradeço desde já.

os dados são:
1-nome com sobrenome,
2-assunto,
3-anexar um vídeo.

Também preciso que esta página, ao ser gerada esteja disponível de forma permanente no site, de modo que as pessoas possam acessar posteriormente através de um link (pode ser o link da própria página)

segue o print e o código da página que consegui desenvolver.

<!doctype html>

Sala Virtual
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>



<div class="container">
    <img alt="imagem-logotipo" src="" width=20%>
    <img alt="imagem-logotipo" src="" size=100%>

</div>

<div class="container text-center">
    <br>
    <br>

    <h1>Sala Virtual</h1>

    <br>
    <br>

    <h4>Digite o seu nome com sobrenome</h4>
        <input type="text" id="nome_e_sobrenome">

    <br>
    <br>

    <h4>Digite o assunto do vídeo</h4>
        <input type="text" id="assunto_do_video">

    <br>
    <br>    

    <h4>Carregue o vídeo do seu dispositivo/computador</h4>
        <div class="file-upload">
            <input class="file-upload__input" type="file" name="myFile[]" id="myFile" multiple>
            <button class="file-upload__button" type="button"></button>
            <span class="file-upload__label"></span>
        </div>
</div>    

Não está claro qual ponto está sendo sua dificuldade, mas vamos lá.

Supondo que a página já grava os dados em um banco de dados, um meio de ter um link permanente é adicionar um parâmetro à url da página, e usar esse parâmetro para recuperar o registro no banco de dados.

Um exemplo disso é o tinyurl. A página inicial é tinyurl.com/app, mas se for gerada uma url no serviço e essa url for passada como parâmetro pra página (ex: https://tinyurl.com/ywhastky ), essa parte depois da barra (parâmetro GET) é usado pra carregar a url referenciada. Outro exemplo é o Youtube: note que, lá, todos os vídeos apontam pra uma url /watch, com um parâmetro v= , seguido de um monte de letras e números que referenciam um vídeo específico.

Assim, no seu sistema, a página “vazia” (onde o usuário pode informar os dados e submeter um vídeo) seria algo como:

https://suapagina.com/salavirtual

E a página que apontaria para uma página já preenchida seria algo como:

https://suapagina.com/salavirtual?id=quhHH1234

Assim, se o usuário acessar a página que possui um id no parâmetro get, você usa esse parâmetro pra fazer uma consulta ao banco e trazer os dados pra colocar nos inputs, e o vídeo que foi feito upload.

Se não é isso, explique melhor sua necessidade.

Abraço.

1 curtida

Olá, Terra, obrigada pelas explicações.
Pelo que entendi, devo usar um gerenciador de banco de dados para o funcionamento pleno desta página.
Vou precisar estudando Bancos de dados.
Vc poderia sugerir qual SGBD seria mais interessante de usar para trabalhar com HTML e Javascript? Agradeço desde já sua atenção!
Abraço!

Sim, você precisa armazenar os dados em algum lugar, e em sites, usar uma base de dados é o mais comum.

Qualquer um que a hospedagem onde está esse site suportar, o que pode variar são alguns comandos para conexão com a base e a sintaxe de alguns comandos. Normalmente, hospedagens suportam MySQL e MariaDB ao menos, com alguns serviços suportando PostgreSQL.

Note que você não vai conseguir acessar a base só com html e javascript, vai precisar de uma linguagem “servidora” (php, java, nodejs). Acho que já comentei algo parecido com isso em um tópico seu no passado. Deu uma pesquisada desde então?

Abraço.

1 curtida

Olá, TerraSkill ! Sim, lembro que você me ajudou a esclarecer sobre essa questão do node js. Pesquisei sobre o node js no meu projeto anterior, mas acabei usando o php, para fazer o formulário ( eu não pude instalar o node js , porque eu estava usando no meu notebook o sistema operacional windows 7 e esta versão de sistema operacional não suporta a instalação do node js).

agora que estou usando o windows 10 , vou pesquisar a respeito e retomar o assunto node js . Muito obrigada pela ajuda de sempre !
Abraço! :slightly_smiling_face:

Minha sugestão não foi pra você usar especificamente nodejs, mas para usar qualquer linguagem servidora (ou php, ou java, ou nodejs, ou outra qualquer). Se já está usando php, pode permanecer nela.

O que quis dizer acima é que parece que você quer fazer tudo só com html e javascript do lado cliente, sendo que isso não é suficiente para o que você quer. Vai precisar de uma linguagem servidora, pra fazer a parte dinâmica do site e acessar um banco de dados.

Abraço.

1 curtida

Compreendo, TerraSkill.

A impressão que você teve não foi errada. Eu, realmente estava imaginando que o javascript e o html seriam suficientes para o desenvolvimento desses projetos. No meu curso técnico tudo foi ensinado de forma breve e muito isolada. Não tive efetivamente uma aula onde eu pudesse aprender esse processo de integrar o banco de dados com o back e o front. Vou correr atrás desse conhecimento.

o problema é que estou misturando alguns conhecimentos: estava estudando python , segurança , javascript. desse jeito vou parar em lugar nenhum. manter o foco é importante.

obrigada pela atenção. abraço.