Artigos desta série Sistema de Notícias em PHP e MySQL:
WYSIWYG – Um Editor HTML
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.
Lista De Editores HTML
Existem muitos editores WYSIWYG:
Para este projecto escolhi o TinyMCE.
Instalar O TinyMCE
O TinyMCE é fácil de instalar.
Na pasta admin, criem uma pasta com o nome editorhtml. 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 editorhtml:
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 antes do fecho da tag head, esta tag:
Insira o seguinte código:
Reparem no caminho para editorhtml/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.
Inserir Imagens No Meio Do Texto
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:
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,image,|,justifyleft,justifycenter,justifyright,justifyfull,|,link,unlink,anchor,cleanup,|,formatselect,|,removeformat,code",
Repare:
No toolbar do TinyMCE, passa a ter a possibilidade de inserir imagens onde pretender no texto.
Um Ficheiro Novo: layout.html
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.
Experimente.
Donwload do código utilizado neste tutorial Sistema De Notícias Em PHP E MySQL Parte3
(5 votes, average: 4.80 out of 5)
48 Responses
Cara não deu certo .
abro index aqui, dae fica tudo branco 🙁
Olá Gabriel! Eu sou editor do webmaster.pt e testei o script do Quemuel num servidor Linux, com PHP 5 e MySQL5. Funciona perfeito. Você está usando Windows? Com que versões do PHP e MySQL? Um Abraço Rui Soares
não estou conseguindo tbm….testei no meu servidor linux mas não apareceu nada tbm….
Olá Roger! Este script está testado em Windows e Linux, com as versões do PHP e MySQL 5. QUe versões do PHP e MySQL está a usar? Um Abraço! Rui Soares
Parabens pela iniciativa, por favor, implementem um sistema de comentarios, preciso aprender.
Obrigado!
Poderiam tambem já implantar o sistema com senha?
Há previsao para a próxima parte do projeto?
Obrigado.
Olá Paulo! Vou informar o autor desta série sobre os comentários. Um Abraço Rui Soares
Olá Paulo,
Obrigado pela tua atenção.
Nos próximos tempos estou concentrado num projecto que me consome a atenção e disponibilidade em termos de programação.
Possivelmente só em Setembro é que vou retomar esta série e termina-la.
Um abraço a todos.
Fico no aguardo entao, obrigado!
Ola Rui Beleza ?
o Problema é o Seguinte … O Sistema funcionou beleza aki , colocar o TinyMCE , mas na hora que clico em Submeter da o Seguinte erro "Erro: ficheiro não permitido."
Como devo proceder ?
Aguardo Resposta . Abraço João Victor
Olá João! Vou pedir ao António para responder. Ele é o autor deste tutorial. Um Abraço! Rui Soares
Olá João,
Tens de colocar sempre um ficheiro de imagem.
Nos próximos dias vou publicar uma actualização ao sistema. Vai separar o upload de imagem do sistema de notícias.
Boa, alguma novidades sobre updates deste tema.
Boas tardes, alguma novidade sobre o update deste tema…
estou com um problema
Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in /home/workxcom/public_html/dev/index.php on line 7
Olá a todos,
Creio que seria interessante disponibilizar no frontoffice cada notícia num link (ao clicar no link era carregada a notícia com a opção de voltar), conforme fossem adicionadas exibia uma lista de links, do mais recente para o mais antigo (poderia ter um limitador de 5 links), isto para ter um possibilidade de implementar numa pequena iframe num qualquer website.
No backoffice, uma página que apresenta-se todas as noticias publicadas com a possibilidade de editar e apagar.
Desde já os meus agradecimentos por estes tutoriais.
São só algumas ideias e o trabalho que tem sido realizado está 5*****
Olá a todos,
Da minha parte confirmo que está tudo a funcionar, da primeira vez não funcionou pois deve-me ter escapado algo. Por isso caso alguém tenha erros, nada como tentar outra vez 🙂
Estes tutoriais do António Oliveira estão muito bons, que o bom trabalho continue, já espero o próximo tutorial.
Parabens sou do brasil, e estou adorando estas aulas, Vou fazer uma pergunta idiota, para eu colocar uma
noticia no meu site, na posição que eu quero, se vai ser no topo ou em baixo, eu dou estaa posição em css?
Olá Guilherme! Vou pedir ao autor deste tutorial que responda. Um Abraço! Rui Soares
Olá Guilherme,
Eu coloquei esse sistema no meu site, editei conforme meu layout, usei div e css, adicionei também 2 campos "Dia" e "Mes/Ano", removi img e ficou assim: http://i.imgur.com/d5xy474.jpg
Boas Gulherme,
Ora bem, creio que o fará mais sentido colocar a noticia dentro de uma td ou div (fazes echo, print, etc… para dentro do elemento posicionado no layout) e ajustar uma ou outra no layout do site. Caso use tables, tr, td estas terão hierarquias ao passo que com divs, podes colocar onde quiseres com css (recorrendo à propriedade position, etc), terás mais liberdade com as divs mas, também mais problemas caso te falte experiência, servirá de aprendizagem.
Espero que tenha sido esclarecedor.
Ora bem, creio que o fará mais sentido colocar a noticia dentro de uma td ou div (fazes echo, print, etc… para dentro do elemento posicionado no layout) e ajustar uma ou outra no layout do site
onde e em que pasta se coloca esse layout.html ??? no index.php da pasta principal ou da pasta admin afinal aonde? outra fica a dica de por comentarios e contador dos comentarios feitos eh sempre bom poder comentar sobre uma noticia,,, iobrigado
para dentro do elemento posicionado no layout) e ajustar uma ou outra no layout do site. Caso use tables, tr, td estas terão hierarquias ao passo que com divs, podes colocar onde quiseres com css (recorrendo à propriedade position, etc), terás mais liberdade com as divs mas, também mais problemas caso te falte experiência, servirá de aprendizagem.
olá gostaria de saber se seria possível dentro deste sistema… vcs adaptarem um sistema de colunistas… tipo…. noticias sobre esporte… Policial….etc… criar um sistema de cadastro pro colunista do site. tipo cada um ter seu login e senha… e quando postar suas colunas com noticias a mesma ir para sua respectiva coluna. ex: colunista de esportes loga e tudo q publicar vai pra coluna esportes… abraço e obg pela atencao
Muito bom esse sistema de noticias, estou querendo usar em meu site, só que preciso listar notícias por categorias separadas, mas não sei como fazer isso. Você pode me ajudar?
os tutoriais de php e mysql são bom, mas faltou por exemplo como deletar a notícia caso esteja errado ou editar, e também como estar usando a pagina que sai a vizualização em uma pagina html, que seria muito legal isso
Concordo, também acho que deveria ter como deletar e editar a notícia
Ola! Sobre exclusão e edição das noticias, existe essa possibilidade?
Muito obrigado e um otimo trabalho!
Boa tarde.
É o seguinte: Fiz td conforme manda o tutorial, mas na hora de acessar a pag. admin.php p/ inserir noticias, não aparece a caixa TinyMCE, saliento que baixei do site conforme o link, extrai os arquivos e copiei p/ pasta editorhtml. De resto tá funcionado direitinho, cadastra e visualiza normal.
Abraço.
Legal, esse sistema, gostei e coloquei ele no meu site. Mas não estou satisfeito com o "TinyMCE".__Tentei colocar o CKeditor mas não deu certo não, até consegui inserir, mas não consegui cadastrar nenhuma noticia.__Poderiam também implementar um sistema com comentários, ficaria ótimo esse sistema com comentarios e o CKeditor.__No resto ta tudo beleza, é um excelente trabalho esse de vocês.__
Olá, sou novo aki,
olha instalei o script, as funcionalidades de exibição das opções estão ok, as noticias ok, mas, qdo insere-se uma foto ou um figura, ela naum aparece, tbem, na listagem de categorias esta dando o sgte erro: "Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in /home/sspmcaceres/www/webnoticias/admin/noticias_categoria_listar.php on line 248", e a funcionalidade da TinyMCE (editorhtml) funciona uma maravilha, mas nada de inserção de imagem no meio da noticia…
Gostaria de uma orientação, se possivel…
Ah a opçao de exibição de categoria de noticias tbem nao esta listando… exibe o erro de mysql: Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in /home/sspmcaceres/www/webnoticias/admin/noticias_categoria_listar.php on line 247
Ola Guilherme,
Postei umas questoes, e ate agora nao obtive retorno, que é o sgte: qdo clico para listar as categorias cadastradas a opçao me retorna a msg:
Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in /home/sspmcaceres/www/webnoticias/admin/noticias_categoria_listar.php on line 247, ja tentei de tudo pra arrumar, mas, nao consegui exito, da pra me explicar como resolver isso ou tem alguma atualizaçãi para resolver, oura coisa o TinyMce para inserir imagens no meio do txt, nao consigo acertar o link de post…
Ola sou muito fan do site webmaster.pt mas quando eu estou na area de administraçao fica dando erro no login
Olá Arthur! Vou pedir ao autor deste artigo para responder. Um Abraço! Rui Soares
Ja descobri o erro, era o nome da variável $id_categoria_listar que nao existia na tabela de dados…
Ola pessoal do WEBMASTER, estou aqui apra parabenizar vocês… VCS SAO D+.
Agora para quem tem erros e tudo mais aconselho a nao copiar os codigos e pesquisar as strings e variaveis que estao sendo usadas pois assim vcs aprendem, e fika a dica para o proximo incremento do tutorial..
que tal uma paginação de conteudo 😉
Olá amigos instalei tudo certinho mas quando preencho formulario usando as funções do editor na página da notícia por exemplo mostra as tags junto do texto, que devo fazer pra visualizar correto?
boas . nunca é demais elogiar a vossa iniciativa OBRIGADO. a mim não deu certo quando abro o layout aparece-me isto :
".$linha['n_titulo'].""; echo "
"; echo "
".$linha['n_texto']." "."
"; echo "
"; } mysql_close($conn); ?>
gostava que me ajudassem ! mais uma vez obrigado
Aviso : Undefined index: em C: xampp htdocs tutorial admin inc autenticacao.rotinas.php on-line 6
Notice : Undefined index: em C: xampp htdocs tutorial admin inc autenticacao.rotinas. php na linha 7
Erro
ta acontecendo isso o que faço ?
Boa tarde, a mim aparece bastantes erros destes:
PHP Notice: Undefined variable: _POST_FILES in E:CustomerDatawebspaceswebspace_00106637wwwrootnoticiasadminscript_noticias.php on line 86
Que devo fazer? abraço e obrigado
Oi! Gostei das dicas do Editor Tiny! Tenho uma dúvida: Cores. Como incluir cores no menu de formatação de texto? Obrigado!
Boa tarde, somente esta semana conheci este site, estava procurando um "sistema simples" para postar foto com cometários, tipo noticias. Gostei muito deste sistema, visto que não tenho conhecimento em php, html, css etc…
para mim foi uma verdadeira ajuda.
Mas infelizmente, acho que o sistema ainda não está estável, estou enfrentando alguns problemas como segue:
1- A exibição da imagem fica fora de ordem, uma bagunça só!
2- O sistema não publica quando copio e colo.
Por favor me ajudem, talvez postando link para baixar o sistema corrigido e revisado, pelo que vi isso vai ajudar não só a mim, mas todos os outros interessados, até por que, na minha opinião, este sistema é a gema do ovo para criação de um site.
Att.
Eds
Cara, tava um tempão procurando um sistema de paginação bem explicado, parabéns nota 10.
Olá, bom dia! Gostaria primeiro de AGRADECER pelo tutorial. Sem ele jamais teria conseguido fazer meu sistema de notícias funcionar… foi o tutorial mais bem explicado que encontrei sobre este assunto.
Porém, fiquei com algumas dúvidas, que talvez vcs poderiam me ajudar.
1- Como faço pra adicionar um sistema de aprovação da notícia? Já tentei de algumas formas, mas sempre da erro no código.
2-Como posso exibir a página index.php no meu site? Ela teria de ir na home page do meu site, porém apenas Título e Descrição. Cada notícia tem seu link próprio.
Se puderem ajudar, desde já agradeço!
Mais uma vez meu muito obrigado!
Att
Vitor
o mysql esta apresentando erro ao subir o arquivo, alguem sabe Pq?
alguem pode me ajudar ? ero ao subir o arquivo
Query SQL:
——– — CRIA A TABELA DE CATEGORIA DE NOT�CIAS ———-
CREATE TABLE `tbl_categorias_noticias` (
`id_categoria_noticia` TINYINT( 3 ) UNSIGNED NOT NULL AUTO_INCREMENT ,
`categoria` VARCHAR( 50 ) DEFAULT NULL ,
PRIMARY KEY ( `id_categoria_noticia`) ) TYPE = MYISAM ROW_FORMAT = DYNAMIC ;
Mensagem do MySQL: Documentação
#1064 – You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '———- CRIA A TABELA DE CATEGORIA DE NOTÍCIAS ———-
CREATE TABLE `tb' at line 1
O tutorial ficou muito bom, porem eu tive um erro aqui .. a minha imagem não aparece no meu index.. ela aparece apenas o ícone quebrado .. O resto titulo e texto ta funcionando e aparecendo certo. Se puder me ajudar agradeço !