Опора деревянной одностоечной и способы укрепление угловых опор: Опоры ВЛ - конструкции, предназначенные для поддерживания проводов на необходимой высоте над землей, водой...
Индивидуальные и групповые автопоилки: для животных. Схемы и конструкции...
Топ:
Основы обеспечения единства измерений: Обеспечение единства измерений - деятельность метрологических служб, направленная на достижение...
Эволюция кровеносной системы позвоночных животных: Биологическая эволюция – необратимый процесс исторического развития живой природы...
Генеалогическое древо Султанов Османской империи: Османские правители, вначале, будучи еще бейлербеями Анатолии, женились на дочерях византийских императоров...
Интересное:
Как мы говорим и как мы слушаем: общение можно сравнить с огромным зонтиком, под которым скрыто все...
Подходы к решению темы фильма: Существует три основных типа исторического фильма, имеющих между собой много общего...
Искусственное повышение поверхности территории: Варианты искусственного повышения поверхности территории необходимо выбирать на основе анализа следующих характеристик защищаемой территории...
Дисциплины:
 2017-09-10 |
 277 |
из
5.00
|
Заказать работу |
|
|
|
|
1.Установить веб-окружение битрикс на свой рабочий компьютер.
Для этого скачать себе файл bitrix_env.exe и запустить его. Все настройки и пути для установки оставить по умолчанию. После установки проверить корректность работы сервера, в браузере по адресу localhost:6448 должна открыться страница, на которой будет информация по BitrixEnvironment.
Скачать веб-окружение можно по адресу: http://www.1c-bitrix.ru/products/env/
Это наиболее простой и удобный способ установки веб-окружения.
2. Сервер установлен, создаем свой первый скрипт.
В папке c:\Bitrix\www\ создадим файл lesson_01.php со следующим содержимым:
<?php
echo "Hello, World!";
?>
Теперь в браузере, по адресу localhost:6448/lesson_01.php мы должны пронаблюдать данное приветствие. Если всё хорошо, значит окружение готово для выполнения основного задания.
3. Для выполнения задачи рекомендуется сразу скачать набор инструментов Bootstrap: http://getbootstrap.com/getting-started/
4. Распаковать из скачанного архива в папку с созданным файлом lesson_01.php, файлы: bootstrap.css, jquery-1.12.2.min.jsи bootstrap.js
5. Создать файл style.cssв той же папке.
6. За основу будет использоваться профиль пользователя:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Профиль</title>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="style.css">
<scriptsrc="jquery-1.12.2.min.js"></script>
<script src="bootstrap.js"></script>
</head>
<body>
<div class="container">
<divclass="row">
<!-- левая колонка -->
<div class="col-md-2 col-md-offset-2">
<a href="#" class="thumbnail">
<imgsrc="_.jpg" width="155" height="200" />
</a>
<ul class="navnav-pills nav-stacked">
<li class="active"><a href="#">Моидрузья<span class="badge">23</span></a></li>
<li><a href="#">Сообщения<span class="badge">8</span></a></li>
|
|
<li><a href="#">Моигруппы</a></li>
<li><a href="#">Мои новости</a></li>
</ul>
</div>
<!-- правая колонка -->
<div class="col-md-6">
<h1 class="page-header">Имя<small>Город</small></h1>
<blockquote>НачальникЦИОТПГУТИ</blockquote>
<table class="table table-striped">
<tr>
<td width="150"><strong>Роднойгород:</strong></td>
<td>Родной город</td>
</tr>
<tr>
<td><strong>Образование:</strong></td>
<td>Образование</td>
</tr>
<tr>
<td><strong>Языки:</strong></td>
<td>Русский</td>
</tr>
<tr>
<td><strong>Вуз:</strong></td>
<td>Вуз</td>
</tr>
<tr>
<td><strong>Факультет:</strong></td>
<td>Факультет</td>
</tr>
<tr>
<td><strong>Кафедра:</strong></td>
<td>Кафедра</td>
</tr>
<tr>
<td><strong>Формаобучения:</strong></td>
<td>Форма обучения</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
Данный код следует сохранить в файле index.html.
7. Следует перенести содержимое вашего файла html, с выполненным заданием, в созданный на пункте 2 файл lesson_05.php, если есть дополнительные файлы (картинки, css, js) – помещаем их в папку c:\Bitrix\www\ рядом с файлом lesson_05.php, сохраняя при этом структуру.
Проверка в браузере, должна показать условный профиль пользователя.
8. Разобьем информацию о себе на логические части, однообразные элементы можно вынести в группы и создадим многомерный массив, для этого в файле lesson_05.php перед html кодом вставим следующий код:
<?php
$arProfile = Array(
"FOTO" => "",
"NAME" => "",
"JOB" => "",
"CONTROL" =>Array(
0 =>Array(
"ACTIVE" => "Y",
"NAME" => "МоиДрузья",
"COUNT" => 42
),
...
),
"INFO" =>Array(
0 =>Array(
"NAME" => "Роднойгород",
"VALUE" => "Самара"
),
...
)
);
?>
Т.е. вмассиве $arProfile[“CONTROL”] у нас будут храниться элементы, отвечающие за управление профилем, которые в свою очередь имеют три значения – количество элементов, название и активность.
|
|
В свою очередь в массиве $arProfile[“INFO”] будут храниться элементы, отвечающие за информацию о Вас, имеющие название и значение.
Элементы FOTO, NAME, JOBзаполнить самостоятельно актуальными данными, в качестве фото просто указать путь до файла относительно текущей директории (например, images/myphoto.jpg).
Дозаполняем поля самостоятельно.
9. Когда массив готов приступим к шаблонизации нашей страницы:
Одиночные, не повторяющиеся строчные элементы в htmlкоде заменим выводом информации из нашего массива. Для этого будем использовать альтернативную запись вывода информации (<?=$variable?>).
Пример:
<imgsrc=” images/myphoto.jpg ”class=”myclass”>
Заменимна
<imgsrc=” <?=$arProfile[“FOTO”]?> ” class=”myclass”>
Таких записей у нас должно получиться три (имя, фото, должность) – остальное заменяем по аналогии.
10. Перейдем к списку ссылок (левая колонка). Они имеют однообразную структуру, поэтому их можно вывести с помощью цикла. Дляэтогоблокабудемиспользоватьконструкциюforeach;
<?foreach($arProfile["CONTROL"] as $key => $value):?>
...
<?endforeach;?>
На каждой итерации цикла переменная $keyбудет иметь значение ключа массива $arProfile["CONTROL"], а переменная $valueбудет представлять собой массив со значениями данного элемента.
Внутри цикла будем выводить соответствующую информацию из массива, т.е. блок
<ul class="nav navpills navstacked">
<li class="active"><a href="">Мои Друзья <span class="badge">42</span></a></li>
<li><a href="">Сообщения <span class="badge">10</span></a></li>
<li><a href="">Мои Группы</a></li>
<li><a href="">Мои Новости</a></li>
</ul>
Заменимна
<ul class="nav navpills navstacked">
<?foreach($arProfile["CONTROL"] as $key => $value):?>
<li><a href=""><?=$value[“NAME”]?></a></li>
<?endforeach;?>
</ul>
Проверяем что получилось, должны получиться однотипные ссылки, но в нашем первоначальном варианте имелось выделение активных ссылок цветом, и показывалось кол-во данных элементов. Для реализации данного момента воспользуемся тернарным оператором
(условие)? “значение 1”: “значение 2”
Т.е. если условие имеет значение true(истинно) данный оператор выведет значение 1, если нет, то значение 2. Тогда реализация активных ссылок будет выглядеть следующим образом:
<li<?=($value["ACTIVE"] == “Y”)?‘class="active"’: ‘’?>><a href=""><?=$value[“NAME”]?></a></li>
|
|
Таким образом, все элементы массива, которые имеют значение “ACTIVE” равное “Y” будут выводиться с классом “active”. Проверяем, по аналогии делаем вывод кол-ва элементов. Условием для вывода будет служить проверка на то, что $value[“COUNT”] больше нуля. Для приведения типа к целочисленному используем функцию IntVal($param1); В качестве $param1 она принимает люое значение, и если его можно привести к целочисленному виду возвращает нам число, если нет false.
11. Переходим к блоку с выводом информации, для его шаблонизации воспользуемся циклом for;
Перед этим заведем переменную $countхранящую в себе количество элементов соответсвующего массива, понадобится нам для организации цикла:
$count = count($arProfile[“INFO”]);
Итеперь, заменимблок
<table class="table tablestriped">
<tr>
<td><strong>Родной город:</strong></td> <td>Самара</td>
</tr>
…
</table>
Наследующий:
<table class="table tablestriped">
<?
for($i = 0; $i< $count; $i++)
{
echo '<td><strong>'. $arProfile["INFO"][$i]["NAME"]. ':</strong></td><td>'. $arProfile["INFO"][$i]["NAME"]. '</td>';
}
?>
</table>
На этом примере мы познакомились с оператором конкатенации строк “.”, его работа заключается в объединении строковых переменных в одну строку.
Самостоятельно сделать вывод класса, который отвечает за цвет строки, для каждой второй строки. Для этого нужно использовать оператор “%” – остаток от деления.
Пример его работы:
$test = 10 % 3;
Переменная $testв итоге получит значение равное 1.
|
|
|
Семя – орган полового размножения и расселения растений: наружи у семян имеется плотный покров – кожура...
Типы оградительных сооружений в морском порту: По расположению оградительных сооружений в плане различают волноломы, обе оконечности...
Типы сооружений для обработки осадков: Септиками называются сооружения, в которых одновременно происходят осветление сточной жидкости...
Двойное оплодотворение у цветковых растений: Оплодотворение - это процесс слияния мужской и женской половых клеток с образованием зиготы...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!