Курсовая работа: Разработка сайта по составлению комплектации компьютера

Министерство науки и высшего образования Российской Федерации

Федеральное государственное бюджетное образовательное учреждение

высшего образования

«Московский государственный технический университет имени Н.Э. Баумана (национальный исследовательский университет)»

Московский техникум космического приборостроения

Специальность: 09.02.05 Прикладная информатика

ПОЯСНИТЕЛЬНАЯ ЗАПИСКА

к курсовому проекту по теме:

Разработка сайта по составлению комплектации компьютера

Москва 2021

«Московский государственный технический университет имени Н.Э. Баумана (национальный исследовательский университет)»

Московский техникум космического приборостроения

УТВЕРЖДАЮ

Председатель ПЦК спец. 09.02.03

Н.А. Жилкина

«___» ________________2019 г.

ЗАДАНИЕ

на выполнение курсового проекта

по профессиональному модулю «МДК 03.01 СиППООН»

Студент Мазаев Г.Ю. ТИ-71

График выполнения работы: 25% к 4 нед., 50% к 8 нед., 75% к 12 нед., 100% к 15 нед.

1 Тема курсового проекта

Разработка сайта по составлению комплектации компьютера____________________

2 Техническое задание

Создать сайт, на котором происходит выполнение сборки компьютера и его приобретение______________________________________

3 Оформление курсового проекта

3.1 Расчетно-пояснительная записка на____листах формата А4.

3.2 Перечень графического материала КП (плакаты, схемы, чертежи и т.п.) - схемы алгоритма

ОГЛАВЛЕНИЕ

ВВЕДЕНИЕ

1. Постановка задачи

2. Структура сайта

3. Отладка программы

4. Оптимизация программы

5. Тестирование программы

6. Руководство пользователя

ЗАКЛЮЧЕНИЕ

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

Листинг

ВВЕДЕНИЕ

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

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

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

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

сайт сборка компьютер тестирование программный

1. Постановка задачи

Целью разработки курсового проекта является разработка сайта по составлению комплектации компьютера. Реализовать методику тестирования программного продукта.

2. Структура сайта

jQuery

CSS

HTML

3. Отладка программы

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

В соответствии с этапом обработки, на котором проявляются ошибки, различают следующие виды ошибок:

1) синтаксические ошибки (ошибки, обнаруживаемые компилятором при выполнении синтаксического и частично семантического анализа);

2) ошибки компоновки (ошибки, обнаруживаемые компоновщиком при объединении модулей программы);

3) ошибки выполнения (ошибки, обнаруживаемые ОС, аппаратными средствами или пользователем при выполнении программы).

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

4. Оптимизация программы

Оптимизация программы - это процесс модификации кода программы с целью улучшения ее эффективности.

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

- четко выработанные требования к программе до начала ее разработки;

- хорошая архитектура программы;

- хорошо спроектированные модули;

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

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

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

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

Так как современные ЭВМ отличаются высоким быстродействием, то оптимизация отдельных, редко встречающихся, операторов является бесполезной тратой времени. Однако повышение эффективности на мощных машинах можно получить за счет правильной оптимизации циклов и операторов, находящихся внутри тела циклов.

5. Тестирование программы

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

Процесс тестирования проходит в 3 этапа:

- проверка поведения программы в нормальных условиях;

- проверка поведения программы в экстремальных условиях;

- проверка поведения программы в исключительных ситуациях.

Каждый из этапов предполагает задание определенного, характерного для данного этапа набора данных.

5.1 Тестирование в нормальных условиях

Успешный ввод данных, для обратной связи и выбор нужных компонентов (Скриншот 1):

Скриншот - 1

5.2 Тестирование в экстремальных условиях

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

5.3 Тестирование в исключительных ситуациях

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

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

6. Руководство пользователя

Вводим нужный URL , для входа на сайт или пользуемся поисковиком(Скриншот 2):

