![[Tutorial]Criando seu Site de WoW #1 Empty](https://2img.net/i/empty.gif)
Aula #1 Creditos - Fox - t[]b@_$ERB|@ Nome - Iniciando o WebSite Proxima aula - [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]Olá,
O assunto que tem maior foco no fórum é World of Warcraft
Então vamos desenvolver o nosso site de WoW ao decorrer de nossas aulas.
Hoje vamos começar elaborando a pagina de registro , porém , ainda sem CSS,
pois ele será aplicado em outra aula.
Inicialmente, vamos criar o nosso arquivo de configuração.
Abra o bloco de notas,( ou o programa de edição desejado)
e adicione o seguinte código
Código:
<?php
error_reporting(0);
$site_name=" Nome do seu servidor"; // Nome do seu servidor
$template_error_file="./include/error.php"; // caso de erro
$template_thanks_file="./include/obrigado.php"; // caso de sucesso
$template_file="./include/html.php"; // pega os dados do html.php
// SQL Variaveis
$host = "localhost"; // normalmente é localhost
$user = "root"; // Usuário normalmente é root
$pass = "ascent"; // Normalmente é Ascent
$db = "auth";// Onde é salva as contas do seu servidor normalmente é auth
$ms = mysql_pconnect($host, $user, $pass);
if ( !$ms )
{
echo "Erro ao conectar a Data Base, Verifique as configurações no config.php.\n"; // mensagem caso der erro ao carregar a db (senha ou algo errado )
}
mysql_select_db($db);
?>
Crie uma pasta chamada Include e dentro dela
Salve o arquivo acima como "config.php".
Agora vamos criar a nossa "Index"
Abra um novo projeto, e adicione o seguinte código:
Código:
<?php
include ("./include/config.php"); // Pega as configurações do config.php
if ( $_GET["p"] == "reg" )
{
$bInputFlag = false;
foreach ( $_POST as $field )
{
if ($field == "")
{
$bInputFlag = false;
}
else
{
$bInputFlag = true;
}
}
if ($bInputFlag == false)
{
include "$template_error_file";
}
$username = mysql_real_escape_string($_POST['username']);
$password = mysql_real_escape_string($_POST['password']);
$sha_pass_hash = sha1(strtoupper($username) . ":" . strtoupper($password));
$email = mysql_real_escape_string($_POST['email']);
$q= "INSERT INTO `account` (`username`, `sha_pass_hash`, `email`) VALUES ('$username', '$sha_pass_hash', '$email')";
$r = mysql_query($q);
if ( !mysql_insert_id() )
{
include("$template_error_file");
}
else
{
Header("Location: index.php?p=thanks"); // se correto envia a mensagem
}
}
elseif ( $_GET["p"] == "thanks" )
{
include "$template_thanks_file";
}
else
{
include ("$template_file");
}
?>salve-o como Index.php (fora da pagina include , na pagina principal)
Crie um novo projeto, e adicione o seguinte código
Código:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title><?php echo $site_name ?></title><!-- pega o nome do seu server para titulo da pagina -->
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
</head>
<body>
<h1><?php echo $site_name ?></h1>
<form action="index.php?p=reg" method="post" class="general">
<label for="textreq">Usuario <span>(Necessario)</span></label>
<input name="username" type="text" class="form-input" id="username" required />
<label for="textreq">Senha <span>(Necessario)</span></label>
<input name="password" type="password" class="form-input" id="password" required />
<label for="textreq">E-Mail <span>(Necessario)</span></label>
<input name="email" type="text" class="form-input" id="email" required />
<input class="form-btn" type="submit" value="Registrar-se" />
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(function(){
if( $.browser.msie && $.browser.version < 9 ) {
$('html').addClass('ie');
$('div.option-group').each(function(){
var $this = $(this);
$this.find('label').append('<span class="before"></span> <span class="after"></span>');
// radio button styling
if( $this.hasClass('radio') ) {
$this.delegate('input[type="radio"]', 'click', function(){
if( this.checked ) {
$(this).siblings('label').removeClass('checked').end().next('label').addClass('checked');
}
else {
$(this).next('label').removeClass('checked');
}
});
}
// checkbox styling
else if( $this.hasClass('check') ) {
$this.delegate('input[type="checkbox"]', 'click', function(){
if( this.checked ) {
$(this).next('label').addClass('checked');
}
else {
$(this).next('label').removeClass('checked');
}
});
}
});
}
// select box styling
if( $.browser.msie && $.browser.version <= 9 ) {
$('html').addClass('ie9');
$('form.general')
.find('select')
.css({ 'opacity': '0', 'position': 'relative', 'z-index': '10' })
.after('<span class="selectTop"/>')
.change(function(){
$(this).next().text( $('option:selected', this).text() );
})
.trigger('change');
}
// add 'invalid' class when HTML5 form valiation fails
if( !$.browser.firefox ) {
$('form.general').each(function(){
$(this).find('input.form-input').bind('invalid', function(){
$(this).addClass('invalid');
});
});
}
});
</script><<br /> <br<br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br />Creditos - Fox</body>
</html>
Salve-o como html.php (dentro da pasta include).
Resultado:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Bom, essa é a nossa primeira aula.
até a proxima.
OBS: para não ficar perdendo tempo , alguns codigos vocês não vão intender pois , estão chamando paginas que só serão criadas na aula 2 , isso irá adiantar o nosso trabalho.
Créditos
Fox - Por desenvolver algumas partes do código e criar o tutorial
t[]b@_$ERB|@ - pela base do código.
Última edição por Fox em Dom 2 Set 2012 - 11:56, editado 4 vez(es)