Уроки MODx Revolution

Скачать материалы к учебному курсу - папка distr_MODx.zip

---

Урок 1. Установка и настройка CMS MODx Revo на хостинге

Предварительно скачайте папку distr_MODx со всеми необходимыми материалами.

1. Зайдите в аккаунт на Beget. В панели управления найдите адрес вашего сайта. Он находится в левой колонке в разделе Тех. информация под названием Сервер (рис. 1). Адрес вашего сайта будет другим. Этот адрес надо копировать в адресную строку браузера, чтобы просмотреть содержимое вашего сайта.

Рисунок 1

Теперь надо прикрепить домен/имя нашего сайта к директории public_html.

2. Если Вы создали аккаунт впервые и еще не работали с сайтами, то по умолчанию домен должен быть прикреплен к директории public_html. Чтобы в этом убедиться, в панели управления найдите раздел Сайты.

Рисунок 2

3. Зайдите в этот раздел, и, если Вы видите, что раздел Сайты и прилинкованные домены уже есть (рис. 3), тогда переходите к выполнению пункта 9. Если этого раздела нет, тогда необходимо проделать п. 4-8

Рисунок 3

4. Введите имя вашего сайта и нажмите кнопку Создать (рис. 4).

Рисунок 4

5. Сайт должен появиться в списке (рис. 5).

Рисунок 5

6. Нажмите кнопку Прикрепить домен (рис. 6).

Рисунок 6

7. Появится окно, в котором надо нажать кнопу Прикрепить (рис. 7).

Рисунок 7

 

8. В разделе Управление сайтами появился прилинкованный домен (рис. 8).

Рисунок 8

9. В панели управления зайдите в раздел Файловый менеджер.

Рисунок 9

 

10. В файловом менеджере зайдите в папку с именем вашего сайта, а затем в папку public_html. В папку public_html загрузите архив modx-2.8.3-pl.zip из папки distr_MODx (рис. 10).

Рисунок 10

11. В папке public_html распакуйте загруженный архив modx-2.8.3-pl.zip. Для этого щелкните правой кнопкой мыши по имени архива и из контекстного меню выберите Распаковать Архив. Результат на рис. 11.

Рисунок 11

Для установки системы нам потребуется отдельная база данных.

 

Создание базы данных

12. В панели управления зайдите в раздел MySQL Управление базами (рис. 12).

Рисунок 12

 

13. Введите имя базы после нижнего подчеркивания и сгенерируйте пароль (рис. 13). Имя базы и пароль сохраните у себя в надежном месте.

Рисунок 13

14. Нажмите кнопку Добавить. База данных должна появиться в списке (рис. 14).

Рисунок 14

 

15. Запустите сайт в браузере, введя в адресную строку http://имя_вашего_сайта/setup/ Появится следующее окно (рис. 15). Нажмите Далее.

Рисунок 15 

16. В следующем окне снова нажмите Далее (рис. 16).

Рисунок 16  

17. На следующем шаге выберите пункт Новая установка, в дополнительных параметрах установите права на каталоги 0777 и файлы 644 и нажмите кнопку Далее (рис. 17).

Рисунок 17

Подключение базы данных

18. Заполните поля с данными о пользователе, пароле и имени базы данных. Эти данные были вами сохранены при выполнении пункта 13 (на хостинге Beget имя базы данных совпадает с именем пользователя). Префикс таблиц в целях безопасности делают отличным от modx_

После этого нажмите ссылку Проверить соединение с сервером базы данных и отобразить список доступных подключений (рис. 18).

Рисунок 18

19. При успешном соединении с базой данных Вы увидите следующее поле. Проверьте кодировку подключения utf-8 и сопоставление utf8_general_ci. После этого нажмите ссылку Попытка создания или выборки из базы данных (рис. 19). 

Рисунок 19

Настройка панели администратора сайта

20. Заполните настройки для входа в панель администратора. В качестве логина мы использовали admin, в качестве пароля – site-labmodx. Если Вы используете другие данные, сохраните их в надежном месте. Все эти настройки можно будет изменить позднее из панели администратора. Нажмите кнопку Далее (рис. 20).

Рисунок 20

21. В окне Отчет об установке не должно быть ошибок, все флажки должны быть установлены. Нажмите Установить.

Рисунок 21 

22. В следующем окне ставим нажимаем Далее.

Рисунок 22

23. В следующем окне убедитесь, что флажок удаления каталога установки включен и нажмите кнопку Войти.

Рисунок 23

 

24. Попадаем на страницу входа в административную панель. Введите логин и пароль, указанные при установке. В нашем случае логин admin пароль site-labmodx.

Рисунок 24

25. Нажмите Войти и попадаем в административную панель нашего сайта.

Рисунок 25

26. После установки видим ошибку Каталог ядра в открытом доступе. Чтобы ее устранить, необходимо переименовать уже имеющийся файл ht.access в .htaccess в каталоге

public_html/core/. Зайдите в этот каталог, нажмите правой кнопкой мыши по файлу ht.access и из появившегося меню выберите Переименовать.

Рисунок 26

27. Поставьте точку перед именем файла и нажмите ОК.

Рисунок 27

Точно также измените имя файла ht.access в .htaccess в каталоге public_html.

 

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

 

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

Рисунок 28 

Чтобы попасть в панель управления сайтом, необходимо набрать адрес http://имя_сайта/manager/ 

В левой части админпанели сайта перейдите на ресурс Главная.

Как видим текст страницы пока в виде html-кода. Поэтому прежде, чем перейти к созданию сайта, сделаем первоначальные настройки CMS MODx Revo и установим необходимые сниппеты для создания сайта, в том числе визуальный редактор, чтобы работать не с html-кодом, а с обычным текстом.

Первоначальная настройка системы

В правом верхнем углу найдите изображение шестеренки и выберите Системные настройки. Настроек очень много, поэтому придется поискать нужные. Причем один раздел может быть разделен на две части и находиться в разных местах. Лучше воспользоваться фильтром.

Изменение и сохранение настроек происходит автоматически, поэтому подтверждать ничего не нужно.

29. Основные настройки системы, которые сделайте после установки MODX.

Раздел «Сайт»

– Название сайта: введите Моя web-студия

– Сообщение о недоступности сайта: введите Сайт временно недоступен

– Публиковать по умолчанию: будет ли новый документ доступен для просмотра посетителями сразу после создания и сохранения, установите Да

Раздел «Система и сервер»

– Отображение RSS-канала «Новости MODX»: установите  Нет

– Отображение RSS-канала «Уведомления безопасности MODX»: установите Нет

Раздел «Система управления»

– Показывать текст подсказки рядом с полем: описание пунктов меню, установите Да

– Формат даты в панели управления: напишите наш формат d-m-Y

– Первый день недели: установите 1

Раздел «Дружественные URL» – режим ЧПУ

– Транслитерация псевдонимов: напишите russian (для включения транслитерации дополнительно требуется установить расширение translit, мы его установим позже)

– Суффикс контейнера: удалите слэш /

– Использовать дружественные URL: установите Да

– Строгий режим дружественных URL: установите Да

– Проверять на дублирование URI во всех контекстах: установите Да

– Использовать вложенные URL: установите Да

Включив на сайте ЧПУ (режим дружественных URL), убедитесь в файловом менеджере, что в корне сайта файл ht.access переименован в .htaccess, иначе при попытке перехода на страницы, отличные от главной, получите ошибку 404.

Если файл не переименован, измените его имя прямо в файловом менеджере.

Рисунок 1.29

Примечание: можно через главное меню админки «Содержимое – Типы содержимого» в параметре HTML очистить поле «Расширение файла». Теперь адрес страниц станет без расширения, то есть http://адрес_сайта/about вместо http://адрес_сайта/about.html.

На этом первоначальную настройку можно считать завершенной. Далее идет установка из репозиториев самых необходимых для разработки дополнений MODX Revo.

30. Сначала установим дополнение translit, который необходим для дружественных URL.

В верхнем меню административной панели зайдите Пакеты – Установщик. В окне Менеджер пакетов нажмите кнопку Загрузить пакеты.

Рисунок 1.30

31. Затем в строке поиска введите translit, нажмите Enter и нажмите кнопку Загрузить рядом с именем пакета.

Рисунок 1.31

32. Загрузка пакета не означает его установку. Устанавливать пакет надо вручную. Поэтому после загрузки перейдите на вкладку Вернуться в «Менеджер пакетов» и нажмите Установить.

Рисунок 1.32

33. Затем нажмите Продолжить и в консоли нажмите ОК.

Рисунок 1.33

В столбце Установлен должна быть зеленая надпись Установлено.

Рисунок 1.34

34. Вернитесь в установщик командой Пакеты – Установщик.

35. Нажмите Загрузить пакеты и установите TinyMCE –  это визуальный редактор веб-страниц, чтобы работать не с html кодом (см. рис. 1.16), а с обычным текстом.

Сейчас у нас установлено два пакета.

Рисунок 1.35

36. Вернитесь в главный раздел, нажав логотип в левом верхнем углу административной части сайта.

Рисунок 1.36

37. Перейдите в ресурс Главная. У нас теперь установлен визуальный редактор, но на панели инструментов есть не все возможные инструменты.

Рисунок 1.37

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

Зайдите в настройки системы. Шестеренка в правом верхнем углу – Системные настройки.

Выберите tinymce в выпадающем меню, где по умолчанию стоит "core".

Рисунок 1.38

И скопируйте следующие значения вместо существующих или в пустые поля:

– в поле Custom Buttons Row 1

save,newdocument,separator,bold,italic,underline,strikethrough,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,styleselect,formatselect,fontselect,fontsizeselect

– в поле Custom Buttons Row 2

cut,copy,paste,pastetext,pasteword,separator,search,replace,separator,bullist,numlist,separator,outdent,indent,blockquote,separator,undo,redo,separator,link,unlink,anchor,image,cleanup,help,code,separator,insertdate,inserttime,preview,separator,forecolor,backcolor

– в поле Custom Buttons Row 3

tablecontrols,separator,hr,removeformat,visualaid,separator,sub,sup,separator,charmap,emotions,iespell,media,advhr,separator,print,separator,ltr,rtl,separator,fullscreen

– в полеCustomButtonsRow 4 (возможно это поле уже на следующей странице настроек)

insertlayer,moveforward,movebackward,absolute,separator,styleprops,spellchecker,separator,cite,abbr,acronym,del,ins,attribs,separator,visualchars,nonbreaking,template,blockquote,pagebreak,separator,insertfile,insertimage

– в поле Custom Plugins в разделе General

autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template

39. Вернитесь в ресурс Главная. После подключения всех плагинов и кнопок получаем полный набор инструментов TinyMCE.

Рисунок 1.39

Примечание: можно удалить кнопку Сохранить (т.е. стереть параметр save, ) в поле Custom Buttons Row 1, т.к. кнопка работает некорректно (вместо сохранения закрывает документ). Также можно стереть параметр newdocument, за ненадобностью, а также separator, до параметра bold, чтобы не было отступа от края на панели инструментов.