PI S2 DSW I DouglasARS

Apresentação

Olá Estudante, que bom que você chegou aqui.

Na nossa segunda semana de estudos, concluiremos a parte inicial da instalação das principais ferramentas para o ambiente de desenvolvimento. Lembrando que o ambiente de desenvolvimento deve ser composto pelo o sistema operacional Linux; o servidor web Apache; a base de dados MySQL; e também o PHP.

Agora que temos nosso servidor web (apache) pronto e funcionando, é hora de instalar o MySQL e o PHP e as ferramentas administrativas. Vamos voltar a falar do netbeans. E vamos também apresentar a primeira atividade obrigatória!

Fiquem atentos as postagens Fórum e participem dos nossos encontros virtuais.

Espero todos vocês na quinta-feira!

Abraço a todos e Bons Estudos!

Prof. Douglas A.

Objetivos

• Instalar o MySQL.
• Instalar o PHP.
• Instalar o phpmyAdmin.

Instalação rápida

Na última semana, mostramos no final do texto a instalação do servidor Apache. O vídeo a seguir, mostra como é a instalação de todo o "pacote" começando pelo Apache, seguindo PHP, MySQL e phpMyAdmim. Assista o vídeo e tente instalar os pacotes. Depois listarei os comandos na ordem que eles forem aparecendo e comentando os mesmos.

Vídeo 1: Instalando o Apache, PHP, MySQL e phpMyAdmin (Ubuntu versões 12.04 ou 14.04).

Não esqueça que você já iniciou a instalação. Então você pode pular os comando que já tiverem sido feitos, embora não tenha nenhum problema fazer novamente. Outra dica importante é este vídeo traz a instalação do Ubuntu 12.04, mas que serve perfeitamente para o Ubuntu 14.04 bem como outras distribuições. Outra dica importante, é que os comando do Linux podem ser um pouco diferentes, então, também estou disponibilizando este outro vídeo com a instalação no 14.04. Assistam os dois vídeos e depois é só seguir o tutorial da instalação abaixo. Ah! Já ia esquecendo, na versando 12.04 o diretório padrão do apache fica em /var/www e na versão 14.04 fica no /var/www/html. Confira qual sua versão onde está o diretório padrão.

Vídeo 2: Instalando o Apache, PHP, MySQL e phpMyAdmin (Ubuntu 14.04).

Passo 1

Para instalar o Apache você tem que abrir o terminal <ctrl+alt+t> e digitar:

$ sudo apt-get install apache2

Coloque a senha do administrador se for necessário. E confirma com "S" para continuar a instalação.

Para testar, vá no seu navegador e digite:

Http://localhost

Você verá a página web padrão do Apache no Ubuntu, que está lá para propósitos de informação e testes. Deve ser algo parecido com isto:

Se você conseguir visualizar uma página com esta, então seu servidor web está corretamente instalado agora.

Passo 2

Para instalar o PHP junto do Apache digite:

$ sudo apt-get install php5 libapache2-mod-php5 

Agora é necessário alterar o proprietário e o grupo do diretório /var/www, alterando o dono (nomeUsuario) do arquivo ou grupo (grupoUsuario). Digite:

$ sudo chown -R nomeUsuario:grupoUsuario /var/www

Exemplo:

$ sudo chown -R douglas:douglas /var/www

Para testar a instalação, vamos criar um arquivo e chamar de info.php no diretório /var/www/html. Para criar ou alterar o arquivo, digite:

$ gedit /var/www/html/info.php &

Digite o seguinte código:

<?php

      phpinfo();

?>

Salve o arquivo, vá no seu navegador e digite:

http://localhost/info.php

Deverá aparecer uma tela como esta:

Passo 3

Instalar o banco de dados MySQL server:

$ sudo apt-get install mysql-server

1. Você precisa definir uma nova senha para o "root" do MySQL e teclar <ok>.
2. Você vai ter que redigitar a senha e teclar <ok>.

Passo 4

Instalar o phpMyAdmin e as ligações com MySQL e PHP. Para isso digite:

$ sudo apt-get install libapache2-mod-auth-mysql php5-mysql phpmyadmin

1. Durante a instalação é preciso configurar qual o servidor web, no nosso caso vamos escolher o apache2 e teclar <Ok>.
2. Seguindo a instalação, é perguntado se já existe uma base de dados, indicando qual é, basta escolher <Sim> e teclar <Enter>.
3. É preciso definir a senha do usuário administrativo da base de dados e teclar <Ok>. É comum utilizar a mesma senha do usuário do MySQL. Você vai repetir a mesma senha 3 vezes.
4. Ainda não está pronto para utilizar. É necessário restartar o apache e também criar uma ligação (link) para acessar o phpmyadmin. Para isso faça:

$ sudo /etc/init.d/apache2 restart
$ sudo ln -s /usr/share/phpmyadmin /var/www/html/phpmyadmin

Pronto. Para testar vá no seu navegador e digite:

http://localhost/phpmyadmin

Se tudo der certo, vai aparecer essa tela:

Pronto!

Agora é definir a linguagem de trabalho, usuário root (do phpMyadmin) e senha.

Exercício de fixação

1. Crie um arquivo de teste php seguindo:

a. Chame o editor de texto simples. Pode ser qualquer editor de texto como gedit/nano/vi a partir do terminal:

$gedit /var/www/html/teste.php &

b. Digite o código abaixo.

<?php

      echo $_SERVER['HTTP_USER_AGENT'];

?>

c. Salve o arquivo em /var/www/html.

d. Abra o arquivo no seu navegador.

http://localhost/teste.php

---

2. Criar uma aplicação HTML5 com CSS com o NetBeans.

a. Abra o NetBeans IDE.

b. Comece um novo projeto

Arquivo > Novo Projeto.

c. Escolher Projeto

Categorias: HTML5

Projetos: Aplicação HTML5

d. Clicar em Próximo >

Nome do Projeto: TesteHtmlApp

e. Clique em Finalizar

f. Substitua o conteúdo do arquivo index.html por esse:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Teste CSS NetBeans IDE 8.0</title>
<link rel="stylesheet" href="newcss.css">
</head>
 
<body>

<!-- Menu de navegacao do site -->
<ul class="navbar">
  <li><a href="index.html">Semanas</a>
  <li><a href="teste1.html">Semana 1</a>
  <li><a href="teste2.html">Semana 2</a>
  <li><a href="teste3.html">Semana 3</a>
</ul>
 
<!-- Conteudo -->

<em>Teste CSS NetBeans</em>
 
<p>Bem vindos ao teste de CSS NetBeans
 
<p>Esta página contém apenas um teste chamando um arquivo CSS externo, caso seja exibido as cores e personalizações
significa que está funcionando!
 
<!-- Date e assine sua página -->
<address>Construida em 14 de outubro de 2015 - E-TEC - Tubarão<br>
</address>
 
</body>
</html>

g. Agora vamos criar um arquivo CSS para aplicação:

Clique em: Arquivo > Novo Arquivo

Projeto: TesteHtmlApp

Categorias: HTML5

Tipos de arquivos: Folha de Estilo em Cascata

h. Tecle Próximo >

Nome do Arquivo: newcss

i. Tecle Finalizar.

j. Vá para aba Projetos e abra TesteHtmlApp > Raiz do Site > newcss.css

k. Copie o código abaixo para o arquivo newcss.css:

body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: blue;
    background-color: #c1c1c1 }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  em {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif;
    font-size: 3em;}
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-top: 0.5em solid gray;
    border-left: 0.5em solid gray;
    border-right: 0.5em solid black; 
    border-bottom: 0.5em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: red }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }

l. Salve todos os arquivo em: Arquivo > Salvar Tudo

m. Tente executar seu projeto no ambiente do NetBeans, basta você clicar <F6> ou Executar > Executar Projeto

n. Você pode tentar testar seu projeto digitando na barra de endereço do seu navegador:

file:///home/douglas/NetBeansProjects/TesteHtmlCss/public_html/index.html

Você deve substituir "douglas" pelo seu usuário.

o. Ou ainda, você localizar o arquivo no caminho acima mencionado e executar o index.html.

p. Uma tela como essa deverá aparecer no seu navegado:

Referências

[1] https://www.digitalocean.com/community/tutorials/como-instalar-a-pilha-linux-apache-mysql-php-lamp-no-ubuntu-14-04-pt

---

<<	<>	>>