1. Configuração do ambiente de desenvolvimento integrado (IDE) para Windows

Pré-requisitos

  • Leia os Termos e condições ⇒
  • Clique em Iniciar e digite Segurança do Windows ⇒ Selecione Proteção contra vírus e ameaças ⇒ Selecione Verificação rápida.
  • Para verificar o tipo de sistema operacional de 64 ou 32 bits no Windows, clique com o botão direito do mouse em 'Este PC' no Explorador de Arquivos e clique em 'Propriedades'.
  • Para verificar se o espaço disponível é maior que ~3 GB, clique com o botão direito do mouse na unidade C: e selecione 'Propriedades'.
  • Vá para a Seção de downloads ⇒ se o USB do curso não estiver disponível. Caso contrário, copie o conteúdo do USB para a pasta Downloads.
  • 1.1 Instalação do editor de texto - Brackets

    Um editor de texto é um programa de computador que permite ao usuário inserir, alterar e armazenar texto (caracteres e números, cada um codificado pelo computador e seus dispositivos de entrada e saída, organizados para ter significado para os usuários ou para outros programas).

    1.1.1 Localize e clique duas vezes no arquivo executável Brackets na pasta Downloads (Brackets-n.n.n.exe).

    1.2 Instalação da biblioteca de vínculo dinâmico do Microsoft Visual C++

    Observe que esta seção (1.2) só é necessária se msvcr110.dll, mscvr120.dll e msvcp120.dll ainda não estiverem presentes em C:\Windows\System32.

    Uma biblioteca de vínculo dinâmico (DLL) é uma coleção de pequenos programas que programas maiores podem carregar quando necessário para concluir tarefas específicas. O pequeno programa, chamado de arquivo DLL, contém instruções que ajudam o programa maior a lidar com o que pode não ser uma função central desse programa maior. Alguns arquivos DLL devem estar presentes no sistema operacional Windows para que o servidor WAMP seja instalado corretamente. A maneira mais fácil de resolver isso é instalar o Visual C++ Redistributable for Visual Studio (2012 Update 4).

    A instalação abaixo é simplificada usando arquivos Batch e DLL (observe que eles usam as respectivas extensões .bat e .dll) . São arquivos de script (escritos em DOS - Disk Operating System) e consistem em uma série de comandos para instalar a DLL C++ (msvcr110.dll) e copiar duas DLLs independentes (mscvr120.dll e msvcp120.dll), conforme exigido pela WAMP, em C:\Windows\System32 (um diretório vital para o sistema operacional Windows).

    Observe que os arquivos compactados de dados (cpp.zip e dll.zip) são exclusivos para este processo e são seguros para baixe conforme as instruções. O respectivo conteúdo de arquivo de lote descompactado (cpp.bat e dll.bat) também é seguro para execução.

    Agora siga cuidadosamente as instruções detalhadas em 1.2.1 a 1.2.6.

    1.2.1 Abra o arquivo zip cpp e execute cpp.bat

  • Clique duas vezes no arquivo cpp.zip
  • Arraste e solte a pasta cpp (de dentro de cpp.zip) para a pasta Downloads
  • Abra a pasta Downloads, clique duas vezes na pasta cpp e clique duas vezes na pasta cpp.bat
  • 1.2.2 Permitir permissões do Windows para executar cpp.bat

  • Clique em 'Mais informações', clique em 'Executar assim mesmo' e clique em Sim
  • 1.2.3 Execute os executáveis C++

  • 'Pressione qualquer tecla para continuar . . .' quando solicitado
  • Clique em 'Reparar' em Modify(x64) Setup for C++ for 64 bit OS only
  • Clique em Sim e em Fechar
  • Clique em 'Reparar' na configuração Modify(x86) para SO de 64 bits e 32 bits
  • Clique em Sim e em Fechar
  • 1.2.4 Abra o arquivo zip dll e execute dll.bat

  • Clique duas vezes no arquivo dll.zip
  • Arraste e solte a pasta dll (de dentro de dll.zip) para a pasta Downloads
  • Abra a pasta Downloads
  • Clique duas vezes na pasta dll
  • Clique com o botão direito em dll.bat e clique em Executar como administrador.
  • 1.2.5 Permitir permissões do Windows para executar dll.bat

  • Clique em 'Mais informações', clique em 'Executar assim mesmo' e clique em Sim
  • 1.2.6 Carregar as DLLs

  • 'Pressione qualquer tecla para continuar . . .' quando solicitado e siga as instruções na tela (dois arquivos são copiados)
  • 1.3 Servidor Web - Instalação do WAMP

    Clique duas vezes no arquivo executável wampserver e siga as instruções.

    1.3.3.1 Responda 'Sim' para escolher outro navegador e procure por chrome.exe em:

  • C:\Program Files\Google\Chrome\Application ou se não houver
  • C:\Program Files (x86)\Google\Chrome\Application e
  • Clique duas vezes em chrome.exe
  • 1.3.3.2 Se o padrão já estiver definido como brackets.exe, responda 'Não', caso contrário, localize:

  • C:\Arquivos de Programas\Brackets ou C:\Arquivos de Programas (x86)\Brackets e
  • Clique duas vezes em brackets.exe
  • 1.4 Site do curso - instalação do subdiretório 'web'

    1.4.1 Clique duas vezes no arquivo web.zip ⇒ Abra com ⇒ Explorador de arquivos ou Windows Explorer.

    1.4.2 Abra uma segunda janela do File Explorer e navegue até C:/wamp/www ou C:/wamp64/www

    1.4.3 Clique com o botão direito do mouse na pasta 'web' ⇒ Copiar ⇒ em seguida, arraste e solte-o dentro da pasta /www (C:/wamp/www ou C:/wamp64/www).

    1.4.4 Abra a pasta da web acima entre Brackets

    1.4.5 Configurar colchetes



    2. Verificação IDE

    Agora é necessário verificar se todos os componentes se encaixam e estão funcionando corretamente. No entanto, o URL na barra de endereços carrega o site do host remoto - itgis.org. Esta seção descreve como configurar o site localmente para que possa ser acessado a partir do seu dispositivo (locahost). Antes de fazer isso, devemos verificar se todos os serviços localhost estão prontos para uso.

    2.1 Clique no logotipo do WAMP na barra de tarefas ⇒ execute wampmanager.exe ⇒ coloque o mouse sobre o logotipo verde e verifique 'servidor local - Todos os serviços em execução'.

    2.2 Clique em LOCALHOST ⇒ e certifique-se de que o URL na barra de endereço agora faça referência ao localhost.

    2.3 Software antimalware pós-configuração do IDE.

  • Clique em Iniciar e digite Segurança do Windows ⇒ Selecione Proteção contra vírus e ameaças ⇒ Selecione Verificação rápida
  • 2.4 Verifique se o ambiente foi instalado corretamente.

  • Clique em e siga as instruções.
  • 2.5 Localize e feche janelas redundantes.

  • Feche a página - 'Treinamento Gratuito de Internet - Configuração de IDE' (clique em 'x' ao lado do título na página adjacente a esta)
  • Passe o mouse sobre o ícone do Chrome (na parte inferior da tela) e feche a página 'Test Webpage' (clique em 'x').


  • 3. Linguagens de software da Web

    Esta seção descreve como o software interage com seu navegador da web e o servidor da web que acabou de ser instalado em sua máquina. Os exercícios fornecem exemplos de linguagens de programação e técnicas associadas a cada camada da pilha. Eles fornecerão a base necessária para autoaprendizagem adicional usando os vários tutoriais disponíveis na Internet .

    O pop-up da página da web INTERACT permite a interação dinâmica com as várias camadas da web e suas linguagens de software correspondentes.

  • Software de navegador da Web
  • Software de servidor Web
  • Software de banco de dados
  • Para ver um exemplo de CSS, clique abaixo e mova o ponteiro sobre Ativar CSS.

  • clique em
  • Para interagir dinamicamente usando JS, role para baixo e clique em String Methods.

    Parte 1 - Software de navegador da Web

    Organize os Brackets e as janelas do navegador divididas verticalmente como mostrado Abrir Popup ⇒

    3.1 HTML Linguagem de marcação de hipertexto

  • Abrir HTML 3.1 entre Brackets
  • Abra o pasta  EXERCISES e abra EX 1.html
  • HTML é a linguagem de programação de páginas da web.
  • Comanda seu navegador da web para exibir texto e gráficos de uma forma específica.
  • As tags começam com < e terminam com > e cada tag tem um significado único.
  • As tags são usadas para armazenar elementos HTML (digamos, <h1>)
  • Elas, por sua vez, especificam o conteúdo geral de uma página da web, por exemplo< ul> <h1>Título de nível superior</h1>

  • clique em

  • Abra o pasta  PRACTICE e abra STUDY 1.html
  • Observe a barra de menu na parte superior da tela Parênteses. Clique em 'Arquivo' e marque 'Ativar visualização ao vivo experimental' (se ainda não estiver marcado).
  • Clique em lightening no canto superior direito da tela de texto do Bracket
  • Agora experimente as escolas W3 HTML Quiz ⇒
  • Agora experimente as escolas W3 EXERCISES de HTML ⇒
  • Revise o pontuação HTML associada ⇒
  • 3.2 CSS Cascading Style Sheet

  • Em Brackets, selecione 3.2 CSS, abra exercícios e clique em EX2.html
  • CSS é uma linguagem de folha de estilo usada para descrever a apresentação de um documento escrito em uma linguagem de marcação como HTML.
  • Descreve como os elementos HTML devem ser exibidos na tela
  • Conjunto de regras consiste em um seletor e um bloco de declaração
  • Exemplo de conjunto de regras: p {cor: vermelho; estilo da fonte: itálico;}

  • clique em

  • clique em

  • Feche exercícios na árvore de arquivos de Brackets.
  • Observe a barra de menu na parte superior da tela Brackets. Clique em 'Arquivo' e marque 'Ativar visualização ao vivo experimental' (se ainda não estiver marcado).

  • Em Brackets, selecione 3.2 CSS, clique em PRACTICE e abra STUDY2.html
  • Clique em lightening no canto superior direito da tela de texto do Bracket e experimente.
  • Agora experimente a escola W3 CSS Quiz ⇒
  • Agora experimente a escola W3 Exercício CSS ⇒
  • Revisar a pontuação CSS associada ⇒

  • 3.3 Introdução ao JavaScript e DOM

  • Os desenvolvedores de JavaScript são responsáveis por implementar a lógica de front-end que define o comportamento dos elementos visuais de um aplicativo da web.
  • Muitas vezes trabalham junto com outros HTML da web desenvolvedores especializados em marcação (digamos, HTML) e estilo (digamos, CSS).
  • Podem interagir com um modelo (Document Object Model ou DOM) da página da Web criada pelo navegador no tempo de carregamento.

  • Resumo:
  • Novamente, quando uma página da web é carregada, o navegador cria um modelo (DOM) da página que pode ser modificado com JavaScript. O DOM é uma interface de programação que funciona com JavaScript para manipular o conteúdo do documento HTML. Ele permite que programas e scripts acessem e atualizem dinamicamente o conteúdo, a estrutura e o estilo de um documento. Por exemplo, o HTML DOM permite que o JavaScript seja executado quando um evento de página da web ocorre, como quando um usuário clica em um elemento HTML.

  • Em Brackets, selecione 3.3 JS, clique em exercícios e abra EX4.html
  • Observe as declarações de variáveis JavaScript para x, y e z
  • Revise as seguintes funções JavaScript:
  • Conforme resumido acima, os eventos HTML DOM permitem que o JavaScript registre diferentes manipuladores de eventos em elementos em um documento HTML. Eventos são sinais disparados dentro da janela do navegador que notificam sobre alterações no navegador ou no ambiente do sistema operacional. Os programadores podem criar funções de manipulador de eventos que serão executadas quando um evento for acionado, permitindo que as páginas da Web respondam adequadamente às alterações.

  • Agora role para baixo até < body > e observe os atributos de evento
  • clique em


  • Selecione 3.3 JS EX5.html
  • clique em Arquivo e Salvar como EX5a.html (observe a cópia salva na pasta web para manter intacta a versão EX5.html do arquivo original)

  • clique em

  • O navegador alerta o valor numérico digitado na variável JavaScript.
  • Se o seu número não for alertado, verifique o texto EX5a.html com atenção e tente novamente.
  • Brackets 'Enable Experimental Live Preview' funciona de forma um pouco diferente com JavaScript. Por enquanto só é possível visualizar as alterações salvando o conteúdo alterado e reabrindo o arquivo.

  • Em Brackets, selecione 3.3 JS, clique em PRACTICE e abra STUDY3.html
  • Clique em lightening no canto superior direito da tela de texto do Bracket e experimente.
  • Agora experimente a escola W3 Quiz ⇒
  • Agora experimente a escola W3 Exercício de JavaScript ⇒
  • Revise a pontuação JavaScript associada ⇒
  • Revise a pontuação DOM associada ⇒

  • 3.4 Tipos de dados JavaScript

    Os tipos de dados basicamente especificam que tipo de dados podem ser armazenados e manipulados em um programa. Vamos dar uma olhada em alguns tipos de dados com mais detalhes.

      3.4.1 Tipo de dados String

  • strings são úteis para armazenar dados que podem ser representados em forma de texto.
  • uma string JavaScript simplesmente armazena uma série de caracteres como
  • uma string pode ser qualquer texto entre aspas e você pode usar " ou ' citações.
  • Em Brackets, selecione 3.4 Tipos de dados, clique em EXERCISES e abra EX 6.html.

    Neste exemplo, armazenamos o texto da string na variável a e exibimos o conteúdo da variável a usando o método alert().

    Dois outros alertas contêm informações adicionais relevantes. Leia-os cuidadosamente quando acionados abaixo.


  • clique em

  • Agora revise a escola W3 Exemplos de strings ⇒

  •   3.4.2 Tipo de dado numérico

  • tipos numéricos representam números inteiros e de ponto flutuante.
  • existem muitas operações para números, por ex. | multiplicação * | divisão / | adição + | subtração - | e assim por diante.
  • Em Brackets, selecione 3.4 Tipos de dados, clique em EXERCISES e abra EX7.html

    Neste exemplo, armazenamos um número inteiro na variável b e um número de ponto flutuante na variável ce exibimos o conteúdo de ambas as variáveis b e c usando o método alert().


  • clique em

  •   3.4.3 Tipo de dados de matriz

  • uma matriz JavaScript é um tipo de objeto usado para armazenar vários valores em uma única variável.
  • Cada valor (também chamado de elemento) em uma matriz tem um posição numérica, conhecida como seu índice.
  • O primeiro elemento de um array está no índice 0. O último elemento está no valor do índice igual ao valor da propriedade length do array menos 1.
  • Os valores podem conter dados de qualquer tipo de dados - números, strings, booleanos, funções, objetos e até mesmo outras matrizes.
  • Em Brackets, selecione 3.4 Tipos de dados, clique em EXERCISES e abra EX8.html

    Neste exemplo, armazenamos três marcas de carro na variável cars e exibimos o terceiro dos três valores de carro em cars usando o método alert().


  • clique em

  •   3.4.4 Exercício de tipos de dados

  • Em Brackets, selecione 3.4 Tipos de dados, clique em PRACTICE e abra STUDY4.html
  • role para baixo para ver a string contida na variável y
  • veja também a lista de nomes próprios contidos na variável fn
  • No seu próprio tempo revise a função startTime(). É um bom exemplo de uso de matriz e uma função útil para uso posterior.
  • Observe que ao usar Javascript as alterações NÃO são realizadas em tempo real (como para HTML e CSS). Nesse caso, você deve salvar as alterações em seu script para vê-las renderizadas na página da web.

  • Clique em lightening no canto superior direito da tela de texto do Bracket e experimente.
  • Revise a pontuação JavaScript associada ⇒
  • 3.5 Métodos de string JavaScript

    Os métodos de string ajudam você a trabalhar com strings. Agora que examinamos os fundamentos do tipo de dados string, vamos começar a pensar em quais operações úteis podemos fazer em strings com métodos integrados, como encontrar o comprimento de uma string de texto, o valor de uma substring dentro uma string, substituindo um caractere em uma string por outro e muito mais.

    Em Brackets, selecione 3.5 String Methods, clique em EXERCISES e abra EX9.html.

    Existem seis exemplos de como usar Métodos de String.


  • clique em

  • Em Brackets, selecione 3.5 String Methods, clique em PRACTICE e abra STUDY5.html
  • Altere a string especificada em cada um dos exemplos dados, por exemplo, substitua 'Parque Natural da Costa Vicentina em Sagres' pelo seu próprio valor. Será mais fácil reconhecer as alterações se você escolher valores de texto que tenham algum significado para você.
  • Lembre-se de salvar as alterações feitas.
  • Clique em lightening no canto superior direito da tela de texto do Bracket para ver as alterações renderizadas na página da web.
  • Revise a pontuação JavaScript associada ⇒
  • 3.6 Métodos de matriz JavaScript

    Arrays são basicamente objetos únicos que contêm vários valores armazenados em uma lista. Objetos array podem ser armazenados em variáveis e tratados da mesma forma que qualquer outro tipo de valor, a diferença é que podemos acessar cada valor dentro da lista individualmente, e podemos usar métodos array para fazer coisas úteis e eficientes com a lista . Vamos dar uma olhada em alguns métodos de matriz com mais detalhes.

    Em Brackets, selecione 3.6 Array Methods, clique em EXERCISES e abra EX10.html.

    Existem cinco exemplos de como usar métodos de matriz.


  • clique em

  • Em Brackets, selecione 3.5 Array Methods, clique em PRACTICE e abra STUDY 6.html
  • Altere os valores da matriz especificados em cada um dos exemplos fornecidos. Novamente, será mais fácil reconhecer as alterações se você escolher valores de texto que tenham algum significado para você.
  • Lembre-se de salvar as alterações feitas.
  • Clique em lightening no canto superior direito da tela de texto do Bracket para ver as alterações renderizadas na página da web.
  • Revise a pontuação JavaScript associada ⇒

  • 3.7 Loop e iteração

    Um loop é definido como um segmento de código que é executado várias vezes. Iteração refere-se ao processo no qual o segmento de código é executado uma vez. Os loops oferecem uma maneira rápida e fácil de fazer algo repetidamente. Vejamos como podemos usar then para iterar os elementos de uma matriz.

    Em Brackets, selecione 3.7 Loops and Iteration, clique em EXERCISES e abra EX11.html.

    Existem quatro instruções usadas para demonstrar o loop e a iteração. No entanto, em primeiro lugar, as variáveis associadas devem ser inicializadas. A função loopIterate() é chamada quando a página da web é carregada (onload).


  • clique em

  • Em Brackets, selecione 3.5 Loops and Iteration, clique em PRACTICE e abra STUDY 7.html
  • Clique em lightening no canto superior direito da tela de texto do Bracket para ver as alterações renderizadas na página da web.

  • Agora revise a escola W3 Tutorial de JavaScript ⇒
  • Revise a pontuação de Javascript associada ⇒
  • Revise a pontuação do navegador associada ⇒

  • Parte 2 - Software de servidor Web


    3.8 PHP é um acrônimo que se refere a si mesmo 'PHP: Hypertext Preprocessor'. Uma linguagem de script de propósito geral especialmente adequada para desenvolvimento web.

  • Em Brackets, selecione 3.8 PHP, clique em EXERCISES e abra EX12.php
  • Observe que a extensão do arquivo foi alterada de .html para .php, que é o identificador do componente de linguagem de script no servidor da web.
  • Os scripts PHP residem em tags PHP reservadas <?php e ?> e isso permite que o programador incorpore scripts PHP em páginas HTML.
  • Este exemplo mostra o código php usado para capturar (OBTER) dados da barra de endereço do navegador e agir no servidor da web dependendo do valor.
  • Clique em lightening no canto superior direito da tela de texto do Bracket para ver as alterações renderizadas na página da web.
  • Clique em EXERCISES e abra STUDY 8.php
  • Clique em lightening no canto superior direito do texto do Bracket, clique no link e observe o par nome-valor no URL do Google barra de pesquisa.
  • Um resumo de algumas das principais diferenças entre PHP e JavaScript

  • PHP é uma linguagem de script do lado do servidor, enquanto Javascript é uma linguagem de script do lado do cliente.
  • O PHP não é executado no navegador, enquanto o Javascript é executado no navegador.
  • PHP oferece suporte a bancos de dados, enquanto Javascript não oferece suporte a bancos de dados.
  • PHP aceita variáveis maiúsculas e minúsculas enquanto Javascript não.
  • As variáveis PHP começam com o sinal $, seguido do nome da variável.

  • Agora revise a escola W3 Introdução ao PHP ⇒
  • Revise a pontuação associada para Hipertexto ⇒
  • Revise a pontuação associada para o pré-processador ⇒
  • 3.9 HTTP GET

    Os dois métodos de solicitação mais comuns são GET (conforme apresentado acima) e POST.

    Como visto acima, a query string (pares nome-valor) é enviada na URL de uma requisição GET. GET impõe restrições ao tamanho dos dados (máximo de 2.048 caracteres). O envio de dados confidenciais, conforme demonstrado neste exemplo, sempre deve ser evitado (em vez disso, use POST).

  • Em Brackets, selecione 3.9 HTTP GET, clique em EXERCISES e abra EX13.php

  • clique em

  • Exemplo de pares nome-valor de string de consulta usando o Google.

  • Clique em PRACTICE e abra STUDY9.php
  • Clique em lightening no canto superior direito da tela de texto do Bracket e siga as instruções.

  • Agora experimente a escola W3 Quiz PHP ⇒
  • Revise a pontuação associada para URL ⇒
  • Revise a pontuação associada para o domínio Nome ⇒
  • 3.10 HTTP POST

    Os dados enviados ao servidor com POST são armazenados no corpo da solicitação HTTP. Sem restrições no comprimento dos dados. HTTP Body Data são os bytes de dados transmitidos em uma mensagem de transação HTTP imediatamente após os cabeçalhos. Os cabeçalhos HTTP permitem que o cliente e o servidor transmitam informações adicionais com uma solicitação ou resposta HTTP.

  • Em Brackets, selecione 3.10 HTTP POST, clique em EXERCISES e abra EX14.php
  • Estude o elemento do formulário; o conteúdo entre as tags < form >
  • e observe action="response.php" e method="POST".

  • clique em
  • Os dados do método POST são enviados no corpo de uma solicitação imediatamente após os cabeçalhos da solicitação. Considerando que, como já demonstrado, os dados do método GET são enviados na URL como pares nome-valor.

  • Em Brackets, selecione 3.10 HTTP POST, clique em PRACTICE e abra STUDY10.php
  • Clique em lightening no canto superior direito da tela de texto do Bracket e siga as instruções.

  • Agora experimente a escola W3 Exercícios PHP ⇒
  • Revise a pontuação associada para PHP ⇒
  • Revise a pontuação associada para solicitações, Respostas e Recursos ⇒
  • Revise a pontuação associada para Protocolo e HTTP ⇒
  • Revisar a pontuação associada para Web Servidor ⇒

  • Parte 3 - Software de banco de dados

    3.11 phpMyAmin

    phpMyAdmin é uma ferramenta de administração gratuita e de código aberto (para MySQL, um sistema de gerenciamento de banco de dados relacional de código aberto). Como um aplicativo da web portátil, tornou-se uma das ferramentas de administração mais populares, especialmente para serviços de hospedagem na web.

    O MySQL é a primeira escolha dos desenvolvedores de PHP. Como um sistema de gerenciamento de banco de dados relacional (RDBMS) de código aberto que usa a linguagem SQL, o banco de dados MySQL ajuda a automatizar a recuperação de dados e oferece suporte ao desenvolvimento de aplicativos da Web PHP MySQL.

    Em um banco de dados simples, você pode ter apenas uma tabela. Para a maioria dos bancos de dados, você precisará de mais de um. Por exemplo, você pode ter uma tabela que armazena informações sobre produtos, outra tabela que armazena informações sobre pedidos e outra tabela com informações sobre clientes.

    O aplicativo amigável, phpMyAdmin, permite o gerenciamento de bancos de dados e manipulação de dados. Por exemplo:

    Vamos agora acessar o phpMyAdmin e experimentar algumas dessas funções PHP MySQL - phpMyAdmin 1 para criar um novo banco de dados e phpMyAdmin 2 para criar novas entradas de tabela.

    1. Para criar um novo banco de dados para armazenar os cinco nomes de meninos mais populares em, digamos, uma escola.


  • clique em

  • digite root no nome de usuário e pressione Go.

  • clique em

  • digite root no nome de usuário e pressione Go.
  • 2. Para criar duas novas entradas de tabela de e-mail/senha usando as áreas de entrada 'Valor'.

  • role para baixo até os segundos campos de entrada (além de todos os códigos de terminologia).
  • navegue e verifique o conteúdo da tabela no phpMyAdmin
  • 3.12 MySQL

    O MySQL é um serviço de banco de dados totalmente gerenciado para implantar aplicativos. Um banco de dados é uma coleção organizada de dados estruturados, geralmente armazenados eletronicamente em um sistema de computador. Dados são fatos brutos que precisam ser processados para torná-los significativos. A informação é um conjunto de dados que são processados de forma significativa de acordo com o requisito dado.

    Request Response

    Neste exercício, veremos como uma consulta pré-definida é realizada no phpMyAdmin e forma uma consulta mySQL através do PHP.


  • clique em

  • abra Bancos de dados
  • selecione os usuários do banco de dados
  • clique em SQL e
  • copie a string

    SELECT * FROM `credentials` WHERE `email` = 'myname@mysite.com'

  • cole a string na janela de consulta
  • pressione Ir (canto inferior direito)
  • observe os dados retornados para o e-mail fornecido.
  • Vamos agora considerar o Bloco PHP/MySQL no script entre as linhas 32 e 130.

    Para completar, vamos dar uma olhada nas solicitações válidas e inválidas.

  • Em Brackets, selecione 3.12 CSS, clique em EXERCISES e abra EX15.html
  • Clique em lightening no canto superior direito da tela de texto do colchete e envie a consulta:
  • Finalmente, vamos explorar a interação entre HTML, HTTP PHP e MySql. Usaremos um formulário para registrar nomes de meninos em um banco de dados 'nome' com uma única tabela 'menino'. Novas entradas serão adicionadas enquanto entradas existentes serão incrementadas.

  • Clique em PRATICE e abra STUDY11.php
  • Clique em lightening no canto superior direito da tela de texto do colchete e siga as instruções.

  • Revise a pontuação associada para MySql ⇒
  • Revisar a pontuação do software básico Pilha ⇒
  • Revisar a pontuação do sistema operacional ⇒
  • Revise a pontuação para Estático e Páginas dinâmicas ⇒


  • 4. Tutoriais e EXERCISES online.

    4.1 Linguagem de marcação de hipertexto

  • HTML é a linguagem de marcação padrão para páginas da Web.
  • Com HTML você pode criar seu próprio site.
  • HTML é fácil de aprender e pode ser muito divertido.
  • Neste tutorial de HTML, você encontrará centenas de exemplos. Você mesmo pode editar e testar cada exemplo com a ferramenta online "Experimente você mesmo". HTML ⇒

    4.2 JavaScript

  • A linguagem de programação mais popular do mundo
  • A linguagem de programação da Web.
  • É fácil de aprender.
  • Este tutorial ensinará JavaScript do nível básico ao avançado JavaScript ⇒

    4.3 Pré-processador de hipertexto PHP

  • PHP é uma linguagem de script de servidor e uma ferramenta poderosa para criar páginas da Web dinâmicas e interativas.
  • O PHP é uma alternativa amplamente utilizada, gratuita e eficiente para concorrentes como o ASP da Microsoft.
  • Você pode editar o código PHP e clicar em um botão para visualizar o resultado com a ferramenta online "PHP Tryit". PHP ⇒

    4.4 Linguagem de Consulta Estruturada

  • SQL é uma linguagem padrão para armazenar, manipular e recuperar dados em bancos de dados.
  • A O tutorial de SQL ensinará como usar o SQL no MySQL e alguns outros sistemas de banco de dados, como SQL Server, MS Access e Oracle.
  • No entanto, por enquanto, é melhor consentir no MySQL antes explorando as outras opções.
  • Você pode editar as instruções SQL e clicar em um botão para visualizar o resultado com o editor SQL online. MySQL ⇒



    5. Seleção de Projeto

    O curso foi desenvolvido para dar a você uma ideia melhor sobre a ciência da computação aplicada. Não se espera que você tenha compreendido completamente todos os conceitos e técnicas abordados. Em vez disso, você deve ter aprendido o básico que lhe permitirá navegar pelos tutoriais e exemplos associados que o levarão ao domínio da programação de computadores.

    Construir um projeto simples para demonstrar o uso de HTML, CSS, Javascript, PHP e MySQL é muito importante. Ao fazer isso, você absorverá o material abordado no curso e possibilitará um caminho na web para a excelência.

    5.1 Algumas sugestões de projetos

  • Código de amostra - desenvolva seu próprio site com código experimental.
  • Quiz - navegue no site para obter dicas
  • Site de anotações - crie, armazene, altere e exclua suas anotações pessoais.
  • To Do List - adicione e exclua atividades. Assinale as atividades que estão concluídas.
  • Portfólio pessoal - navegue no site para obter dicas.
  • Use este exemplo para criar seu próprio destino Função de registro PHP
  • 6. Downloads

  • Editor de texto Brackets ⇒
  • C++ cpp.zip ⇒
  • DLLs - dll.zip ⇒
  • Servidor Web WAMP ⇒ selecione 32 bits ou 64 bits conforme apropriado e clique em   you can download it directly  na parte superior da página.
  • Pasta raiz do site de ensino web ⇒
  • Volte para Configurar instruções ⇒




    Copyright © 2018 - Lindisfarne House, Newcastle and Sagres. All rights reserved.