1. Инструменты программирования.
Чтобы двигаться дальше надо разобраться почему я выбрал именно эти инструменты для программирования интерактивного сай та - напомню:
Языки программирования: PHP, SQL, HTML, JavaScript, CSS.
Среду программирования: NetBeans.
2. Языки программирования.
Веб-страницы написаны на HTML, языке веб-программирования, который «говорит» браузеру как структурировать и отображать содержимое веб-страницы. Другими словами, HTML составляет основные «строительные блоки» для Веб. И в течении долгого времени эти стандартные блоки были довольно простыми и статичными: текст, ссылки и изображения.
2.1 HTML (HyperText Markup Language).
HTML - язык разметки гипертекста. HTML дает возможность производить переход от одной части текста к другой, и эти части могут храниться на разных компьютерах.
HTML не совсем язык программирования, он создан специально для разметки веб-страниц. Именно он дает браузеру необходимые инструкции о том, как отображать элементы страницы на мониторе. Важно заметить, что не только различные браузеры, но и различные их версии могут по-разному воспринимать и отображать на экране код. Следовательно, некоторые элементы корректно выглядящие в одном браузере могут выглядеть иначе другом. Код HTML состоит из тегов. Теги «говорят» браузеру как форматировать страницу.
Чтобы писать на языке HTML надо его просто знать. HTML - очень простой язык и изучить его можно быстро. Не обязательно в точности запоминать все теги, важно хотя бы понимать их назначение. Тогда можно легко форматировать текст и изменять html страницы. Есть сайт, который мне постоянно помогал в изучении HTML — это сайт htmlbook.ru. На сайте есть полезный раздел — HTML по шагам. С него и можно начать изучение.
2.2 CSS (Cascading Style Sheets).
CSS – каскадная таблица стилей — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языка разметки HTML.
Язык, который позволяет легко и эффективно украсить веб-страницу, например, изменить: цвет текста или фона, размер и начертание шрифта, толщину линий, скруглить углы, создать анимацию и многое, многое другое.
Цель создания CSS – для использования создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML) от описания внешнего вида этой веб-страницы. Такое разделение увеличивает доступность документа, предоставляет большую гибкость при управлении его представлением, а также уменьшает сложность и повторяемость в коде HTML. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях вывода (экранное представление или скин).
2.3 JavaScript.
JavaScript - мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам. Программы на этом языке иногда называют скриптами. В браузере они подключаются напрямую к HTML и, как только загружается страничка – тут же выполняются.
ВНИМАНИЕ! Программы на языке JavaScript - выполняются на стороне клиента (на ПК пользователя) и используются для взаимодействия с пользователем именно он делает страницы сайтов интерактивными. Все современные Веб-браузеры имеют встроенную поддержку для этого языка.
Что умеет JavaScript? В браузере JavaScript умеет делать всё, что относится к манипуляции со страницей, взаимодействию с посетителем и, в какой-то мере, с сервером:
Создавать новые HTML-теги, удалять существующие, менять стили элементов, прятать, показывать элементы и т.п.
Реагировать на действия посетителя, обрабатывать клики мыши, перемещения курсора, нажатия на клавиатуру и т.п.
Посылать запросы на сервер и загружать данные без перезагрузки страницы (эта технология называется "AJAX") …и многое, многое другое.
ВНИМАНИЕ! Браузер накладывает на исполнение JS некоторые ограничения, это сделано для безопасности пользователей, чтобы злоумышленник не мог с помощью JavaScript получить личные данные или как-то навредить компьютеру пользователя. Большинство возможностей JavaScript в браузере ограничено текущим окном и страницей:
не может читать/записывать произвольные файлы на жесткий диск, копировать их или вызывать программы.
не имеет прямого доступа к операционной системе.
современные браузеры могут работать с файлами, но эта возможность ограничена специально выделенной директорией – «песочницей». Возможности по доступу к устройствам также прорабатываются в современных стандартах и частично доступны в некоторых браузерах.
работающий в одной вкладке, не может общаться с другими вкладками и окнами, за исключением случая, когда он сам открыл это окно или несколько вкладок из одного источника (одинаковый домен, порт, протокол).
2.4 PHP (HyperText Preprocessor).
PHP - препроцессор гипертекста, скриптовый язык общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков, применяющихся для создания динамических веб-сайтов.
Итак, на сервере хранится страничка, написанная на php. Пользователь набирает адрес этой странички в браузере. Что происходит после нажатия клавиши Enter? Сервер пошагово исполняет команды и отправляет пользователю результат в виде html-кода. Этот код отображается в окне браузера в виде текста, картинок, видео и так далее (контент). В процессе формирования внешнего вида странички браузер может посылать дополнительные запросы к серверу.
Внимание! PHP выполняется на сервере. То есть PHP не может работать на стороне клиента (на ПК пользователя).
PHP — один из самых популярных в области построения веб-сайтов. Имеет большой набор встроенных средств и дополнительных модулей для разработки веб-приложений[12]. Некоторые из них:
взаимодействие с системами управления базами данных.
работа с локальными и удалёнными файлами.
обработка файлов, загружаемых на сервер и др.
ИТАК:
php выполняется на стороне сервера и не может работать на стороне клиента.
Java Script выполняется на стороне клиента.
2.5 SQL (structured query language).
SQL (structured query language — «язык структурированных запросов») — декларативный язык программирования, применяемый для создания, модификации и управления данными в реляционной базе данных, управляемой соответствующей системой управления базами данных (мы будем использовать MySQL).
База данных (для сайта) - набор таблиц, в которые вы вносите информацию, которая может быть отображена на сайте. Извлекается информация из базы данных с помощью языков PHP и SQL.
Основной набор операций языка SQL:
создание в базе данных новой таблицы;
добавление в таблицу новых записей;
изменение записей;
удаление записей;
выборка записей из одной или нескольких таблиц (в соответствии с заданным условием);
изменение структур таблиц.
3. Среда программирования (Среда разработки) NetBeans.
3.1 Где писать программный код для сайта и как его отлаживать.
Писать код сайта можно в текстовом редакторе:
в простом текстовом редакторе типа Блокнот для windows;
в специализированных текстовых редакторах для кода, таких как Sublimeили Atom;
или в IDE - интегрированной среде разработки приложений:
Microsoft Visual Studio;
NetBeans;
PhpStorm;
Eclipse;
И др.
Их можно сравнивать – какая лучше, у всех есть свои достоинства и недостатки, но для изучения я выбрал БЕСПЛАТНУЮ IDE NetBeans.
3.2 Как производить отладку написанной программы.
Для отладки программы можно использовать любой браузер или IDE. Мы будем использовать браузер Хром.
3.3 IDE NetBeans.
NetBeans IDE - интегрированная среда разработки приложений (IDE) на языках программирования PHP, JavaScript, HTML, CSS, и ряда других. IDE NetBeans позволяет быстро и легко разрабатывать настольные, мобильные и веб-приложения Java, а также приложения HTML5 с использованием технологий HTML, JavaScript и CSS.
Грубо говоря программы, мы будем далее писать и отлаживать в программах NetBeans и Chrome.
3.4 MySQL Workbench.
Для хранения информации мы будем использовать базу данных MySQL - свободная реляционная система управления базами данных.
Для управления базой данных MySQL можно использовать:
PHPMyAdmin (обычно установлена на сервере провайдера и используется бесплатно)
MySQL Workbench (платная и ее надо установить).
Для управления базами данных MySQL, я буду использовать MySQL Workbench.
4. Выводы.
ВАЖНО:
PHP и SQL выполняются на стороне сервера и не могут работать на стороне клиента (на ПК пользователя). С помощью этих языков программирования мы будем считывать информацию из базы и из папок на сервере для формирования сайта. Если мы хотим получить или сохранить информацию используем PHP и SQL.
HTML, CSS, Java Script выполняются на стороне клиента (на ПК пользователя). С помощью этих языков программирования мы будем формировать сайт из полученной с сервера информации и в зависимости от действий пользователя. Если мы хотим организовать диалог с пользователем используем Java Script.
Запомните! Передать информацию из PHP в Java Script легко, наоборот гораздо сложнее.
Подробнее работу со всем вышеописанным рассмотрим в соответствующих разделах.