Integracja IPB - Komponent Artykułów

W tym warsztacie zajmiemy się stworzeniem prostych komponentów opartych o IPB. W ostatniej lekcji dowiedzieliśmy się jak wyświetlić awatar użytkownika oraz jak pobrać tablicę z danymi o użytkowniku. Wykorzystamy te dane do stworzenia prostego "bloku" użytkownika.

Wykonanie

Żeby nasz warsztatowy kod ładnie wyglądał wypada użyć jakiegoś prostego ładnego szablonu. Może to być już jeden z wcześniej przerabianych lub też jakiś nowy, ja wybrałem szablon "TimeToRest" do pobrania stąd
Szablon dodałem do CI jako widok (poprawki ścieżek do CSS i grafik) i moja strona zaczęła wyglądać tak:

Usunąłem przykładowy tekst z szablonu/widoku index.php i dodałem wyświetlanie zmiennej $content:

<!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=utf-8" />
<title>Artykuły z IPB</title>
<link rel="stylesheet" href="<?PHP echo base_url(); ?>system/application/views/style.css" type="text/css" />
</head>
<body>
<div id="wrap">
     <div id="header"><img src="<?PHP echo base_url(); ?>system/application/views/images/header.jpg" width="768" height="120" alt="Time To Rest" /></div>
     <div id="navigation">
          <ul>
          <li><a href="<?PHP echo base_url(); ?>">Strona Główna</a></li>
          </ul>
     </div>
     <div id="content">
          <?PHP echo $content; ?>
     </div>
     <div id="footer">| <a href="<?PHP echo base_url(); ?>">Strona Główna</a> | Designed by <a href="http://www.four-closure.com/">Donny Burnside</a> |</div>
</div>
</body>
</html>

A widok main przerobiłem na:

<?php
error_reporting(E_ALL ^ E_NOTICE);
class Main extends Controller
{
function Main()
     {
     parent::Controller();
     $this->response = array();
     
     $this->load->script('ipbsdk_class.inc');
     $this->sdk = new IPBSDK();
     }
function index()
     {
     $this->response['content'] = $this->sdk->get_avatar();
     $this->load->view('index', $this->response);
     }
}

Co dało efekt:

Awatar pokaże się jeżeli mamy takowy ustawiony. Jeżeli nie to nic nie zostanie wyświetlone. Teraz wypada dodać dodatkowe dane za pomocą metody get_advinfo () - dającej więcej danych niż get_info :) Tworzymy widok profil.php:

<div style="float: right; width:300px; border: 1px dashed gray; padding:5px; margin-left:8px; font-size:11px;">
<b>Witaj <?PHP echo $name; ?></b>
<center><?PHP echo $avatar; ?></center>
<B>Postów</B>: <?PHP echo $posts; ?><BR>
<B>Data Dołączenia:</B>: <?PHP echo date("Y-m-d", $joined); ?><BR>
<B>Ostatni Post:</B>: <?PHP echo date("Y-m-d", $last_post); ?>
</div>

A widok zmieniamy do postaci:

<?php
error_reporting(E_ALL ^ E_NOTICE);
class Main extends Controller
{
function Main()
     {
     parent::Controller();
     $this->response = array();
     
     $this->load->script('ipbsdk_class.inc');
     $this->sdk = new IPBSDK();
     }
function index()
     {
     $user = $this->sdk->get_advinfo();
     $user['avatar'] = $this->sdk->get_avatar();
     $this->response['content'] = $this->load->view('profil', $user, True);
     $this->response['content'] .= '<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>';
     $this->load->view('index', $this->response);
     }
}

Tablicę zwróconą przez get_advinfo przypisujemy do zmiennej $user a następnie dodajemy dane awatara. Tablicę $user przekazujemy do widoku profil a wynik do szablonu głównego. Wynik:

Małe wyjaśnienie odnośnie stylu zawartego w DIVie widoku profil. Mamy tam: float: right co oznacza iż zawartość DIVa ma być ustawiona po prawej stronie i "omywana" przez zewnętrzny tekst.
Teraz trzeba zapełnić treścią resztę strony. Wyobraź sobie moduł artykułów - Treść tematu (pierwszego jego posta) to treść artykułu a kolejne posty to jego komentarze. Przeglądając dokumentację SDK znajdziemy pod Topics dwie ciekawe dla nas metody: get_topic_info - zwraca tablicę z danymi o określonym poprzez numer ID temacie, list_topic_posts - listuje posty tematu... Dodatkowo pod zakładką Forum znajdziemy list_forum_topics - listujące tematy z forum. Szczegóły po kolei.

Komponent artykułów

Tworzymy widok art_loop.php

<?php
<?PHP
foreach($arts as $val)
     {
     echo '<a href="'.site_url('main/show/'.$val['tid']).'"><B>'.$val['title'].'</B></a> - '.$val['description'].' <B>Autor</B>: '.$val['starter_name'].'<BR>';
     }
?><BR><BR><BR><BR>

A kontroler modyfikujemy:

<?php
error_reporting(E_ALL ^ E_NOTICE);
class Main extends Controller
{
function Main()
     {
     parent::Controller();
     $this->response = array();
     
     $this->load->script('ipbsdk_class.inc');
     $this->sdk = new IPBSDK();
     }
function index()
     {
     $user = $this->sdk->get_advinfo();
     $user['avatar'] = $this->sdk->get_avatar();
     $this->response['content'] = $this->load->view('profil', $user, True);
     $arts = $this->sdk->list_forum_topics(2);
     $this->response['content'] .= $this->load->view('art_loop', array('arts' => $arts), True);
     $this->load->view('index', $this->response);
     }
}

W kodzie pojawia się:

$arts = $this->sdk->list_forum_topics(2);

Metoda list_forum_topics pobiera tablicę złożoną z tablic zawierającą informacje o tematach z forum o podanym numerze ID. Tablicę tą przekazujemy do widoku i tam wyświetlamy.

'.site_url('main/show/'.$val['tid']).'

Załóżmy że main/show/ID będzie linkiem pokazujący dany artykuł. Stąd ten link w widoku. Wynik naszej pracy wygląda mniejwięcej tak:

Notka: w ustawieniach forum ustawia się kodowanie. Należy wybrać utf-8 lub jeżeli mamy problemy - iso-8859-2 (wtedy wypada zmienić kodowanie w naszym głównym widoku na iso).

Artykułów ciąg dalszy

Tworzymy w kontrolerze Main metodę show odpowiedzialną za pokazanie "artykułu":

<?php
function show()
     {
     $id = $this->uri->segment(3);
     IF(isset($id) and is_numeric($id))
          {
          $ar = $this->sdk->get_topic_info($id);
          $this->response['content'] = $this->load->view('art', $ar, True);
          $this->load->view('index', $this->response);
          }
     }

get_topic_info zwraca tablicę z danymi o temacie określonym numerem ID. U nas ten numer pochodzi z linka. Tablicę z danymi przekazujemy do widoku art:

<?PHP echo $title; ?>
<b><?PHP echo $description; ?></b><BR><BR>

<?PHP echo $post; ?>

<HR>
<B>Komentarzy</B>: <?PHP echo $posts; ?> | <B>Odsłon</B>: <?PHP echo $views; ?>

Temat na forum:

I na naszej stronie:

I w taki oto prosty sposób zrobiliśmy prostą stronę korzystającą z elementów IPB. W kolejnym warsztacie zajmiemy się komentarzami, dodamy kilka "usprawnień" do bloku użytkownika oraz obmyślimy koncepcje innych komponentów opartych o IPB SDK.

RkBlog

Kurs Code Igniter, 14 July 2008, Piotr Maliński