Перейти к содержимому


Партнерская программа Kredov

Пошаговая инструкция создания сайта с помощью CMS Joomla!

#1 Константин

Константин
  • Пользователь
  • 15 сообщений
  • Репутация: 3
13

Отправлено 31 Март 2012 - 18:00

Приветствую Вас Уважаемые Форумчане!

В данной статье я хочу рассказать Вам о том, как создать сайт с помощью CMS Joomla! Статья написана в формате пошаговой инструкции. Поэтому если Вы будете проделывать все то, о чем в ней говорится, то в итоге у Вас будет готовый сайт, который можно уже смело выложить в Интернет и он будет доступен для пользователей всемирной паутины…

Сразу оговорюсь, что в данной статье будет рассмотрен только процесс создания сайта с помощью системы Joomla! Здесь не будет инструкций о том, как установить локальный сервер, но будет инструкция (в конце статьи) по переносу Joomla-сайта на реальный сервер (на хостинг).

Итак, приступим!

Установка Joomla.

Шаг 1. Первым делом нам нужно создать отдельную папку для нашего joomla-сайта на локальном сервере.

Для этого Вам нужно зайти в директорию, в которой хранятся все Ваши сайты.

Обычно путь этой директории такой: Z:homelocalhostwww

Заходим туда и создаем внутри этой директории папку для нашего joomla-сайта. Я назвал ее просто «Joomla»


Изображение


Далее нам нужно запустить локальный сервер (или перезапустить, если он уже был у Вас запущен). Для этого нажимаем по ярлыку «Start Denwer».

Изображение


Шаг 2. Скачиваем систему Joomla.

Заходим вот по этой ссылке (http://joom.ru/downl....download/6/165) и скачиваем систему Joomla на свой компьютер. На момент написания данной статьи, последняя версия Joomla - 1.5.25. С ней мы и будем работать…


Изображение


Шаг 3. Извлекаем все файлы архива в директорию с ранее созданной папкой.

Зайдем в только что скачанный архив с CMS Joomla.


Изображение


Вот так выглядят файлы Joomla:

Изображение


Выделяем все файлы (Ctrl+A) и извлекаем их в нашу папку.

Изображение


Шаг 4. Открываем браузер и вводим в строку: http://localhost/joomla/. Начинается процесс установки Joomla.

Весь процесс установки состоит из 7 этапов:
  • Выбор языка
  • Проверка системы
  • Лицензия
  • База данных
  • Конфигурация FTP
  • Основные настройки
  • Завершение
И первый этап: «Выбор языка».

Выбираем «Русский язык».


Изображение


Нажимаем по кнопке «Далее».

Этап 2: «Проверка системы».

На этом этапе происходит проверка необходимых компонентов (php, xml, mysql и.т.д.). Если все нормально, то жмём «Далее».


Изображение


Этап 3: «Лицензия».

Жмём «Далее» (можете почитать!).

Кстати, лицензия отобразилась у меня иероглифами, возможно у Вас будет также. Чтобы это исправить, Вам нужно переименовать файл «htaccess.txt» в «.htaccess». Этот файл находится в корне сайта.


Изображение


Этап 4: «База данных».

На этом этапе нам необходимо настроить соединение с базой данных. Но для начала ее еще нужно создать.

Поэтому:

Шаг 1. Заходим в phpmyadmin (http://localhost/tools/phpmyadmin). Это специальный инструмент, который позволит нам работать с базами данных на локальном сервере (на реальном сервере – хостинге, будет точно такой же инструмент).

Шаг 2. Вводим имя базы данных (чтобы не путаться в дальнейшем, я ввел имя БД – «joomla») и нажимаем по кнопке «Создать».


Изображение


Шаг 3. Возвращаемся на главную страницу PHPMyAdmin, нажав по изображению «домика».

Изображение


Нам необходимо добавить нового пользователя к нашей базе данных. Для этого мы переходим по ссылке «Привилегии».

Изображение


После этого, нажимаем по ссылке «Добавить нового пользователя».

Изображение


Затем:
  • Вводим «имя пользователя» (я ввел также – «joomla»)
  • Выбираем «хост», нажимаем на выпадающее меню и выбираем «Local». В текстовое поле справа автоматически подставится «localhost».
  • Вводим пароль (2 раза!)
  • Нажимаем по кнопке «Отметить все», чтобы у нашего нового пользователя базы данных были ВСЕ привилегии.
  • Нажимаем по кнопке «Пошел»

Изображение


Новый пользователь был добавлен.

Изображение


Теперь мы можем вернуться к установщику…

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

Заполняем все текстовые поля и нажимаем по кнопке «Далее».


Изображение


Кстати, там есть еще «Дополнительные настройки», но мы их трогать не будем.

Этап 5: «Конфигурация FTP».

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


Изображение


Жмём по кнопке «Далее»

Этап 6: «Основные настройки».

Здесь нам необходимо указать «Название сайта», «Наш e-mail» и «Пароль администратора». Можете сразу указать уже существующий e-mail адрес.


Изображение


Нажимаем по кнопке «Далее».

Нажимаем по кнопке «Ок»


Изображение


Этап 7: «Завершение»

Все, поздравляю! Joomla успешно установлена!

Теперь нас попросили удалить папку «installation», чтобы обезопасить свой сайт от попыток повторной установки Joomla…


Изображение


Удаляем папку «installation»! Имя пользователя: admin, пароль – тот, который мы задали.

Обратите внимание, что на последней странице установки Joomla (справа-вверху) у нас появились 2 красивые кнопочки: «Просмотр сайта» и «Админцентр».


Изображение


Давайте посмотрим только что созданный сайт. Выглядит он так:

Изображение


Т.е здесь сразу установлен стандартный шаблон, который естественно можно поменять!

Если мы нажмем по кнопке «Админцентр», то попадем на страницу localhost/joomla/administrator. Вот как выглядит панель входа в администраторскую зону:

Изображение


Итак, небольшое подведение итогов:

Мы скачали и успешно установили Joomla на локальном сервере. Естественно в данной статье невозможно рассказать обо всех возможностях CMS Joomla, но я расскажу о самых основных возможностях Joomla, которые пригодятся всем новичкам, решившим создать свой сайт с помощью этой системы…

Поехали дальше!

Администраторская зона (административный раздел, админка).

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

Вот так выглядит панель администратора:


Изображение


Меню.

Самым важным элементом любого сайта является – меню (навигация, категории, рубрики). Все что связано с созданием меню, находится в разделе «Меню».


Изображение


Управление пользователями.

Если Вы захотите реализовать на своем Joomla-сайте возможность регистрации пользователей, то сделать это Вы можете через отдельные настройки в админке.


Изображение


Управление статьями.

Что позволяют нам делать эти настройки?

Мы можем:

  • Добавлять новые статьи на сайт
  • Редактировать/удалять старые статьи
  • Управлять статьями, которые выводятся на главной странице нашего сайта
  • Управлять разделами и категориями, на которые у нас разбиты наши статьи

Изображение


Настройки.

Изображение


Что можно сделать в настройках сайта?
  • Включить/отключить сайт
  • Настроить сообщение при выключенном сайте
  • Изменить название сайта
  • Добавить/изменить мета-данные сайта (описание, ключевые слова, title)
  • Настроить ЧПУ (постоянные ссылки)
  • Изменить настройки системы, пользователей, файлов, сервера и.т.д
Управление расширениями.

Расширения – это все, что увеличивает функциональность Joomla. Например: гостевая книга, галереи и.т.д.

Часть расширений уже встроены в Joomla (контакты, опросы и.т.д.), а часть расширений устанавливается отдельно и их можно скачать на официальном сайте или в сети Интернет.


Изображение


Изображение

Вот такие функции нам предоставляет административный раздел. Ничего сложного там нет! Главное понять, как они работают и как они устроены…

Меняем стандартный шаблон на свой.

Шаг 1. Ищем интересующий нас шаблон в Интернет.

Можете посмотреть на официальном сайте, в разделе шаблоны для Joomla 1.5.x. (http://www.joom.ru/d...viewcategory/16).

Есть кстати очень интересная программа – Artisteer. С ее помощью Вы можете самостоятельно создавать шаблоны для Joomla (а также для wordpress и других cms). Очень удобная программа. Рекомендую!

Я нашел интересный шаблон для Joomla версии 1.5, поэтому буду показывать на его примере…

Шаг 2. Установка шаблона.

Все шаблоны у нас устанавливаются через пункт «Расширения - Установка и удаление». Т.е шаблон по сути является расширением.

С помощью кнопки «Обзор» выбираем шаблон, который мы скачали в Интернет. Затем нажимаем по кнопке «Закачать файл & Установить».


Изображение


Система выдает нам сообщение: «Установка Шаблон: Успех».

Шаг 3. Активируем новый шаблон.

Активировать новый шаблон мы можем на вкладке «Расширения - Шаблоны». Там мы видим – какие шаблоны у нас есть в наличие и можем выбрать новый шаблон.

Кстати, при наведении на название шаблона у нас появляется миниатюра шаблона (очень удобно!).


Изображение


Выбираем наш шаблон и нажимаем по кнопке «По умолчанию».

Изображение


«Звездочка» сместилась и теперь мы можем посмотреть наш сайт с новым шаблоном…

У меня он выглядит так:


Изображение


Над дизайном конечно же можно (даже нужно) поработать. Подогнать дизайн «под себя» скажем так. Вспоминайте html и css и вперед! ^_^

Добавление статей.

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

Чтобы добавить новую статью – нажимаем по кнопке в главном меню «Панели Управления» - «Добавить статью»


Изображение


Здесь нам необходимо указать Заголовок статьи (псевдоним указывать не обязательно) и выбрать к какому разделу и категории будет «привязана» статья.

Для примера я создам новую статью. Делаем так, чтобы эта статья была опубликована на Главной странице (ставим соответствующий чекбокс).


Изображение


Обратите внимание, что на странице добавлений новой статьи, справа находятся дополнительные настройки этой статьи.

Изображение


Вверху есть специальные кнопки:

Изображение

  • Предпросмотр
  • Сохранить
  • Применить
  • Отмена
  • Помощь
Думаю не стоит объяснять, что за что отвечает…

Нажимаем по кнопке «Применить»

Если мы зайдем в раздел «Статьи», то увидим, что у нас появилась одна статья, которая опубликована на Главной странице нашего сайта.


Изображение


Точно также, если мы перейдем на наш сайт и обновим страницу, то увидим там нашу статью!

Вот по такому принципу создаются и опубликовываются новые статьи на сайте…

Меню.

Меню – это очень важный элемент сайта.

Если, например в Wordpress’e меню – это вообще не проблема, там все зависит от темы оформления и количества сайдбаров, то в Jooml’e меню создать не так-то просто…

Давайте зайдем в раздел с настройками меню нашего сайта (меню -> меню).

Мы видим, что у нас на сайте уже есть одно меню («Главное меню»).


Изображение


В том шаблоне, который я установил, меню находится в самом верху сайта (выше шапки сайта).

Изображение


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

Изображение


Далее мы видим, что у нас есть 1 пункт нашего ГЛАВНОГО меню – «Главная». Этот пункт стоит «по умолчанию», значит мы не можем его удалить (только редактировать). Нажимаем по данному пункту меню, чтобы изменить его…

Изображение


Все настройки довольно-таки простые и понятные. Я думаю Вы разберетесь…

Изображение


Едем дальше!

Стоит отметить, что создать меню – это еще только полдела! Если мы создадим меню, то это еще не говорит о том, что мы можем его сразу же увидеть на сайте.

У каждого меню есть свой собственный модуль.

Модуль – это некий такой контейнер, который отвечает за 5 основных параметров:
  • Внешний вид (горизонтально или вертикально)
  • В каком месте сайта будет выводиться меню
  • На каких страницах сайта меню должно отображаться, а на каких нет (бывает, что нужно сделать так, чтобы на одних страницах сайта – было одно меню, а на других - другое)
  • Кому должно быть видно меню (всем, только зарегистрированным пользователям и.т.д.). Также очень удобный параметр, с его помощью можно сделать чисто клиентский сайт.
  • Показывать ли вложенные пункты меню или нет.
У каждого меню есть свой модуль, т.е меню не может быть без модулей!

При создании нового меню, этот модуль создается автоматически, но он создается как бы «не видимым». Его еще нужно настроить и включить.

Давайте создадим новый пункт меню.

Заходим в «Пункт меню» и нажимаем по кнопке «Создать»


Изображение


Следующий момент также нужно немного объяснить…

Мы создаем новый пункт меню. Нам нужно указать здесь то, куда будет этот пункт вести (что это за пункт меню-то вообще такой?).
Joomla дает нам на выбор множество пунктов того, куда может вести новый пункт меню, который мы сейчас создаем. Выглядит это так:


Изображение


Т.е это может быть:
  • Внутренняя ссылка
  • Веб-ссылки
  • Каналы новостей
  • Контакты
  • Опросы
  • Пользователь
  • Статистика поиска
  • Статьи
  • Фрейм (Wrapper)
  • Внешняя ссылка
  • Разделитель
  • Псевдоним (ссылка)
Допустим я хочу, чтобы этот пункт меню вел на какую-то конкретную статью на моем сайте. В этом случае, из всего этого списка нам нужно выбрать пункт «Статьи».

Далее, т.к это у нас будет статья, то нам нужно указать – а какая это статья? Это может быть категория, раздел и.т.д. Нас интересует пункт «Одна статья».


Изображение


Далее нам нужно указать на какой материал мы ссылаемся. Для этого нажимаем по кнопке выбрать (справа).

Изображение


В появившемся всплывающем окне выбираем нужную нам статью.

Изображение


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

Изображение


После этого нажимаем по кнопке «Сохранить» (справа-вверху).

Изображение


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

Изображение


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

Изображение


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

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

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

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

Перенос Joomla-сайта на реальный сервер (на хостинг)!

Здесь я не буду долго рассказывать о том, как покупать домен и хостинг. Наверняка Вы итак уже знаете, как это сделать. Если не знаете, то можете поискать эту информацию на данном форуме, либо в ПС Яндекс.

Здесь я дам Вам пошаговую инструкцию по переносу Joomla-сайта на реальный сервер.

Шаг 1. Покупаем домен.
Шаг 2. Покупаем хостинг.
Шаг 3. Создаем на сервере базу данных для нашего сайта.
Шаг 4. Экспорт нашей БД с локального сервера, смена кодировки БД, импорт БД на хостинг.

Заходим в PHPMyAdmin на локальном сервере (http://localhost/tools/phpmyadmin/)
  • Выбираем нашу базу данных (у меня она называется «joomla»). У меня в ней целых 36 таблиц.

Изображение

  • Заходим по вкладке «Экспорт»

Изображение

  • Нажимаем по кнопке «Отметить все» (имеется ввиду «все таблицы» нашей БД)
  • Ставим галочку в чекбоксе «Послать»
  • Нажимаем по кнопке «Пошел»
  • Сохраняем файл на компьютер

Изображение

  • Открываем данный файл текстовым редактором (например, Notepad++) и меняем его кодировку на «UTF-8 без BOM».

Изображение

  • В панели управления хостингом (CPanel) заходим в тот же самый инструмент «PHPMyAdmin»

Изображение

  • Выбираем уже созданную БД для нашего нового joomla-сайта и заходим во вкладку «Импорт».
  • Выбираете файл, с которым мы только что работали (нашу БД в текстовом документе) и нажимаем по кнопке «Ок» (или «Пошел», или «Вперед» - везде по-разному!)
Все, мы успешно перенесли нашу БД с локального на удаленный сервер!

Шаг 5. Закачиваем все файлы нашего joomla-сайта на хостинг через FTP (в папку public_html или httpdocs – у разных хостинг-провайдеров по-разному!). Все, кроме файла configuration.php (его нужно подкорректировать!).

Шаг 6. Вносим изменения в файл configuration.php.

Остановимся на этом более подробно…

Нам необходимо внести некоторые изменения в файл конфигурации нашего сайта.

Во-первых, вот эти параметры:
var $user = 'joomla';
var $password = '123454321';
var $db = 'joomla';


Изображение


Задаем здесь имя пользователя БД, пароль БД и название БД.

Во-вторых, вот эти параметры:


Изображение

var $log_path = 'Z:homelocalhostwwwjoomlalogs';
var $tmp_path = 'Z:homelocalhostwwwjoomlatmp';

Нам нужно узнать путь до нашего сервера (Вашего хостинга!) и прописать его в этой строке.

Для этого Вы можете:
  • Скачать вот этот файл
  • Закачать его в корневую папку на Вашем сайте
  • Обратиться к этому файлу через браузер (например: www.АДРЕС _ВАШЕГО_САЙТА/code.php)
  • Скопировать строку, которую он Вам выдаст.
Заменяете пути.

Т.е у Вас должно получиться примерно следующее:


Изображение

  • Закачать файл configuration.php на хостинг
Шаг 7. Зайдите в браузер и проверьте свой сайт. Все ли работает также, как на локальном сервере? Не выдает ли каких-то ошибок? И.т.д…

На этом можно считать процесс переноса joomla-сайта выполненным!

Напоследок хочу сказать вот еще что:
  • Зайдите в административную зону
  • Перейдите в пункт «Помощь – Системная информация»

Изображение

  • Перейдите в раздел «Права доступа к папкам»

Изображение

  • Проверьте, везде ли у Вас стоит зеленый статус «Доступен для записи». Если не везде, то подключайтесь к FTP, найдите нужную директорию и выставите права для записи (обычно это: 666).

Изображение


Ну, вот и все!

Я надеюсь, Вам понравилась данная пошаговая инструкция по созданию сайта с помощью CMS Joomla! Инструкция получилась очень большой. Старался объяснять на доступном языке, чтобы новичкам сайтостроения было понятно…
Спасибо всем за внимание!

С Уважением, Константин.

P.S Как я и обещал, даю ссылку на более подробный и детальный материал по созданию сайтов на Joomla. Успешного Вам обучения!


Изображение Admitad.com - агрегатор партнерских программ с оплатой за действие пользователя. Выбор множества выгодных предложений для вашего трафика. Обсудить на форуме.

Изображение Maxtrust.ru - сеть по продаже VIP-товаров. Высокий заработок для качественного трафика - от 270$ за 1000 посетителей Обсудить на форуме.

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Создание сайтов на joomla.
  2. Wordpress НЕ только для блога или создание различных типов сайтов на этой CMS
  3. Создание сайта на Joomla
  4. Создание сайтов на CMS Joomla, 1С-Битрикс и MotoCMS
  5. Какая CMS лучше подойдет для создания блога WordPress или Joomla?

#2 Sosnovskij

Sosnovskij
  • Администратор
  • 3 886 сообщений
  • Репутация: 566

Отправлено 31 Март 2012 - 19:23

Прям мануалище получилось ^_^
  • 0

Не стесняйтесь ставить оценки темам :) Правила форума. Мой блог http://sosnovskij.ru/.



#3 Константин

Константин
    Topic Starter
  • Пользователь
  • 15 сообщений
  • Репутация: 3

Отправлено 31 Март 2012 - 20:23

Старался! ^_^
  • 0

#4 Очередной вебмастер

Очередной вебмастер
  • Пользователь
  • 13 сообщений
  • Репутация: 0

Отправлено 12 Апрель 2012 - 15:41

почему Denwer? Нельзя было сразу на примере реального хостинга сделать?
И почему Joomla 1.5? Ее поддержка уже скоро закончится, есть же стабильная Joomla 2.5, ИМХО более удобная для создания сайта.
Блин, хоть сам статью пиши... :)
И насчет прав на папки и файлы, вообще разработчики рекомендуют на папки 755, а на файлы 644....
  • 0

#5 Константин

Константин
    Topic Starter
  • Пользователь
  • 15 сообщений
  • Репутация: 3

Отправлено 14 Апрель 2012 - 20:29

Можно было на примере реального хостинга сделать...

Просто разница то в чем? Целью статьи было - показать по шагам то, как установить Joomla, как она устроена изнутри и какие основные функции в ней есть.

Почему Joomla 1.5? Просто я работал с этой версией, поэтому и решил написать статью именно по ней. С 2.5 не работал еще...

Можете написать аналогичную статью по версии 2.5! Никто же не запрещает это сделать Вам...

По поводу прав на папки и файлы. Спасибо за совет! Не углядел этого момента.
  • 0

#6 haos2100

haos2100
  • Пользователь
  • 1 сообщений
  • Репутация: 0

Отправлено 17 Апрель 2012 - 12:28

Автор - СПАСИБО ЗА СТАТЬЮ. Всё понятно и описано в доступной для начинающего юзверя Joomla форме.
  • 0

#7 surfer

surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 21 Апрель 2012 - 22:56

предлагаю создать отдельный конкурс статей по установке Joomla & WP пошагово и в картинках :unsure:
  • 0


Оформление форума – IPBSkins.ru