Vamos responder a ambas resposta nesse post.

O que é MySQL?

Ok já sabemos o que o MySQL não é, ele não é um banco de dados.

MySQL é um sistema de gestão de banco de dados relacional.

Ok, agora precisamos definir o que é um sistema de gestão de banco de dados.

O que é um Sistema de Gestão de Bases de Dados (SGBD)?

Um Sistema de Gestão de Bases de Dados (SGBD) é um software desenvolvido para armazenar, recuperar, definir, e gerir dados ou estrutura de dados em um banco de dados.

Os dados em SGBD são armazenados em objetos de base de dados chamados tabelas. Uma tabela é uma coleção de entradas de dados relacionados e é constituída por colunas e linhas.

Aos usuários desse sistema são dadas ferramentas para executar vários tipos de operações sobre as estruturas da tabela ou sobre os dados.

Um SGBD funciona principalmente como uma interface entre o usuário final e a base de dados, gerindo simultaneamente os dados e a estrutura da base de dados, a fim de facilitar a organização e a manipulação dos dados.

Alguns exemplos de SGBD incluem MySQL, PostgreSQL, Microsoft Access, SQL Server e Oracle.

O que é um banco de dados?

Uma base de dados é uma coleção organizada de dados, tipicamente armazenados electronicamente num sistema digital em formas de tabelas.

Nesse post estamos levando em consideração apenas os bancos de dados relacionais, mas existe uma outra categoria de banco de dados, chamada de banco de dados não relacionais, como MongoDB, você consegue entender melhor a diferença entre base de dados relacional e não relacional aqui.

Uma base de dados é geralmente controlada por um sistema de gestão de bases de dados (SGBD). Juntos, os dados o SGBD e aplicações associadas, são referidos como um sistema de base de dados, muitas vezes abreviado para apenas base de dados.

Os dados, dentro dos tipos mais comuns de bases de dados atualmente em funcionamento, são tipicamente modelados em linhas e colunas numa série de tabelas para tornar eficiente o processamento e consulta de dados.

Os dados podem então ser facilmente recuperados, geridos, modificados, atualizados, controlados, e organizados. A maioria das bases de dados utiliza SQL para escrever e consultar dados.

Qual é a diferença entre uma base de dados e uma planilha de Excel?

As bases de dados e as planilhas do Excel são ambas formas convenientes de armazenar informação. As principais diferenças entre as duas são:

• Como os dados são armazenados e manipulados
• Quem pode ter acesso aos dados
• Quantos dados podem ser armazenados

As planilhas foram originalmente criadas para um usuário, ou para um pequeno número de usuários que não precisam fazer uma grandes quantidades de manipulação no dados.

As bases de dados, por outro lado, foram desenvolvidas para conter coleções muito maiores de informação. As bases de dados permitem múltiplos usuários ao mesmo tempo gerindo e consultando os dados de forma rápida e segura, utilizando lógica e uma linguagem mais complexa.

O que é SQL?

SQL (Structured Query Language) ou em bom português, Linguagem de Consulta Estruturada, é a linguagem padrão para consulta e manipulação de bases de dados relacionais.

Sim, SQL é uma linguagem de programação. Oferece loops, diretivas lógicas, variáveis, e assim por diante.

Mas em vez de ser uma linguagem de programação para construir websites, aplicações, ou software, SQL é uma linguagem centrada no armazenamento, recuperação, e manipulação de dados em bases de dados.

Aqui estão alguns exemplos de comandos SQL:

SELECT * FROM table_name WHERE column_name='...';
CREATE TABLE table_name (COLUMN_NAME DATATYPES[,....]);  
ALTER TABLE table_name ADD column_name COLUMN-definition; 
DROP TABLE table_name;  
TRUNCATE TABLE table_name;  

O que dá pra fazer com SQL?

• SQL pode executar consultas em uma base de dados
• SQL pode recuperar dados a partir de uma base de dados
• SQL pode inserir registos numa base de dados
• SQL pode atualizar registos numa base de dados
• SQL pode apagar registos de uma base de dados
• SQL pode criar novas bases de dados
• SQL pode criar novas tabelas numa base de dados
• SQL pode definir permissões em tabelas, procedimentos, e views

Como SQL e SGBD se relacionam um com o outro?

SGBD é um sistema de gestão de bases de dados. E SQL é a linguagem utilizada para comunicar com os dados de um SGBD.

Ou, pondo em termos simples:

SGBD é um livro e SQL é a linguagem que está sendo utilizada no livro. Quer ler ou escrever no livro? Use SQL.

MySQL Workbench

MySQL Workbench é uma ferramenta de design visual para bases de dados que integra o desenvolvimento, administração, design, criação e manutenção de bases de dados SQL num único ambiente de desenvolvimento integrado (IDE) para o sistema de bases de dados MySQL.

MySQL Workbench fornece um conjunto de ferramentas para melhorar o desempenho de aplicações MySQL, fornece uma plataforma visual para administrar ambientes MySQL e ganhar melhor visibilidade em bases de dados, também oferece ferramentas visuais para criar, executar, e otimizar consultas SQL.

Conectando as partes

Para entender como todas essas peças se conectam, da um olhada na imagem abaixo.

