Просмтор этого файла доступен только зарегистрированным пользователям. Но у нас супер быстрая регистрация: достаточно только электронной почты!

Текст из файла (страница 5)

Постоянные данные в среде базы данных включают в себя схему и базу данных. Система управления базами данных (СУБД) использует определения данных в схеме для обеспечения доступа и управления доступом к данным в базе данных [25]. Структура базы данных для разрабатываемого сайта представлена на рисунке 11.

Рисунок 11 – Структура базы данных для сайта ООО «Перспетива»

2.5 Проектирование системы навигации динамического сайта

Система навигации сайта – совокупность текстовых и графических гиперссылок, предназначенных для поиска информации на сайте. Самая лучшая поисковая система не сможет заменить грамотно построенную систему навигации сайта [26].

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

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

Различают вертикальную, горизонтальную и комбинированную навигацию сайта [27]. Динамический сайт ООО «Перспектива» будет иметь горизонтальную навигацию. Такая навигация удобна тем, что все самые важные пункты сайта будут видны без прокрутки. И не обязательно создавать кнопку «Вернуться назад» или «Вернуться на главную страницу», так как это можно сделать, кликнув на кнопку «О компании», находясь на любой странице сайта. Основное горизонтальное меню будет состоять из пунктов:

1. О компании

2. Наши работы

3. Расчёт

4. Отзывы

5. Вход (регистрация)

3 ПРОГРАММНАЯ ЧАСТЬ РАБОТКИ WEB-САЙТА

3.1 Блочная вёрстка страниц сайта

Любая программная разработка web-сайта начинается с вёрстки страниц.

Вёрстка веб-страниц – создание структуры html-кода, размещающего элементы веб-страницы (изображения, текст и т. д.) в окне браузера, согласно разработанному макету, таким образом, чтобы элементы дизайна выглядели аналогично макету.

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

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

Хотя работа верстальщика скрыта от глаз, именно она обеспечивает бесперебойность при работе на различных устройствах, а также скорость загрузки каждой страницы сайта [28].
В самом начале нужно определить для браузера с помощью чего мы верстаем данный блок:

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

footer{

color: #f00;

position: relative;

float: left;

width: 100vw;

background: #fc0;

margin: 2vw 0 0 0;

В этой части кода описывается положение, цвет, тип и жирность шрифта текста, находящегося в подвале сайта.

3.2 Всплывающий блок «О компании»

Блок

<aside id="inf">

Изначально равен 0. При клике на кнопку «О компании» запускается скрипт:

<script>

var state = false;

$('#comp').click(function(){//отслеживание клика

if(state==false) {

$('#inf').slideDown('fast', function() { // открытие блока

});

state = true;

} else {

$('#inf').slideUp('fast', function() {/закрытие блока

});

state= false;

}

});

</script> [29]

который, реализует открытие и закрытие блока с информацией о компании.

3.3 Окно регистрации

Весь блок header и модальное окно вынесены в отдельный файл 'header.php и подключёны к php: include('header.php').

Работа модального окна.

Скрипт обработки вынесен в отдельный файл modal.js

$(document).ready(function() { // зaгрузка стрaницы $('a#go').click( function(event){ // отслеживание клика пo ссылке с id="go"

event.preventDefault(); // выключение стaндaртной рoли элементa

$('#overlay').fadeIn(400, // появление темной пoдлoжки

function(){$('#modal_form')

.css('display', 'block')

.animate({opacity: 1, top: '50%'}, 200); // прибавление прозрачности и переход вниз

});

});

Далее следует закрытие модального окна. Происходит всё так же как описано выше, но только в обратном порядке [30].

$('#modal_close, #overlay').click( function(){ // отслеживаем клик пo крестику или пoдлoжке

$('#modal_form')

.animate({opacity: 0, top: '45%'}, 200, // плaвнo меняется прoзрaчнoсть нa 0 и oднoвременнo oкнo двигаетмя вверх

function(){

$(this).css('display', 'none');

$('#overlay').fadeOut(400); // скрывaем пoдлoжку

}

);

});

});

3.4 Программная реализация регистрации пользователя на сайте

При вводе контактных данных пользователем в форму регистрации, происходит отправка следующего скрипта в базу данных:

<?php

include 'db.php';

if(isset($_POST['login'] ))

{

$login =$_POST['login'];

$name =$_POST['name'];

$phon =$_POST['phon'];

$em =$_POST['email'];

$pwd =$_POST['pass'];

}

//$login =sanString($_POST['login']);

//$pwd =sanString($_POST['pass']);

//$lname =sanString($_POST['phon']);

//$em =sanString($_POST['email']);

//$name =sanString($_POST['name']);

if($login==""||$pwd==""||$name==""||$lname=""||$em==""||$phon="")

{

echo "Пожалуйста введите все данные";

}

else

{

$query = "INSERT INTO user (login,pwd,name,email,phon) VALUES('$login','$pwd','$name','$em','$phon')";

if($result = $mysqli->query($query))

{

echo 'Спасибо за регистрацию: </br>

<a href="../index.php">Верунться на главную старницу</a> ';

}

else{

echo"need other login";

}

}

?>

