В жизни бывают определенные моменты, когда вам нужна веб-страница, чтобы делать что-то большее, чем просто сидеть на ней, будучи веб-страницей. Он нужен вам, чтобы заработать себе на жизнь. Один из способов сделать это - заставить его работать на вас, чтобы вам не пришлось вручную кодировать каждое обновление или мод страницы. Самый простой способ научиться делать что-то подобное - это сделать это на самом деле, поэтому в оставшейся части этой статьи я покажу вам один из способов реализации системы, которая будет создавать для вас новые веб-страницы одним касанием кнопка.
В этом сценарии мы предполагаем, что ваш клиент - ресторан, который хочет предлагать ваучеры на разные особые случаи в течение года. Но, конечно, они не хотят платить вам за обновление для них, поэтому вам лучше убедиться, что вы выставили им достаточный счет за эту систему автоматизации, которая будет делать обновления для них.
1. Сначала нам нужно создать базовый шаблон веб-страницы.
Это просто стандартный каркас веб-страницы. Вы можете дать ему имя, например, pageBuilder.php или что-нибудь в этом роде. Для этого не обязательно использовать PHP. Вы можете использовать другой язык программирования, но в этом примере мы сделаем все просто и сделаем все на PHP.
2. Добавить Bootstrap
Это поможет улучшить форму без лишних усилий. Конечно, для этого вам понадобится Bootstrap.
3. Настроить контейнер
Чтобы все было аккуратно и аккуратно, мы должны определить контейнер, в котором мы будем хранить содержимое страницы.
4. Создание веб-формы
Определите веб-форму, и мы также добавим причудливое название в форму, которая является необязательной, но хорошей идеей.
5. Добавить поля формы
Это действительно просто. Нам просто нужно собрать несколько основных деталей, которые робот будет использовать для создания новой веб-страницы. Данные, которые нам необходимо знать, включают:
- Фоновое изображение для страницы
- Название праздника
- Headline
- Вступительная речь
- Некоторая банальная цитата или дополнительная инструкция
- Атрибуция для банальной цитаты
- Стиль шрифта, используемый для каждого из четырех элементов обрамляющего текста (по отдельности).
- Диапазон дат, согласно которому ваучеры действительны для
- Предложите 1 и предложите 2, которые будут рекламироваться на ваучеры.
- Дополнительные сообщения ваучера (например, условия)
- Данные для ваучерных QR-кодов, которые будут сгенерированы
Вот как это выглядит:
И после всех этих усилий мы получим страницу, которая выглядит примерно так:
Хорошая новость заключается в том, что половина работы уже выполнена, и это была самая трудная и трудоемкая половина. Остальное намного проще.
6. Создайте файл процессора формы
После создания формы вам понадобится программное обеспечение, которое будет обрабатывать отправленные данные и что-то с ними делать. В этом случае мы будем использовать отправленные данные для создания нового HTML стр.
Теперь имейте в виду, что это не то же самое, что обычный ответ PHP, где данные используются в реальном времени и динамически отражаются для пользователя. Вместо этого мы создаем статическую страницу, которая будет существовать постоянно, пока мы ее не перезапишем.
Файл должен быть назван так же, как и действие значение атрибута в объявлении формы, поэтому в нашем примере это будет voucherGen.php, и поскольку мы не указали путь, его нужно будет сохранить в том же месте, что и pageBuilder.php для его работы.
7. Инициализировать переменные
Данные, представленные из pageBuilder.php был возвращен как ассоциативный массив, называемый $ _POST, и все значения данных в массиве могут быть доступны через их управление формой HTML имя атрибуты. Поэтому инициализировать наши переменные на самом деле довольно просто. Это также необязательно, но это просто делает код более аккуратным и более легким для чтения. Вы, безусловно, можете работать напрямую с $ _POST если вы предпочитаете.
8. Используйте условные выражения, чтобы установить правильные значения шрифтов.
Сделав это раньше, вы сэкономите время и сэкономите проблемы позже. Мы просто проверяем, какие значения были выбраны, а затем заменяем их фактическими названиями шрифтов.
9. Начните строить генераторную строку
На самом деле все, что нам нужно здесь сделать, это создать одну действительно длинную строку, которая будет содержать все необходимое для создания новой страницы. Мы будем использовать конкатенацию строк, чтобы сделать ее удобочитаемой и упростить просмотр, куда были вставлены значения данных. Это начинается с настройки базовой HTML-страницы:
Вы, наверное, видите, к чему мы идем. Обратите внимание на точку с запятой в конце. Это важно. Также любые точки с запятой, встречающиеся в тексте (как часть объявления CSS или клиентского скрипта), должны быть заключены в кавычки.
10. Начать добавление тела страницы в строку генератора
Есть более эффективные способы построения этой строки, но мне нравится делать код аккуратным, чтобы его было легко читать. Для этого вы можете использовать сокращенные методы, и вам также не нужно делать это как отдельный процесс для шага 9. Я чувствую, что легче понять, когда различные разделы страницы разделены таким образом.
11. Напишите строку генератора в HTML
В этом случае мы жестко кодируем имя файла, но вы можете (и, вероятно, должны) сделать это поле в своей форме pageBuilder.
12. Добавить тестовую ссылку
Когда вы нажимаете кнопку BUILD IT, потому что она не перенаправляется на веб-страницу, как в обычной программе PHP, вам нужно добавить ссылку или что-то в этом роде и посмотреть, что получилось.
13. Создание пользовательского файла CSS
Вы можете сохранить дополнительные инструкции по стилю в этом файле, но на данный момент единственной важной является инструкция по стилю для main див.
14. Создание и загрузка wrap.png
Чтобы это работало правильно, вам нужно создать одно полупрозрачное изображение в пикселях и назовите его wrap.png затем загрузите его по пути, указанному в custom.css .
15. Загрузите подходящие фоновые изображения и проверьте свой pageBuilder
Вы будете в восторге, узнав, что мы почти закончили, и теперь это просто вопрос тестирования и исправления любых возникающих ошибок. Выберите несколько красивых простых изображений, которые не слишком загружены и подходят для особых событий или случаев (в нашем примере это День матери и День отца). Загрузите изображения в папку, в которой вы храните изображения для своего веб-сайта. Затем заполните форму, нажмите кнопку и посмотрите, что произойдет. Вот пример формы со всеми заполненными полями данных.
Это должно привести к созданию чего-то совершенно подобного:
Мы уже догадались, что вы не захотите вводить все с нуля, поэтому вы можете загрузить исходный код для pageBuilder.php и voucherGen.php в этом архива.
Вы можете применить эту технику создания файлов HTML в виде строк, а затем записать их в файлы во всех ситуациях. Только будьте осторожны, никогда не помещайте что-то подобное в рекурсивный цикл, иначе вы заполните свой жесткий диск и выйдет из строя сервер.
Très très Instructif, j'ai essayé et ça marche à merveille, milles merci
Пожалуйста! 👍👍👍