Essa será a primeira parte, onde vamos definir o layout e a estrutura da página, vamos deixar o Javascript para segunda parte.

Se quiser acompanhar e ser notificado, clique aqui e se inscreva para receber as notificações.

Sem mais demora, vamos colocar a mão na massa.

Estrutura HTML básica

Partindo do básico, a estrutura de qualquer página HTML será bastante similar a essa.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
</head>

  <body>

  </body>

</html>

Algumas informações sobre essa estrutura.

Uma tag do tipo <meta> fornece metadados sobre o documento HTML.

<meta charset="UTF-8"> especifica a codificação de caracteres para o documento HTML.

O atributo viewport dá ao navegador instruções sobre como controlar as dimensões e escalas da página.

width=device-width define que a largura da página deve seguir a largura da tela do dispositivo (que irá variar dependendo do dispositivo).

initial-scale=1.0 define o nível de zoom inicial quando a página é carregada pela primeira vez pelo navegador.

Estrutura da Página de Login

Certo, definida a estrutura básica, vamos partir para como começar a criar nossa página de login, agora é hora de começar a colocar os elementos na tela.

São apenas 5 elementos, nada muito complexo.

• Logo do página
• Campo de formulário para email
• Campo de formulário para senha
• Botão de login
• Imagem para o background

Vamos trabalhar primeiramente com o nosso formulário. Pra ajudar na estrutura e na aparência da página, vou utilizar o Bootstrap 4.4, que é bem simples de utilizar e tem uma documentação excelente. Para incluir o arquivo CSS do bootstrap na página, não tem mistério, basta copiar e colar o código com o link logo abaixo da tag <meta>.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <title>Login Page</title>
</head>

  <body>

  </body>

</html>

Formulário de Login

Eu quero construir o formulário centralizado na página, e independente do tamanho da tela, quero que ele siga as mesmas proporções.

O Bootstrap tem um monte de ferramentas e classes úteis para ajustar a na responsividade. Bom sem perder tempo, esse aqui é o código do formulário.

<div class="row align-items-center h-100 ">
    <div class="col-8 col-md-3 col-xs-8 mx-auto l-form">
        <form class="form" method="post">
            <img class="row mx-auto" src="https://i.imgur.com/RhJpe7c.png" width="150">
            <div class="form-group ">
                <input type="text" placeholder="Email" class="form-control i-form">
            </div>
            <div class="form-group">
                <input type="password" placeholder="Password" class="form-control i-form">
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-dark btn-md btn-block">Login</button>
            </div>
        </form>
    </div>
</div>

Nesse código já coloquei 4 dos elementos que tínhamos definido anteriormente. A logo da página está ali, acredite, só que ela é branca, então só vai aparecer quando mudarmos o background.

O que estou criando com esse código é uma estrutura, utilizando o Grid System do Bootstrap, para alinhar o nosso formulário horizontalmente e verticalmente no centro da tela.

Também utilizei as classes: col-8 col-md-3 col-xs-8 para manter as proporções em diferentes tipos de tela.

Provavelmente existem diversas outras maneiras e classes que eu poderia utilizar para criar o mesmo formulário com as mesmas características. Mas esse código tem a intenção de ser bem simples, não precisamos de soluções extremamente elaboradas, ainda.

Sugestões são sempre bem vindas, deixe seu comentário.

A sua página deve estar parecida com isso no momento.

Melhorando a aparência

Para melhorar aparência geral da página, criei um arquivo CSS bem simples. Que especifica as classes l-form e i-form, e alguns outros atributos para as tags <body> e <html>.

body,html{
  height: 100%; 
  overflow: hidden;
  background-image: url(https://i.imgur.com/X97iVv1.jpg);
  background-size: cover;
}

.l-form{
  background-color:rgba(39, 41, 45, 0.5);
  border-radius:12px;
  padding: 12px;
}

.i-form{
  border-radius:12px;
  padding: 12px;
}

Para as tags <body> e <html> defini 5 atributos

heigh:100% assim conseguimos aproveitar toda a área util da tela.

overflow: hidden remove as barras de rolagem da página.

background-image e background-size define uma imagem para o fundo da sua página e o comportamento dessa imagem, respectivamente.

Finalizando

Esse é o nosso arquivo HTML final, após juntarmos todas as peças:

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/login-style.css">
    <title>Login Page</title>
</head>

<body>
  <div class="row align-items-center h-100 ">
      <div class="col-8 col-md-3 col-xs-8 mx-auto l-form">
          <form>
              <img class="row mx-auto" src="https://i.imgur.com/RhJpe7c.png" width="150">
              <div class="form-group">
                  <input type="text" name="email" placeholder="Email" class="form-control i-form">
              </div>
              <div class="form-group">
                  <input type="password" name="password" placeholder="Password" class="form-control i-form">
              </div>
              <div class="form-group">
                  <button type="button" class="btn btn-dark btn-md btn-block">Login</button>
              </div>
          </form>
      </div>
  </div>
</body>

</html>

Se você seguiu tudo até aqui como foi ensinado a sua página de login deve se parecer com isso:

Esse foi um tutorial bem fácil, mas uma página de login é como a porta de entrada, um cartão de visitas e acredito que a primeira impressão é muito importante. Espero que tenha gostado. Até a parte 2.