Если же пользователь уже зарегистрирован, он может просто войти на сайт, заполнив форму входа. После чего происходит выборка из базы данных информации, которая затем добавляется в сессию. [23] Web-сервер не поддерживает постоянного соединения с клиентом, и каждый запрос обрабатывается, как новый, безо всякой связи с предыдущими.
То есть, нельзя ни отследить запросы от одного и того же посетителя, ни сохранить для него переменные между просмотрами отдельных страниц. Вот для решения этих двух задач и были изобретены сессии.
Для однозначной идентификации браузера и создающего для этого браузера файла на сервере, в котором хранятся переменные сеанса. $_SESSION['user']=$login;

$_SESSION['pass']=$pwd;

Все скрипты выполняются с помощью AJAX технологии. AJAX — это название для набора техник разработки веб-интерфейсов, позволяющих делать динамические запросы к серверу без видимой перезагрузки веб-страницы: пользователь не замечает, когда его браузер запрашивает данные. $(document).ready(function() {

$('a#logout').click( function(event){ // отслеживание клика пo ссылке с id="logout"

// alert('?');

$.ajax({

url: "aut/logout.php",

cache: false,

success: function(){

// alert("vishli");

document.location.reload();

}

});

});

});

При нажатии кнопки «Выход» браузер понимает, что происходит закрытие сессии и выполняет следующий сценарий:

function dSession()

{

$_SESSION=array();

if(session_id()!=""||isset($_COOKIE[session_name()]))

setcookie(session_name(),'',time()-2592000,'/');

session_destroy();

}

3.5 Добавление отзывов пользователя на сайт

Этот раздел описывается языком PHP. Добавление отзывов реализуется с помощью выборки информации из базы данных, помещаемых на основную страницу с отзывами.

$query = "SELECT * FROM post LIMIT 0,4";

if ($result = $mysqli->query($query)) {

echo " &nbsp&nbsp&nbsp";

$row = $result->fetch_all(MYSQLI_ASSOC);

//echo '<ul id="">';

foreach ($row as $val):{

//echo ' <li>';

echo '<section id="otzbloc">';

echo '<H2> от кого: '.$val['idotp'].'</H2>';

echo '<p>' .$val['text']. '</p>';

echo 'Дата: <time>'.$val['date'].'</time>';

echo '</section>';

} endforeach;

}

//echo '</ul>';

$result→close(); // выбока из базы данных.

3.6 Программная реализация формы «Расчёт »

Расчёт реализуется на языке Java Script

Изначально в коде следует прописать определение вводимых пользователем данных в форму:

$(document).ready(function(){

var rashet = {

tippot: $("#tipp"),

ploshad: $("#pl"),

ugli: $("#ug"),

obtryb: $("#ob"),

declenta: $("#de"),

lustra: $("#lus"),

svetil: $("#svet")

};

Цена каждого вида потолка и дополнительного параметра, такого как светильник, угол и т.д. задана сразу в коде:

var cena = {

ugli: 100,

obtryb: 200,

declenta: 50,

lustra: 500,

svetil: 350

};

var ploshad ={

a1: 440, // матовый белый

a8: 510, // матовый цветно

a3: 450, // Сатиновый белый

a4: 500, // Сатиновый цветной

a5: 450, // лаковый белый

a6: 500, // лаковый цветной

a7: 650 // полупрозрачный

};

При нажатии кнопки расчета выполняется запуск функции расчета, где указана формула:

Ц= , где э.ф. это лемент формы, а – цена за единицу этого элемента.

Приведём пример рассчёта матового белого потолка:

case 1: sum= //матовый белый

Number(rashet.ploshad.val()) * ploshad.a1 + //площадь

Number(rashet.ugli.val()) * cena.ugli + //углы

Number(rashet.obtryb.val()) * cena.obtryb + //трубы

Number(rashet.declenta.val()) * cena.declenta + //лета

Number(rashet.lustra.val()) * cena.lustra + //люстра

Number(rashet.svetil.val()) * cena.svetil ; + //светильник

При изменении параметров, входящих в расчёт, естественно меняется и цена данного расчёта, её замена происходит следующим образом:

$('#summa').html(sum+" рублей");

3.7 Программная реализация страницы с изображениями работ

компании

Сама галерея написана на языке Java Script, а вывод изображений на экран создан с помощью PHP

<?php

for ($i=1; $i < 14 ; $i++) {

echo '<a href="#" ><img src="img/'.$i.'.jpg" width="566" alt="1144953 3 2x"></a>';

}

?>

</div>

<ul class="pagination">

<?php

for ($i=1; $i < 14; $i++) {

echo '<li><a href="#"><img src="img/'.$i.'.jpg" width="55" alt="1144953 1 2x"></a> </li>';

}

?>

Далее используется библиотека jquery для перелистывания слайдов и вывода картинок на страницу.

Код параметров галереи (скорость перелистывания, скорость анимации, создание кнопок перелистывания и боковой панели):

<script>

$(function(){

$('#products').slides({

preload: true,

preloadImage: 'img/loading.gif',

effect: 'slide, fade',

crossfade: true,

slideSpeed: 200,

fadeSpeed: 500,

generateNextPrev: true,

generatePagination: false

});

});

</script>

3.8 Размещение web-сайта в сети интернет

В серверной части архитектуры рассматривается работа web-сайта в сети Интернет, взаимодействие программного обеспечения компании и сервисов, предоставляемых собственниками серверов, провайдеров. После изготовления web-сайта необходимо будет разместить его в сети интернет, следовательно, придется столкнуться с выбором мест размещения, иначе говоря выбрать хостинг.

Характеристики

Список файлов ВКР