Среда, 22.11.2017, 18:34
| RSS
Поиск
Главная | Каталог статей
Защита, контроль, управление
Форма входа
Логин:
Пароль:

Меню

Авторские проекты

Авторский блог

Raspberry Pi

Каталог схем

Полезная информация

Обратная связь

Каталог сайтов

Форум

Канал YouTube

Группа в Facebook


Категории каталога
Автоэлектроника [20]
Безопасность [10]
Бытовая электроника [20]
Измерения [10]
Источники питания [12]
Программаторы [5]
Orange Pi [4]

Ссылки



Яндекс.Метрика




Мини-чат

Наш опрос
Как Вы узнали об этом сайте?
Всего ответов: 539

Статистика

Онлайн всего: 5
Гостей: 4
Пользователей: 1
kamencho

Главная » Каталог схем

Домашняя автоматизация на Orange Pi. Часть первая

Автор: Alexsis_76

 

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

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

Тема скриптов обычно является камнем преткновения особенно у начинающих. Это касается JS и еще в большей степени PHP, если браузерный скрипт коим является JS еще можно потрогать и запустить, то с php есть некоторые сложности, это серверный скрипт и соответственно исполняется он на сервере, а у большинства пользователей упоминание про сервер вызывает священный трепет, соответственно и php они считают чем-то сложным и доступным только избранным.

На самом деле это вовсе не так php это простой скриптовый язык с очень низким порогом вхождения, синтаксис языка очень сильно похож на синтаксис си, язык очень прост в освоении.

Создавался для написания веб страниц, поэтому его использование выглядит вполне логично.

Есть вариант для WINDOWS, так что пользователи этой операционной системы не чувствуют себя обделенными.

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

 

Начнем с небольшой теории.

  Что происходит, когда вы набираете в адресной строке адрес сайта?

Браузер шлет HTTP запрос к указанному серверу, сервер как правило слушает 80 порт на предмет входящих запросов, получив такой запрос сервер приступает к его выполнению, например, запрос example.com/index.html заставит сервер отдать файл index.html, имя файла index не принципиально, он может называться по-другому

Если открыть файл в редакторе, то там обнаружится какие-то закорючки и буквы даже, отдаленно не напоминающие нашу красивую страничку, но это и есть страничка только как бы без одежды. :-)

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

 Например, если браузер встретит инструкцию

<input type="button" value=" Нажми ">

то он создаст кнопку и поместит ее в левый верхний угол, но нам нужны будут элементы интерфейса в строго определенных местах ну и красивости всякие, поэтому мы можем дать браузеру несколько инструкций на этот щет, эти инструкции касаются положения элемента на странице и его внешнего вида, называются они стилями, а набор стилей таблицами стилей, стили могут быть размещены в index.html с помощью <style type="text/css">

   ...,

  </style>, а могут подключаться с помощью внешнего файла

Например

<link href="style.css" rel="stylesheet">, стили находятся во внешнем файле style.css

Какой вариант использовать дело вкуса, я предпочитаю второй.

Cобственно двух этих вещей достаточно для создания страницы, index.html описывает состав документа (как бы скелет), а style.css то как они должны выглядеть на экране, попробуйте загрузить html без css сразу все поймете.

Cтраницы бывают статическими и динамическими, статическая страница представляет собой html разметку и возможно внешний файл css.В предыдущем примере была создана статическая страничка. Обычно такие файлы хранятся на жестком диске. При таком представлении мы лишены возможности менять там какие-либо данные иначе как редактированием страницы и ручным добавлением или удалением необходимых данных. Как говорится за простоту приходится платить, но есть и преимущество, статический сайт загружается гораздо быстрей динамического, не надо ничего высчитывать и интерпретировать, все уже готово, такой сайт проще создать.

На этом преимущества заканчиваются.  Вот так происходит отдача статического содержимого:

 

 

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

 

 

          А вот  инструкции, следуя которым браузер создаст для нас такую страницу.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Статическая страница</title>

</head>

<body>

<div id="caption"><h1>Статический сайт </h1></div>

<div id="data"><h1>Сегодня 8 мая 2017 г</h1></div>

<style type="text/css">

    #caption {

        position: absolute;

        bottom: 600px;

        right: 750px;

        font-size: 120%;

        font-family: Verdana, Arial, Helvetica, sans-serif;

        color: #1a0a3e;

    }

    #data{

        position: absolute;

        bottom: 350px;

        right: 750px;

        color: #1a0a3e;

    }

    body{

        cursor: default;

        background: #c1c1c1;

        background-image: -moz-radial-gradient(center 45deg, circle cover, #CCC, #777);

        background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,1000, from(#CCC), to(#777));

        background-image: -o-radial-gradient(center 45deg, circle cover, #CCC, #777);

        background-image: radial-gradient(center 45deg, circle cover, rgba(51, 237, 128, 0.14), rgba(62, 6, 6, 0.43));

        font-family: Consolas, "Liberation Mono", Courier, monospace;

        color: #000;

        font-size: 22px;

        padding-bottom: 30px;

    }

</style>

</body>

</html>

Как видите все очень просто, но смотреть картинки очень быстро надоедаетJ.

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

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

1 способ-c помощью PHP скрипта.

Страница содержит html разметку и инструкции PHP скрипта, прежде чем быть отданной браузеру страница проходит через интерпретатор на сервере, интерпретатор выполняет инструкции заключенные в теги <?php…?>,все что находится вне тегов выводится без изменений.

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

Из сказанного можно сделать вывод что PHP это серверный скрипт, пользователь не может определить была ли эта страница создана одними средствами html или с помощью PHP скрипта.

Скрипт может собрать всю страницу из элементов html, пользователь увидит только конечный результат, самого скрипта он не увидит.

Eдинственным различием будет смена расширения html на php.

Например, выведем надпись средствами html и php.

На html надпись могла бы быть выведена так <h1> НАДПИСЬ</h1>.

На php так.

<? php

print’ <h1>НАДПИСЬ</h1>’;

?>

Теперь вы можете спросить: “Какого черта я должен изучать какой-то php если для того что бы вывести простую надпись нужно написать кучу каких-то непонятных команд” и будете правы для таких простых вещей php не нужен;-).

Теперь рассмотрим вариант по сложнее (не ищите в этом какой-то практический смысл — это пример), допустим у вас на странице имеются две кнопки, при нажатии на них вы должны выводить две совершено одинаковые страницы с изменением всего одного слова.

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

Отдача статики с двумя файлами:

 

 

Продолжение следует...

Добавил: Admin Дата: 10.05.2017 17:46 Просмотры: 420


T2M © 2017
Сайт управляется системой uCoz