Aulas
Disciplinas

Cursos / Informática para Internet / Desenvolvimento Front-end II / Aula

arrow_back Aula 15 - Criando um blog dinâmico (parte 3)

Implementando a página interna do blog

JavaScript (js/post.js)

const apiUrl = "https://autoria-form.herokuapp.com";
const postId = new URLSearchParams(window.location.search).get('id');

function requisitarPost(id) {
    $.getJSON(apiUrl + "/post/" + postId, (dados) => carregarPostNaPaginaComJQuery(dados));
}

function carregarPostNaPaginaComJQuery(dados) {

    // Título do post
    $("#postTitulo").text(dados.titulo);
    $("#postSubTitulo").text(dados.titulo);

    // Imagem do post
    $("#postImagem").attr("src", apiUrl+dados.imagem);

    // Data da publicação
    var dataPublicacao = new Date(dados.dataPublicacao);
    const ptBRFormatter = new Intl.DateTimeFormat("pt-BR");
    $("#postDataDePublicacao").text("Postado em " + ptBRFormatter.format(dataPublicacao));

    // Conteúdo do post    
    let paragrafos = dados.corpo.split("\n\n");
    paragrafos.forEach(paragrafo => {
        $("#postConteudo").append("<p>"+paragrafo+"</p>");
    });

}

$(document).ready(function () {
    requisitarPost(postId);
});

Página interna (post.html)

<!DOCTYPE html>
<html lang="pt-br">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Blog do IMD</title>

    <!-- CSS do Bootstrap -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- CSS customizado do nosso blog -->
    <link href="css/blog.css" rel="stylesheet">

</head>

<body>

  <!-- Navegação -->

  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="index.html">Posts Recentes</a></li>
      <li class="breadcrumb-item active" aria-current="page" id="postSubTitulo"></li>
    </ol>
  </nav>

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="index.html">Blog do IMD</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive"
        aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Sobre</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Serviços</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contato</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Conteúdo da página -->
  <div class="container">

    <div class="row">

      <!-- Coluna do post -->
      <div class="col-lg-8">

        <!-- Título -->
        <h1 id="postTitulo" class="mt-2"></h1>

        <!-- Autor -->
        <p class="lead">
          por
          <a href="#">João dos Anzóis</a>
        </p>

        <hr>

        <!-- Date/Time -->
        <p id="postDataDePublicacao">Postado em...</p>

        <hr>

        <!-- Imagem -->
        <img id="postImagem" class="img-fluid rounded" alt="">

        <hr>

        <!-- Conteúdo do post -->
        <div id="postConteudo"></div>

        <hr>

        <!-- Form de comentários -->
        <div class="card my-4">
          <h5 class="card-header">Deixe um comentário:</h5>
          <div class="card-body">
            <form>
              <div class="form-group">
                <textarea class="form-control" rows="3"></textarea>
              </div>
              <button type="submit" class="btn btn-primary">Comentar</button>
            </form>
          </div>
        </div>

        <!-- Single Comment -->
        <div class="media mb-4">
          <img class="d-flex mr-3 rounded-circle" src="imgs/avatar-einstein.jpg" alt="">
          <div class="media-body">
            <h5 class="mt-0">Albert Einstein</h5>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus
            odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
            fringilla. Donec lacinia congue felis in faucibus.
          </div>
        </div>

        <div class="media mb-4">
          <img class="d-flex mr-3 rounded-circle" src="imgs/avatar-margaret.jpg" alt="">
          <div class="media-body">
            <h5 class="mt-0">Margaret Hamilton</h5>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus
            odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
            fringilla. Donec lacinia congue felis in faucibus.
          </div>
        </div>

      </div>

      <!-- Barra de widgets lateral -->
      <div class="col-md-4">

          <!-- Busca Widget -->
          <div class="card my-4">
              <h5 class="card-header">Busca</h5>
              <div class="card-body">
                <div class="input-group">
                  <input type="text" class="form-control" placeholder="Digite aqui...">
                  <span class="input-group-btn">
                    <button class="btn btn-secondary" type="button">Buscar</button>
                  </span>
                </div>
              </div>
            </div>

        <!-- Categorias Widget -->
        <div class="card my-4">
          <h5 class="card-header">Categorias</h5>
          <div class="card-body">
            <div class="row">
              <div class="col-lg-6">
                <ul class="list-unstyled mb-0">
                  <li>
                    <a href="#">Web Design</a>
                  </li>
                  <li>
                    <a href="#">HTML</a>
                  </li>
                  <li>
                    <a href="#">CSS</a>
                  </li>
                </ul>
              </div>
              <div class="col-lg-6">
                <ul class="list-unstyled mb-0">
                  <li>
                    <a href="#">JavaScript</a>
                  </li>
                  <li>
                    <a href="#">CSS</a>
                  </li>
                  <li>
                    <a href="#">Tutoriais</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

          <!-- Side Widget -->
          <div class="card my-4">
              <h5 class="card-header">Autor</h5>
              <div class="autor">
                <img src="imgs/avatar.jpg" width="150px" alt="Autor" class="rounded-circle">
              </div>
               <div class="card-body">
                Me chamo João dos Anzóis e sou formado no curso técnico de desenvolvimento para internet do IMD/UFRN. 
                Nas horas vagas adoro surfar, fotografar e sair com os amigos para me divertir.
              </div>
            </div>

          </div>

      </div>

    </div>
    <!-- Fim do row -->

  </div>
  <!-- Fim do container -->

  <!-- Rodapé -->
  <footer class="py-3 bg-dark">
    <div class="container">
      <p class="m-0 text-center text-white">Copyright &copy; IMD 2019</p>
    </div>
  </footer>

  <!-- Biblioteca jQuery e Bootstrap -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <!-- Nosso script JS -->
  <script src="js/post.js"></script>

</body>

</html>

Versão 5.3 - Todos os Direitos reservados