Tutorial - Fazendo uma Index para Habbo

Já existe outro Tutorial do WictorP de como fazer uma index, mas no caso um pessoal andou me procurando querendo algo escrito e não em vídeo. 

No Tutorial aprenderemos:
> Como ter a Noção de fazer a sua Index.
> O Básico para a estrutura CSS de sua Index.
> Criando a sua Index.php

Começando o Tutorial:

> Como ter a Noção de fazer a sua Index.
O Design abaixo é de uma de minhas Index's para Pixel Ação. O Que você deve intender é que o mais recomendado é começar um esboço de sua index num Programa de Design (Eu uso no caso o Adobe Fireworks) para que você tenha noção de como vai ser na hora de codificar.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Esse já é o Design finalizado do que eu fiz e que vou passar para a codificação.

Comece o seu Design tranquilamente, da maneira que preferir. Não tenha pressa, chega na perfeição para você!

> O Básico para a estrutura CSS de sua Index.
Você já deve ter terminado o seu Design, então partiremos para a codificação! Para isso, você vai precisar dos seguintes programas mais usados, Adobe Dreamweaver e Notepad ++, eu uso o Adobe Dreamweaver (Eu indico por ser um ótimo programa e conter uma ótima plataforma).

Crie o seu documentos CSS, e comece a sua estrutura principal:

Código:


@charset "utf-8";
/* Documento CSS */

a, a:visited, a:hover, a:active {
color: #000;
text-decoration: none;
}
body {
background: #fff url(../imagens/bg.png) fixed;
font-family: Arial!important;
font-size: 13px!important;
}
a img {
border: none;
}
.container {
width: 630px;
margin-left:auto;
margin-right:auto;
margin-top: 170px;
}
.erro {
position: fixed;
width: 100%;
top: 0;
left: 0;
boder:: 999;
height:30px;
background-color: rgba(225, 38, 38, 0.90);
color: #FFF;
font-size: 16px;
line-height: 31px;
text-align:center;
text-shadow:0px 1px 0 rgb(0,0,0);
font-weight:bold;
border-bottom: 2px solid #BA1D1D;
}


Crie uma pasta para os arquivos de sua Index, dentro dessa pasta crie 2 pastas, uma com o nome css e outra com o nome imagens. Coloque o seu arquivo CSS e suas imagens nas respectivas pastas.

> Criando a sua Index.php
Já com a estrutura primária e principal pronta, crie um arquivo em PHP e adicione esses códigos a página:

Código:


<?php

require_once('./data_classes/server-data.php_data_classes-core.php.php');

session_start();

if(isset($_GET['registerCancel']) && FilterText($_GET['registerCancel'] == "true")){
session_unset();
}

