Создание админки сайта при помощи одного файла

При создании лэндингов на фрилансе, заказчики часто просили админку для их одностраничного сайта. Ставить Wordpress для редактирования одного файла мне казалось нерациональным, поэтому я создал очень простой скрипт, состоящий всего из одного PHP файла, который тем не менее позволял менять тексты и картинки на лэндингах.

Сперва я хотел ограничиться тем, чтобы просто дать возможность из скрипта редактировать HTML код лэндинга. Но возникли сложности. Во первых заказчики часто по неосторожности вместе с текстами правили HTML код, стерев скобочку тега, или допустив другую ошибку. В результате, из-за их неосторожной работы с HTML кодом рушилась вёрстка всего лэндинга. К тому же заказчики не хотели загружать картинки через FTP. Им нужна была возможность править тексты сайта, без необходимости лезть в HTML код, и загружать картинки, чтобы им при этом показывало какое именно разрешение должно быть у той или иной картинки.

Так как лэндинги я делаю очень часто, было принято решение написать максимально лёгкий и простой скрипт, который помещается в один PHP файл, и не требует установки. Достаточно кинуть скрипт в папку с лэндингом, и всё - админка готова.

Логика работы скрипта построена следующим образом:

По умолчанию в админке открывается файл "index.html" который обычно является главным HTML файлом лэндинга. Но есть возможность редактировать и дополнительные HTML файлы, выбрав их из выпадающего списка в левом верхнем углу, и нажав кнопку "Редактировать".

В разделе "Тексты" - показывается список всех текстовых фрагментов которые присутствуют на странице. Нажав на любой из них, можно изменить его, не касаясь при этом HTML кода.

После нажатия на любой из текстовых фрагментов открывается поле редактирования.

После того как фрагмент текста отредактирован, нужно нажать кнопку "Заменить текст" и соответствующий фрагмент текста в лэндинге будет изменен.

Картинки лэндинга, включая фоновые изображения прописанные в CSS файлах можно изменить, перейдя в меню на раздел "Картинки". Мы увидим список всех картинок, с указанием их размеров.

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

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

Кроме того прямо здесь можно отредактировать любой из CSS и JS файлов.

Чтобы использовать данный скрипт, нужно сохранить его рядом с index.html лэндинга. Если набрать в адресной строке

http://вашлэндинг.ru/cmsland.php

то мы попадем в нашу админку. Она попросит у нас пароль, по умолчанию - пароль: password. Сам пароль можно изменить отредактировав вот эту строчку скрипта в Notepad++

Исходный код PHP скрипта с подробными комментариями можно скачать тут:

http://pythono.ru/cmsland/cmsland.zip

Полный листинг кода:
https://pastebin.com/Vapws4jT

Из-за того что была поставлена задача сделать скрипт в виде одного файла, пришлось смешивать HTML админки с PHP логикой, но это вполне компенсировалось тем что вся админка состоит из одного файла, который достаточно бросить в папку с любым готовым лэндингом сделанным на HTML+CSS+JS.

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

Данный материал подготовлен @pythono.
Главное изображение с сайта pixabay.com