Sistema De Notícias Em PHP E MySQL Parte3
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:
</head>
Insira o seguinte código:
<!-- TinyMCE -->
<script type="text/javascript" src="editorhtml/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
// Theme options
theme_advanced_buttons1 : "bold,italic,underline,|,justifyleft,justifycenter,justifyright,|,link,cleanup,|,code",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
});
</script>
<!-- /TinyMCE -->
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.
<iframe src ="index.php" width="100%" height="400" style="border:none">
<p>O seu browser não suporta frames. Por favor, actualize o seu browser.</p>
</iframe>
Experimente.
Donwload do código utilizado neste tutorial Sistema De Notícias Em PHP E MySQL Parte3
Related posts:
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.
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
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?