[Resolvido] [TUTORIAL] Uma paginação diferente

[Renan Kayro 0]

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");
while($ss = mysql_fetch_array($loop)){
$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;
}
#proxima_pag:hover {
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;
}
#numero:hover {
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;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
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.

 

http://www.megaupload.com/?d=4TUGOENP