Portal   |   Hospedagem   |   Pesquisar  
Registrar  Entrar
Índice do fórum Linux Programação PHP


Siga-nos:
Siga lnxtotal on Twitter

[Tutorial] Do zero à um sistema de notícias - Aprendendo PHP

   

Moderadores: Fundador, Moderadores, Equipe de Programação

[Tutorial] Do zero à um sistema de notícias - Aprendendo PHP

Mensagempor Zrael » 07 Set 2010, 13:41

Olá a todos!

Sou user novo no fórum, e há menos de um ano no mundo Linux, mas já faz algum tempo que mexo com PHP e então, com muita cara de pau, venho até aqui iniciar um "mini-curso" de programação em PHP. Meu objetivo é básico: dar as primeiríssimas bases e conceitos da linguagem para os que querem programar para Web numa linguagem fácil e livre. Desde o zero, instalando os servidores apache e o php, até criar um simples, porém funcional, sistema de notícias (basicamente, um mini-blog).

Então, vamos falar um pouco do nosso Sistema de Notícias:

O Sistema de Notícias funciona da seguinte forma: entro na Área Administrativa, usando meu login e senha, e crio um novo Post. Ao enviá-lo, o sistema guarda esse post e o exibe na página do meu site, todos os posts, ou apenas os cinco primeiros, ou dez primeiros, ou um único de cada vez. Tenho a opção de comentar cada post, e de lê-los numa página separada, única para cada um deles. Na Área Administrativa posso editar os posts, excluir comentários, alterar minhas configurações e adicionar novos editores.

Para fazer tudo isso, precisamos:

--- Parte que os visitantes podem ver:
[ ] Página principal, com as notícias já publicadas
[ ] Página única para cada notícia
[ ] Página de comentários
[ ] Página de arquivo, listando todas as notícias já publicadas

--- Parte Administrativa
[ ] Página de Login
[ ] Página de Logoff
[ ] Página de cadastro de notícias
[ ] Página de edição de notícias
[ ] Página de exclusão de notícias
[ ] Página de cadastro de editores
[ ] Página de configurações gerais
[ ] Página de exclusão de comentários

========

Como vai funcionar o Tutorial:

Aprenderemos na prática, já pondo a mão na massa do código. Sou péssimo em aprender uma linguagem lendo apostila, vendo variáveis, depois funções, depois isso, depois aquilo. É um saco. Então decidi mostrar como funciona PHP na prática: mexendo com código, dados, construindo algo. Sintam-se à vontade para perguntar, tentaremos resolver nossas dúvidas e erros juntos!
O tutorial vai se fazer em duas partes: Na primeira, construiremos o sistema todo usando arquivos de texto para salvar tudo, sem tocar em banco de dados. Na segunda parte, começaremos o sistema todo novamente, usando de banco de dados MySQL. Dessa forma, fica mais fácil de entender cada conceito, e começar com algo que considero mais simples, uso de arquivos de texto, que mexer já num banco de dados e tudo o mais.

========

O que preciso saber para começar o curso?

Saber instalar programas no seu Linux, ler e escrever, principalmente :D Saber algo de HTML & CSS é indicado, mas não obrigatório, já que vou começar falando disso também. Logicamente, sem saber isso é óbvio que seu Sistema pode ficar um pouco feio, já que não vou focar nessa parte, e sim na programação. Seria uma boa você dar uma espiada na seção de HTML, tenho certeza que encontrará boas bases por lá, para fazer seu Sistema ficar mais "apresentável". De resto, não vou falar de programas específicos. Você pode escrever seus códigos no gedit, que é o que estarei usando, ou no editor de texto à sua escolha. Tudo que você vai realmente precisar instalar é o apache, mysql e o php. De resto, qualquer coisa tá valendo ;D

========

Palavras finais:

Como já disse, não sou expert de nenhum modo em PHP, e caso percebam que algo está errado, que estou falando besteira, que preciso mudar alguma coisa, não pensem duas vezes antes de dizer. Tentarei resolver as dúvidas que surgirem e lidar com os erros que aparecerem, e agradeço se puderem me ajudar com isso também. Juntos, tenho certeza que poderemos aprender PHP ;D

========

ÍNDICE

.Introdução

I - O que é HTML?
II - Um pouco mais de HTML
Editado pela última vez por Zrael em 08 Set 2010, 11:25, em um total de 3 vezes.
Zrael
Frequentador
Frequentador
 
Mensagens: 11
Registrado em: 04 Set 2010, 10:06
Localização: Salto - SP
Distribuição Linux utilizada: Ubuntu

Re: [Tutorial] Do zero à um sistema de notícias - Aprendendo

Mensagempor Zrael » 07 Set 2010, 14:20

.Introdução

I - O que é HTML?

HTML é uma linguagem de marcação de hipertexto. Simplificando, ele serve para formatar páginas, dando "dicas" ao navegador de como o conteúdo de uma página WEB vai ser mostrado na tela. Imagine que você tem uma página assim:

O título dela é "Minha primeira página". Ela é feita em HTML. Dentro dela, está escrito "ISSO É HTML!". Você não pode dizer ao seu computador essas coisas, ele não vai saber mexer com isso. O que fazemos então? Imagine HTML como um formulário. A gente preenche os campos corretos e entrega para o computador, que vai usar isso para entregar o resultado final. Então, vamos começar nossa página!

Primeiro, abra seu editor de textos favorito. Vou usar meu bom e velho GEDIT. Usando a página que imaginamos lá em cima, vamos transformar essas informações em algo que seu computador possa compreender. Vamos escrever isso no editor: (é recomendável que você realmente escreva, e não copie e cole, assim você vai aprender mais rápido e decorar os comandos. Caso algo saia fora do previsto, não esqueça de checar se você digitou corretamente tudo :D)

Código: Selecionar todos
<html>
<head>
<title>Minha primeira página</title>
</head>
<body>
ISSO É HTML!
</body>
</html>


Não se preocupe com maiúsculas e minúsculas. Apenas digite isso, e salve com o nome pagina.html (não se esqueça do .html). Procure o arquivo que você salvou e abra ele (com o seu navegador. Normalmente, apenas dê dois cliques no arquivo). Você verá....

Uma página sem graça, em branco, com apenas escrito "ISSO É HTML!". Mas repare no título da página, aquele que aparece na aba do seu Firefox, ou no topo da tela. Você verá "Minha página". Pois bem, o que aconteceu?

Nós "marcamos" o conteúdo, usando HTML. Para isso, usamos "tags" (etiquetas), que são as palavras estranhas que escrevemos no meio do nosso texto. A maior parte das tags funcionam por meios de pares. Uma abre, e uma fecha. É como se você dissesse:

Aqui é o título. (Título) Aqui acabou o título.

Se você não fecha uma tag, o navegador vai entender que do ponto que você a abriu até o fim é tudo título, ou tudo texto, ou tudo itálico, negrito... Para impedir isso, fechamos sempre a tag que abrimos. É exatamente como um marcador de texto, aqueles amarelos que a gente usa pra destacar trechos importantes. Você marca apenas o que importa, o que você quer separar do resto. Se você não fecha a tag é como se marcasse até o fim da página: só atrapalha, e não serve de nada.

Como fechamos tags então? Elas sempre começam da mesma forma:
Sinal de <
TAG
Sinal de >
Conteúdo
Sinal de <
Barra /
TAG
Sinal de >

Imagine que a tag é HTML. Então escrevemos:

Código: Selecionar todos
<HTML>CONTEÚDO</HTML>


Como disse antes, maiúsculas e minúsculas não fazem diferença no HTML. "body", "BODY", "BoDy", pra ele, é tudo a mesma coisa. Quer uma dica? Acostume-se a manter um padrão para as tags. Escreva todas em caixa alta, ou caixa baixa, assim você não se confunde. Em PHP, por exemplo, "body" e "Body" não são a mesma coisa, e se você pega um hábito desde cedo, fica mais fácil depois. Mas voltemos ao HTML.

Vamos descobrir passo a passo o que foi que escrevemos:

Código: Selecionar todos
<HTML>


Ele diz "Ei, navegador, aqui começa código HTML". Existe outro tipo? Sim, PHP, por exemplo. Ou XML. Ou ASP. Mas não vamos pensar nisso agora.

Código: Selecionar todos
<HEAD>


Significa que o Cabeçalho do documento começou. Documentos HTML possuem cabeçalho e corpo, normalmente. O cabeçalho possui informações que vão antes de qualquer coisa. Imagine uma prova. O seu nome não vai no meio das perguntas, vai no topo, antes de começar tudo, para identificar de quem é a prova. O HEAD funciona do mesmo modo, ele carrega informações que identificam o documento, ou são executadas logo no início (falaremos disso mais tarde, ok?)

Código: Selecionar todos
<TITLE>Minha primeira página</TITLE>


