План-конспект по теории алгоритмов на тему "Создание и размещение сайта"

МИНИСТЕРСТВО НАУКИ и высшего ОБРАЗОВАНИЯ

Российской Федерации

Федеральное государственное автономное образовательное

учреждение высшего образования

«Крымский федеральный университет

имени В.И. Вернадского»

ТАВРИЧЕСКИЙ колледж

(структурное подразделение)

План-конспект урока на тему:

Создание и развертка сайта на HTML и PHP с использованием OpenServer

Выполнил:

Горин Андрей Константинович, преподаватель

Симферополь, 2021

Введение

Проект посвящен актуальной теме: создание и развертка сайта на HTML и PHP с использованием OpenServer.

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

Поэтому стоит более подробно изучить создание сайта на HTML и PHP.

Цель: изучить создание и развертку сайта на HTML и PHP с использованием OpenServer.

Задачи:

·        Выяснить что такое и зачем использовать HTML и PHP

·        Изучить программу OpenServer

·        Выявить для чего используют Figma для создания сайта

·        Сделать развертку сайта в Figma

·        Разобраться в работе с OpenServer

·        Приступить к написанию сайта

HTML и PHP

HTML — это язык гипертекстовой разметки страницы. Он используется для того, чтобы дать браузеру понять, как нужно отображать загруженный сайт. [1]

Язык состоит из тегов — это своеобразные команды, которые преобразовываются в визуальные объекты в браузере пользователя.

Например, тег <p> используется для создания абзацев на странице. Тег обязательно должен закрываться, т.к. является парным. Пример представлен на рисунке 1.

Рисунок 1 – Использование тега <p>

Также парные теги используются для разметки блоков, например:

·        контейнеров;

·        абзацев;

·        заголовков;

·        списков;

·        таблиц и т.д.

Рисунок 2 – Пример использования контейнера и таблицы

Если прописывать только теги, то на сайте это все будет выглядеть непрезентабельно. Чтобы придать более красивый вид сайту, нужно использовать CSS. CSS — язык описания внешнего вида HTML-документа. [2]

Рисунок 3 – Фрагмент кода CSS

Теперь разберемся что такое PHP и зачем его используют для создания сайта.

PHP — это распространённый язык программирования общего назначения с открытым исходным кодом. PHP специально сконструирован для веб-разработок и его код может внедряться непосредственно в HTML. Вместо рутинного вывода HTML-кода командами языка, скрипт PHP содержит HTML с встроенным кодом. Код PHP отделяется специальными начальным и конечным тегами <?php и ?>, которые позволяют "переключаться" в "PHP-режим" и выходить из него. [3]

Рисунок 4 – Фрагмент кода с переключением с HTML на PHP

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

Рисунок 5 – Использование PHP для заполнения таблицы данными из БД

На рисунке выше представлен пример использования кода PHP для заполнения таблицы студентов группы.

OpenServer

Open Server — это портативный локальный WAMP сервер, имеющий многофункциональную управляющую программу и большой выбор подключаемых компонентов. [4]

Локальный сервер – это набор компонентов, позволяющий работать с сайтом прямо на компьютере, не используя при этом хостинг. Хостинг – это услуга по предоставлению ресурсов для размещения информации на сервере, постоянно имеющем доступ к сети. Хостинг является платным, а для создания своего первого сайта не нужно, чтобы он находился на платном хостинге, поэтому целесообразнее использовать локальный сервер. Для этого будем использовать именно OpenServer.

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

В ходе работы из дополнительных программ был использован PhpMyAdmin для работы с базами данных.

Figma

Figma – это графический редактор для совместного проектирования сайтов, приложений и других дизайнерских продуктов. Она появилась в 2016 году как аналог Sketch и Adobe XD, но спустя пару лет стала одним из самых популярных инструментов у дизайнеров. [5]

Преимущества Figma заключаются в удобном и понятном интерфейсе, разнообразным количеством шрифтов, различными фреймами под разные экраны. То есть в данном редакторе можно создать дизайн сайта как для экрана ПК, так и для экрана мобильного телефона, чтобы сделать адаптивный под разные устройства сайт.

Рисунок 6 – Интерфейс Figma

Помимо вышеперечисленных преимуществ, хотелось бы выделить то, что в Figma есть пункт в меню, который показывает код к определенному элементу, то есть координаты размещения текста на фрейме, цвет, ширину и толщину и тому подобные свойства.

Рисунок 7 – Форма регистрации

Рисунок 8 – Код для элемента формы регистрации

Именно поэтому для отрисовки развертки сайта была выбрана Figma.

Создание развертки сайта.

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

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

Рисунок 8 – Главная страница

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

Рисунок 9 – страница с формой регистрации

Рисунок 10 – страница с формой авторизации

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

Так как сайт небольшой, создан для того, чтобы разобраться с работой на HTML и PHP, поэтому представлены только три страницы.

Написание сайта

Для написания сайта был использован VisualCode и OpenServer.

Создание начинается с того, что создать новый проект в VisualCode и папку с проектом в OpenServer. Затем начинается процесс написания кода.

Рисунок 11 – Фрагмент кода главной страницы

Так выглядит главная страница сайта:

Рисунок 12

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

Рисунок 13 – База данных

Рисунок 14 – Подключение базы данных

Рисунок 14 – Вывод данных из БД в таблицу

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

Рисунок 15 – Создание ссылок

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

Рисунок 16 – Фрагмент кода для подключения БД регистрации

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

Рисунок 17 – Регистрация пользователя

Рисунок 18 – Добавление его данных в БД (автоматическое)

Во время регистрации используется кодирование пароля для предотвращения кражи пароля у пользователя.

Рисунок 19 – Авторизация пользователя

Рисунок 20 – Успешная авторизация

Рисунок 21 – Ошибка авторизации

Рисунок 22 – Вывод сообщения об ошибке

Заключение

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

·        Выяснено что такое и зачем использовать HTML и PHP

·        Изучено программу OpenServer

·        Выявлено для чего используют Figma для создания сайта

·        Сделана развертка сайта в Figma

·        Разобрались в работе с OpenServer

·        Завершена работа по написанию сайта

Можно сделать вывод, что на данный момент времени создание сайта является актуальной темой, сайты используют повсеместно. Для работы с сайтом необходимо изучить HTML, CSS, PHP и уметь работать с базами данных. Также необходимо перед работой проработать дизайн сайта, а затем начинать работать с кодом.

Список использованных источников

1.     Что такое HTML и почему его должен знать каждый веб-разработчик // skillbox URL: https://skillbox.ru/media/code/chto_takoe_html/ (дата обращения: 05.03.2022).

2.     Учимся верстать: что такое CSS // skillbox URL: https://skillbox.ru/media/code/chto_takoe_css/ (дата обращения: 05.03.2022).

3.     Что такое PHP? // php URL: https://www.php.net/manual/ru/intro-whatis.php (дата обращения: 05.03.2022).

4.     Open Server — профессиональный инструмент веб-разработчика под Windows // habr URL: https://habr.com/ru/post/137388/ (дата обращения: 06.03.2022).

5.     Что такое Figma: возможности и принципы работы // skillbox URL: https://skillbox.ru/media/design/chto_takoe_figma/ (дата обращения: 06.03.2022).