Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

GabrielFerrari

Editor de conteudo + Paginação

Por , em PHP

Recommended Posts

GabrielFerrari    41

GabrielFerrari
Postado

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">
<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">
<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">
<?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";

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos PHP
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito