Publicado em 4 de ago.

Editor de conteudo + Paginação

#php

Olá pessoal!

Estou aqui para dar uma breve introdução sobre o TinyMCE com o PHP,

não vou ensinar a configurar pois é algo extremamente simples e fácil de se achar na internet.

Vou usar uma configuração padrão porém sem alguns recursos, de brinde tem um sisteminha simples de paginação.

Exemplo: http://www.gabrielweb.com.br/editor

Teremos basicamente 5 páginas:

conexao.php -> arquivo com as conexões com o BD

index.php -> irá listar os textos criados

inserir.php -> Insere os novos novos textos

listar.php -> lista as informações para edição

edita.php -> edita o conteúdo selecionado no "listar.php"

Os arquivos de download estão aqui: http://www.4shared.c...al_tinymce.html

CRIAR O BD

CREATE TABLE conteudo(
 id int AUTO_INCREMENT PRIMARY KEY, -- Criar campo id com "auto numeração" e sendo a chave-primaria
 titulo varchar(50), -- Campo para o título do texto
 conteudo	text NOT NULL -- Campo text para inseir o conteudo necessário
);

CHAMAR O TINYMCE PARA A PÁGINA

<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>

 <script type="text/javascript" src="tiny_mce/plugins/tinybrowser/tb_tinymce.js.php"></script>

 <script type="text/javascript">

 tinyMCE.init({

 // General options

 language : "pt",

 mode : "textareas",

 theme : "advanced",

 plugins : "safari,pagebreak,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

 // Theme options

 theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,formatselect,fontselect,fontsizeselect",

 theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",

 theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",

 theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",

 theme_advanced_toolbar_location : "top",

 theme_advanced_toolbar_align : "left",

 theme_advanced_statusbar_location : "bottom",

 theme_advanced_resizing : true,

 // Example content CSS (should be your site CSS)

 content_css : "css/content.css",

 // Drop lists for link/image/media/template dialogs

 template_external_list_url : "lists/template_list.js",

 external_link_list_url : "lists/link_list.js",

 external_image_list_url : "lists/image_list.js",

 media_external_list_url : "lists/media_list.js",

 file_browser_callback : "tinyBrowser",

 // Replace values for the template plugin

 template_replace_values : {

 username : "Some User",

 staffid : "991234",

 }

 });

 </script>

CONEXÃO.PHP

Esse exemplo é para localhost. Lembre-se de editar esse arquivo quando for usar em outro local.

$host – Variável que indica o caminho para o onde está o BD

$user – Esse é o nome de usuário usado para logar no BD

$pass – Senha para acessar o BD se necessário

$banco – Nome do Banco de Dados utilizado

<?php
$host = "localhost";
$user = "root";
$pass = "";
$banco = "sistema_tutorial";
$conexao = mysql_connect($host, $user, $pass) or die (mysql_error());
mysql_select_db($banco);
?>

****

INSERIR.PHP

Após criar a estrutura da página e chamar o TINY como mostrei no começo temos que chamar o arquivo de conexão ao BD e para isso usamos o include

include("conexao.php");

No form temos uma variável global $_SERVER que serve para enviar as informações

sem ter que usar um outra página para pegar os dados e gravar.

Para recuperar os dados você deve colocar dentro de um IF para ver se foi solicitado

if ( $_SERVER[ 'REQUEST_METHOD' ] == 'POST' )

O mysql_query é onde você coloca os comandos SQL

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Inserir conteudo</title>
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="tiny_mce/plugins/tinybrowser/tb_tinymce.js.php"></script>
<script type="text/javascript">
	tinyMCE.init({
 // General options
 language : "pt",
 mode : "textareas",
 theme : "advanced",
 plugins : "safari,pagebreak,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

 // Theme options
 theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,formatselect,fontselect,fontsizeselect",
 theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
 theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
 theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
 theme_advanced_toolbar_location : "top",
 theme_advanced_toolbar_align : "left",
 theme_advanced_statusbar_location : "bottom",
 theme_advanced_resizing : true,

 // Example content CSS (should be your site CSS)
 content_css : "css/content.css",

 // Drop lists for link/image/media/template dialogs
 template_external_list_url : "lists/template_list.js",
 external_link_list_url : "lists/link_list.js",
 external_image_list_url : "lists/image_list.js",
 media_external_list_url : "lists/media_list.js",
 file_browser_callback : "tinyBrowser",
 // Replace values for the template plugin
 template_replace_values : {
 username : "Some User",
 staffid : "991234",
 }
	});
</script>

</head>
<body>
<?php
include("conexao.php");
$id =& $_GET['id'];

if(!empty($id)){

	$lista = mysql_query("SELECT * FROM conteudo WHERE id = $id");
	$row = mysql_fetch_array($lista);
}
$consulta = mysql_query("SELECT * FROM conteudo");
if ( $_SERVER[ 'REQUEST_METHOD' ] == 'POST' ){
	$titulo = $_POST['titulo'];
	$conteudo = $_POST['conteudo'];
	mysql_query("INSERT INTO conteudo (`id`, `titulo`, `conteudo`) VALUES (NULL, '$titulo', '$conteudo')");
	echo "<p>Informações salvas com sucesso.</p>";
}
?>
<h1>Editor</h1>
<form action="<?php echo $_SERVER[ 'PHP_SELF' ]; ?>" method="post">
	<h2>Titulo</h2>
	<input type="text" name="titulo"/>
	<h2>Conteudo</h2>
	<textarea name="conteudo"></textarea><br/>
	<input type="submit"/>
</form>
</body>
</html>
 

 

 

 **LISTAR.PHP**

 

 Aqui listamos todos os textos que foram criados para poder editar.

A única coisa legal nessa página é a forma como passar o ID por GET para a página de edição

no link

href='editar.php?id=".$row['id']."

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Hórus Energia | Área Administrativa</title>
<link href="../scripts/principal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Editor</h1>
<?php
include("conexao.php");
$busca = mysql_query("SELECT * FROM conteudo");

while($row = mysql_fetch_array($busca)){

	echo "<h2>".$row['titulo']."</h2>";
	echo "<p><a style='color: rgb(156, 47, 26);' href='editar.php?id=".$row['id']."'>Editar</a>";
}
?>
</body>
</html>
 

 

 **EDITAR.PHP**

 

 No editar.php é quase a mesma coisa do inserir a grande diferença é que em vez de usar o **INSERT** iremos usar o **UPDATE**.

 

 Outra peculiaridade dele é o uso do campo ID para saber de qual se trata e para poder mostrar as informações a serem editadas.

 

 Guardamos ele em um campo do tipo hidden quando abrimos a página que é pego por **$_GET**

 

 ** **

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<?php
include("conexao.php");
if ( $_SERVER[ 'REQUEST_METHOD' ] == 'POST' ){
	$titulo = $_POST['titulo'];
	$conteudo = $_POST['conteudo'];
	$id = $_POST['id'];
	mysql_query("UPDATE conteudo SET titulo = '$titulo' WHERE id = $id");
	mysql_query("UPDATE conteudo SET conteudo = '$conteudo' WHERE id = $id");
	$sucesso = "sim";
	echo "<meta HTTP-EQUIV='Refresh' CONTENT='1;URL=editar.php?id=$id'>";
}
$id =& $_GET['id'];

if(!empty($id)){

	$lista = mysql_query("SELECT * FROM conteudo WHERE id = $id");
	$row = mysql_fetch_array($lista);
}
?>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Editar</title>
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="tiny_mce/plugins/tinybrowser/tb_tinymce.js.php"></script>
<script type="text/javascript">
	tinyMCE.init({
 // General options
 language : "pt",
 mode : "textareas",
 theme : "advanced",
 plugins : "safari,pagebreak,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

 // Theme options
 theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,formatselect,fontselect,fontsizeselect",
 theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
 theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
 theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
 theme_advanced_toolbar_location : "top",
 theme_advanced_toolbar_align : "left",
 theme_advanced_statusbar_location : "bottom",
 theme_advanced_resizing : true,

 // Example content CSS (should be your site CSS)
 content_css : "css/content.css",

 // Drop lists for link/image/media/template dialogs
 template_external_list_url : "lists/template_list.js",
 external_link_list_url : "lists/link_list.js",
 external_image_list_url : "lists/image_list.js",
 media_external_list_url : "lists/media_list.js",
 file_browser_callback : "tinyBrowser",
 // Replace values for the template plugin
 template_replace_values : {
 username : "Some User",
 staffid : "991234",
 }
	});
</script>
</head>
<body>
<h1>Editor</h1>
<?php

if(isset($sucesso)){

	echo "<p>Informações editadas com sucesso!</p>";
}
?>
<form action="<?php echo $_SERVER[ 'PHP_SELF' ]; ?>" method="post">
	<h2>Titulo</h2>
	<input type="text" name="titulo" value="<?php echo $row['titulo']; ?>"/>
	<h2>Conteudo</h2>
	<textarea name="conteudo"><?php echo $row['conteudo']; ?></textarea>
	<input type="hidden" name="id" value="<?php echo $row['id']; ?>" />
	<br/>
	<input type="submit" value="editar" />
</form>
</body>
</html>
 **INDEX.PHP**

 

 A índex é a mais legal de todas J

lá temos a "pegação" dos conteúdos e a paginação batuta

por ter muita coisa legal fiz o comentário no código a baixo de cada parte dele.

OBS: não inseri os comentários nos arquivos para download

<?php
//CONECTA AO BD
include("conexao.php");

//Criamos a variavel $pagina caso não exista
$pagina =& $_GET['pagina'];

//Se a variavel não existir ela vai ser igual a 1
if(!isset($pagina)){

	$pagina = 1;
}

//Aqui são inseridas o número de textos a serem inclusos por página
$num_por_pagina = 5;

//Calculo para mostrar os registros em suas devidas páginas

$primeiro_registro = ($pagina*$num_por_pagina) - $num_por_pagina;

// SELECT para trazer os dados do BD limitando com o primeiro registro da página e a quantidade que deve ser mostrado
$lista = mysql_query("SELECT * FROM conteudo LIMIT $primeiro_registro, $num_por_pagina");

//Aqui começamos o loop de 'mostragem'
while($row = mysql_fetch_array($lista)){

?>
	<h1 class="ti_edit"><?php echo $row['titulo']; ?></h1>
	<p><?php echo $row['conteudo']; ?></p>
<?php
}

//Contamos o número total de textos para mostrar os numeros de páginas

$total = mysql_query("SELECT COUNT(*) FROM conteudo");
list($total_usuarios) = mysql_fetch_array($total);

//Criar a váriavel de total paginas
$total_paginas = $total_usuarios/$num_por_pagina;

// Seta as váriaveis para indicar se a paginação vai ou volta

$prev = $pagina - 1;
$next = $pagina + 1;

//já explicado anteriomente
$PHP_SELF = $_SERVER["PHP_SELF"];

// Aqui começa a sequencia de if para mostrar para qual página deve ir

if($pagina > 1){
	$prev_link = "<a class=\"links_pag\" href=\"$PHP_SELF?pagina=$prev\">Anterior</a>";

}else{

	$prev_link = "Anterior";
}
if ($total_paginas > $pagina) {
	$next_link = "<a class=\"links_pag\" href=\"$PHP_SELF?pagina=$next\">Próxima</a>";

}else{

	$next_link = "Próxima";
}
$total_paginas = ceil($total_paginas);
$painel = "";
for ($x=1; $x<=$total_paginas; $x++) {
	if ($x==$pagina) {
 $painel .= " [$x] ";
	}else{
 $painel .= " <a class=\"links_pag\" href=\"$PHP_SELF?pagina=$x\">[$x]</a>";
	}
}

// Mostra para o Usuário os link das páginas existentes
echo "$prev_link | $painel | $next_link";
****

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...