Mostrando postagens com marcador Cursos. Mostrar todas as postagens
Mostrando postagens com marcador Cursos. Mostrar todas as postagens

sexta-feira, 16 de janeiro de 2015

Sistemas sem Frescuras - #07 - Criando e Acessando o Banco de Dados

Olá. Chegamos a sétima aula do nosso curso Sistemas Sem Frescuras. Neste episódio vamos aproveitar o formulário criado na aula anterior e aprender a utilizar o banco de dados MySQL. Você verá como criar uma base de dados e uma tabela. Em seguida veremos como acessar esta base, através do PHP e verificar as informações da tabela para efetuar o login de usuário.

Finalmente consegui fazer um vídeo mais curto, o que o torna menos cansativo. Vou tentar manter este padrão nos próximos vídeos. Espero que você curta e aproveite bem o conteúdo.

Os códigos utilizados

Arquivo aula7.php
<?php
session_start();
$conexao = mysql_connect("localhost","root","") or die(mysql_error());
$database = mysql_select_db("sistema",$conexao) or die(mysql_error());
if(isset($_POST['usuario'])){
$verbanco = mysql_query("SELECT * FROM users WHERE username = '".$_POST['usuario']."' AND usersenha = '".$_POST['senha']."'") or die (mysql_error());
$lerbanco = mysql_fetch_assoc($verbanco);
$contarbanco = mysql_num_rows($verbanco);
if($contarbanco == 1){
$_SESSION['alerta'] = "O usuário existe, clique para entrar <a href='main.php'>aqui</a>";
} else {
$_SESSION['alerta'] = "O usuário não existe, tente novamente";
}
}
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title> Página de Login </title>
<script type="text/javascript" src="js/html5shiv.js"></script>
<link rel="stylesheet" type="text/css" href="css/loginpage.css"/>
</head>
<body>

<div id="loginbox">
<h1>Área de Login</h1>
<form action="aula7.php" name="formlogin" id="formlogin" method="post">
<p>
<label>
Nome de Usuário<br>
<input type="text" name="usuario" id="usuario" maxlength="60" required autofocus />
</label>
</p>
<p>
<label>
Senha de Usuário<br>
<input type="password" name="senha" id="senha" maxlength="20" required />
</label>
</p>
<p>
<label>
<input class="mouseover" type="submit" name="formsubmit" id="formsubmit" value="ENVIAR"/>
</label>
</p>
</form>
</div>

<?php
if(isset($_SESSION['alerta'])){
?>
<div id="alerta"><?php echo $_SESSION['alerta']; ?></div>
<?php
unset($_SESSION['alerta']);
}
?>

</body>
</html>

Arquivo loginpage.css
/*Página de Login*/

* {
margin: 0;
padding: 0;
font-family: verdana, arial, sans-serif;
font-size: 16px;
}

#loginbox {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
margin-left: -150px;
background-color: #999999;
border: solid 6px #FFFFFF;
box-shadow: 5px 5px 5px #000000;
height: 220px;
margin-top: -110px;
}

#loginbox h1 {
background-color: #777777;
font-size: 1.6em;
text-align: center;
padding: 0.5em;
}

#loginbox form {
margin: 0.5em;
text-align: center;
}

#loginbox form p {
margin-bottom: 0.5em;
}

#loginbox form p label {
font-size: 0.75em;
}

#loginbox form p label input {
border: solid 1px #555555;
text-align: center;
color: #555555;
}

#alerta {
margin-left: 2em;
margin-top: 2em;
margin-right: 2em;
border: solid 10px #ff0000;
background-color: #f1fb37;
color: #dd0000;
font-weight: bold;
font-size: 1.2em;
text-align: center;
z-index: 10;
padding: 1em;
}

/*Classes*/

.mouseover {
background-color: #e87a17;
border: solid 1px #000000;
color: #000000;
padding: 0.3em;
margin: 0.3em;
letter-spacing: 0.3em;
}

.mouseover:hover {
background-color: #000000;
color: #FFFFFF;
cursor: pointer;
}

Grande abraço e até a próxima aula.

sexta-feira, 2 de janeiro de 2015

Sistemas sem Frescuras - #06 - Formulário de Login

Chegamos a sexta aula do nosso curso, Sistemas sem Frescuras. Nesta aula vamos construir um formulário de login com validação simples em PHP. Também vamos aproveitar para posicionar o formulário no centro da página utilizando recursos do CSS.

Espero que você aproveite bastante esta aula.


Os arquivos estão disponíveis no link a seguir: Arquivos da Aula 6

sexta-feira, 19 de dezembro de 2014

Sistemas sem Frescuras - #05 - Introdução ao PHP

Apesar de toda a correria tradicional do mês de dezembro, chegamos a quinta aula do nosso curso Sistemas sem Frescuras. Nesta aula vamos fazer uma rápida descrição das diferenças entre o PHP e o HTML, o que é necessário para o funcionamento da linguagem e alguns exemplos básicos.

O que é PHP

PHP (um acrônimo recursivo para PHP: Hypertext Preprocessor) é uma linguagem de script open source de uso geral, muito utilizada e especialmente guarnecida para o desenvolvimento de aplicações Web que pode ser embutida dentro do HTML.
A linguagem é delimitada pelas tags <?php ... ?> e os arquivos que contém a linguagem deve ter a extensão (.php). Diferente do HTML que é interpretado pelo browser, o PHP é interpretado no servidor que devolve ao navegador apenas o resultado omitindo a codificação da linguagem.

Requisitos

Para trabalhar com PHP necessitamos de: um servidor web e do interpretador da linguagem. Um dos servidores mais utilizados é o Apache. Já o interpretador do PHP pode ser obtido no site da PHP Group. Mas para facilitar existem soluções prontas que instalam automaticamente todas as ferramentas necessárias para o desenvolvimento. A que eu mais utilizo é a distribuição Xampp.

Características

Quando trabalhamos com PHP damos mais poder aos aplicações web, pois agora podemos manipular o conteúdo para obter os resultados que desejamos em uma determinada aplicação. A lista a seguir é apenas um resumo do resumo, pois no decorrer das aulas iremos abordando diversos recursos da linguagem. No PHP podemos trabalhar com:
  • Operadores Aritméticos: permitem efetuar cálculos: adição [+], subtração [-], multiplicação [*], divisão [/] e resto de divisão[%];
  • Operadores de Atribuição: permitem atribuir valores: simples [=], com adição [+=], com subtração [-=], com multiplicação [*=] e com divisão [/=];
  • Operadores de comparação: Igual a [==], diferente de [!=], menor que [<], maior que [>], menor ou igual a [<=] e maior ou igual a [>=];
  • Operadores lógicos: logico "e" [and] ou [&&] e lógico "ou" [or] ou [||] e inversão [!];
  • Estruturas de Controle: If ... else, while, for, switch;
  • Funções e classes: conjunto de instruções para utilização posterior;
  • Variáveis: informações que podem variar.
O escopo da linguagem vai muito além disso, mas a lista acima já dá uma ideia do que podemos fazer. Espero que você goste da aula e tenha certeza que iremos fazer bastante coisa legal no decorrer deste curso. Boa Aula...

sexta-feira, 5 de dezembro de 2014

Sistemas sem Frescuras - #04 - CSS & HTML-5

Olá! Bem vindo a quarta aula do curso Sistema sem Frescuras. Nesta aula vamos focar na formatação de uma página HTML-5 utilizando algumas das novas tags da versão 5 da linguagem e CSS. Trata-se de um ponto de partida para você se familiarizar com estas técnicas e a partir dai desenvolver por conta própria.



Também apresentamos a biblioteca javascript Html5Shiv, uma boa solução para habilitar as funcionalidades do HTML-5 em navegadores mais antigos.


Dessa vez utilizamos o CSS interno através da tag <style> ... </style> para que você possa se familiarizar com a várias maneiras de se implementar o código. 

Os arquivos utilizados no exemplo podem ser baixados no link a seguir: Arquivos da Aula 4.

Tenha uma boa aula e aproveite bem o conteúdo. Até a próxima.

sexta-feira, 21 de novembro de 2014

Sistemas sem Frescuras - #03 - CSS

Chegamos a terceira aula do nosso curso. Neste capítulo e no próximo vamos focar nas CSS. Quando criamos uma página web ou sistema baseado em browser (navegador) devemos separar o conteúdo da forma, ou seja: Enquanto o HTML-5 efetua a marcação do conteúdo, criando a semântica da página, o CSS se encarrega da forma como este conteúdo será apresentado ao cliente.

CSS é a sigla, em inglês, de Cascading Style Sheet que traduzido para o português significa Folha de Estilo em Cascata. Em resumo, são arquivos de texto que reúnem um conjunto de regras que atua sobre os marcadores do HTML.

Sintaxe

Como toda e qualquer linguagem, a CSS tem uma sintaxe que é baseada em: Seletor, Parâmetro e Valor, onde:
  • Seletor é o marcador HTML onde se quer atuar. Ex.: <h1>, <p>, <div>;
  • Parâmetro é a característica do seletor que será afetada. Ex.: cor, posição, visibilidade;
  • Valor é a medida utilizada no parâmetro. Ex.: vermelho, a direita, invisível.
Estas informações são apresentadas na forma de código, conforme a ilustração a seguir:


Arquivos externos

A melhor maneira de implementar o código CSS em uma página ou grupo de páginas é  utilização de um arquivo css externo. Existem três vantagens principais nesta prática
  • A marcação e a formatação ficam totalmente separadas.
  • Alterações de forma em um projeto ficam mais simples.
  • Podemos reutilizar estilos em outros projetos.
Conforme a figura acima, vemos que com uma única folha de estilos css podemos configurar o visual de vários arquivos html. Se desejarmos implementar uma mudança no lay-out basta trocar o arquivo css.

Espero que você goste desta aula.


Até a próxima.

sexta-feira, 7 de novembro de 2014

Sistemas Sem Frescuras - #02 - Tabelas, Formulários e CSS

Olá, bem vindo a segunda aula do curso Sistemas sem Frescuras. Nesta aula foi feita uma revisão do conteúdo anterior (a pedidos). O tema principal da aula são as tabelas e formulários e uma rápida introdução ao conceito das CSS que será abordado com mais profundidade na próxima aula.


Também estamos disponibilizando os arquivos utilizados na elaboração desta aula que bodem se baixados no link a seguir: Arquivos da Aula 2

Se alguma coisa não ficou clara, poste sua pergunta que eu terei o maior prazer em tirar suas dúvidas. Um abraço e curta o conteúdo!

sexta-feira, 24 de outubro de 2014

Sistemas Sem Frescuras - #01 - HTML

Bem vindo a primeira aula do nosso curso Sistemas Sem Frescuras. Nesta primeira aula vamos abordar a estrutura básica de um arquivo HTML5. Você vai aprender a colocar o conteúdo, marcar partes importantes, inserir imagens, criar links e listas (menu). Então boa aula...


Na sequencia vamos postar os arquivos que compões esta aula. Participe, compartilhe e comente.

quinta-feira, 23 de outubro de 2014

Sistemas Sem Frescuras - #00 - Introdução


Sistemas sem Frescuras é uma ideia que eu já tive há algum tempo mas somente agora resolvi colocar em prática. Trata-se de um curso feito para quem tem vontade ou curiosidade em criar seu próprio sistema ou site de forma simples e objetiva. São vídeo aulas com duração média de 20 minutos que tem por objetivo mostrar como criar um sistema.

Nosso curso vai abordar as linguagens HTML, CSS, Javascript, PHP e MySQL, tudo de uma maneira bem básica. O público alvo é aquele que está começando mas também pode ajudar quem já desenvolve. Além das aulas em vídeo será disponibilizado o material (arquivos, imagens, etc) para download.

Lista de Aulas
Um abraço - Luis Vulcanis