[Resolvido] [TUTORIAL] Uma paginação diferente
Uma paginação diferente pra ajudar a galera ai que está começando e não achou o resultado daqueles tutoriais que possuem na internet de paginação, muito profissional, aqui está o meu que eu criei do zero, um sistema simples, e legal.
Antes de começar vocês precisaram criar um novo banco de dados, com o nome de estudo, depois uma tabela com o nome de paginas, com 2 campos um id, e outro numero. depois criar uma pagina e salvar com o nome de loop_1.php(não me pergunte porque escolhi este nome =D)
agora vamos ao código.
Primeiramente vamos fazer a conexão com o servidor:
$connect_db = mysql_connect("localhost","root","");
$select_db = mysql_select_db("estudo",$connect_db);Depois vamos fazer um código para poder adicionar registro, se alguém quiser fazer manualmente sem problema, mas pra não perder tempo, só cola esse código da uma atualizada e ter 300 registro.
$a = 300;
for($i = 1; $i <= $a; $i++){
echo $i;
$enviar = mysql_query("INSERT INTO paginas(numero) value('$i')");
}
Depois de Adicionado os registros agora exclua o código acima e vamos começar a trabalhar no sistema, primeiramente vamos puxar de uma função $_GET["p"].
$pag = $_GET["p"];
if(isset($_GET["p"])){}else{
$pag = 1;
}Agora faremos a parte de quantos registro exibiremos por pagina.
$qua = 10;
$inicia = ($pag*$qua) - $qua;
$loop = mysql_query("SELECT * FROM paginas LIMIT $inicia, $qua");$numero = $ss["numero"];
?>
<div id="numero"><? echo $numero; ?></div>
<?
}Agora vamos calcular quantos links serão feito.
$sql_paginas = mysql_query("SELECT * FROM paginas");
$sql_contagem = mysql_num_rows($sql_paginas);
$pg = ceil($sql_contagem/$qua);Na realidade o que eu fiz a cima é bem parecido com o começo dos outros tutoriais, mas é daqui em diante que começa a magica,
antes de eu postar o código, darei uma pequena explicação:
Nesse código que eu fiz, eu criei um sistema de sempre aparecer 5 links, mesmo se você tiver na pagina 30, ou na pagina 1 apareça 5 links, claro se possuir este numero de paginas. Então eu criei um código se você tiver na pagina 1 apareça o link 1 + 4, se tiver na 2, 1 link antes e 3 depois e por ultimo se tiver acima da pagina 3 apareça 2 links antes e 2 links depois.
if($pag == 1){
$ps = 4;
}
if($pag == 2){
$ps = 3;
}
if($pag >= 3 and $pag <= $pg-3){
$ps = 2;
}Agora a outra parte pra quando estiver na ultima pagina aparece 4 links antes, e se tiver na penúltima apareça 3 links antes e 1 depois.
if($pag == $pg){
$ps = 0;
$pi = 4;
}
if($pag == $pg-1){
$ps = 1;
$pi = 3;
}Agora outra parte importante quem nunca visitou um site com paginação e tentou acessar uma pagina pela url colocando um numero bem alto pra vê se o site quebrava, kkk com esse código abaixo este problema é resolvido você pode colocar pra que quando uma pessoa tentar acessar uma pagina que não existe volta pra primeira pagina ou vai para a ultima colocarei os 2 modos.
1:
if($_GET["p"] > $pg){
header("Location: loop_1.php");
}2:
if($_GET["p"] > $pg){
header("Location: loop_1.php?p=$pg");
}Agora é a parte final que mostrará ons links a ser exibidos, tentarei explicar do jeito mais fácil possível:
O que este código a baixo vai fazer e fazer um comando de repetição(dai o nome loop =D), o que ele vai fazer é exatamente o que eu já disse acima ele fará a 1 pagina ter 4 links a segunda com 3 e 1 antes, e quando a função p estiver na pagina do link ela fique off(sem link), e as demais com link.
for($i = $pag-$pi; $i <= $pag+$ps; $i++){
if($i <= 0 or $i > $pg){}else{
if($i == $pag){
?>
<div id="atual_pag"><? echo $i; ?></div>
<?
}else{
?>
<a href="loop_1.php?p=<? echo $i; ?>">
<div id="proxima_pag"><? echo $i; ?></div>
</a>
<?
}
}
}Pronto, tá ai uma paginação diferente, talvez vocês consigam achar algo parecido como essa na internet, mas quando eu estava aprendendo fiquei mais de 1 semana procurando e nada de achar um tutorial que explicasse um tipo diferente de paginação.
Peço desculpa se houver algum erro de português, e também desculpe usar variáveis com o nome nada vê é que quando a gente tem ideias, a gente tenta passar logo pra um documento ai vai usando nomes aleatórios, pra tenta passar a ideia, até que eu usei algumas palavras, antigamente eu só usava o alfabeto de a à z, skoaksa.
Então galera, é isso ai o meu Primeiro Tutorial aqui no site, espero que vocês tenham gostado, e pra quem quiser dar um efeito com css no final e só copia e colar esses estilos,
<style type="text/css">
#atual_pag {
font-family: arial;
font-size: 14px;
font-weight: bold;
color: #FFF;
background-color: #999;
margin: 2px;
padding: 2px;
height: 16px;
width: 16px;
border: 1px solid #CCC;
text-align: center;
float: left;
}
#proxima_pag {
font-family: arial;
font-size: 14px;
font-weight: bold;
color: #999;
background-color: #FFF;
margin: 2px;
padding: 2px;
height: 16px;
width: 16px;
border: 1px solid #CCC;
text-align: center;
float: left;
}font-family: arial;
font-size: 14px;
font-weight: bold;
color: #FFF;
background-color: #999;
margin: 2px;
padding: 2px;
height: 16px;
width: 16px;
border: 1px solid #CCC;
text-align: center;
float: left;
}
#numero {
cursor: pointer;
font-family: arial;
font-size: 12px;
font-weight: bold;
border: 1px solid #CCC;
color: #999;
margin: 2px;
height: 14px;
width: 114px;
background-color: #FFF;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 10px;
}font-family: arial;
font-size: 12px;
font-weight: bold;
border: 1px solid #CCC;
color: #FFF;
margin: 2px;
height: 14px;
width: 114px;
background-color: #999;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 10px;
}text-decoration: none;
}text-decoration: none;
}text-decoration: none;
}text-decoration: none;
}
</style>e pra quem seguiu certinho o tutorial e no final deu algum erro, aqui vai o link pra download do arquivo original.
Discussão (0)
Carregando comentários...