[ Login | Register | Lost password? ]

Criando o blog - Parte IV - Admin/Ckeditor

Por: Junior Tada
26/02/2014

Painel de Administração do Site

Links para as partes um, dois e três.

Vamos criar um controller chamado admin.py com todas as funções de administração do site.

Dentro do controller admin, vamos criar as seguintes funções:

def painel():

  return dict()

def editor():

  categorias = db(db.categoria).select()

  return dict(categorias=categorias)

def painel_user():

  return dict(form=SQLFORM.grid(db.auth_user))

def grupo():

  return dict(form=SQLFORM.grid(db.auth_group))

def permissao():

  return dict(form=SQLFORM.grid(db.auth_membership))

def postagens():

  return dict(form=SQLFORM.grid(db.post))

def comentarios():

  return dict(form=SQLFORM.grid(db.comentario))

def categoria():

  return dict(form=SQLFORM.grid(db.categoria))

Na página do painel, teremos os links para as variadas funções que teremos no site. Coloque alguns ícones da sua escolha e de uma estilizada com css que o resultado pode ser bem interessante.

Agora crie a pasta admin dentro da pasta views. Dentro da pasta admin vamos criar os arquivos com os nomes das funções, como já foi explicado na parte III. Vamos lá: painel.html, editor.html, painel_user.html, grupo.html, permissao.html, postagens.html, comentários.html e categoria.html.

O arquivo painel.html ficará assim:

{{extend 'layout.html'}}

<h3 style="color: gray; margin: 20px;">Painel Administrativo</h3>

 

<nav id="option_panel">

<ul>

<li><a href={{=URL(request.application, c='admin', f='editor')}}><img src="../static/images/text-file-48.png" /><br>Editor</a></li>

<li><a href={{=URL(request.application, c='admin', f='painel_user')}}><img src="../static/images/businessman-48.png" /><br>Usuários</a></li>

<li><a href={{=URL(request.application, c='admin', f='grupo')}}><img src="../static/images/group-48.png" /><br>Grupos</a></li>

<li><a href={{=URL(request.application, c='admin', f='permissao')}}><img src="../static/images/key-48.png" /><br>Permissões</a></li>

<li><a href=""><img src="../static/images/upload-48.png" /><br>Imagens</a></li>

<li><a href={{=URL(request.application, c='admin', f='postagens')}}><img src="../static/images/info-48.png" /><br>Postagens</a></li>

<li><a href={{=URL(request.application, c='admin', f='comentarios')}}><img src="../static/images/coment-48.png" /><br>Coments</a></li>

<li><a href={{=URL(request.application, c='admin', f='categoria')}}><img src="../static/images/category-48.png" /><br>Categoria</a></li>

<li><a href={{=URL(request.application, c='admin', f='backup')}}><img src="../static/images/backup-48.png" /><br>Backup</a></li>

</ul>

</nav>

Lembrando que você pode fazer o visual da forma que quiser, escolha algumas imagens de ícones e arrume tudo pelo css.

Dentro dos arquivos painel_user.html, grupo.html, permissao.html, postagens.html, comentários.html e categoria.html iremos apenas herdar o layout e exibir o form pronto do web2py para o gerenciamento. Esse form está sendo enviado lá no return do controller. Assim estes arquivos ficarão assim:

{{extend 'layout.html'}}

{{=form}}

Já é possível ver/add/remover usuários do site, grupos, permissões, postagens, comentários e categorias. Porém, tudo isso é através de um crud pronto gerado automaticamente pelo web2py. Para funções simples isto não seria um problema, mas para criar novas postagens por exemplo é necessário uma ferramenta melhor.

 

CKEDITOR

Bom como nós estamos criando um blog, iremos utilizar uma ferramenta comum para postagem de conteúdos: CKEDITOR. Para quem não conhece, é um editor de texto implementado em javascript. Eu sempre vejo sites criados com php utilizando. Existe um plugin de web2py pronto para instalação, mas como vamos utilizar poucas funções vou explicar como utilizar sem precisar instalar nada, apenas utilizando o código js do ckeditor. Não se preocupe, pois o ckeditor é open source distribuído sobre as licenças GPL, LGPL e MPL. Além disso, é possível instalar vários plugins e skins para o ckeditor e ainda como todo bom open source, você pode customizar ou criar suas próprias funcionalidades. Não iremos tratar nada disso, vamos apenas utilizar o ckeditor como um editor de texto para nossas postagens. Aqui está o link para o site onde você pode escolher a versão que vai utilizar no seu site. Pode ser desde a versão mais simples até a full. Fica livre a escolha.

Após o download descompacte a pasta ckeditor dentro da pasta static/js da sua aplicação dentro do web2py.

Dentro da pasta views/admin crie o arquivo editor.html e dentro dele o seguinte conteúdo:

{{extend 'layout.html'}}

 

<!-- js para ckeditor -->

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

 

<h3 style="margin-left: 50px;">Postagem</h3>

<!-- form do publicar -->

<form id="editor_form" method="post" action={{=URL(request.application, c='home', f='publicar')}}>

<p><b>Título:</b> <input type="text" name="titulo" size="80px" /></p>

<p><b>Image:</b> <input type="text" name="img" size="78px" /></p>

<p><b>Tags:</b> &nbsp;<input type="text" name="tags" size="80px"></p>

<p><b>Categoria:</b><select name="categoria">

<option>Nenhuma</option>

{{for cat in categorias:}}

{{if cat:}}

<option>{{=cat.nome}}</option>

{{pass}}

{{pass}}

</select>

</p>

<textarea name="editor1">&lt;p&gt;Insira o Texto.&lt;/p&gt;</textarea>

<script type="text/javascript">

CKEDITOR.replace('editor1');

/*

function mensagem(){

texto = CKEDITOR.instances.editor1.getData();

alert(texto);

document.forms['editor_form'].elements['editor1'].value = texto;

}

*/

</script>

 

<input id="post_button" type="submit" value="Publicar" >

</form>

Aqui é uma das poucas partes do site onde iremos utilizar js. Basicamente adicionamos o arquivo .js do ckeditor, criamos um form html comum com um textarea chamado 'editor1' e com código js o ckeditor é colocado no local do textarea. Pronto. Muito simples.

No controller nos enviamos as categorias para que elas sejam colocadas dentro do combobox. Para isso é necessário que sejam criadas as categorias pelo painel admin/categorias.

Quando o usuário clicar no botão publicar, o conteúdo do form será enviado para o controller e função que você indicar na action da tag <form> do html. No meu caso, controller home função publicar. Vamos ver como fica o código:

def publicar():

nome_categoria = request.vars['categoria']

if nome_categoria != 'Nenhuma':

categorias = db(db.categoria.nome.contains(nome_categoria)).select()

for cat in categorias:

print cat

id_categoria = cat.id

else:

id_categoria = None

 

arm = request.vars['banco']

texto = request.vars['editor1']

titulo = request.vars['titulo']

image = request.vars['img']

tags1 = request.vars['tags']

tags2 = tags1.replace(' ','')

tags = tags2.split('.')

data_post = request.now

autor = auth.user.id

 

try:

db.post.insert(texto=texto, data=data_post, tipo='banco', titulo=titulo, autor=autor, tags=tags, image=image, categoria=id_categoria)

db.commit()

msg = 'Postado com Sucesso!'

 

except Exception, e:

db.rollback()

msg = 'Erro! Entre em contato com o administrador do Site'

raise e

 

return dict(msg=msg)

Aqui pegamos os dados dentro do request.vars com os nomes dos itens nos forms e inserimos esses dados no banco. Você pode escolher em exibir um alert para o usuário ou redirecionar para uma página informando sucesso ou erro. Eu escolhi uma página com uma mensagem. Portanto é necessário criar o arquivo publicar.html dentro da pasta views/home com o seguinte conteúdo:

{{extend 'layout.html'}}

{{=msg}}

Pronto! Toda a parte de administração do site está criada.

 

 

 

Categoria: Programação

Tags: ['programacao,python,web2py,web,html']

Comentários: