Hello galera!
Na primeira parte do nosso tutorial vimos como configurar controlador para exibir o conteúdo da view, e criamos uma pasta onde armazenariamos todo o css, da enquete. Muito bem, hoje vamos criar o XHTML e o CSS, para uma boa apresentação dos dados posteriormente vindos do banco de dados.

>> se você não viu a primeira parte do tutorial clique aqui para acessá-la <<

Crie um arquivo base.css e salve dentro da pasta tema (system/application/tema/), esse arquivo conterá todo o estilo (fontes, cores, espaçamentos) das marcações xhtml dentro da página.

Abra a view home (system/application/view/home) e vamos criar a estrutura xhtml. Nessa etapa é necessário que você possua conhecimentos básicos de css e xhtml, porque não será possivel explicar a função de cada marcação xhtml, e as devidas formatações feitas com css.

O site do Maujor é uma ótima ferramenta para quem gostaria de se aprofundar nesse assunto.

XHTML (eXtensible Hypertext Markup Language), em portugues: Linguagem Extensível para Marcação de Hipertexto é uma reformulação da linguagem HTML baseada em XML. Por sua marcação possuir sentido semântico, consegue ser interpretado por qualquer dispositivo, além de todos os navegadores suportarem o XHTML.

O melhor método para saber se uma página na web foi bem construída é validar seu código fonte através de uma aplicação web disponibilizada pela organização W3C.

CSS (Cascading Style Sheet), em português folha de estilo em cascata, é simplesmente um mecanismo para adicionar estilos em páginas da web.

Bom galera para não fugir muito do assunto do nosso tutorial, se quiserem saber mais procurem alguns tutoriais no google usando palavras-chave como xhtml e css.

Antes de começarmos com a definição das divs e do css, é necessário carregar o helper url do codeigniter, porque vamos precisar usar o base_url(), função do codeigniter que retorna a url do site.

Se você trabalha com o codeigniter já deve saber a importância dessa função, essencial para exibir imagens, lincar páginas, lincar scripts externos, etc.
Você pode carregá-la simplesmente adicionando o seguinte código no seu controller:

function index(){
$this->load->helper('url');
}

Isso deve ser feito sempre que criar um novo controller.
Mas, para economizar linhas de código, abra o arquivo autoload.php dentro de system/application/config.
Localize a array:

$autoload['helper'] = array();

mude para

$autoload['helper'] = array('url');

Assim toda vez que seu sistema for iniciado automaticamente o helper url também será carregado, evitando ter que usar $this->load->helper(‘url’); em todos os controllers que você for utilizar em seu sistema.
Você pode fazer o mesmo com as libraries, plugins, models, é só adicioná-los na array de autoload, você encontra instruções no arquivo correspondente de cada item no manual do codeigniter.

Agora finalmente vamos ao código xhtml, lembrando que esse código deve ser inserido na view home.


    
        :: Tutorial – Criar enquete em PHP usando codeigniter parte II ::
    
    
    	
Pergunta da enquete
obrigado por votar
Resultado Parcial
50%
50%
120

Blz galera, mas essas marcações ainda estão sem as formatações em css. No arquivo base.css adicione o seguinte código:

/***************
*  CSS ENQUETE
***************/
body{
margin:0px;
font-family:Tahoma, Geneva, sans-serif;
font-size:9pt;
color: #373737;
}
#blocoenquete{
padding-top:8px;
}
#bannerenquete{
float:left;
border:1px solid #C5E8F9;
}
#dados_enq{
width:199px;
padding-left:6px;
float:left;
}
#dados_enq b{
color:#003E9B;
}
#blocoopcoes{
margin-top: 5px;
padding-left: 10px;
}
#BlocoEnq{
height:67px;
}
#blocoopcoes input{
margin:3px 0px 3px 0px;
}
#blocoopcoes label{
margin:3px 0px 3px 0px;
}
#enqt_results{
display:none;
}
#msgenquete{
width:161px;
height:17px;
margin:0 auto;
margin-top:13px;
color:#003E9B;
text-align:center;
}
#enq_enviar, #enq_resultado{
display:block;
width:50px;
height:20px;
border:0px;
color:#003E9B;
font-weight:bold;
float:left;
}
#enq_resultado{
width:100px;
}
#resultados{
padding-top:10px;
font-size:8pt;
}
#resultados b{
display:block;
clear:both;
color:#1F1A17;
font-size:9pt;
}
.label_enquete{
display:block;
width:60px;
float:left;
clear:left;
}
.eqt_bar{
width:100px;
height:7px;
background-color:#CBDFE4;
float:left;
margin-top:5px;
}
.eqt_bar div{
height:7px;
background-color:#90BAC6;
}
.porcentagem{
width:38px;
float:left;
text-align:center;
}
#totalvotos{
padding-top:7px;
clear:both;
}

Esse código que dará toda a formatação às marcações xhtml. Agora basta lincar esse arquivo css entre as tags <head></head> da view home, utilize o  seguinte código:


Assim, se você visualizar sua página no navegador, verá como ficará a exibição dos dados da enquete, que será feita nas próximas etapas.
Bom gente hoje é isso, baixe os arquivos dessa segunda etapa, e compare com os que você já tem. Veja se está tudo conforme foi feito.

Na próxima etapa vamos criar as tabelas do banco de dados. Uhuuu ta ficando loco minha gente, ebaaa!! 😉
flw moçada! abraços.

[download id=”15″]


quinta-feira, 26 novembro - 2009
por


  1. Diogo on quinta-feira 26, 2009

    Olá, bacana seu tutorial, estou começando a usar o CodeIgniter mas tenho dúvida sobre a estruturarão dele, digo na parte das pastas. O certo não seria no link do css chamar apenas por “/tema/base.css”?

    Como seria pra fazer do modo que disse acima? Gostaria de deixar apenas na pasta public_html o que realmente interessa, já preparando pra qnd for publicar o site.

    Obrigado pela iniciativa.

  2. Marlon Teixeira on quinta-feira 26, 2009

    Olá Diogo, se você está começando agora usar o codeigniter, recomendo ler alguns tutoriais para iniciantes, mas é bastante comum ficar em dúvida sobre a função de cada diretório. Agora em relação ao link do css, não funcionaria chamar por “/tema/base.css”, porque o codeigniter não sabe que esta pasta existe, nós é que a criamos porque definimos que todo o style do tutorial ficaria nesta pasta. Portanto, para fazer o link, escrevemos o base_url(), que retornaria no nosso caso – http://localhost/enquete e montamos o caminho entre as pastas até localizar o nosso base.css

    Quando você for publicar seu site, você precisa transferir toda a pasta no nosso caso “enquete” para o servidor, e no arquivo config.php system/application/config/config.php
    na array

    $config[‘base_url’] =’http://localhost/enquete’

    mudar para o endereço de seu site

    $config[‘base_url’] =’http://seusite.com.br’

    Espero que tenha ajudado, obrigado por comentar! abraço.

  3. […] anteriores desse tutorial clique nos links abaixo para visualizá-las: – Enquete com PHP parte I – Enquete com PHP parte II – Enquete com PHP parte […]


0

Spam protection by WP Captcha-Free


Tweetar