Как сделать таблицу в джумле

Обзор Droptables. Создание прайс листа в Joomla

Думаю, что многие владельцы сайтов сталкиваются с необходимостью представления данных на своём сайте в виде таблицы. В редакторе материалов Joomla есть различные инструменты, которые позволяют создать и оформить таблицу. Но этих средств может не хватать, если Вы хотите красиво оформить таблицу, дать возможность Вашим пользователям сортировать в ней данные по столбцам, адаптировать её под мобильные устройства, добавить график по значениям, красиво оформить прайс лист и др. Безусловно, всё это можно сделать при помощи HTML и CSS, но если Вы в достаточной мере не владеете данными языками, тогда Вам поможет Droptables.

В обзоре будет участвовать последняя на момент написания статьи (07.04.2015) русскоязычная версия Droptables 2.0.1 в Joomla 3.4.1 (редактор TinyMCE 4.1.7), шаблон сайта «Protostar».

Основные возможности

Рассмотрим основные возможности компонента таблицы Joomla.

Также стоит отметить наличие документации и технической поддержки на английском языке. Сам компонент (по состоянию на 08.04.2015) доступен на русском, украинском, английском, французском, немецком и португальском языках. А также частично переведен на польский и испанский.

Красивые таблицы Joomla

Приведу примеры таблиц и графиков, которые сделаны при помощи Droptables.

Droptables Таблицы Joomla 3 Прайс лист Joomla Красивые таблицы Joomla Красивые таблицы Joomla (1) Красивые таблицы Joomla (2)

«Живые» примеры данных таблиц и графиков можно посмотреть на демонстрационном сайте разработчика.

Таблицы Joomla 3

Внутри редактора Вы видите серую область – это признак вставленной при помощи Droptables таблицы. По нажатию на кнопку Таблицы – Droptables появится редактор таблиц (рисунок ниже).

Компонент таблиц Joomla

В его левой части расположены инструменты (рисунок ниже), которые позволяют упростить работу с таблицами, если у Вас их много. При помощи кнопки Новая категория можно создать категорию таблиц. По нажатию на Добавить новую таблицу можно будет ввести имя для новой таблицы в категории, а если подвести курсор к имени таблицы после её создания, то появятся три инструмента (слева направо):

Средняя часть Droptables самая большая. В ней непосредственно создаётся таблица. Про графики поговорим немного ниже. Нажимая на кнопки с плюсами справа и снизу от основной области таблицы (рисунок ниже), можно добавлять столбцы и строки.

Создание таблицы

При нажатии правой кнопки мыши на ячейку появится контекстное меню (рисунок ниже).

Нажимая на заголовки столбцов (буквы) или на заголовки строк (цифры) можно выделить весь столбец или всю строку соответственно.

Контекстное меню ячейки

Вычисления в таблицах Joomla 3 напоминают Excel. Доступны такие функции:

В правой части Droptables доступны такие вкладки:

Рассмотрим вкладку Таблица (рисунок ниже).

Формат

Рассмотрим вкладку Формат (рисунок ниже). На данной вкладке компонент таблиц Joomla предоставляет ряд элементов для визуального оформления содержимого ячеек и их границ.

Он немного напоминает стандартный режим TinyMCE и позволяет вставить и отформатировать (задать начертание, отступы, выравнивание, стиль, гарнитуру, размер и цвет текста) внутри ячейки различное содержимое: текст, изображения, ссылки, нумерованные и маркированные списки. Также вставить фрагмент произвольного HTML кода (нажав на кнопку Source).

Как видите, настроек достаточно много. Но это не все доступные в арсенале Droptables опции. Перейдём к рассмотрению вкладки Ещё.

Таблицы Excel и Joomla

Как уже упоминалось ранее, Droptables позволяет производить импорт\экспорт между Excel и Joomla 3. Для этого служат инструменты на вкладке Ещё (рисунок ниже).

Выяснить нужные классы стилей можно при помощи встроенных или сторонних средств для разработчиков в браузере. На рисунке ниже это Firebug 2.0.9 в Mozilla Firefox 37.0.1.

«r» – строки, «c» – столбцы.

Графики

Вы можете дополнить свои таблицы Joomla 3 графиками (диаграммы). Для этого в левой области Droptables выберите таблицу, по которой необходимо построить график, выделите в ней диапазон ячеек, по которым необходимо строить график, и нажмите в верхней части кнопку Добавить новую таблицу. Перед Вами появится редактор графика (рисунок ниже).

График

Доступны такие виды графиков (диаграмм) как (по аналогии с Excel): «С областями», «Гистограмма», «Заполненная лепестковая», «Полярные области», «Круговая», «Кольцевая» – на рисунке выше они расположены слева направо, сверху вниз.

Русификатор Droptables

Как видите, Droptables весьма функциональный компонент таблиц Joomla 3 при помощи которого достаточно просто можно сделать функциональный и красивый прайс лист или любую другую таблицу.

Источник

Создание редактируемой таблицы в joomla

Сразу хочу сказать, что почти не имею опыта работы с joomla. Занимался только выводом простых статей. Возникла необходимость вывода на сайт редактируемой таблицы в виде новостей. Пример таблицы http://www.sferasro.ru/stroite. era-a.html

Может требуется написание собственного модуля? Как правильно решить данную проблему?

Буду благодарен полезной информации по теме.

Хранение редактируемой таблицы перед записью в базу данных
Задача хранить таблицу заполняемую из DropDownList и TextBox перед записью в базу данных. При этом.

Таблицы в joomla 2.5
Подскажите компонент для создания таблиц с возможностью сортировки и поиска по таблице Заранее.

Таблицы БД в joomla 2.5
Обновил joomla 1,5 до 2,5. Перенес все файлы с папки jupgrade на уровень вверх. В БД остались.

выгрузка таблицы 1С в joomla 2.5.7
Добрый день жители форума. Возникла проблема при выгрузке табл из 1С в joomla. Думал выгружать.

Это у тебя не просто таблица, а какае то информационная база.

Ну конечно лучше выводить с помощью модуля, и как то надо сократить кол-во столбцов, потому что их очень много и они даже не влезают на ширину страницы.

А каким образов выводи эти данные на страницу. может какой компонент.

Эта таблица с новостями похожая на блог. В каждом из разделов будет открываться эта таблица. Меняться будут только новости.
Здесь требуется и фильтрация и возможность администратора постоянно пополнять таблицу новыми новостями.

Проблема осложняется тем, что поставить это нужно на joomlа. Пытался под нее найти модуль, однако они все очень ограниченные в возможностями.

Добавлено через 2 минуты
Как вообще такая таблица реализована здесь?
Может в joomla в принципе это сделать нельзя?

Может создать свой модуль, с использованием таблицы типа http://ruseller.com/lessons.php?id=227&rub=28

Добавлено через 23 часа 58 минут
Ребята подскажите плиз, с чего начать? Что использовать в работе?

Добавлено через 1 минуту
Ребята, подскажите плиз, с чего хотя бы начать? Где искать информацию?

Чем дальше начинаю разбираться, тем больше усложняется задача.
Оказалось создание простой таблицы дело не обойдется. Да действительно есть и плагины и с помощью К2 такую таблицу создал. Однако это не типовой проект, требуется изменение кода, а именно

1) При создание новой статьи в joomla, она должна выводится в определенной категории как блог, но отображаться в виде таблицы.

2) Собранные статьи нужно форматировать по определенным критериям в таблице

3) Сама таблица состоит из нескольких колонок(дата изменения, категория, новость, последствия новости).

4) При нажатии на новость, она открывается более подробно. С правой стороны от нее, появляется картинка.

Решить проблему не получилось, а залезть в код для меня темный лес, только время потерял.
Посоветуйте порядочного кодера, где можно найти? Сомневаюсь, что подобные темы ранее разбирались

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

Перенос таблицы с базой данных с jomla 1.5 на joomla 3
Друзья, привет! Подскажите пожалуйста как перенести таблицу с материалами с 1.5 на joomla 3.

Создание шаблона/ Joomla 1.5
Привет всем! Начал как-то делать свой шаблон, и вот не получается справиться с некоторыми штуками.

Создание шаблона joomla
Добрый вечер уважаемые программисты. Я только начал изучать joomla, не подскажете ли мне хорошую.

Создание сайта на Joomla 1.5
Доброго всем дня. Хочу сразу сказать, что опыта создания сайтов я не имею вообще. На новом месте.

Источник

Joomla Custom Fields – настраиваемые поля в Joomla

Начиная с версии Joomla 3.7, в CMS добавлен функционал настраиваемых полей (Custom Fields). Это означает, что теперь вы можете добавить к материалам, категориям, пользователям (профилям пользователей) и контактам Joomla дополнительные поля разных типов. Эти поля можно будет заполнять при создании контента, и их значения будут отображаться как его часть.

В этой статье мы рассмотрим все типы настраиваемых полей, доступных в Joomla, а также примеры их использования на сайте.

Введение в управление настраиваемыми полями Joomla

В Joomla нам доступно два новых менеджера, связанных с управлением настраиваемыми полями. Это Поля (Fields) и Группы полей (Field Groups). Данные менеджеры для материалов, пользователей и контактов является разными. Это означает, что для материалов есть свои менеджер полей и групп полей, для пользователей свои, и для контактов также свои. Между собой они не пересекаются.

В данной статье мы будем рассматривать все поля на примере материалов Joomla. Для пользователей и контактов все будет аналогично, с той лишь разницей, что вам нужно будет использовать другой соответствующий менеджер.

Рассмотрим доступы к различным менеджерам:

Для менеджера контактов разделение на поля контакта, формы обратной связи и категории контактов выполнены не слишком очевидно. Переключаться между этими типами контента вы можете с помощью фильтра в менеджере полей компонента контактов. Думаю, рисунок покажет это лучше:

И еще пара дополнительных замечаний:

Группы полей и их использование

Ничего особенно интересного в группах полей нет. Это что-то аналогичное категориям материалов для материалов, только проще. Группы позволяют более удобно разделять поля на группы, уж простите за тавтологию. Каждая группа полей, при создании материала, будет показываться отдельной вкладкой. Это может быть удобно, если полей много и нужно их как-то классифицировать:

Типы полей и их отображение на сайте

В настоящее время нам доступно 15 различных типов дополнительных полей. Это:

Каждый тип поля имеет как общие опции, так и свои уникальные.

Для начала рассмотрим общие опции, которые повторяются для всех типов полей:

Остальные опции, не приведенные в списке выше, являются уникальными для отдельных типов полей. Они становятся доступными для заполнения, когда выбран тот или иной тип поля в одноименной опции. Уникальные опции рассмотрены ниже, отдельно для каждого поля.

Поле «Календарь (calendar)»

Позволяет задавать дату и время через удобный всплывающий календарь.

Источник

Как сверстать шаблон для Joomla

Введение

Добавление шаблона

Для начала, в любом удобном для вас месте создайте папку нашего шаблона «whitesquare». В ней должны находиться три подпапки: css, images и language. В папках css и images создайте файлы index.html со следующим содержимым:

Эти файлы являются заглушками и, по требованиям CMS, должны отображать пустую страницу при обращении к этим папкам напрямую.
Далее, в папке css создайте пустой файл стилей template.css, а в папке language подпапку en-GB, которая будет содержать пустой файл en-GB.tpl_whitesquare.ini и файл en-GB.tpl_whitesquare.sys.ini со следующим содержимым:

Давайте подробно разберем, что все это значит. Папка language нужна для локализации, она может содержать подпапки с различными языками: en-GB, ru-RU и т.д. Каждая языковая папка включает два файла с ключами. Ключи представляют собой пару с названием ключа и его значением. Названия ключей для разных языков будут одинаковыми, а значения – разными. Такой механизм позволяет использовать шаблон для создания сайтов на разных языках. Поскольку это учебный пример, будем использовать только английский язык – en-GB. Первый файл en-GB.tpl_whitesquare.ini будет содержать ключи, которые увидят пользователи сайта, а второй — en-GB.tpl_whitesquare.sys.ini будет содержать ключи административных функций.
Далее нужно создать пустые файлы component.php, error.php и index.php. Они нам понадобятся в будущем.
Следующим шагом добавим картинки: favicon.ico, template_preview.png и template_thumbnail.png. Последние две – это превьюшки будущего шаблона и они имеют размеры 640х480 и 206х150 соответственно.
Последний файл, который нужно добавить – это templateDetails.xml. На данном этапе — это самый важный файл, он содержит подробное описание нашего шаблона:

Предварительный осмотр

Если посмотреть на макет, то можно увидеть, что наша страница состоит из шапки и футера, которые повторяются на всех страницах. Также, на всех страницах, кроме главной, есть сайдбар слева и название страницы. Поиск и все виды меню мы оформим в виде модулей Joomla!, а все тексты будут оформлены через механизм локализации.

Структура страниц

Большинство руководств по созданию шаблонов для Joomla! ограничивается созданием макета и стилей для него. Мы же опишем весь порядок действий по созданию полноценного сайта на Joomla! в рамках предоставленных макетов.

Шаблон страницы

Следующим шагом нам нужно сделать шаблон страницы Joomla! Откройте файл index.php, который мы создали в папке нашего шаблона и добавьте в него код, который создаст каркас страницы:

После этих действий у нас должна появиться серая страница с большим нестилизованным заголовком. К нему мы вернемся позже.

Логотип

После того, как мы закончили с каркасом основной страницы, приступим к ее наполнению. Начнем с логотипа. Сохраните изображение логотипа в images/logo.png. В блок header нашего шаблона вставьте разметку для логотипа:

В качестве альтернативного текста для изображения вставляется текст через стандартную функцию локализации Text::_(). Ключа TPL_WHITESQUARE_LOGO у нас еще нет, поэтому давайте добавим его в файл \language\en-GB\en-GB.tpl_whitesquare.ini:

К сожалению, после этого текст не появится на странице сайта. Дело в том, что мы добавляем ключ локализации в шаблон, который уже используется системой, а Joomla! так устроена, что она читает ключи локализации из этого файла только при первоначальной установке шаблона. Можно конечно удалить шаблон и добавить его в систему заново, но мы поступим проще – добавим этот же ключ в системный файл \language\en-GB\en-GB.tpl_whitesquare.ini, где – это папка, в которую установлена Joomla!

Форма поиска

После этого вернитесь в Module Manager и откройте модуль Search на редактирование. И в полях укажите следующие значения:
Box Label: пробел
Box Text: Search
Search Button: Yes
Button position: Right
Search Button Image: No
Button text: GO
Show Title: Hide
Position: Whitesquare Search
А на вкладке Advanced в поле Module Class Suffix введите «-block». Это позволит разделить стили формы поиска от содержимого страницы поиска.
Теперь, когда модуль подготовлен, нужно вставить его в шаблон index.php:

Осталось добавить стили в template.css:

Навигация

Далее откройте templateDetails.xml и добавьте позицию главного меню:

На данном этапе меню уже появится на страницах, но без стилей. Стилизуем его:

Заголовок страницы

Joomla! автоматически вставляет заголовки статей в содержимое страницы, но на главной странице нам заголовок не нужен, а на других, он должен иметь совсем другую верстку, поэтому давайте просто отключим автоматическую вставку заголовка и вставим заголовок внутри шаблона так, как это нам нужно.
Для начала немного теории. Настройки отображения элементов страниц задаются в Joomla! в трёх местах:

Теперь нужно стилизовать получившийся блок. Сохраните фон заголовка в файл images /h1-bg.png и добавьте стилевые правила:

Футер

Теперь приступаем к самой сложной части нашего шаблона. Давайте нарежем изображения и сохраним их в в папку images

images/footer-logo.png – логотип футера
images/social.png – спрайты больших иконок
images/social-small.png – спрайты маленьких иконок

В этом блоке используется несколько локализованных строк, давайте их добавим в файлы локализации, как мы делали в блоке логотипа:

Прописываем стили в template.css:

В итоге внутренняя страница сайта должна выглядеть вот так:

Главная страница

Главная страница у нас уже создана. Наполнение ее контентом выходит за рамки создания шаблона Joomla!, однако мы попытаемся воссоздать полную картину из psd макета и наполним контентом главную страницу. Содержимым страница наполняется из панели администратора для того, чтобы владелец сайта мог зайти в эту панель и что-то изменить на странице, не изменяя код самого шаблона. Первым делом необходимо нарезать все изображения этой страницы и сохранить в папку images, которая находится в корне папки, где установлена Joomla!. Назовём эти изображения так:

Теперь осталось стилизовать данный код.

Сайдбар

Если вы посмотрите на psd макеты, то увидите, что внутренние страницы отличаются от главной наличием левой колонки.

Давайте добавим его в index.php перед вызовом контента страницы:

Этот блок будет выводиться на всех страницах, кроме главной. Здесь верстка состоит из двух частей: отображение навигации подменю и блок карты офисов.
Для полноты картины в качестве подменю предлагаю показать список всех постов на сайте. Подменю создается аналогично тому, как мы создавали другие виды меню. Создайте статьи под названиями: Lorem ipsum, Donec tincidunt laoreet, Vestibulum elit, Etiam pharetra, Phasellus placerat. Затем создайте новое меню под названием Submenu и добавьте в него вышеперечисленные страницы. После этого, создайте позицию submenu в templateDetails.xml и модуль Submenu, использующий эту позицию и меню Submenu. В свойствах модуля на вкладке Advanced укажите Menu Class Suffix: «-aside»
Блок карты особых вопросов не вызывает, не забудьте только добавить новый ключ локализации:

В качестве заглушки для карты создайте пустой файл sample.png и сохраните его в папку images в корне сайта Joomla!
В заключение, нам нужно добавить стили для вёрстки:

Страница About us

Теперь давайте наполним содержимым страницу About us. По той же схеме, как мы наполняли главную страницу – подготовьте изображения и добавьте их в папку images сайта Joomla! Назовите изображения вот так:

about-1.png
about-2.png
team-Nobriga.jpg
team-Pittsley.jpg
team-Rousselle.jpg
team-Shoff.jpg
team-Simser.jpg
team-Tondrea.jpg
team-Venuti.jpg
team-Wollman.jpg

И стили в template.css:

Страница поиска

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

Модуль поиска предусматривает, что в шаблоне должна быть иконка поиска для кнопки, но поскольку в дизайне ее нет, то придется добавить ее самим. Для этого найдите любую бесплатную иконку с изображением лупы и сохраните ее под названием search.png в папку images шаблона. Размер картинки должен быть 16х16 пикселей.

Страница печати

Как вы видите, этот файл полностью повторяет структуру файла index.php. Отличие только в том, что мы убрали ненужные для печати блоки: шапку, футер и боковую колонку.

Страница ошибки

Последняя страница, которую осталось оформить – это страница вывода ошибки. Ее шаблон описывается в файле error.php. Код этого файла будет выглядеть следующим образом:

В целом структура здесь аналогична предыдущим страницам, но есть несколько нюансов. Во-первых, данный тип страницы не поддерживает конструкции вида « », поэтому пришлось отказаться от всех модулей и даже динамического блока head, поэтому теги в блоке head прописаны вручную. В заголовке страницы появился новый ключ локализации: TPL_WHITESQUARE_ERROR со значением «Error». Не забудьте прописать его в файлах локализации. И в области контента страницы выводится сообщения с кодом и текстом ошибки.

Заключение

На этом создание шаблона Joomla! закончено. Готовый проект можно скачать здесь.

Источник