Aqui é o título da página. Aquele que fica na aba, aquele que fica no topo do Firefox, Chrome, o que quiser. Experimente colocar outras coisas nele, escreva seu nome... Experimente deixar em branco também, e veja o que acontece. (para deixar em branco, é só juntar as tags. Se você colocar um espaço em branco entre elas, ele vai ser entendido como título)

Código: Selecionar todos
</HEAD>


Terminamos o Cabeçalho.

Código: Selecionar todos
<BODY>


Agora começa o Corpo do documento. As coisas que estão entre as tags BODY são as que serão exibidas na página. É a parte principal do documento HTML.

Código: Selecionar todos
</BODY>


Terminamos o corpo.

Código: Selecionar todos
</HTML>


Acabou o código HTML, muito obrigado pela preferência. E assim, terminamos nossa página. Antes de continuar, um breve adendo:

Se a sua página exibe caracteres estranhos ao invés de acentos, é sinal de codificação errada. Ao salvar o arquivo, use codificação ISO-8859-15 ou similar para exibir corretamente os acentos, e não UTF-8. Mais tarde aprenderemos a contornar esse problema, usando caracteres especiais para dizer onde estamos acentuando. Por enquanto, apenas troque sua codificação e seja feliz :D

Agora que aprendemos a construir uma página simples, você deve ter percebido que não precisamos fechar uma tag logo em seguida que a abrimos. Podemos colocar tags dentro de tags. Foi o caso HTML->HEAD->TITLE, não? Então, em que ordem devemos fechar as tags?
Na ordem inversa a que abrimos. Explico:

A primeira tag aberta foi a HTML, certo? Depois a HEAD. Depois a TITLE. Na hora de fechar, a última a ser aberta foi a TITLE, então ela será a primeira a ser fechada. Depois vem a HEAD, e por último a HTML. Claro que depois do HEAD não fechamos o HTML, pois tinha um BODY no meio. Se fossemos estruturar, como ficaria?

HTML
--HEAD
----TITLE
------Minha primeira página
----TITLE
--HEAD
--BODY
----ISSO É HTML!
--BODY
HTML

Como deu pra ver, essa é a ordem hierárquica que a página seguiu. Experimente colocar mais conteúdo no título, no corpo, deixar sem nada, e você entenderá melhor.

Bem, hoje aprendemos a construir uma página html básica, falamos sobre tags e conhecemos algumas delas. Então, que tal uma liçãozinha de casa para começar? (lições de casa podem ser postadas aqui mesmo, sem problemas. Não teremos notas, afinal isso é um tutorial, faz quem quer aprender mais e testar novas possibilidades. Ao final, dou minha própria resposta.)

1. Faça uma página com título LIÇÃO DE CASA 1 e onde esteja escrito CONTEÚDO

2. Escreva três frases no lugar de CONTEÚDO, uma atrás da outra. (ex. frase 1. Frase 2. Frase 3.)

3. Escreva três frases, agora dando ENTER entre cada uma delas. Você percebeu algo estranho?

4. Usando as frases do Exercício 2, faça o seguinte:

- Coloque a primeira frase entre as tags B

ex:

Código: Selecionar todos
<b>Frase 1</b>


- Coloque a segunda entre as tags i, usando o mesmo esquema.

- Coloque a terceira entre as tags u, usando o mesmo esquema.

5 - Usando o que você descobriu no exercício anterior, que tal descobrir uma maneira de repetir isso em HTML?

- Uma frase em negrito!
- Uma frase em itálico!
- Uma frase sublinhada!
- Metade em negrito metade sublinhado...
- e os dois juntos!
- Que tal agora, uma bem esquisita? Tipo assim?


É isso aí, até a próxima, e não se esqueçam: Ao dar respostas para os exercícios, use, aqui no fórum, o botão CODE. Na verdade, repare bem nos botões que temos aqui. Alguma similaridade com HTML? Nos vemos na próxima aula!
Zrael
Frequentador
Frequentador
 
Mensagens: 11
Registrado em: 04 Set 2010, 10:06
Localização: Salto - SP
Distribuição Linux utilizada: Ubuntu

Re: [Tutorial] Do zero à um sistema de notícias - Aprendendo

Mensagempor Zrael » 08 Set 2010, 11:23

.Introdução

II - Um pouco mais de HTML

Depois de aprender a construir um arquivo de texto simples em HTML, vamos partir logo para uma abordagem mais rápida, já que nosso objetivo aqui é aprender PHP. Sendo assim, vamos fazer uma lista rápida de tags úteis em HTML que vamos usar, e então darmos o passo inicial: criar a página principal do nosso Sistema de Notícias.

Tags úteis e suas implementações

"P" -> Tag que inicia um novo parágrafo.

Código: Selecionar todos
<p>Meu parágrafo</p>


"BR" -> Pula uma linha - Essa tag não tem par. Ela fica no final da linha.

Código: Selecionar todos
Vamos agora...<br>Pular uma linha!</br>


--

Tabelas

Tabelas são exatamente o que você pensou. Então, como contruir em HTML uma tabelinha simples? Vamos criar uma tabela com duas linhas e duas colunas. Mãos à obra!

Código: Selecionar todos
<html>
<head><title>Minha tabela</title></head>
<body>
<table>
<tr><td>Coluna 1 - Linha 1</td><td>Coluna 2 - Linha 1</td></tr>
<tr><td>Coluna 1 - Linha 2</td><td>Coluna 2 - Linha 2</td></tr>
</table>
</body>
</html>


Salve como tabela.html e confira o resultado. Agora, pulando a parte que já aprendemos ontem, vamos diretamente explicar o que fizemos.

Código: Selecionar todos
<table>


Como o BODY, HTML, e todas as outras tags, ela serve para dizer ao navegador que iniciamos uma tabela.

Código: Selecionar todos
<tr>


TR abre uma nova linha. Se você se esquecer dele, sua tabela não vai funcionar.

Código: Selecionar todos
<td></td>


TD abre uma nova célula. Ele precisa estar dentro de um TR (linha). Caso você o esqueça, normalmente o conteúdo ou vai se "quebrar" todo, ou vai ser ignorado pelo navegador.

Código: Selecionar todos
</tr>


Fecha o TR.

Código: Selecionar todos
</table>


Fecha a Table. Agora você sabe montar uma tabela básica, vamos para os formulários!

Código: Selecionar todos
<form name="nome do formulário" method="post" action="pagina.html">
Nome: <input type="text" name="nome"><br>
Idade: <input type="text" name="idade"><br>
Senha: <input type="password" name="senha"><br>
<input type="submit" value="Enviar!">
</form>


Coloque esse código no BODY, salve como uma nova página, com o nome que quiser. Não se esqueça do .html no final! Agora vamos examinar isso.
Um formulário segue o que o nome diz: serve para coletar informações do Usuário. Neste fórum onde estamos, feito em PHP, a janela onde você faz um post nada mais é que um formulário. Ele coleta o texto, seu post, e o envia até uma página que vai acrescentar isso no banco de dados.
Formulários são importantes para tudo, no nosso sistema de notícias vai servir para colocarmos as notícias, editarmos elas, pros comentários, editar comentários.... Enfim, servirá pra muita coisa.

Outra coisa importante, é que tags HTML podem carregar mais informação que apenas o nome da tag. Repare que temos, na tag FORM, temos "name" (nome), "method" (método de envio de informações) e "action" (qual página vai mexer com as informações que enviamos). Esses atributos servem para personalizar mais ainda a tag. Por exemplo, mexem com tamanhos e cores, propriedades, ações, tipos. Veja que a tag INPUT possui vários tipos: input (caixa de texto), submit (botão de enviar), entre outros que você aprenderá com o tempo e pesquisa.

Agora, vamos ao formulário que fizemos:

Código: Selecionar todos
<form name="nome do formulário" method="post" action="pagina.html">


A essa altura do campeonato, você já deve saber que indica que estamos abrindo um form, correto? ;D "name" diz o nome que esse formulário tem. Quando se tem vários forms numa página, é bom saber o nome de cada um. "method" é o método de envio. Vamos conhecer apenas dois: post e get, mas não agora. Por enquanto, faça seus forms sempre como post. E "action" é para onde vão as informações. Neste caso, para uma página chamada "pagina.html".

Código: Selecionar todos
Nome: <input type="text" name="nome"><br>


Adicionamos ao form um INPUT, uma entrada de texto do usuário. O tipo é text, ou seja, uma caixinha de texto comum, e o nome é "nome". Isto serve para que quando as informações chegarem na outra página, possamos organizá-las corretamente :D Na frente, escrevemos "Nome: ", para dizer ao usuário o que ele deveria estar preenchendo na caixa. Ao final, vamos para a linha de baixo.

Código: Selecionar todos
Idade: <input type="text" name="idade"><br>


O mesmo que acima, apenas agora pedimos a idade do usuário.

Código: Selecionar todos
Senha: <input type="password" name="senha"><br>


