Статьи

CodeIgniter и Twitter Bootstrap

Июль 20, 2018

CodeIgniter и Twitter Bootstrap хорошо работают вместе. Особенно, если мы добавим библиотеку макетов из репозитория CodeIgniter Sparks. Я расскажу о создании простого веб-приложения с использованием начальной загрузки Twitter и CodeIgniter Sparks.

Настройте CodeIgniter

Создайте новый проект и загрузите новую версию CodeIgniter. Я создал новый виртуальный хост под названием, stories.devпотому что я получил идею для этого приложения, думая о том, как я мог бы представить короткие рассказы в Интернете. Вы можете называть все, что вам нравится, очевидно — только если у вас есть готовый виртуальный хост.

Настройте приложение

Вы должны установить $config['base_url']свойство http://stories.devили любой локальный домен, который вы используете. Я также выбрал автозагрузку пары помощников $autoload['helper'] = array('url', 'file');. Обратите внимание, что я не настроил базу данных — это приложение не нужно.

Установить искры

Как я уже сказал, CodeIgniter Sparks — это хранилище библиотек и компонентов, которое позволяет легко добавлять новые функции в ваше веб-приложение.

Чтобы установить его, из терминала убедитесь, что вы находитесь в каталоге вашего проекта, а затем выполните:

php -r "$(curl -fsSL http://getsparks.org/go-sparks)"

В терминале вы должны получить:

Extracting zip package ...
Cleaning up ...
Spark Manager has been installed successfully!

Если у вас возникнут проблемы, здесь вы найдете другие советы и варианты . ,

Добавление Bootstrap

Вы можете скачать Bootstrap здесь . Затем в корневой папке вашего проекта создайте папку с именем assets. Внутри этого создайте папки с именами ‘styles’, ‘js’ и ‘images’.

В загрузке Bootstrap вы найдете несколько файлов CSS и файл Javascript. Также будут некоторые иконки. Вы должны скопировать эти файлы в соответствующие места в вашей папке активов.

Создание библиотеки макетов

Мы создадим библиотеку макетов. На самом деле, форумы codeIgniter имеют хороший. Файл должен быть добавлен в application/library. Поскольку библиотека, кажется, исчезла из CodeIgniter Wiki, я добавлю ее в виде Gist:

<?php

/**
 * Layout management library based on:
 * a library that used to be in the CodeIgniter Wiki*
 * Extended layout placeholders and javascript and css files inclusion.
 */
class Layout
{

    public $obj;
    public $layout;
    public $js;
    public $css;
    public $placeholder;

    public function __construct($layout = "layouts/main_layout2")
    {
        $this->obj = & get_instance();
        $this->layout = $layout;
        $this->js = $this->css = $this->placeholder = array();
    }

    public function setLayout($layout)
    {
        $this->layout = $layout;
    }

    public function view($view, $data=null, $return=false)
    {
        $loadedData = array();
        $loadedData['content_for_layout'] = $this->obj->load->view($view, $data, true);
        if ($return)
        {
            $output = $this->obj->load->view($this->layout, $loadedData, true);
            return $output;
        } else
        {
            $this->obj->load->view($this->layout, $loadedData, false);
        }
    }

    public function load_js($file=null)
    {
        if (is_array($file))
        {
            foreach ($file as $f)
                $this->js[] = $f;
        }else
            $this->js[] = $file;
    }

    public function js()
    {
        $stream = "";
        foreach ($this->js as $js)
            $stream .= '<script type="text/javascript" src="' . $js . '"></script>' . "\n";

        return $stream;
    }

    public function load_css($file=null)
    {
        if (is_array($file))
        {
            foreach ($file as $f)
                $this->css[] = $f;
        }else
            $this->css[] = $file;
    }

    public function css()
    {
        $stream = "";
        foreach ($this->css as $css)
        {
            $stream .= '<link href="' . $css . '" rel="stylesheet" type="text/css" media="screen" />' . "\n";
        }
        return $stream;
    }

    public function placeholder($key, $value=null)
    {
        if ($value == null)
            return $this->placeholder[$key];
        else
            $this->placeholder[$key] = $value;
    }
}

Установите имя макета по умолчанию Layout.phpна что-то вроде:

public function __construct($layout = "layouts/default_layout")

Из приведенного выше фрагмента видно, что вам нужно создать папку с именем layoutsin application/views. Затем создайте файл с именем default_layout.phpи сохраните его в папке макета. Мы можем использовать начальный шаблон Bootstrap для нашего макета. Вам необходимо убедиться, что вы заменили пути к CSS на ваши локальные.

Удалите все ссылки на файлы Javascript на данный момент. Мы будем иметь дело с этим позже. Один важный фрагмент PHP для добавления это:

<?php echo $content_for_layout; ?>

Это отметит, где ваш фактический контент появится.

Использование макета

Теперь у нас есть библиотека макетов с <?php echo $content_for_layout ?>готовым к получению контентом. Мы также можем использовать заполнители для передачи заголовка страницы. В default_layout.phpдобавить это для заголовка страницы в голове:

<?=$this->layout->placeholder("title"); ?>

Затем в методе конструктора welcomeконтроллера вы можете установить заголовок страницы:

$this->layout->placeholder("title", "Short Stories");

Для того, чтобы загрузить контент для зрения вы почти просто сделать нормальный $this->load->view. Что вам нужно сделать , это: $this->layout->view('story_viewer', $data);. Это передаст содержимое представления в ваш макет.

Мы создадим помощник, который может использовать activeкласс для навигационных ссылок. Помощник выглядит так:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

function active($name, $number)
{
    $ci = get_instance();

    if($name == 'home' && $ci->uri->segment(2) == "" && $number == 1)
    {
        return "class='active'";
    }
    elseif($name=="about" && $ci->uri->segment(2) == "about" && $number == 2)
    {
        return "class='active'";
    }
    elseif($name=="story" && $number == 3)
    {
        return "class='active'";
    }
}

Затем в разделе nav нашего макета мы делаем это:

<ul class="nav">
    <li <?=active($page,1)?>><a href="/">Home</a></li>
    <li <?=active($page,2)?>><a href="<?=base_url()?>welcome/about">About</a></li>
    <li <?=active($page,3)?>><a href="<?=base_url()?>welcome/stories">Short Stories</a></li>
    <li <?=active($page,4)?>><a href="<?=base_url()?>welcome/contact">Contact</a></li>
</ul>

Вы заметите переменную с именем $pageвызывается. Это происходит из нашего метода контроллера:

//application/controllers/welcome.php
public function index()
{
    $data['page'] = 'home';
    $this->layout->view('pages/home', $data);
}

Очевидно, что мы меняем $data['page']значение по-разному для каждого метода контроллера, так что мы активируем только activeкласс для просматриваемой страницы.

Установка и использование CodeIgniter Spark

Далее мы установим Spark Markdown, чтобы мы могли писать наши реальные истории / статьи, используя Markdown. Spark отобразит их как HTML. Вот тот, который я использовал. Чтобы установить его, из терминала убедитесь, что вы находитесь в папке вашего проекта, а затем выполните:

php tools/spark install -v0.0.0 markdown-extra

Чтобы фактически использовать Spark, мы загружаем его в наш метод конструктора:

$this->load->spark('markdown-extra/0.0.0');

Затем в методе контроллера, который мы хотим использовать для анализа наших файлов Markdown, мы делаем это:

public function story()
{
    $page = $this->uri->segment(3);
    $md = file_get_contents(APPPATH . 'views/stories/' . $page . '.md');
    $data['html'] = parse_markdown_extra($md);
    $data['page'] = 'story';
    $this->layout->view('story_viewer', $data);
}

Здесь вы можете видеть, что я собираю имя страницы из сегмента URI. Затем я использую file_get-contentsфункцию PHP для загрузки файла Markdown, в котором я храню application/views/stories. Затем я использую Spark для анализа Markdown в HTML:

$data['html'] = parse_markdown_extra($md);

И передать его представлению, называемому story_viewer(в приложениях / представлениях). Представление story_viewerпросто нуждается в этом: <?=$html?>который просто выводит содержимое проанализированного файла.

storyМетод может обрабатывать любой файл Markdown вызывается из application/views/stories.

Больше соображений дизайна

Я добавил плавающее меню слева от страницы, что легко сделать с помощью Boostrap:

<div class="container">
  <div class="row">
    <div class="span3">
      <div class="well sidebar-nav">
        <ul class="nav nav-list">
          <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="nav-header">Sidebar</li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="nav-header">Sidebar</li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->

    </div>
    <div class="span9 content"><?php echo $content_for_layout ?></div>
  </div>
  <hr />
</div>

В заключение…

Итак, у нас есть Twitter Bootstrap, работающий с CodeIgniter 2.1.3. Вы также видели, как работают CodeIgniter Sparks. Это простое приложение, но, по крайней мере, вы можете увидеть, как можно собрать что-то более существенное. Мой пример доступен на Github .

32
Share: