c



 
  c

O meu projecto para os próximos artigos é criar e desenvolver um sistema de notícias
em PHP e MySQL. Vou começar com o básico e o sistema irá evoluir para um sistema
de notícias mais completo, mas será uma evolução passo a passo. Assim, qualquer leitor
que esteja a aprender PHP e MySQL terá a oportunidade de compreender o
desenvolvimento do sistema de notícias e poderá utilizar e adaptar este sistema de
notícias às suas necessidades.

Também aguardo feedback dos leitores em relação ao próprio desenvolvimento do

sistema de notícias. Que características é que vocês gostariam de ver neste sistema de
notícias? Atenção, que não quero criar um CMS como o WordPress, Joomla ou Drupal.
Para isso, já existem esses CMS. Quero criar um sistema simples e que seja muito fácil
de utilizar.

Hoje apresento o projecto e a base do sistema de notícias em PHP e MySQL. Nos

próximos artigos, vamos adicionar módulos; uma zona de administração com
necessidade de autenticação, um sistema de upload de imagens, um editor HTML, como
gerar estatísticas, e tudo o que vocês desejaram, desde que se enquadre na ideia de
SIMPLICIDADE.

Vou utilizar o CSS framework grid 960 para trabalhar o design das páginas de
administração. Mais tarde, o design poderá evoluir por outros caminhos.

 

c
O primeiro passo é criar a base de dados MySQL.

Abram o vosso gestor de MySQL. Se utilizam um WAMP ou equivalente, activem os

respectivos serviços e apontem o vosso browser para o phpMyAdmin. Se utilizam o
Xampp, por exemplo, podem encontrar o phpMyAdmin no url:
http://localhost/phpmyadmin/ .

Criem uma base de dados MySQL com o nome    e podem executar o código que
segue para criar a tabela:

p
p
ppp
pp  p p
 pppp
p p

 p p
 pp
p p p
 p !"!p#$$pp
p p p
% p%p
p p p
&' p !"!p#$$pp
p p p
(

)p*)pp  p p
+p
pp
 Ôp O campo ˜  é um campo numérico que se incrementa automaticamente. É
bastante útil, pois sendo uma referência única, sem duplicações, podemos
utilizar esse campo para distinguir linhas de dados para edição e outros
comandos.
Ôp O campo ˜  é um campo onde vamos gravar a data da inserção da notícia.
Ôp O campo ˜   é o campo reservado para os títulos das notícias. Podemos
escrever até 255 caracteres.
Ôp O campo ˜  é para o texto da notícia.
Ôp O campo ˜  é idêntico ao do titulo e esta guardado para gravarmos o url
duma imagem. Também está limitado a 255 caracteres.

   

Em termos práticos, existem 2 tarefas básicas:

1.p gravar informação na base de dados;

2.p visualizar a informação gravada na base de dados.

Vamos ter um ficheiro ˜ !"!, onde vamos visualizar a informação que foi gravado
na base de dados. Mais tarde, vamos decidir que informação é que pretendemos
visualizar e como podemos seleccionar essa informação e visualizá-la. O index.php é o
ficheiro que os visitantes do website vão abrir, quando acederem ao nosso domínio. É
usual chamar à parte pública do sistema de notícias Frontoffice.

A parte de administração do sistema de notícias, onde executamos todas as tarefas de

gestão das notícias é chamado de Backoffice. Vamos colocar as pastas e ficheiros do
Backoffice numa pasta admin.

Também precisamos de estabelecer a ligação entre a programação em PHP e a base de

dados em MySQL. Essa ligação ou coneção à base de dados, que é necessária tanto no
Frontoffice, como no Backoffice, encontra-se dentro da pasta conn, no ficheiro
conn.php. Vamos configurar neste ficheiro a ligação entre os ficheiros php e a base de
dados MySQL, permitindo desse modo o acesso à base de dados e consequentemente
todos os comandos que nos vão permitir adicionar e gravar informação na base de dados
e seleccionar e visualizar informação gravada na base de dados.

Portanto, para já, temos 1 ficheiro index.php, 1 pasta conn, onde temos o ficheiro
conn.php e uma pasta admin, onde temos vários ficheiros do Backoffice.
@# "   ˜˜ !"!$ % &


c
Este ficheiro é a chave de acesso à base de dados. Se estiver mal configurado, não há
sistema de notícias. Portanto, é importante que fique bem configurado.

p
p,-.".p
/! ! pp0pp1"1+ p
/2 pp0pp1!1+ p
/3! pp0pp1!1+p
/" . pp0pp11+p
pp
/p0p&45/! !p/3!p/" .+ p
6p7/ p
8p
9!!+p9p:p&45!!!+ p
;p
-<p
pp

Ao escrever o ficheiro e configurar a ligação, verifique se as variáveis ß
'  (

ß 

(ß  ) ß"'!

estão correctas. A variável ß
'   refere-se
ao servidor MySQL. Como estamos a trabalhar num sistema simples e com leitores que
estão a aprender programação, é normal que o servidor de MySQL esteja alojado no
mesmo computador / servidor que o servidor web e os ficheiros php do sistema de
notícias. Nesse caso, o valor correcto para a variável ß
'   deverá ser localhost.

A variável ß 

refere-se ao nome da base de dados MySQL. No meu caso,

como eu criei uma base de dados com o nome   , o valor é tutorial. Para quem
utiliza o xampp ou outro WAMP no pc de casa ou do trabalho, a base de dados é criada
no gestor de MySQL, normalmente o phpmyadmin. E você decide o nome da base de
dados. E é esse nome que vai colocar como valor na variável ß 

. Quem criar a
base de dados num alojamento, num servidor web com control panel, como o cPanel,
essa base de dados normalmente é criada no próprio control panel e fica com um prefixo
correspondente ao utilizador desse control panel. Vamos imaginar que o utilizador do
cPanel é userc e você criou uma base de dados chamada tutorial, o valor que você terá
que colocar na variável $basedados será userc_tutorial.

As variáveis $utilizador e $chavepass referem-se ao utilizador MySQL e respectiva

password. Se utilizar o Xampp e utilizar os dados do sistema por defeito, pode utilizar o
user   e não precisa de preencher o valor para a variável $chavepass. Quando passar
o sistema de notícias para um alojamento web, terá que criar um utilizador mysql, com a
respectiva password, por razões de segurança. E até porque num alojamento partilhado,
se você colocar o utilizador root, não vai funcionar, porque a sua conta de alojamento
não tem permissões para aceder com esse utilizador.

@# "   ˜ !"! * ++  c


 
 

Voltamos agora prestar atenção ao nosso Backoffice e aos ficheiros que estão na pasta
admin. Comecemos pelo ficheiro admin.php. Neste ficheiro, vamos encontrar o
formulário que nos vai permitir escrever e submeter a informação que pretendemos e
gravar na base de dados MySQL.

p
p,6!&p01!!1p&01!!1p&"01.1p01!! =
:.".1< p
,.p&011p4.01" 1p011p 01,-.".p"p9) =
&=9p-<1p>< p
?,2!p>< p
,.p&011p4.01%1p011p301@A1p><,2!p>< p
%?,2!p>< p
,%!p&01%1p01%1p01@$1p!B01$1<,>%!<,2!p>< p
&'?,2!p>< p
,.p&01&'1p4.01 %1p01&'1p301@A1p><,2!p>< p
,.p4.012&1p&0121p0121p 012&!1p>< p
,>6!&<p
pp

Se verificarmos a primeira linha do formulário, vamos utilizar o método !
 e vamos

processar no ficheiro ˜
 ,˜    !"! a informação submetida no ficheiro
admin.php. O ficheiro inserir-noticia.php vai gravar a informação submetida pelo
formulário na base de dados MySQL.

No formulário, no ficheiro admin.php, vamos criar as seguintes variáveis:

Ôp data
Ôp titulo
Ôp texto
Ôp imgs

@# "   ˜
 ,˜   
!"! * ++  

c
 
 

O ficheiro inserir-noticias.php é aquele que vai processar a informação contida nas
variáveis do formulário e inserir e gravar essa informação na base de dados MySQL.

p
p,-.".p
2!+ p
9::>>:.".9+ p
pp
/pp0pp/(
C99D+ p
/pp0pp/(
C99D+ p
/%pp0pp/(
C9%9D+ p
/&'pp0pp/(
C9&'9D+ p
pp
6p7&.4/pp7&.4/%p8 p
&452/2p/+ p
&455!41 
p 
p ppp%p&' p
Ep9/9p9/9p9/%9p9/&'91+ p
pp
&45/+ p
pp
"!1?p&:.".-01+ p
%+p
;p
-<p
pp

Incluímos a chave de acesso à base de dados, ou seja, incluímos o ficheiro onde está a
ligação à base de dados: vejam o include do ficheiro  ˜˜ !"!.

Depois declaramos as variáveis e atribuímos às variáveis declaradas os valores do

formulário. Portanto, a informação submetida pelo utilizador, através do formulário
existente no ficheiro admin.php passa a estar contida nessas variáveis declaradas.

Antes do ficheiro inserir-noticias.php processar os dados, há uma condição: se a

variável referente ao titulo e a variável referente ao texto estiverem vazias, o php não
grava a informação na base de dados. Caso não estejam vazias, vai processar a
informação contida nas variáveis que declaramos e inserir os dados na base de dados.

@# "   ˜ !"! # ˜ ++  c


 
 

Como já escrevemos, o ficheiro index.php vai permitir que os visitantes do website
visualizem as notícias. Nesta primeira fase, é muito simples.

p
p,-.".pp
9>:.".9+ p
&452/2p/+ p
pp
/!p0p&455!41 pFp

pp

G
p)ppG 1+ p
pp
B"/"p0p&456"!!4/!p8 p
"ppp1,"<1:/"C99D:1,>"<1+ p
"ppp1,2!p><1+p
"pp1,.<1:/"C9%9D:1p,&'p!091:/"C9&'9D:19p099p
'0969p><p1:1,>.<1+ p
"ppp1,2!p><1+p
;pp
pp
&45/+ p
-<p
pp

Mais uma vez, reparem no include do ficheiro conn.php, que permite o acesso à base de
dados, dado que a ligação à base de dados está nesse ficheiro.
A seguir, o comando c-.#/@˜   
significa seleccionar todos os dados
da tabela noticias. Acrescentamos @//0˜ c. Estamos a ordenar as
notícias pelo n_id e duma forma descendente. Como o n_id é incremental, estamos a
visualizar as notícias pela ordem com que foram inseridas na base de dados, neste caso,
ordem descendente. Ou seja, as últimas notícias inseridas na base de dados são sempre
as primeiras que vamos ver no index.php.

Inserimos também um 1"  que significa que enquanto houver dados o index.php
processa a informação e permite a respectiva visualização.

c
 
 
  c
2

o! 3˜

Decidi atender ao pedido de um leitor e integrar já um sistema de upload de imagens. A
mensagem desta minha decisão é simples: c 
o ˜  Este sistema de
notícias irá evoluir de acordo com os vossos comentários. A decisão sobre as
funcionalidades deste sistema de notícias é vossa. Sem prejuízo do princípio subjacente
a este projeto: não queremos criar um Joomla, um WordPress ou um Drupal. Esses
CMS já existem e são open source e grátis. Queremos um sistema de notícias simples e
fácil de usar, por 2 razões:

Ôp Este tutorial tem como destinatários aqueles leitores que estão a aprender PHP e
MySQL e a aprendizagem é como uma escada que vai do simples até ao mais
complexo. Vamos começar pelo simples.
Ôp Muitas vezes, até para a maioria dos sites para empresas, um Joomla ou um
Drupal são demasiado complexos. E um sistema de notícias simples é mais
vantajoso para o programador e especialmente para o utilizador final, que não
vai ter 101 opções de configuração e não vai precisar de ler um manual para
editar um artigo.

Não criamos um módulo autónomo para o sistema de upload. Mas, podemos fazer isso
no futuro. Depende da evolução do script. É um sistema de upload muito simples e que
nem mexemos na base de dados. Vamos utilizar um campo já existe na base de dados
MySQL para guardar o nome do ficheiro da imagem: n_img.

Em relação ao script publicado na Parte1, alteramos os seguintes ficheiros:

Ôp index.php
Ôp admin/admin.php
Ôp admin/inserir-noticia.php

@# "   ˜
 ˜ !"!

Não alteramos muito o código do formulário. Vamos analisar em pormenor as
alterações do ficheiro admin/admin.php:

p
p>>pp'p"ppH'? p
pp
,6!&p01!!1p&01!!1p&"01 .1p01!! =
:.".1< p
pp
>>pp2Ip.!pp"ppH'? p
pp
,6!&p&01!!1p01!!1p&"01.1p01!! =
:.".1 pp4.01&.!>6!& =1p<p
pp
>>pp"ppH'p6p2I? p
pp
,.p&01&' 1p4.01%1p01&'1p301@A1p>< p
pp
>>p.!pp"ppH'? p
pp
,.p&01&'1p4.0161p01&'1p301@$1p>< p
pp
pp

˜!45 !
+ ,5: Adicionamos, pois o nosso formulário vai processar

um ficheiro de imagem e vai utilizar um campo de input do tipo !45+ 5.

@# "   ˜
˜
 ,˜    !"!

As principais alterações ocorrem neste ficheiro. É aqui que acontece a acção!

p
pp
>>ppJ pp !K p/&'pp !Lp!!: p
pp
/&'pp0pp/(
C9&'9D+ p
pp
>>pp !K p/&'p%pp!p&p/(
pp!6!& =p&p
/C9&'9Dpp!&p&p p !K pp/!&&' p
pp
/&'pp0pp/C9&'9D+ p
pp
/!&&'0 pp!!.1p1p11p! B!/C1&'1DC1&1D+ p
pp
pp

A $trimimg vai ao MIME data stream do $_FILES['imgs'] e fica a saber o nome do

ficheiro da imagem: $_FILES["imgs"]["name"].

Dado que o nome do ficheiro pode ter várias formatações: escrito em letras
MAIÚSCULAS, escrito em letras minúsculas ou até com uma combinação de letras
maiúsculas e micúsculas (Exemplo.JPG.), decidi utilizar o strtolower para alterar o
nome do ficheiro de modo que seja um nome só com letras minúsculas.

Outro problema de formatação é o nome do ficheiro ter espaços. Por exemplo: ³Nome
do ficheiro.jpeg´. Decidi usar o str_replace, para remover os espaços no nome do
ficheiro.

Se desenvolvermos um módulo autónomo para o upload de ficheiros, podemos também

remover acentos do nome dos ficheiros e também criar automaticamente um nome de
ficheiro único.

A seguir vamos criar uma condição baseada no $_FILES["imgs"]["type"] e restringir o

upload dos ficheiros a 3 tipos de ficheiros: gif, png e jpeg. Aproveitamos a boleia e
restringimos também o tamanho do ficheiro a ficheiros inferiores a 120 kb.

p
pp
6p/C1&'1DC14.1Dp00p1&'>.M.'1pNNp
/C1&'1DC14.1Dp00p1&'>M.'1pNNp/ C1&'1DC14.1Dp
00p1&'>'61pNNp/C1&'1DC14.1Dp00p1&'>.'1pOOp
/C1&'1DC131Dp,p#AAAAp8 p
pp
pp

Vamos efectuar o INSERT desta nova informação na base de dados MySQL. Não
esquecer que a variável não é a $imgs. A variável é a $trimimg.

p
pp
&455!41 
p 
pppp%p&'p
Ep9/9p9/9p9/%9p9/!&&'91+ p
pp
pp

O upload de imagens está a ser efectuado para a pasta admin/img. O código que
determina a pasta para onde vai ser efectuado o upload é o seguinte:

p
pp
& .6/C1&'1DC1&.&1Dp1&'>1p:p /!&&'+ p
pp
pp

Nesta linha de código, movemos o ficheiro da pasta temporária no servidor

³tmp_name´, onde ficou uma cópia do ficheiro, para a pasta para onde vamos efectuar o
upload dos ficheiros das imagens, na nossa conta de alojamento ou na pasta onde estão
os ficheiros do nosso script no nosso computador. No servidor, é importante que o
utilizador que executa os ficheiros PHP tenha permissões de escrita nessa pasta, para
onde vamos efectuar o upload dos ficheiros das imagens.

 ˜

!  +

Como o código vai ser processado na pasta  ˜, indicamos a pasta img/ e o nome do
ficheiro que vai ser escrito nessa pasta. O nome do ficheiro vamos buscar à variável
$trimimg. Neste código:

p
p& .6/C1&'1DC1&.&1Dp1&'>1p:p /!&&'+ p
pp

o pedaço de código que faz exactamente isso é este: 6 
5 ß  .

@# "   ˜ !"!

Estamos próximos do fim da Parte2 deste tutorial. Falta actualizar o ficheiro index.php,
para poder ler as imagens, uma vez que deixamos de usar url e vamos passar a ler a
imagem na pasta  ˜

.

p
p"pp1,.<1:/"C9%9D:1p ,&'p
!09&>&'>1:/"C9&'9D:19p099p'0969p><p1:1,>.<1+ p
pp

Que novas funcionalidades querem para este sistema de notícias em PHP e MySQL?

c
 
 
  c
6

70c3708$o  -
WYSIWYG não é um bicho de 7 cabeças. É o acrónimo de ³What You See Is What
You Get´. Trata-se da melhor descrição possível para definir o que é um editor de Html.
Um editor de Html é o meio mais simples de escrever conteúdo numa área de texto e de
formatar esse texto para a web. Se pretender sublinhar uma frase, basta seleccionar a
frase e na barra de ferramentas clicar no ícon correspondente ao sublinhado. Se preferir
destacar algumas palavras, pode seleccionar as palavras e clicar na opção Bold. Se
quiser criar uma lista não ordenada, selecciona as frases respectivas e clica na opção
Lista Não Ordenada. É uma forma fácil e rápida de escrever conteúdo na web, sem que
seja necessário conhecer HTML e com essa possibilidade de formatar o texto com
funcionalidades do HTML.

  
-
Existem muitos editores WYSIWYG:

Ôp TinyMCE
Ôp CKEditor
Ôp OpenWYSIWYG
Ôp NicEdit
Ôp YUI 2

Para este projecto escolhi o TinyMCE.

3˜
@- ˜
O TinyMCE é fácil de instalar.

Na pasta admin, criem uma pasta com o nome   ". Façam o download do
TinyMCE e copiem para a pasta todo o código do TinyMCE. Portanto, os ficheiros e
pastas do TinyMCE vão ficar na pasta   ":

Agora temos que adicionar o editor de HTML ao sistema de notícias, nomeadamente ao

backoffice ou zona de administração. No ficheiro admin.php, imediatamente ˜
do
fecho da tag head, esta tag:

p
p,>"<p
pp

Insira o seguinte código:

p
pp
,7==p4 p==<p
,!.p4.01%>M !.1p!01!"&>4&:M1<,>!.< p
,!.p4.01%>M !.1< p
pp4 :8 p
pppp&p?p1%!1 p
pppp"&p?p1 1 p
ppppp
pppp>>p"&p. p
pppp"& 2p?p
12!NM646M64!M64!'"NP
.N1 p
pppp"& 2#p?p11 p
pppp"& 2Qp?p11 p
pppp"& 2@p?p11 p
pppp"& 2!p?p1.1 p
pppp"& 2!'p?p161 p
pppp"& 2!p?p12&1 p
pppp"& !3'p?p! p
ppppppp
pp;+p
,>!.< p
,7==p>4 p==<p
pp
pp

Reparem no caminho para   "/tiny_mce.js. Não se esqueçam de incluir esse

caminho.

Como podem verificar, não foi complicado. Fácil, fácil, fácil.

3˜
 3˜
   - 

O nosso sistema esta pensado para inserir uma imagem através de upload imediato e
inserção via base de dados. Isso limita a utilidade do editor e a sua capacidade de poder
inserir imagens no texto que estamos a escrever. No próximo tutorial, vamos melhorar
esse aspecto de modo que seja possível inserir imagens directamente no editor HTML.

No entanto e por enquanto, podemos inserir mais imagens alterando a toolbar do

TinyMCE, na variável ³theme_advanced_buttons1 :´ adicione o seguinte texto:
³,|,image,|´, ficando a variável assim:

p
p"& 2p?p
12! !P"!'"N&'NM646M64
!M64!'"M646NPP"!.N6!&
N!& 6!&1 p
pp
Repare:

No toolbar do TinyMCE, passa a ter a possibilidade de inserir imagens onde pretender

no texto.

o# "   ' 9  "

Como podem começar a utilizar este script? Bom, podem utilizar o exemplo do novo
ficheiro introduzido hoje, o layout.html. Através de um iframe podem inserir o
index.php e começar a utilizar o script.

p
p,6!&p!p01%:.". 1pB"01AAR1p"'"01@AA1p
4012!!?1< p
,.<
pp2!B!pLp.!p6!&:p(!p6 !p3ppp
2!B!:,>.< p
,>6!&< p
pp

Experimente.