LoboMaker - Aprendendo a Criar um Site para sua equipe/empresa DO ZERO [#2]

[Sir Lobo]

ATENÇÃO: Este tutorial é voltado para iniciantes que tenham o mínimo de conhecimento em HTML e CSS, mas nada que impeça um iniciante de conseguir

Olá! Eu sou Sir Lobo e estou retornando as atividades depois de quase 3 anos fora  e vos trago a nova série de tutoriais para que você finalmente pare de procrastinar e faça aquele site pra divulgar sua grandiosa equipe e o seu projeto 

#	Aula	Tópico	Status
01	Preparação do Ambiente	Vamos configurar e baixar os programas necessários para poder iniciar nosso site	[ACESSAR]
02	Configuração Inicial	Configuração do template, dos diretórios e dos arquivos principais	ATUAL
03 e 04	Construção de Layout / Estilizando os Elementos	Vamos primeiramente, criar a estrutura que servirá de base para nosso site / Criação da folha de estilos e respectiva estilização de elementos	[ACESSAR]
05	Página de Contato	Utilizando PHP, vamos adentrar à lógica de programação para um sistema simples de mensagens built-in	AGUARDANDO
06	Listagem de Jogos	Também utilizando PHP, iremos criar nossa base de dados e popular dinamicamente com os jogos produzidos	AGUARDANDO
07	Sistema de Blog	Pra finalizar com o PHP, um sistema de posts dinâmicos simples, mas útil para informes de atualizações e anúncios sobre novas produções	AGUARDANDO

Aula #2 - Configuração Inicial

Esclarecimento

Antes de iniciarmos, gostaria de citar que sim, vamos começar a utilizar PHP, por isso baixamos o XAMPP, mas sei que vão surgir algumas dúvidas, então antes de iniciarmos, fica aqui uma mini FAQ que provavelmente são as coisas que mais perguntam quando começamos a "misturar" HTML e PHP:

Posso misturar PHP com HTML?
Páginas que suportam scripts PHP devem ter sua extensão com final .php, e estas apenas servem para que o servidor entenda que os scripts escritos nesta linguagem devem ser compilados como código PHP, e não lidos como texto plano. HTML é linguagem de marcação (mark-up language), enquanto PHP é uma linguagem de programação server-side, ou seja, os scripts, (ao contrário da linguagem javascript que é "client-side"), são executados do lado do servidor de hospedagem. Em resumo, o PHP não influencia em nada. Códigos PHP podem ser inseridos sem problemas em seus layouts HTML (desde que sejam salvos com .php na extensão). Para inserir um código PHP em meio à uma marcação HTML basta abrir as tags <?php ?> 

PHP é seguro?
A resposta curta e grossa é: até onde eu sei, vivem para invadir sistemas, e se invadiram o site da NASA e da CIA, nosso pobre site nem se compara em nível de segurança e encriptação, mas usaremos alguns artifícios básicos para isto, como filtrar as entradas via GET e POST com FILTER_SANITIZE, por exemplo entre outros artifícios "básicos". Lembrando que o foco aqui não é segurança, então caso queira se aprofundar e realmente deseja um sistema capaz de dificultar pelo menos metade dos cyber ataques, estude além da caixinha deste tutorial, pois segurança é a parte mais importante de qualquer sistema! 

É um site personalizável?
Se tiver conhecimento em CSS e HTML, o resto é com você  Tudo é possível e inclusive, você poderá escolher as cores, espaçamentos diferentes e pode ir testando configurações que sejam diferentes do tutorial, mas que tragam o mesmo resultado, ou seja: sem bugs no layout. Mas não se preocupe, pois detalharei o máximo possível, e se possível, nos próximos tutoriais trarei alguns trechos em vídeos para melhor compreensão 

[close]

Criando Arquivos de Configuração Padrão

[box2 class=titlebg title=Criando Arquivos de Configuração Padrão]

Vamos criar 2 arquivos em branco pelo Notepad++, um chamado config.php e o outro chamado functions.php e vamos salvá-los na pasta core

C:\xampp\htdocs\zgames\core\


Vamos configurar primeiramente o arquivo config.php com o código abaixo:

config.php

<?php
	$host = "localhost";
	$usuario = "root";
	$senha = "";
	
	$bd = "zgames";
	
	$mysqli = new mysqli($host, $usuario, $senha, $bd);
	
	if ($mysqli->connect_errno)
	{
		echo "Falha ao tentar conectar: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
	}
?>

[close]

Agora vamos precisar incluir este arquivo de configuração na index.php, através deste código:

<?php include_once('./core/config.php'); ?>

O código deve estar assim neste exato momento 

Spoiler

[close]

o include é responsável por incluir um arquivo dentro de sua página e vamos usá-los algumas vezes dentro do projeto pra incluir dinamicamente tanto arquivos de configuração quanto arquivos do template.

[/box2]

[close]

Páginas Dinâmicas

[box2 class=titlebg title=Páginas Dinâmicas]

Agora vamos substituir aquele texto criado anteriormente de Hello, World dentro das tags <body></body> pelo seguinte código:

<?php include('./template/'.$oPage); ?>

Se você tentar atualizar a página, receberá o seguinte erro:

Notice: Undefined variable: oPage in C:\xampp\htdocs\zgames\index.php on line 20

ou seja, não existe nada para dizer qual arquivo deve ser encontrado dentro da pasta template, claro, porque ainda não criamos a variável.

Precimos usar o PHP para saber qual página será carregada de acordo com a url digitada, então inclua o seguinte código acima de <!DOCTYPE html>:

Script de Página Dinâmica (index.php)

<?php
	if(isset($_GET['pg']))
	{
		$page = filter_var($_GET['pg'], FILTER_SANITIZE_NUMBER_INT);
		
		if($page == 1)
		{
			$oPage = 'jogos.html';
			$pg_titulo = 'Nossos Jogos';
		}
		else if($page == 2)
		{
			$oPage = 'contato.html';
			$pg_titulo = 'Fale Conosco';
		}
	}
	else //caso não haja query string (url inicial), ela carrega a página "home.html" por padrão
	{
		$oPage = 'home.html';
		$pg_titulo = 'Início';
	}
?>

[close]

Se você tentar atualizar a página novamente, vai receber o seguinte erro agora:

Warning: include(./template/home.html): failed to open stream: No such file or directory in C:\xampp\htdocs\zgames\index.php on line 18

Warning: include(): Failed opening './template/home.html' for inclusion (include_path='C:\xampp\php\PEAR') in C:\xampp\htdocs\zgames\index.php on line 18

ou seja, o arquivo não foi encontrado, afinal, ele não existe ainda. Vamos criá-lo pelo Notepad++ e salvar como home.html na pasta template. Crie também os seguintes arquivos (serão usados posteriormente):

• o_header.html
• o_footer.html
• jogos.html
• contato.html

Ao fim, nossa pasta template deve estar assim:

Spoiler

[close]

Agora recarregue a página, e verá que não aparecerá nenhum tipo de erro!

A variável $page armazena o valor da query string nomeada como pg e podemos comparar na função seguinte, sendo que basta adicionar mais "else if" para mais páginas e seus respectivos números 

Spoiler

[close]

Neste exemplo, a página Jogos (jogos.html) é assimilada ao número 1. Caso queira adicionar mais páginas, basta inserir este código abaixo do último else if (else if, e não else):

else if($page == n)
	{
		$oPage = 'nome_do_arquivo_da_pasta_template.html';
	}

onde n é o número que você vai atribuir no script

Vamos configurar os arquivos agora! Como o intuito é montar algo rápido, disponibilizei o código abaixo:

Spoiler

PHP
(página-mestre)

[box2 class=titlebg title=index.php]

<?php include_once('./core/config.php'); ?>

<?php
	if(isset($_GET['pg']))
	{
		$page = filter_var($_GET['pg'], FILTER_SANITIZE_NUMBER_INT);
		
		if($page == 1)
		{
			$oPage = 'jogos.html';
			$pg_titulo = 'Nossos Jogos';
		}
		else if($page == 2)
		{
			$oPage = 'contato.html';
			$pg_titulo = 'Fale Conosco';
		}
	}
	else //caso não haja query string (url inicial), ela carrega a página "home.html" por padrão
	{
		$oPage = 'home.html';
		$pg_titulo = 'Início';
	}
?>

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title><?php echo $pg_titulo; ?> | Z Games</title>
		<meta name="description" content="Descrição curta do meu projeto">
		<meta name="author" content="Z Games">

		<link rel="stylesheet" href="css/styles.css?v=1.0">

	</head>

	<body>
		<?php include('./template/'.$oPage); ?>
	</body>
</html>

[/box2]

HTML
(pasta templates)

[box2 class=titlebg title=home.html]

<div class="container">
	<div class="container__post">
		<div role="postheader">
			Título
		</div>
		
		<div role="postbody">
			Conteúdo
		</div>
	</div>
</div>

[/box2]

[box2 class=titlebg title=jogos.html]

<div class="container">
	<div class="container__game">
		<div role="gameavatar">
			<div><img src="https://i.imgur.com/wSmkxUT.png"></div>
		</div>
		
		<div role="gamedesc">
			<div>Título</div>
			<div>Descrição</div>
		</div>
	</div>
</div>

[/box2]

[box2 class=titlebg title=contato.html]

<div class="container">
	<form action="<?php $_SERVER['PHP_SELF'];?>" method="POST">
		<input type="text" id="nome" name="nome" placeholder="Nome completo">
		<input type="text" id="email" name="email" placeholder="Email para retorno">
		
		<select id="assunto" name="assunto">
			<option selected>Nenhum</option>
			<option>Parceria</option>
			<option>Doações</option>
			<option>Contato Profissional</option>
			<option>Outro</option>
		</select>
		
		<textarea></textarea>
		
		<input type="submit" id="submitar" value="Enviar Mensagem" placeholder="Escreva sua mensagem...">
	</form>
</div>

[/box2]

Explicando algumas linhas:

<form action="<?php $_SERVER['PHP_SELF'];?>" method="POST">

aqui estamos informando que o método de envio de informações é do tipo POST e que o arquivo que vai processar isto é a própria página, por isso abrimos um trecho de PHP com <?php e fechado com ?>, onde o código em questão, $_SERVER['PHP_SELF'] especifica que quem vai processar é a mesma página que submita ele, ou seja, a própria página contato.html

[close]

Agora vamos adicionar o código para testar se tudo está funcionando corretamente de maneira mais intuitiva. Em sua index.php, adicione o seguinte código dentro da tags <body></body> e coloque acima do código include que faz a chamada das páginas:

Menu Temporário: <a href="./">Início</a> | <a href="./?pg=1">Jogos</a> | <a href="./?pg=2">Contato</a>
<p>

Seu código deve estar assim neste momento:

Spoiler

[close]

Agora vou explicar sobre os links. Vamos debugar a estrutura dele para que você saiba inserir links pelo site todo sem que haja algum tipo de erro quando for utilizar os números atribuídos em nossa index.php

Anchor Tag Completa (link):

href=""	Atributo onde especificamos a URL desejada
./	Significa que o link deve ser puxado à partir da raíz do site
?pg	query string definida como pg
=1	atribui que a query string é igual ao número de atribuição da página especificado no script em index.php

Teste e veja que nosso script da página index.php está chamando as páginas de layout da pasta templates corretamente!

[/box2]

[close]

[box2 class=titlebg title=Considerações Finais]
Bem, chegamos ao fim de mais um tutorial!  Se estiver gostando, peço que dê um feedback para que que eu possa continuar os tutoriais de forma que ajude-o 

Te espero na próxima aula! Dúvidas, basta responder aqui 

Um abraço do Lobo
[/box2]