if(!session_is_registered(username)){

 if(isset($_POST['username']) && isset($_POST['password'])){
 $username = FilterText($_POST['username']);
 $password = HoloHash($_POST['password'], $username);
 $password2 = HoloHashMD5($_POST['password'], $username);

 if(empty($username) || empty($_POST['password'])){
 $login_error = "Usuário ou senha incorretos!";
 } else {
 $sql = mysql_query("SELECT id FROM users WHERE username = '".$username."' AND password = '".$password."' OR username = '".$username."' AND password = '".$password2."' LIMIT 1") or die(mysql_error());
 if(mysql_num_rows($sql) < 1){
 $login_error = "Usuário ou senha incorretos!";
 } else {
 $userdata = mysql_fetch_assoc($sql);
 $userid = $userdata['id'];
 $ban = mysql_query("SELECT * FROM bans WHERE value = '".$username."' AND bantype = 'user' or value = '".$remote_ip."' AND bantype = 'ip' LIMIT 1") or die(mysql_error());
 if(mysql_num_rows($ban) < 1){

 mysql_query("UPDATE users SET password = '".$password2."', ip_last = '".$remote_ip."' WHERE username = '".$username."'");

 $_SESSION['username'] = $username;
 $_SESSION['password'] = $password2;
 if ($_POST['_login_remember_me'] == "true"){
 setcookie("remember", "remember", time()+60*60*24*100, "/");
 setcookie("rusername", $_SESSION['username'], time()+60*60*24*100, "/");
 setcookie("rpassword", $_SESSION['password'], time()+60*60*24*100, "/");
 }
 header("location: $path/me"); exit;
 } else {
 $bandata = mysql_fetch_assoc($ban);
 $timestamp = time();
 if($bandata['expire'] > $timestamp){
 $login_error = "Você foi banido por: \"" . $bandata['reason'] . "\" e acaba em: " . date('d.m.Y - H:i:s', $bandata['expire']) . ".";
 } else {
 mysql_query("DELETE FROM bans WHERE value = '".$username."' AND bantype = 'user' OR value = '".$remote_ip."' AND bantype = 'ip' LIMIT 1") or die(mysql_error());
 mysql_query("UPDATE users SET password = '".$password2."', ip_last = '".$remote_ip."' WHERE username = '".$username."'");

 $_SESSION['username'] = $username;
 $_SESSION['password'] = $password2;
 if ($_POST['_login_remember_me'] == "true"){
 setcookie("remember", "remember", time()+60*60*24*100, "/");
 setcookie("rusername", $_SESSION['username'], time()+60*60*24*100, "/");
 setcookie("rpassword", $_SESSION['password'], time()+60*60*24*100, "/");
 }
 header("location: $path/me"); exit;
 }
 }
 }
 }
 }



$body_id = "index";


?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?php echo $shortname; ?> - Entrar</title>
<link href="css/NOME DO SEU ARQUIVO CSS.css" type="text/css" rel="stylesheet" media="all" />

</head> <body>
<?php if(isset($login_error)){ ?>
 <div class="erro"><?php echo $login_error; ?></div>
                           <?php } ?>
 <div class="container">
<form method="post" class="login">
<input type="text" placeholder="Usuário" name="username">
<input type="password" placeholder="Senha" name="password">
<input type="submit" value="Entrar no Hotel" name="login">
</form>
</div>
<?php


} else {
header("location:me");
}

?>
</body>
</html>


Já toda a base completa, toda funcional. Vamos antes intender os códigos de Login

Os códigos

Código:


<form method="post" class="login">
<input type="text" placeholder="Usuário" name="username">
<input type="password" placeholder="Senha" name="password">
<input type="submit" value="Entrar no Hotel" name="login">
</form>


São os formulários para efetuar o Login, para personalizá-lo, adicione isso ao seu css:

Código:


form.login input[type="submit"]{
height:30px;
line-height:29px;
border: 1px solid #000;
width:120px;
font-size:12px;
background-color:#5AA600;
border-radius: 3px;
color: #fff;
font-weight: normal;
margin-left: 2px;
margin-right: 2px;
}
form.login input[type="submit"]:hover{
background-color:#71CC00;
}
form.login input[type="text"], form.login input[type="password"] {
background-color: #FFF;
height: 30px;
width: 192px;
border-radius: 3px;
border: 1px solid #CCCCCC;
color: #000;
font-size: 12px;
font-weight: bold;
text-indent: 7px;
margin-left: 2px;
margin-right: 2px;
}


Edite da maneira que preferir.

Em <link href="css/NOME DO SEU ARQUIVO CSS.css" type="text/css" rel="stylesheet" media="all" />
coloque o nome do seu arquivo css, coloque de style ou global (São nomes mais populares).

Para caso esteja se perguntando o que é a div "<div class="container">", irei explicar. Essa div determina o tamanho da página, no caso no css ela tem o tamanho (largura) de 630px (width: 630px;), além disso a div também é responsável por deixar a página centralizada e posicionada.

O Resto da codificação da sua página fica por você. Até mais.

Créditos:
Je4n & WictorP


[ Veja também a versão em vídeo do WictorP - https://www.youtube.com/watch?v=PiwOOtVtgq4 ]

Kd meus créditos? Eu ke te ensinei a fazer index. :vara:

Legal o tutorial, mas sou mais o meu em vídeo. :vara:

[quote=WictorP]Kd meus créditos? Eu ke te ensinei a fazer index. :vara:

Legal o tutorial, mas sou mais o meu em vídeo. :vara:[/quote]

Me ensino nada, só me deus os códigos PHP :vara:
Já coloquei :kk2:

Obrigado por compartilhar!

vlw por partilhas com agenti

WictorP, Reupa seu video ? '