Xampp куда кидать файлы сайта
Обновлено: 03.07.2024
Сборка позволяет вести разработку на отдельном компьютере без подключения к сети. Соответственно, нет необходимости в высокоскоростном доступе в Интернет и наличии хостинга.
Проект кроссплатформенный, а это значит, что он одинаково хорошо работает на популярных платформах: Windows, Linux, Mac OS. Само название XAMPP – аббревиатура, которая расшифровывается следующим образом:
- X – обозначает, что сборка будет работать на всех операционных системах;
- Apache – веб-сервер, поддерживающий основные версии ОС, гибко настраиваемый и надёжный;
- MySQL – одна из самых известных систем управления базами данных;
- PHP – язык программирования, поддерживаемый почти всеми хостинг-провайдерами и лидер среди языков, используемых для создания веб-сайтов;
- Perl – лёгкий в освоении язык программирования, который, к тому же, поддерживает модули сторонних разработчиков.
Эта сборка отлично подойдёт начинающим веб-программистам. В ней есть всё, что может понадобиться для комфортной работы.
Где скачать?
В самом крайнем случае можно воспользоваться крупными сайтами-архивами, если в статусе файла стоит «проверено» и отзывы в целом положительные.
Следующий шаг – выбор операционной системы. Так как мы работаем в Windows, то и выбираем версию для этой ОС. Обратите внимание, что последние версии программы работают только с новыми операционными системами –Vista и выше, под XP или 2003 он просто не запустится.
На следующем этапе вам предложат выбрать директорию, куда будет скачиваться файл установки. На жёстком диске инсталлятор займёт 109 мегабайт, время скачивания зависит от вашей скорости соединения.
Установка XAMPP на ОС Windows
Запускаем инсталлятор и на стартовом окне жмём кнопку «Next».
Появится окно выбора устанавливаемых компонентов. Серым цветом отмечены неактивные чекбоксы (обязательные компоненты программы). Остальные – активны, но мы не будем ничего убирать, а оставим, по умолчанию. «Next».
Программа установки предложит выбрать место установки. По умолчанию это диск C:. Соглашаемся. «Next».
Далее установщик предложит посетить сайт веб-сервера. Соглашаться или нет – решать вам. В случае, если нужды в этом нет, просто снимите флажок с этого пункта.
Программа сообщит, что готова к установке и после нажатия кнопки «Next» запустится процесс распаковки.
Локальный сервер и firewall
Брандмауэр Windows предложит разрешить или запретить доступ к программе.
Если инсталлятор скачан с официального сайта, разрешаем.
Завершаем установку и настройку
Для запуска программы сразу после завершения установки осталось выполнить следующие действия:
- Оставить флажок «Запустить контрольную панель после завершения установки».
- Жмем «Finish».
Проверка работоспособности модулей и компонентов
После завершения установки откроется панель управления XAMPP.
Сразу же запускаем MySQL. Брандмауэр опять попросит разрешить или запретить программе доступ в сеть. Разрешаем.
Поочерёдно проверяем состояние Apache и MySQL. Для этого нажимаем кнопки «Admin» (1 и 2), после чего в браузере должны открываться панели управления сервера и базы данных.
Скрипт для работы с базами данных PhpMyAdmin:
Проверяем работоспособность основных служб. Для этого рекомендуем в директории C:Xampphtdocs создать папку test. В блокноте напишите предложенный вариант коротенького скрипта на PHP и сохраните под именем index.php:
На этом установка web-сервера XAMPP завершена.
iPipe – надёжный хостинг-провайдер с опытом работы более 15 лет.
-
с NVMe SSD дисками от 299 руб/мес на SSD дисках от 142 руб/мес в наличии и под заказ в более 350 зонах
Внимание! Благодаря моему CMS - движку для сайтов MaxSite CMS данная статья выдается как общий пример самостоятельного создания сайта, хотя я писал ее как исключительно пример самостоятельного создания собственного сайта на своем домашнем компьютере на локальный сервер XAMPP. При этом я не ставил задачу научить как создать сайт в интернете вообще, а только показать читателям как создать сайт на компьютере в виде обучающей игрушки - простейший макет сайта html.
Для тех читателей, которым нужен интернет сайт своими руками на моем сайт есть материал о том, как создать сайт с помощью программы MaxSite в статье Сайт на MaxSite CMS.
Для понимания темы статьи надо предварительно изучить статьи:
Сами по себе локальный сервер никому не нужен, если на нём нет хотя бы одного сайта. Данную статью можно считать уроком о том, как научиться создавать сайты на домашнем компьютере. Новички на этом примере могут понять принцип создания сайтов не только на XAMPP, но и на любом другом сервере: локальном или настоящем.
Пример создания сайта
Программа сервер - это операционная система для среды Интернета, а программа браузер - это аналог программы Word, которая умеет читать сайты - как документы, написанные на языках HTML, PHP, PERL .
Сайт на XAMPP
1.1. Для размещения сайтов в XAMPP предназначена специальная папка с именем htdocs (C:\xampp\htdocs). Перейдем в нее и создадим новую папку с именем designfornet для размещения файлов нашего сайта.
Рис. Даем новой папке имя designfornet
Рис.3 Новые подпапки logs и www
1.3. В папке logs мы создадим текстовый документ error_log.txt, который станет журналом регистрации ошибок сайта.
После того, как вы кликните правой кнопкой внутри папки logs, надо в появившемся меню выбрать строку «Текстовый документ».
Название копируем отсюда error_log.txt. Документ не открываем и оставляем пустым, потому что система сама запишет в него информацию об ошибках.
1.4. В другой папке www так же создадим новый текстовый документ, вначале безымянный.
Дальше нам потребуется текстовый редактор, но тем, у кого его нет - сегодня я разрешу воспользоваться Блокнотом. Инструкция будет разнится лишь на этапе выбора кодировки.
1.5. Если вы уже установили правильный текстовый редактор Notepad++, то достаточно кликнуть правой кнопкой по Новому текстовому документу и выбрать строку «Edit with Notepad++», чтобы открыть этот документ для редактирования.
1.6. Сделаем из этого документа первый файл нашего сайта designfornet . Я предлагаю на первой странице сайта сделать надпись «Это домашний сайт designfornet. Ура!».
1.7. Заполним наш документ текстом, который надо скопировать из нижнего абзаца:
Как видите, я использовал в тексте значки языка гипертекстовой разметки HTML, что превращает его в кодовый файл.
1.8. Сделаю небольшое пояснение по используемым кодам. Весь код страницы сайта заключен между тегами (значками)
и имеет две сеции: – первая головная (head=голова) между тегами
, а вторая - тело сайта (body=тело) - между:
В головной секции записано название сайта (title=заголовок) в виде:
Во второй секции написано наше приветствие:
Теперь браузер получил инструкцию о том, что ему следует нарисовать страницу сайта с заголовком «designfornet» в виде одного предложения «Это домашний сайт designfornet. Ура!».
1.9. В тексте использованы буквы английского и русского языков и другие знаки, поэтому надо выбрать самую расширенную кодировку UTF-8, для чего в верхней панели Notepad++ находим вкладку «Кодировка» и в ней находим строку «Преобразовать в UTF-8 без BOM». В Блокноте установка кодировки происходит на панели «Сохранить как. »
1.10. Следом надо выполнит сохранение этого документа с новым именем index.html. В левом верхнем углу окна Notepad++ кликаем левой по «Файл» и опускаемся до строки «Сохранить как…». Откроется окно «сохранения как…», в котором надо вставить новое имя для документа. Копируем название отсюда - index.html – вставляем в поле «Имя файла» и нажимаем на «Сохранить».
Новый файл с именем index.html автоматически сохраниться в папку www рядом с исходным безымянным текстовым документом.
Закроем окна в Notepad++ и потом закроем саму программу.
Теперь можно удалить текстовый документ как ненужный.
Рис.4 Внутри папки www
1.11. Если вы посмотрите на файл index.html в папке www, то он будет в виде файла основного браузера (у меня - Mozilla Firefox). Это не случайно, так как его можно отрыть этим браузером (и любым другим тоже).
Для этого кликнем по файлу правой кнопкой мыши и выберем «Открыть с помощью». Выбираем любой браузер. После этого в окне выбранного браузера появится строка «Это домашний сайт designfornet. Ура!».
У некоторых появится строка, но из козабзюков. Это означает, что ваш браузер просто не настроен на кодировку UTF-8, в которой сохранен наш файл index.html
В Mozilla Firefox надо найти строку в настройках «Веб-разработка» и перейти на «Кодировка». В списке кодировок надо выбрать «Юникод (UTF-8)»
В браузере Ghrome в настройках надо найти «Инструменты» и выбрать строку «Кодировка», где будет настройка на UTF-8.
1.12. Собственно, файл index.html – это страница приветствия домашнего сайта designfornet , как её видит браузер. На сайте она представляет собой html-документ с текстом в обрамлении кодовых знаков.
1.13. Пора остановиться и сделать выводы. Я показал вам структуру любого сайта – он представляет собой папку в особом месте (особой папке) программы сервер. Обычно в нем присутствую еще пара папок: - одна logs для записей проблем и ошибок, вторая – всегда называется www - для файлов собственно сайта.
В нашем сайте есть только один файл index.html, который содержит инструкцию (код) для браузер как ему нарисовать страницу сайта с задуманной нами фразой приветствия «Это домашний сайт designfornet. Ура!»
1.14. Причем, если вы посмотрите в папку htdocs (C:\xampp\htdocs), то найдете там кроме нашей designfornet еще три папки с именами: forbidden (запрещенный), restricted (ограниченный) и xampp.
1.15. В запрещенную папку forbidden мы не полезем, а вот папку restricted (ограниченный) откроем ради интереса. Там мы обнаружим файл index.html, аналогичный нашему файлу из папки нашего сайта designfornet . Если мы откроем его в Mozilla Firefox, то мы увидим другое приветствие «Remote auth testpage», что переводится как «отдельная тестовая страница».
1.16. Теперь с полной уверенность мы с вами можем предположить, что пред собой мы видим сайт restricted . Правда, он так же состоит из одной страницы.
1.17. Осталась еще одна папка xampp, внутри которой нет файла index.html потому, что этот сайт написан не на языке HTML. Его индексная страница расположена в другом месте, но файлы его здесь: в папке img мы найдем картинки, а в папке lang - файлы с переводами на другие языки.
Фактически – это локальный сайт программы XAMPP - localhost xampp, который мы увидим, если в браузере перейдем по ссылке localhost (или 127.0.0.1 ).
Для того чтобы сейчас браузер нашел этот сайт нужно одно условие - чтобы работал XAMPP. Если вы его выключили, то запустите через ярлык Контрольную панель и на ней «стартаните» Apache и MySQL. Тогда внутри вашего компьютера воспроизведется среда Интернета.
1.18. Несколько необычное название для сайта localhost нас уже не смущает.
Осталось проверить – а будет ли находить его браузер. Скопируем слово localhost и вставим в строку адреса браузера (любого). После «пинка» перед вами появится форма для авторизации для входа на сайт.
Рис.5 Форма авторизации
После того, как мы вставим в оба поля формы авторизации слово root – одинаковые для логина и пароля – нас впустят на страницу приветствия: «Welcome to XAMPP for Windows!».
1.19. Как видите, к локальному сайту программы xampp мы можем перейти по ссылке localhost (или 127.0.0.1 ).
Наш сайт designfornet ничем не хуже, однако он будет как бы следующего уровня (по вложенности по отношению к родительскому сайту localhost ), поэтому для перехода к нему попробуем ссылку:
1.20. Если вы вставите ссылку в браузер и выполните переход, то увидите, что сайт designfornet существует и работает (только при каждом входе будет появляться форма для авторизации, а в браузере придется настраивать кодировку).
Вообще-то ссылка, согласно всем правилам, будет иметь вид:
1.21. С таким же успехом вы можете проверить работоспособность сайта restricted , для которого надо использовать ссылку:
В заключении статьи надо осмыслить, что мы сделали:
2. Для сайтов в программе XAMPP предназначена папка htdocs, в которой для каждого нового сайта надо создавать новую подпапку.
Имя этой папке и станет название сайта. Таких сайтов на одном сервере может быть несколько.
3. В папке сайта должен быть файл первой страницы, всегда имеющий имя index.html (расширение может меняться в зависимости от языка: .php, .xtml, .stml). Коды других страниц могут быть в виде отдельных файлов или вписаны в index.html.
Для работающих сайтов надо добавить подпапку logs, в которой требуется иметь файл error_log.txt для записи ошибок.
4. Код каждой страницы состроить из текста, который обрамляют значки (теги), состоящие из букв латинского языка (сокращение английских слов) и знаков, имеющих свой смысл в каждом языке программирования.
Весь код страницы обрамляет основной тег, показывающий на основной используемый язык, например, у нас – HTML – значит теги:
В закрывающем теге присутствует слеш – косая черта.
Код разбивается на две основные части – голову (head) и тело (body).
Head - предназначен для служебной информации и тайтла страницы = краткого названия, который мы видим в строке состояния браузера.
Body – содержит текст и ссылки на картинки. Это контент страницы – ее содержание. Здесь описано и оформление страницы.
5. Для перехода к каждому домашнему сайту нам придется вводить логин и пароль администратора. Это является платой за защищенность сайта от взлома.
Чтобы не устанавливать каждый раз кодировку её можно прописать в файле index.html, тогда браузер будет настраиваться самостоятельно.
Необходимую запись мы возьмем из кода страницы моего сайта на которую вы смотрите. Достаточно кликнуть по странице с данной статьёй правой кнопкой мыши и выбрать в меню строку «Исходный код страницы».
Из появившегося окна с кодом страницы надо взять первые строки:
Код индексной страницы должен выглядеть где-то так:
Если вы замените этим кодом тот, который есть в файле index.html нашего сайта designfornet , то у браузера не будет проблем с кодировкой. Вернитесь к пункту 1.7.
Остальные ссылки так же имеют вид:
8. Для получения более коротких ссылок надо обмануть операционную систему и создать каждому домашнему сайту так называемый виртуальный хост.
О том, как создать виртуальный хост для сайта вы можете узнать из следующей статье Настройка виртуальных хостов
Сегодня хочу немного поговорить о настройке XAMPP. Если кто не знает это это один из лучших веб серверов. Он включает в себя все необходимые компоненты, Apache, MySQL, интерпретатор скриптов PHP и многое другое. Очень легко устанавливается и настраивается , имеет очень удобную панель администрирования. Если вам необходим локальный веб сервер то советую использовать именно XAMPP. Более менее опытные пользователи смогут без труда изменить настройки сервера. А у тех кто впервые установил XAMPP могут возникнуть трудности. Например, по умолчанию корневая папка называется htdocs и находиться в \xampp\htdocs. Это не очень удобно, изменить корневую папку сайта достаточно просто.
Так же рекомендую прочитать следующие статьи по данной теме.
Настройка веб сервера XAMPP
После установки локального веб сервера XAMPP и его запуска открыв браузер и введя адрес 127.0.0.0.1 вы увидите следующею страницу. Для того чтобы открыть ваш созданный сайт в браузере вам нужно будет скопировать файлы сайта в папку \xampp\htdocs. Либо можно изменить путь в настройках.
Сохраняем файл с настройками перезапускам Apache и проверяем результат.
Вот таким образом можно указать путь к корневому каталогу вашего сайта. Как видите все достаточно просто.
Установить Xampp проще простого, главное - не забыть в брандмауэре Windows дать доступ Apache и Mysql к сетям. Далее установка в картинках и с комментариями. Предполагается, что дистрибутив программы уже скачан с официального сайта и подходит для нашей версии Windows.
Установка
Запускаем дистрибутив, при запущенном антивирусе может вылезти такое окно, жмем Yes:
Просто Next.
Ничего не меняем, все галочки оставляем как есть - Next.
Обычно устанавливаю Xampp на диск C, папку с сайтами потом прописываю отдельно в настройках - Next.
Убираю галочку, чтобы сразу после установки не запускался сайт (синяя ссылка) - Next.
Почти готово - Next.
Процесс установки Xampp пошел.
Ближе к завершению появится окошко брандмауэра с вопросом - жмем Разрешить доступ.
Установка завершена, оставляем галочку и жмем Finish.
Настройка
Запустилась Xampp Control Panel и Apache. Жмем Start - запускаем MySQL.
Опять разрешаем доступ, MySQL запущен.
Где лежат файлы сайта и как его запустить?
По адресу localhos откроется страница, которая находится в папке htdocs на диске С, стандартный путь к ней - C:\xampp\htdocs
Настройка htdocs
Файл откроется в Блокноте. С помощью поиска Ctrl+F ищем слово htdocs:
Находим две строки с адресом папки и меняем на адрес папке, в которой будут лежать наши сайты (исполняемые файлы).
Как открыть phpMyAdmin?
Чтобы открыть в браузере phpMyAdmin нужно нажать кнопку Admin напротив MySQL. Или ввести в адресной строке localhost/phpmyadmin/
По адресу localhost/phpmyadmin/ попадаем на страницу phpMyAdmin.
Создание базы данных
Можно слева в списке нажать Создать БД или нажать вкладку Базы данных. В первом поле ввести название бд, во втором выбрать кодировку - я обычно выбираю utf8_general_ci.
Далее просто нужно создать таблицу с необходимым количеством столбцов. В подробности вдаваться не буду.
Создание пользователя БД
Нужно вернуться на главную страницу phpMyAdmin и нажать вкладку Пользователи.
Жмем Добавить пользователя. Заполняем поля. Пароль можно просто сгенерировать.
Кстати, если поставить галочку "Создать базу с именем пользователя. ", то можно отдельно базу не создавать. Можно начать с создания юзера, чтобы не заморачиваться с созданием БД.
Читайте также: