Четверг, 22.06.2017, 14:05
| RSS
Поиск
Главная | Каталог статей
Защита, контроль, управление
Форма входа
Логин:
Пароль:

Меню

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

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

Raspberry Pi

Каталог схем

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

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

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

Форум

Канал YouTube

Сузуки Клуб Россия


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

Ссылки



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




Мини-чат

Наш опрос
Вы проживаете:
Всего ответов: 755

Статистика

Онлайн всего: 2
Гостей: 2
Пользователей: 0

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

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

Автор: Alexsis_76

 

Рассмотрим вариант с php.

Теперь Вы контролируете формирование странички и текст может выглядеть примерно так (показан только выбор по условию)

<? php

if ($S==1)

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

else

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

?>

Как видите у нас теперь всего один файл index.php, а в него перед отдачей скрипт вставляет строку в зависимости от условия, в зависимости от нажатой кнопки будет отдано либо print’ <h1>НАДПИСЬ</h1>’; либо  print’ <h1>НАДПИСЬ_1</h1>’;,не правда ли просто?

 Динамическая страница:

 

 

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

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

Чем в каждый файл вставлять одинаковую шапку (а это прямой путь к ошибкам), оформим ее в файл header.php и подключим с помощью include

 include "header.php";

Обратите внимания что index.php теперь не передается непосредственно т.к. php код не может быть обработан браузером.

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

С учетом вышесказанного мы можем переписать нашу статическую страничку с учетом полученного опыта.

 

 

Код страницы

<?php

$Name="Test";

$Teg="PHP";

print'

<!DOCTYPE html>

<html>

<head>

    <title>Orangepi :'.$Name.'</title>

</head>

<body>

<div id="caption"><h1>Я динамический сайт на '.$Teg.'</h1></div>

<div id="data"><h1>Сегодня '. date("l dS of F Y h:i:s A").'</h1></div>

 

<style type="text/css">

    #caption {

        position: absolute;

        bottom: 600px;

        right: 600px;

        font-size: 120%;

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

        color: #1a0a3e;

    }

    #data{

        position: absolute;

        bottom: 350px;

        right: 350px;

        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>';

?>

Как видите изменения очень незначительны.

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

Во-вторых, появились две переменные

$Name="Test";

$Teg="PHP";

Команда print’…’ -все что стоит между ‘ и ‘будет выведено на экран.

В примере показана манипуляция с надписью в <title>, с надписью caption, а также при каждой новой загрузке будет выводится текущее системное время.

Теперь некоторое описание кода.

<title>Статическая страница</title> и <title>Orangepi:'. $Name.'</title>

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

Во втором после Orangepi : интерпретатор подставит значение переменной $Name="Test ,получим

Orangepi :Test.

Изменяя значение переменной $Name можно получить различные title.

То же самое происходит и с

<div id="caption"><h1>Статический сайт </h1></div> и <div id="caption"><h1>Я динамический сайт на '.$Teg.'</h1></div>.

тут появились конструкция <div id="caption">.

Элемент <div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого.

id="caption" называется селектором (бывает еще class и еще целая куча, ознакомиться с ними можно читая докиJ, идентификаторы нам пригодятся, когда будем работать с JS), с его помощью можно однозначно индентифицировать <div>.

<div> всегда завершается закрывающим тегом </div>.

Обратите внимание на   

 #caption {

        position: absolute;

        bottom: 600px;

        right: 600px;

        font-size: 120%;

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

        color: #1a0a3e;

    }

Здесь мы задаем стили элементу с id=” caption”, т.е. получаем возможность манипулировать надписями в тегах <h1> …</h1> элемента с id=” caption”, вот этого <div id="caption"><h1>Статический сайт </h1></div> и <div id="caption"><h1>Я динамический сайт на '.$Teg.'</h1></div>.

В данном случае мы задаем позицию текста на экране.

        position: absolute;

        bottom: 600px;

        right: 600px;

размер шрифта и его начертание

        font-size: 120%;

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

ну и цвет надписи

color: #1a0a3e;

 Ну и последнее

<div id="data"><h1>Сегодня 8 мая 2017 г</h1></div> и во втором случае

<div id="data"><h1>Сегодня '. date("l dS of F Y h:i:s A").'</h1></div>

В первом случае пользователь всегда видит “сегодня 8 мая 2017 г”.

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

Как видите все это довольно просто и при небольшой тренировке у вас обязательно все получится (ну а как же “Без труда не выловишь и рыбку из пруда”).

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

С удовольствием выслушаю комментарии, замечания.

С уважением alexsis_76 ;-).

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


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