PI S2 DSW I DouglasARS: mudanças entre as edições

De IFSC
Ir para navegação Ir para pesquisar
imported>Douglas
imported>Douglas
 
(31 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 136: Linha 136:
http://localhost/teste.php
http://localhost/teste.php
</pre>
</pre>
 
----
2. Criar uma aplicação HTML5 com CSS com o NetBeans.
2. Criar uma aplicação HTML5 com CSS com o NetBeans.
:a. Abra o NetBeans IDE.
:a. Abra o NetBeans IDE.
:b. Comece um novo projeto: Arquivo > Novo Projeto.
:b. Comece um novo projeto
::Arquivo > Novo Projeto.
:c. Escolher Projeto
:c. Escolher Projeto
:: Categorias: HTML5
:: Categorias: HTML5
:: Projetos: Aplicação HTML5
:: Projetos: Aplicação HTML5
:d. Clicar em Próximo >
:d. Clicar em Próximo >
:e. Nome do Projeto: TesteHtmlApp
:: Nome do Projeto: TesteHtmlApp
:f. Clieque em Finalizar
:e. Clique em Finalizar
:g. Substituo o conteúdo do arquivo index.html por esse:
:f. Substitua o conteúdo do arquivo index.html por esse:


<pre>
<pre>
Linha 154: Linha 155:
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Teste CSS NetBeans IDE 8.0</title>
<title>Teste CSS NetBeans IDE 8.0</title>
<link rel="stylesheet" href="css.css">
<link rel="stylesheet" href="newcss.css">
</head>
</head>
   
   
Linha 166: Linha 167:
   <li><a href="teste3.html">Semana 3</a>
   <li><a href="teste3.html">Semana 3</a>
</ul>
</ul>
   
   
<!-- Conteudo -->
<!-- Conteudo -->
<h1>Teste CSS NetBeans</h1>
 
<em>Teste CSS NetBeans</em>
   
   
<p>Bem vindos ao teste de CSS NetBeans
<p>Bem vindos ao teste de CSS NetBeans
Linha 184: Linha 185:
</pre>
</pre>


: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:


<!--
<pre>
[[AO1_DSW_I_DouglasARS]]
body {
-->
    padding-left: 11em;
 
    font-family: Georgia, "Times New Roman",
=Instalando separadamente=
          Times, serif;
 
    color: blue;
Nesta seção, vamos falar com mais cuidado sobre as instalações e configurações. Também vamos apresentar informações importantes sobre esses aplicativos.
    background-color: #c1c1c1 }
 
  ul.navbar {
==Instalar o MySQL==
    list-style-type: none;
 
    padding: 0;
O MySQL é um sistema de gerenciamento de bancos de dados. Basicamente, ele irá organizar e proporcionar acesso a bases de dados onde nosso site pode armazenar informação.
    margin: 0;
 
    position: absolute;
Novamente, podemos utilizar o apt para obter e instalar nosso software. Desta vez, vamos também instalar alguns pacotes "auxiliares" que irão nos ajudar a obter nossos componentes para comunicarem uns com os outros:
    top: 2em;
 
    left: 1em;
$ sudo apt-get install mysql-server php5-mysql
    width: 9em }
 
  em {
<blockquote style="background: #FFEEFF; border: 1px solid red; margin-left: 0px; margin-right: 0px; padding: 1em;">
    font-family: Helvetica, Geneva, Arial,
Nota 1: Deverá ser solicitada a senha do usuário com os privilégios necessários para a instalação.
          SunSans-Regular, sans-serif;
</blockquote>
    font-size: 3em;}
 
  ul.navbar li {
<blockquote style="background: #FFEEFF; border: 1px solid red; margin-left: 0px; margin-right: 0px; padding: 1em;">
    background: white;
Nota 2: Neste caso, você não tem que executar sudo '''apt-get update''' antes do comando. Isso é porque o executamos recentemente através dos comandos acima para instalar o Apache. O índice de pacotes em nosso computador já deve estar atualizado.
    margin: 0.5em 0;
</blockquote>
    padding: 0.3em;
 
    border-top: 0.5em solid gray;
Durante a instalação, seu servidor vai pedir para você selecionar e confirmar uma senha para o usuário "root" do MySQL. Esta é uma conta administrativa no MySQL que possui privilégios avançados. Pense nela como sendo similar à conta de root para o próprio servidor, no entanto, esta que você está configurando agora é uma conta específica do MySQL.
    border-left: 0.5em solid gray;
 
     border-right: 0.5em solid black;
Quando a instalação estiver concluída, precisaremos executar alguns comandos adicionais para ter nosso ambiente MySQL configurado de forma segura.
     border-bottom: 0.5em solid black }
 
  ul.navbar a {
;Passo 1: Precisamos dizer ao MySQL para criar sua estrutura de diretório de banco de dados, onde ele irá armazenar suas informações. Você pode fazer isto digitando:
    text-decoration: none }
 
  a:link {
$ sudo mysql_install_db
    color: blue }
 
  a:visited {
Depois, queremos executar um script simples de segurança que vai remover alguns padrões perigosos e bloquear um pouco o acesso ao nosso sistema de banco de dados. Inicie o script interativo executando:
    color: red }
 
  address {
$ sudo mysql_secure_installation
    margin-top: 1em;
 
    padding-top: 1em;
Você será solicitado a digitar a senha que você definiu para a conta root do MySQL. Em seguida, ele irá perguntar se você deseja alterar esta senha. Se você estiver satisfeito com sua senha atual, digite "n" para "não" no terminal.
    border-top: thin dotted }
 
</pre>
Para as demais perguntas, você deve simplesmente pressionar a telca <Enter> em cada prompt para aceitar os valores padrão. Isto irá remover alguns usuários e bases de exemplo, desabilitar logins remotos de root, e carregar estas novas regras para que o MySQL aplique imediatamente as alterações que fizemos.
: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:
 
<pre>
<!--
file:///home/douglas/NetBeansProjects/TesteHtmlCss/public_html/index.html
 
</pre>
Neste ponto, seu sistema de banco de dados está agora configurado e podemos avançar.
::Você deve substituir "douglas" pelo seu usuário.
Passo três - Instalar o PHP
 
O PHP é o componente da nossa configuração que irá processar código para exibir o conteúdo dinâmico. Ele pode executar script, conectar às nossas bases de dados MySQL para obter informações, e entregar o conteúdo processado para o nosso servidor web exibir.
 
Podemos aproveitar mais uma vez o sistema apt para instalar nossos componentes. Vamos incluir alguns pacotes auxiliares também.
 
$ sudo apt-get install php5 libapache2-mod-php5 php5-mcrypt
 
Isto irá instalar o PHP sem problemas. Vamos testar isso em instantes.
 
Na maioria do casos, vamos querer modificar a forma que o Apache serve arquivos quando uma pasta é requisitada. Atualmente, se um usuário requisita uma pasta do servidor, o Apache irá olhar primeiramente para um arquivo chamado index.html. Queremos informar ao nosso servidor web para dar preferência aos arquivos PHP, então faremos o Apache olhar para um arquivo index.php primeiro.
 
Para fazer isto, digite este comando para abrir o arquivo dir.inf em um editor de texto com privilégios de root:
 
sudo nano /etc/apache2/mods-enabled/dir.conf
 
Ele terá esta aparência:
 
<IfModule mod_dir.c>
     DirectoryIndex index.html index.cgi index.pl index.php index.xhtml index.htm
</IfModule>
 
Queremos mover o arquivo de índice PHP em destaque acima para a primeira posição depois da especificação DirectoryIndex , como segue:
 
<IfModule mod_dir.c>
     DirectoryIndex index.php index.html index.cgi index.pl index.xhtml index.htm
</IfModule>
 
Quando você tiver concluído, salve e feche o arquivo pressionando "CTRL-X". Você tem que confirmar a gravação digitando "Y" e em seguida pressione "ENTER" para confirmar a localização de salvamento do arquivo.
 
Após isso, precisamos reiniciar o servidor web Apache de forma que nossas alterações sejam reconhecidas. Você pode fazer isto digitando o seguinte:
 
sudo service apache2 restart
 
Instalar módulos PHP
 
Para melhorar a funcionalidade do PHP, podemos opcionalmente instalar alguns módulos adicionais.
 
Para ver as opções disponíveis para módulos e bibliotecas PHP, você pode digitar isto em seu sistema:
 
apt-cache search php5-
 
O resultado são todos os componentes opcionais que você pode instalar. Ele lhe dará uma breve descrição de cada um:
 
php5-cgi - server-side, HTML-embedded scripting language (CGI binary)
php5-cli - command-line interpreter for the php5 scripting language
php5-common - Common files for packages built from the php5 source
php5-curl - CURL module for php5
php5-dbg - Debug symbols for PHP5
php5-dev - Files for PHP5 module development
php5-gd - GD module for php5
. . .
 
Para obter mais informações sobre o que cada módulo faz, você pode buscar na Internet, ou olhar a descrição longa do pacote digitando:
 
apt-cache show package_name
 
Haverá uma grande quantidade de saída, com um campo chamado Description-en que terá uma explicação mais longa da funcionalidade que o módulo oferece.
 
Por exemplo, para encontrar o que o módulo php5-cli faz, podemos digitar isto:
 
apt-cache show php5-cli
 
Juntamente com várias outras informações, você vai encontrar algo parecido com isto:
 
. . .
SHA256: 91cfdbda65df65c9a4a5bd3478d6e7d3e92c53efcddf3436bbe9bbe27eca409d
Description-en: command-line interpreter for the php5 scripting language
This package provides the /usr/bin/php5 command interpreter, useful for
testing PHP scripts from a shell or performing general shell scripting tasks.
.
The following extensions are built in: bcmath bz2 calendar Core ctype date
dba dom ereg exif fileinfo filter ftp gettext hash iconv libxml mbstring
mhash openssl pcntl pcre Phar posix Reflection session shmop SimpleXML soap
sockets SPL standard sysvmsg sysvsem sysvshm tokenizer wddx xml xmlreader
xmlwriter zip zlib.
.
PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used
open source general-purpose scripting language that is especially suited
for web development and can be embedded into HTML.
Description-md5: f8450d3b28653dcf1a4615f3b1d4e347
Homepage: http://www.php.net/
. . .
 
Se, após pesquisar, você decidir que gostaria de instalar um pacote, você pode fazê-lo utilizando o comando apt-get install assim como fizemos para nossos outros softwares.
 
Se decidirmos que o php5-cli é algo que precisamos, podemos digitar:
 
sudo apt-get install php5-cli
 
Se você quiser instalar mais de um módulo, você pode fazer isso listando cada um, separado por um espaço, seguindo o comando apt-get, como abaixo:
 
sudo apt-get install package1 package2 ...
 
Nesse ponto, sua pilha LAMP está instalada e configurada. Devemos ainda testar o nosso PHP.
Passo quatro — Testar o processamento PHP no seu servidor web
 
A fim de testar se nosso sistema está corretamente configurado para o PHP, podemos criar um script bem básico.


Vamos chamar este script de info.php. Para que o Apache possa encontrar o arquivo e servi-lo corretamente, ele deve ser salvo em um diretório muito específico, o qual é chamado de "web root".
: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:


No Ubuntu 14.04, este diretório está localizado em /var/www/html. Podemos criar o arquivo neste local digitando:
[[imagem:teste_html_css.png|center]]


sudo nano /var/www/html/info.php
=Semana 3=


Isto vai abrir um arquivo em branco. Queremos colocar o texto a seguir, que é um código PHP válido, dentro do arquivo:
Nesta segunda semana, instalamos o servidor Apache, PHP e o phpMyAdmin. É importante que os exercícios sejam feitos para se habituar com os ambientes. Já na  '''Semana 3''' você terá uma revisão da instalação do MySQL e testar alguns comandos SQL através do terminal do Linux. E será liberado a AO1.


<?php
Bons estudos!
phpinfo();
?>


Quando você tiver concluído, salve e feche o arquivo.
Prof. Douglas A.


Agora podemos testar se nosso servidor web pode exibir corretamente o conteúdo gerado por um script PHP. Para testar isso, temos apenas que visitar esta página em nosso navegador. Você vai precisar novamente do endereço IP público do seu servidor.
=Instalar no Ubuntu 16.04=


O endereço que você quer visitar será:


http://your_server_IP_address/info.php
:http://murilomedeiros.com.br/site/como-instalar-apache-mysql-e-php7-no-ubuntu-16-04/


A página que você deve ver deve se parecer com isto:


-->


=Referências=
=Referências=
Linha 361: Linha 270:
{| border="1" cellpadding="5" cellspacing="0"  
{| border="1" cellpadding="5" cellspacing="0"  
! style="background: #32CD32;" | [[PI_S1_DSW_I_DouglasARS | << ]]
! style="background: #32CD32;" | [[PI_S1_DSW_I_DouglasARS | << ]]
! style="background: #1C1C1C; color: white;" | [[PI_S1_DSW_I_DouglasARS#Apresenta.C3.A7.C3.A3o | <> ]]
! style="background: #1C1C1C; color: white;" | [[Douglas_DSW_I#Atividades | <> ]]
! style="background: #32CD32;" | >>
! style="background: #32CD32;" | [[PI_S3_DSW_I_DouglasARS | >> ]]
|}
|}

Edição atual tal como às 08h59min de 15 de agosto de 2017

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:


Default apache.png


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:


Info php.png


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:

Tela phpmyadmin.png
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:
Teste html css.png

Semana 3

Nesta segunda semana, instalamos o servidor Apache, PHP e o phpMyAdmin. É importante que os exercícios sejam feitos para se habituar com os ambientes. Já na Semana 3 você terá uma revisão da instalação do MySQL e testar alguns comandos SQL através do terminal do Linux. E será liberado a AO1.

Bons estudos!

Prof. Douglas A.

Instalar no Ubuntu 16.04

http://murilomedeiros.com.br/site/como-instalar-apache-mysql-e-php7-no-ubuntu-16-04/


Referências

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



<< <> >>