PI S2 DSW I DouglasARS: mudanças entre as edições
imported>Douglas |
imported>Douglas |
||
| (41 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) | |||
| Linha 116: | Linha 116: | ||
;Pronto!: Agora é definir a linguagem de trabalho, usuário root (do phpMyadmin) e senha. | ;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. | |||
<pre> | |||
<?php | |||
echo $_SERVER['HTTP_USER_AGENT']; | |||
?> | |||
</pre> | |||
:c. Salve o arquivo em /var/www/html. | |||
:d. Abra o arquivo no seu navegador. | |||
</ | <pre> | ||
http://localhost/teste.php | |||
</pre> | |||
---- | |||
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: | |||
<pre> | |||
<!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> | |||
</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> | |||
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 } | |||
</pre> | |||
: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> | |||
::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: | |||
[[imagem:teste_html_css.png|center]] | |||
=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:// | :http://murilomedeiros.com.br/site/como-instalar-apache-mysql-e-php7-no-ubuntu-16-04/ | ||
=Referências= | =Referências= | ||
| Linha 285: | 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;" | [[ | ! 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.
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.
- 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
- Você precisa definir uma nova senha para o "root" do MySQL e teclar <ok>.
- 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
- Durante a instalação é preciso configurar qual o servidor web, no nosso caso vamos escolher o apache2 e teclar <Ok>.
- Seguindo a instalação, é perguntado se já existe uma base de dados, indicando qual é, basta escolher <Sim> e teclar <Enter>.
- É 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.
- 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:
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
Referências
| << | <> | >> |
|---|



