Ir ao conteúdo
  • Cadastre-se
Pokemão

Bootstrap sistema de postagem box

Recommended Posts

Ola, estou em duvida em como desenvolver um sistema de postagem em box, para uma determinada categoria(a parte da categoria não e a duvida e sim, como mostrar a imagem o titulo e quando passar o mouser mostrar os detalhes) segue abaixo um exemplo.

Screenshot_6.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

Antes de pensar nisso, é preciso saber um pouco de modelagem de banco e dados e modelar o seu.
Então para que tudo fique como na imagem, precisará de pelo menos duas tabelas no banco de dados.


1)usuários (um campo ID auto incrementado e terá o nick do usuário)
2)a tabela que armzenará os dados do mangá.

 

Basicamente você armazenará em uma tabela banco de dados o:

  • ID da linha
  • Título
  • ID do usuário que postou
  • data e hora

Com estas duas tabelas e seus relacionamentos onde a da tabela usuário para a tabela de mangás terá um relacionamento de 1:N
você poderá populá-los.

Então vamos supor que na sua tabela usuários esteja assim:

ID    usuario   email  senha
 1     Jhinn     Jhinn   12345


Na sua tabela de mangás terá:

ID  manga                 publicado data                 capa                url
 1  Mujang - Capitulo 01  1         2016-09-24 08:20:00  nome_do_arquivo.jpg http://www.seusite.com/manga/mujang


SE tudo tiver OK... os relacionamentos... e etc..

Basta fazer uma consulta no banco utilizando a clausula INNER JOIN.

exemplo:

SELECT usuarios.usuario, 
           mangas.manga,
           mangas.data,
           mangas.capa,
           mangas.url
FROM mangas
INNER JOIN usuarios ON usuarios.ID = mangas.publicado


Com a consulta feita e retornando os dados... basta você inserir com o php no lugar certo.

Por exemplo

<?php
     include 'conexao.php';
     $consulta = mysqli_query($conexao, "SUA consulta SQL ");
     while( $manga = mysqli_fetch_object($consulta):
           $capa = "http://www.seusite.com/capas" . $manga->capa;
           echo "
                      <div class='box'>
                             <div class='capa'>
                                  <img src='$capa' alt='$manga->capa'> 
                             </div>  
                             <a href='$manga->url'><h1>$manga->manga</h1></a>
                             <h2>Por $manga->usuario as $manga->data</h2>      
                      </div>
                 ";
     endwhile; 

Seria mais ou menos por aí.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×