Aqui temos outro tipo de informação. Ninguém quer digitar sua senha com outra pessoa do lado lendo tudo, não? Então o tipo de campo agora é "password" (senha). Experimente trocar para "text", digitar sua senha, depois trocar para "password" e digitar de novo. Entendeu a diferença?

Código: Selecionar todos
<input type="submit" value="Enviar!">


Aqui adicionamos mais um tipo de entrada de dados, o "submit" (enviar). Ele vai se transformar num botãozinho para que possamos enviar os dados do formulário. Sem ele, não adianta fazer o form, o usuário não vai conseguir dar procedimento, pois não tem botão de confirmação! O "value" é a "legenda" do botão, o que vai estar escrito nele. Agora, experimente trocar o "type" para "reset", preencha os dados e clique. Ele vai limpar os campos novamente. Se você não especificar um value, o seu navegador usará o padrão, no mesmo estilo do Title. Experimente!

Código: Selecionar todos
</form>


E terminamos nosso form!

Quando você clicar no botão de envio, vai chegar num erro, pois não existe página "pagina.html", ou se existir, nada vai acontecer. Sua página não sabe lidar com esses dados, então não vai fazer nada. Para lidar com os dados, usaremos o bom e velho PHP, mas por enquanto ainda não.
Então, o que vamos fazer agora?

Primeiro, crie uma pasta chamada "news". Ela vai funcionar como nossa pasta principal, onde guardaremos todos os arquivos do nosso sistema de notícias. Dentro dela, criaremos nosso primeiro arquivo:

index.html

Index é o arquivo principal de um site. O primeiro a ser exibido. Se não houver um arquivo index, o site vai exibir uma lista de todas as páginas que possuir naquela pasta. Então, para evitar isso, criamos o index. A extensão não importa muito.
O que devemos ter no index?

Bem, vamos começar digitando isso aqui:

Código: Selecionar todos
<html>
<head>
<title>Sistema de Notícias - 0.1</title>
</head>
<body>
Meu sistema de notícias
</body>
</html>


Salve e execute. Bem, não tem muita graça, a página não faz nada de interessante. Mas é nosso início, e já deu pra aprendermos bastante coisa até agora, não?

Pois bem, como disse láá no início, o foco deste tutorial não é ensinar HTML. Dei as bases mais ínfimas, mas não é nem um milésimo do que você precisa aprender. Então, deixo nas mãos deste site aqui: HTML.net

Siga o tutorial de HTML e depois o de CSS. Com eles você fará páginas melhores e mais completas, além de aprender formatar o texto e o conteúdo, fazendo tudo ficar bem melhor. Se mais alguém conhece um bom site para aprender HTML/CSS, não deixe de dar a dica!

Bem, até a próxima, quando finalmente começaremos com nosso tutorial. Instalando o Apache, o Mysql e o PHP. Até lá! õ/
Zrael
Frequentador
Frequentador
 
Mensagens: 11
Registrado em: 04 Set 2010, 10:06
Localização: Salto - SP
Distribuição Linux utilizada: Ubuntu

Re: [Tutorial] Do zero à um sistema de notícias - Aprendendo

Mensagempor RafunheL » 08 Set 2010, 20:58

Você recomendaria o Kompozer/NVU para se criar site mais simples ou para se editar os Layouts ?
Imagem
Avatar do usuário
RafunheL
Linux's Fan #1
Linux's Fan #1
 
Mensagens: 109
Registrado em: 31 Ago 2010, 19:45
Distribuição Linux utilizada: Ubuntu

Re: [Tutorial] Do zero à um sistema de notícias - Aprendendo

Mensagempor Zrael » 09 Set 2010, 15:34

RafunheL, olha, eu sinceramente prefiro fazer do zero mesmo, mexendo direto com o o código, do que editores visuais. Mas se você precisa de algo rápido eu indicaria tanto o Kompozer quanto o QuantaPlus. Para um Layout simples, eles servem bem. Mas se quiser algo mais complexo, eles são bem capazes de te deixar na mão, já que são ainda bem "basicão" ao meu ver, faltam muitas ferramentas e opções.

Espero ter ajudado :D
Zrael
Frequentador
Frequentador
 
Mensagens: 11
Registrado em: 04 Set 2010, 10:06
Localização: Salto - SP
Distribuição Linux utilizada: Ubuntu


  • Tópicos Semelhantes
    Respostas
    Exibições
    Autor

Voltar para PHP

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado e 3 visitantes