курсач. Г ичных webприложений

• Название: Г ичных webприложений
• Анкор: курсач
• Дата: 15.05.2022
• Размер: 2.94 Mb.
• Имя файла: kursovaya_2_00.docx
• Тип: Обзор; #529937
• страница: 3 из 4

class="norm-title result center" style="color: #D2515C;" >К

сожалению по данным требованиям мы ничего не смогли собрать</h3>

Если была найдена хоть одна сборка, то начинается целый блок кода,

который сначала выдает сообщение:

else {

?>

="norm-title result center">Подобранная сборка ПК

Далее, характеристики каждого комплектующего выводятся на экран.

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

$cpuQ = $db->query("SELECT * FROM `CPU` WHERE `id` = " . $build[$i]['CPU_id'] . ";");

while($row = $cpuQ->fetch()) { //Расшифровка
?>

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

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

За исключением выгрузки всех комплектующих из бахы данных на
страницу, все остальные действия осуществляются с помощью языка javascript, а именно в файле «construct.js».

При нажатии на комплектующие, необходимо понять, какого именно
оно вида, для этого используется следующий блок кода.

var src = $(this).attr('src');
var clas = $(this).attr('class');

clas = clas.split(" ");

if ( jQuery.inArray("cpu",clas) != -1 ) {…}

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

$('.cpu').removeClass('active_comp');

$(this).addClass("active_comp");

$('#activePhoto').attr('src',src);

$("#cpuActiveImg").attr("src",src);

А также добавляются все необходимые значения в следующий

ассоциативный массив

var select = {

cpu : ["","",0,""],
body : ["","",0,""],
hdd : ["","",0,""],
video : ["","",0,""],
op : ["","",0,""],
pow : ["","",0,""],
mat : ["","",0,""],

}

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

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

var s = "";

s += "Фирма: " + cpuArr[number].firma + "; ";

s += "Модель: " + cpuArr[number].model + "; ";

s += "Частота: " + cpuArr[number].frequency + "; ";

s += "Кол-во ядер: " + cpuArr[number].yader + "; ";

$('.body_description').text(s);

$('#active_cost').text(cpuArr[number].price + " руб.");

select.cpu[0] = number;

select.cpu[1] = s;

select.cpu[2] = cpuArr[number].price;

Примерно так выглядит реализация данного приложения.

3 Описание интерфейса пользователя

Разработанное Web-приложение позволяет подобрать сборку ПК по различным критериям различным группам пользователей. Главная страница имеет вид, представленный на Рисунок 4.

На всех страницах у пользователя есть навигация с помощью двух ссылок в вверху, а именно «Главная», «О проекте» и «Конструктор».



Рисунок 4 – Главная страница Web-приложения

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

1) Самому выбрать интересующие его фирмы процессора и серии видеокарт, для этого присутствует два выпадающих списка, которые находятся в блоке с заголовком «Предпочтения по фирмам», при нажатии на них будет раскрыт весь список фирм или серий, в зависимости от выбранного списка. А также имеется возможность выбрать оптимальную цену, которая изначально равна цене минимальной сборке, которая присутствует в нашей базе данных. Указать цену возможно с помощью ползунка, который находится сразу под заголовком «Предпочтительная цена», где требуется с помощью зажатой левой кнопки мыши, переместить ползунок, в, интересующий

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

2) Второй способ, если пользователь не имеет никаких предпочтений, связанных с фирмой процессора или серии видеокарты. Для этого на сайте предусмотрена опросная система, которая подберет компьютер, в зависимости от того, чего именно хочет пользователь. Для того чтобы перейти к этому способу, посетителю сайта необходимо нажать на блок, в заголовке которого находится надпись: «Не знаете, что выбрать?». После чего раскроется блок с вопросами и вариантами ответа на них. Данный блок представлен на рисунке 5.



Рисунок 5 – Блок с вопросами и вариантами ответов на них

В блоке имеется 2 вопроса, с разными вариантами ответов. После выбора ответов на вопросы необходимо нажать на кнопку «Отправить», которая располагается ниже.

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



Рисунок 6 – Сборок не найдено

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