Скриншот 2.

Далее слева выбираем нужную группу, в каждой можно выбрать разные компоненты компьютера(Скриншот 3):

Скриншот - 3.

Далее у нас подгружаются списки, из которых можно собрать готовый компьютер (все детали не конфликтуют друг с другом) (Скриншот 4):

Скриншот - 4

Хочу отметить, что на разных вкладках - разные комплектующие, вот например, комплектующие от 100 000 до 150 000 в сумме(Скриншот 8):

Скриншот - 8.

После заполнения данных о компьютере - следует заполнить данные о себе, для связи и утверждения заказа, а также договора об оплате (Скриншот 5):

Скриншот - 5.

Далее кликаем на кнопочку SEND NOW (Скриншот - 6) и данные будут отправляться на сервер в том виде, в котором будет нужно магазину:

Скриншот - 6.

Так должна выглядеть полностью заполненная страница, для того, чтобы клиенту можно было ответить по существу(Скриншот 7):

Скриншот - 7

ЗАКЛЮЧЕНИЕ

Целью разработки данного курсового проекта являлось разработка сайта комплектации ПК.

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

Заявленные цели разработки полностью достигнуты, однако, возможный недостаток, невозможность предложения добавления товара в ассортимент или же невозможность выбрать компонент из комплектации «от 100 000 р до 150 000 р» в том же «от 250 000 р»

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

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

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

· JavaScript и jQuery. Интерактивная Веб-Разработка. Джон Дакетт;

· JQuery. Подробное руководство по продвинутому JavaScript. Бер Бибо, Иегуда Кац;

· HTML&CSS. Разработка и дизайн веб-сайтов. Джон Дакетт;

· CSS. Быстрый старт Луис Лазарис.

Листинг

Main.Js:

jQuery(document).ready(function($) {

'use strict';

$(window).load(function() { // makes sure the whole site is loaded

$(".seq-preloader").fadeOut(); // will first fade out the loading animation

$(".sequence").delay(500).fadeOut("slow"); // will fade out the white DIV that covers the website.

})

$(function() {

function showSlide(n) {

// n is relative position from current slide

// unbind event listener to prevent retriggering

$body.unbind("mousewheel");

// increment slide number by n and keep within boundaries

currSlide = Math.min(Math.max(0, currSlide + n), $slide.length-1);

var displacment = window.innerWidth*currSlide;

// translate slides div across to appropriate slide

$slides.css('transform', 'translateX(-' + displacment + 'px)');

// delay before rebinding event to prevent retriggering

setTimeout(bind, 700);

// change active class on link

$('nav a.active').removeClass('active');

$($('a')[currSlide]).addClass('active');

}

function bind() {

$body.bind('false', mouseEvent);

}

function mouseEvent(e, delta) {

// On down scroll, show next slide otherwise show prev slide

showSlide(delta >= 0 ? -1 : 1);

e.preventDefault();

}

$('nav a, .main-btn a').click(function(e) {

// When link clicked, find slide it points to

var newslide = parseInt($(this).attr('href')[1]);

// find how far it is from current slide

var diff = newslide - currSlide - 1;

showSlide(diff); // show that slide

e.preventDefault();

});

$(window).resize(function(){

// Keep current slide to left of window on resize

var displacment = window.innerWidth*currSlide;

$slides.css('transform', 'translateX(-'+displacment+'px)');

});

// cache

var $body = $('body');

var currSlide = 0;

var $slides = $('.slides');

var $slide = $('.slide');

// give active class to first link

$($('nav a')[0]).addClass('active');

// add event listener for mousescroll

$body.bind('false', mouseEvent);

})

$('#form-submit .date').datepicker({

});

$(window).on("scroll", function() {

if($(window).scrollTop() > 100) {

$(".header").addClass("active");

} else {

//remove the background property so it comes transparent again (defined in your css)

$(".header").removeClass("active");