You are on page 1of 29

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

ВІДОКРЕМЛЕНИЙ СТРУКТУРНИЙ ПІДРОЗДІЛ


ХЕРСОНСЬКИЙ ПОЛІТЕХНІЧНИЙ ФАХОВИЙ КОЛЕДЖ
ДЕРЖАВНОГО УНІВЕРСИТЕТУ «ОДЕСЬКА ПОЛІТЕХНІКА»
Відділення комп’ютерної та програмної інженерії
Спеціальність «Інженерія програмного забезпечення»

Звіт з практики

Виконав студент 451 групи


Проскуренко Д.В
(підпис, п. і. п.)

Перевірив викладач
________________Г.В. Носова
(дата, підпис)

2021
С.1

ЛІСТИНГ ПРОГРАМ

Частина 1.
Завдання 1. Створити макет сторінки index.html, використовуючи табличне
верстання, згідно варіанту завдання.

Завдання 2. Згідно варіанту, додати в макет:

- меню там «хлібні крихти», як марковані переліки;

- графічний логотип (якщо він є) та графічну шапку;

- розмістити у футері інформацію про виконавця роботи;

- у блоку контенту розмістити довільний текст із включенням зображень;

Завдання 3-А. Використовуючи атрибути тегів HTML, налаштувати макет


наступним чином:

- встановити колір фону сторінки;

- встановити ширину таблиці в 900 пікселів;


С.2

- встановити ширину колонок таблиці – меню 20%, сайд бар (якщо присутній)
20%, логотип (якщо присутній) – 20%, «хлібні крихти» - як ширина блоку
контенту;

- розфарбувати комірки таблиці кольорами, що мають рядкові константи


(наприклад, «red», «green», «yellow»);

- зробити межу таблиці невидимою;

- зарезервувати відступи від меж таблиці в 5 пікселів

Завдання 3-Б. Змінити макет із завдання 3-А наступним чином:

- встановити графічний фон сторінки;

- встановити кольори комірок таблиці у шістнадцятиричному форматі (наприклад


FF0000, A0A0A0, 00FF00);

Завдання 3-В. Змінити макет із завдання 3-Б наступним чином:

- усі налаштування зовнішнього вигляду реалізувати із застосуванням CSS

Завдання 4-А. Змінити зовнішній вигляд пунктів меню, використовуючи


атрибути HTML

Завдання 4-Б. Змінити зовнішній вигляд меню з використанням CSS


С.3

4-В
Змінити зовнішній вигляд меню та хлібних крихт з використанням CSS
С.4

Код файлу index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Завдання 1</title>
</head>
<body>
<div class="container">
<table>
<tr id="header-wrapper">
<td id="logo">
</td>
<td id="header">
<div id="city">
</div>
</td>
</tr>
<tr>
<td id="breadcrumbs" colspan="2">
<ul>
<a href="#"><li>Домашня</li></a>
<a href="#"><li>Наступна</li></a>
<a href="#"><li>Ця</li></a>
</ul>
</td>
</tr>
<tr id="main">
<td id="aside">
<nav>
<ul>
<a href="#"><li>Пункт меню</li></a>
<a href="#"><li>Пункт меню</li></a>
<a href="#"><li>Пункт меню</li></a>
<a href="#"><li>Пункт меню</li></a>
<a href="#"><li>Пункт меню</li></a>
</ul>
</nav>
</td>
<td id="content">
<h2>Блок контенту</h2>
<p>Довільний контент. Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Consectetur laborum doloremque odit
С.5

saepe, praesentium et quo ut. Eveniet, officiis sunt, corrupti


assumenda iste blanditiis id, labore adipisci deleniti amet nihil?
Temporibus laudantium possimus veniam dolor unde
eveniet aliquid enim exercitationem earum qui illum praesentium quae
odit mollitia, itaque dolore quod rerum. Mollitia iure et vitae
sapiente iste deleniti laborum accusantium.
Suscipit, culpa dignissimos labore incidunt, iure
dicta vero error ex harum quo excepturi obcaecati facere. Iusto
sequi velit voluptas, pariatur similique eos animi. Dolorem,
corrupti. Non, saepe eligendi. Voluptas, possimus?
Dolores sequi ut tempore. Ipsam nisi odio,
facilis incidunt, possimus est praesentium, numquam natus nam quam
labore nostrum blanditiis suscipit cum sint doloremque rem quisquam
minima ab rerum vel delectus?
Rerum commodi, corrupti dolores earum aut
aliquam, eum, culpa nisi amet corporis nemo sed? Totam
exercitationem cupiditate omnis nostrum voluptate, repellendus
deserunt ut atque tempora possimus, ullam vitae! Voluptatibus,
illum. З картинками:</p>
<p><img src="../content.jpg" alt="image"></p>
</td>
</tr>
<tr>
<td id="footer" colspan="2">Футер. Розроблював
Проскуренко Данило 451 група.</td>
</tr>
</table>
</div>
</body>
</html>

Код файлу style.css:

@keyframes city {
from { background-position: -675px, 0 0;}
to { background-position: 0 }
}

* {
text-align: center;
}

body {
background-color: gray;
background-image: url('../background.jpg');
}
С.6

img {
border-radius: 25px;
}

.container {
width: 900px;
margin: 0 auto;
}

table {
width: 100%;
}

td {
margin: 5px;
vertical-align: middle;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}

li:hover {
opacity: 0.7;
box-shadow: 1px 3px 5px 1px white;
}

#breadcrumbs ul {
padding: 15px 0;
}

#breadcrumbs li {
display: inline;
margin-right: 5px;
border: 2px solid black;
background-color: #3498DB;
padding: 5px;
}

nav ul {
padding-left: 15px;
}

nav li {
border: 2px solid black;
С.7

background-color: #F4D03F;
padding: 5px;
margin-top: 10px;
width: 80%;
transition: opacity 0.5s ease-out;

li {
font-family: 'Arial', sans-serif;
color: black;
text-decoration: underline;
}

p {
text-align: justify;
}

#logo, #aside {
width: 20%;
}

#header, #content {
width: 80%;
}

#logo {
height: 250px;
background-image: url('../logo.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-color: #040E2B;
}

#city {
height: 250px;
background: url('../city.png') repeat-x;
background-size: cover;
animation: city 30s linear infinite;
}

#header {
height: 250px;
background: url('../sky.jpg') repeat-x;
background-position: top;
background-size: cover;
}
С.8

#breadcrumbs {
background-color: #AAB7B8;
}

#aside {
background-color: #2E86C1;
vertical-align: top;
}

#content {
background-color: #F4D03F;
padding: 0 20px;
}

#footer {
background-color: #7D3C98;
height: 50px;
}

Завдання 5-А. Виконати завдання 1, 3-А використовуючи блочне верстання та


CSS-фреймворк Bootstrap

Завдання 5-Б. Виконати завдання 1, 2, 3-А використовуючи блочне верстання та


CSS-фреймворк Bootstrap

Завдання 5-В Виконати завдання 1, 2, 3-А, 3-Б, 3-В використовуючи блочне


верстання та CSS-фреймворк Bootstrap
С.9

Код файлу index.html:


<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstr
ap.min.css" integrity="sha384-
JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Завдання 1</title>
</head>
<body>
<header>
<div class="container mt-2">
<div class="row mb-1">
<div class="col-md-3" style="background-color:
#040E2B;">
<div id="logo">
</div>
</div>
<div class="col-md-9 header">
<div id="city">
</div>
</div>
</div>
</div>
</header>
<div id="breadcrumbs">
<div class="container">
<div class="row mb-1">
<div class="col-md-12" style="background-color:
#AAB7B8;">
<ul>
<a href="#"><li>Домашня</li></a>
<a href="#"><li>Наступна</li></a>
<a href="#"><li>Ця</li></a>
</ul>
</div>
</div>
</div>
</div>
С.10

<main>
<div class="container">
<div class="row mb-1">
<aside class="col-md-3 pull-right"
style="background-color: #2E86C1;">
<nav>
<ul>
<a href="#"><li>Пункт
меню</li></a>
<a href="#"><li>Пункт
меню</li></a>
<a href="#"><li>Пункт
меню</li></a>
<a href="#"><li>Пункт
меню</li></a>
<a href="#"><li>Пункт
меню</li></a>
</ul>
</nav>
</aside>
<article class="col-md-9 pull-left"
style="background-color: #F4D03F;">
<h2>Блок контенту</h2>
<p>Довільний контент. Lorem ipsum dolor, sit
amet consectetur adipisicing elit. Quis modi perferendis expedita,
illum dignissimos rerum temporibus praesentium totam quas. Ab
dolorum reiciendis doloremque expedita deserunt dolor cum asperiores
vitae voluptates.
Repellendus, eos sit. Autem voluptatibus
facere sunt consequuntur laboriosam totam quam. Minima dignissimos,
minus voluptatibus deleniti vitae quo magni ex perspiciatis,
quibusdam iusto fugit delectus soluta, recusandae nostrum iste vel?
Fuga, ab animi exercitationem voluptate
deserunt modi similique soluta officia officiis, illo rem iure
corrupti quis blanditiis mollitia. Perferendis, obcaecati repellat.
Labore eaque nesciunt minus voluptatem accusamus explicabo omnis
doloremque?
Enim, iure. Accusamus deserunt impedit
dolorum eius ea perspiciatis quidem consequatur est ratione suscipit
dolorem labore voluptatibus architecto iusto blanditiis dolore,
voluptate animi cumque quae nulla repellendus. Facilis, veniam
accusamus?
Obcaecati, distinctio minus? Architecto quas
ratione error at, vitae maiores in qui animi, quidem consectetur
С.11

sint nemo a recusandae nisi reprehenderit minima aliquid sequi nam!


Provident explicabo quia dolores alias! З картинками:</p>
<p><img src="../content.jpg" alt="image"></p>
</article>
</div>
</div>
</main>
<footer>
<div class="container">
<div class="row mb-1">
<div class="col-md-12" style="background-color:
#7D3C98;"><h2>Футер. Роботу виконує Проскуренко Данило 451
група.</h2></div>
</div>
</div>
</footer>
</body>
</html>

Код файлу style.css:

@keyframes city {
from { background-position: -675px, 0 0;}
to { background-position: 0 }
}

* {
text-align: center;
}

body {
background-color: gray;
background-image: url('../background.jpg');
}

img {
border-radius: 25px;
}

.container {
max-width: 900px;
}

p {
text-align: justify;
С.12

/*
.col-md-3, .col-md-9, .col-md-12 {
border: 2px solid black;
}
*/

/* main .container .row {


height: 300px;
} */

#breadcrumbs .row {
height: 100px;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}

li:hover {
opacity: 0.7;
box-shadow: 1px 3px 5px 1px white;
}

#breadcrumbs ul {
padding-top: 30px;
}

#breadcrumbs li {
display: inline;
margin-right: 5px;
border: 2px solid black;
background-color: #3498DB;
padding: 5px;
transition: opacity 0.2s ease-out;
}

nav li {
border: 2px solid black;
background-color: #F4D03F;
padding: 5px;
margin-top: 10px;
С.13

transition: opacity 0.5s ease-out;


}

li {
font-family: 'Arial', sans-serif;
color: black;
text-decoration: underline;
}

#logo {
height: 250px;
background-image: url('../logo.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

header .col-md-9 {
padding: 0;
}

#city {
height: 250px;
background: url('../city.png') repeat-x;
background-size: cover;
animation: city 30s linear infinite;
}

.header {
height: 250px;
background: url('../sky.jpg') repeat-x;
background-position: top;
background-size: cover;
}
С.14

Частина 2.

Завдання 1. Дано 4 поля вводу чисел (матриця 2х2). Підрахувати детермінант


матриці

Код файлу index.html:

<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Завдання 1</title>
</head>
<body>
<div class="container">
<main>
<form>
<div class="wrapper">
<div>
<p><label
for="a">A<sub>11</sub>:</label></p>
<p><input type="number" id="a11"
value="0"></p>
С.15

<p><label
for="b">A<sub>12</sub>:</label></p>
<p><input type="number" id="a12"
value="0"></p>
</div>
<div>
<p><label
for="c">A<sub>21</sub>:</label></p>
<p><input type="number" id="a21"
value="0"></p>
<p><label
for="d">A<sub>22</sub>:</label></p>
<p><input type="number" id="a22"
value="0"></p>
</div>
</div>
<button id="calculate"
type="button">Обрахувати</button>
<h2 id="result"></h2>
</form>
</main>
</div>
<script src="index.js"></script>
</body>
</html>

Код файлу style.css:

body {
padding: 0;
margin: 0;
box-sizing: border-box;
background-image: url('background.jpg');
}

.container {
width: 1170px;
margin: 0 auto;
}

main {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
С.16

height: 100vh;
}

form {
padding: 25px;
background-color: rgba(255, 255, 255, 0.8);
border: 7px dashed #FDFDFD;
}

form p {
text-align: left;
font-size: 20px;
font-weight: bold;
}

.wrapper {
display: flex;
justify-content: center;
align-items: center;
}

.wrapper div, button, #result {


margin-right: 30px;
}

Код файлу index.js:

result = document.getElementById('result');

document.getElementById('calculate').onclick = () => {
a11 = document.getElementById('a11').value;
a12 = document.getElementById('a12').value;
a21 = document.getElementById('a21').value;
a22 = document.getElementById('a22').value;
result.innerText = 'Результат: ' + (a11 * a22 - a12 * a21);
}
С.17

Завдання 2. Дано 2 поля вводу тексту. Очищати поля, якщо текст, що набирають у
першому полі співпадає ії текстом у другому.

Код файлу index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Завдання 2</title>
</head>
<body>
<div id="form-wrapper">

<form>
<h3>Дано 2 поля вводу тексту. Очищати поля, якщо
текст,<br> що набирають у першому полі співпадає ії текстом у
другому.</h3>
<br>
<input type="text" id="input1">
<input type="text" id="input2">
</form>
</div>
<script src="index.js"></script>
С.18

</body>
</html>

Код файлу index.js:

const $ = (elem) => {


return document.getElementById(elem);
}

$('input1').onkeyup = () => {
if ($('input1').value == $('input2').value) {
$('input1').value = '';
$('input2').value = '';
}
}

Завдання 3. Підключити бібліотеку jQuery та виконати завдання 1,


використовуючи селектори класів та ідентифікатори

Код файлу index.js:

result = $('#result');

$('#calculate').click(() => {
a11 = $('#a11').val();
a12 = $('#a12').val();
a21 = $('#a21').val();
a22 = $('#a22').val();
result.text('Результат: ' + (a11 * a22 - a12 * a21));
});
С.19

Частина 3.

Завдання 1. Розробити базу даних «Успішність студентів» згідно відповідному


технічному завданню.
С.20
С.21

Завдання 3. Задача 1.

Разработать программу, которая содержит текущую информацию о заявках


на авиабилеты.

Каждая заявка содержит:

- пункт назначения;

- номер рейса;

- фамилию и инициалы пассажира;

- желаемую дату вылета.

Программа должна обеспечивать:

- хранение всех заявок в виде двоичного дерева;

- добавление и удаление заявок;

- по заданному номеру рейса и дате вылета вывод заявок с их последующим


удалением;

- вывод всех заявок.

Программа должна обеспечивать диалог с помощью меню и контроль


ошибок при вводе.
С.22

Код програми:

#include <iostream>
#include <string>
#include <iomanip>
#include "windows.h"
using namespace std;

struct Node
{
char point[20];
int reis;
char name[12];
char surname[12];
char patr[12];
char date[12];
Node* next;
};

void Menu();
Node* addNode(Node* first);
Node* deleteNode(Node* first);
void outNode(Node* first);
void outNodeNum(Node* first);

int main()
{
SetConsoleCP(1251);
SetConsoleOutputCP(1251);
Node* first = new Node; first->reis = 1021; strcpy_s(first-
>name, 20, "Олег"); strcpy_s(first->surname, 20, "Бышовец");
strcpy_s(first->patr, 20, "Кекович"); strcpy_s(first->point, 20,
"Москва"); strcpy_s(first->date, 20, "12.12.1967");
first->next = NULL;
int k = 5;
while (k != 6)
{
switch (k)
{
case 1: first = addNode(first); break;
case 2: outNode(first); break;
case 3: outNodeNum(first); break;
case 4: first = deleteNode(first); break;
case 5: Menu(); break;
case 6: break;
С.23

default: cout << " ОШИБКА! Числа от 1 до 6.\n";


}
cout << "\nВведите нужный пункт: ";
cin >> k;
}
getchar();
return 0;
}

void Menu()
{
system("cls");
cout << "\n";
cout << "1 - Добавить заявку\n";
cout << "2 - Вывести все заявки\n";
cout << "3 - Вывести заявку по номеру рейса и дате вылета\n";
cout << "4 - Удалить заявку\n";
cout << "5 - Очистить экран\n";
cout << "6 - Выход\n";
}

Node* addNode(Node* first)


{
cout << "______________________________________________\n";
Node* pv = new Node;
cout << "Данные о заявке: \n";
cout << "Введите пункт назначения > ";
cin >> pv->point;
cout << "Введите номер рейса > ";
cin >> pv->reis;
cout << "Введите фамилию пассажира > ";
cin >> pv->name;
cout << "Введите имя пассажира > ";
cin >> pv->surname;
cout << "Введите отчество пассажира > ";
cin >> pv->patr;
cout << "Введите дату вылета > ";
cin >> pv->date;
cout << "\n";
pv->next = NULL;
cout << "______________________________________________\n";
if (first == NULL)
{
first = pv;
С.24

}
else
{
Node* p = first;
while (p->next != NULL)
{
p = p->next;
}
p->next = pv;
}
return first;
}

void outNode(Node* first)


{
cout << setiosflags(ios::right);
cout <<
"_________________________________________________________________\n
";
cout << "Данные по заявкам:\n";
cout << " Пункт Номер Фамилия Имя Отчество
Дата\n";
cout << " назначения рейса --------- ДАННЫЕ ПАССАЖИРА -----
вылета\n";

Node* pv = first;
while (pv)
{
cout << setw(12) << pv->point << setw(7) << pv->reis <<
setw(11) << pv->surname;
cout << setw(10) << pv->name << setw(13) << pv->patr <<
setw(12) << pv->date << endl;
pv = pv->next;
}
cout <<
"_________________________________________________________________\n
";
}

void outNodeNum(Node* first)


{
int num;
string dat;
Node* pv = first;
cout << "Введите номер рейса: ";
С.25

cin >> num;


cout << "Введите дату: ";
cin >> dat;
int n = 1, fl = 0;
while (pv)
{
if (pv->reis == num && pv->date == dat)
{
outNode(pv);
break;
}
pv = pv->next;
}
}

Node* deleteNode(Node* first)


{
cout << "______________________________________________\n";
cout << "Номер рейса, заявку по которому удалить: ";
int num;
cin >> num;

Node* temp = first;


int k = -1;
int N = 0;
while (temp)
{
if (temp->reis == num)
{
k = N;
}
temp = temp->next;
N++;
}
N--;
if (k != -1)
{
temp = first;
if (k == 0 && N == 0)
{
delete first;
cout << " Удаление прошло успешно!\n";
cout <<
"______________________________________________\n";
return NULL;
С.26

}
if (k == 0 && N > 0)
{
temp = temp->next;
delete first;
cout << " Удаление прошло успешно!\n";
cout <<
"______________________________________________\n";
return temp;
}
Node* el = first;
temp = first->next;
while (temp->next)
{
if (temp->reis == num)
{
el->next = temp->next;
delete temp;
cout << " Удаление прошло успешно!\n";
cout <<
"______________________________________________\n";
return first;
}
el = el->next;
temp = temp->next;
}
el->next = NULL;
delete temp;
cout << " Удаление прошло успешно!\n";
cout << "______________________________________________\n";
return first;
}
else
{
cout << " Такого рейса нет или список пуст!\n";
cout << "______________________________________________\n";
return first;
}
}
С.27

Задача 2. Частное охранное предприятие осуществляет перевозку денег от


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

Код програми:

#include <iostream>
#include <iomanip>
using namespace std;

void Print(int** A, int size)


{
for (int i = 0; i < size; i++)
{
for (int j = 0; j < size; j++)
cout << setw(4) << A[i][j];
cout << endl;
}
};

int main()
{
setlocale(LC_ALL, "Rus");
const int size = 5;
const int inf = 100;
int C[size][size] =
{
{ 0,3,4,6,inf },
{ 0,2,2,3,2 },
{ 1,1,5,5,8 },
{ 0,1,2,3,6 },
{ 2,5,4,8,7 }
};

int** D = new int* [size];


for (int i = 0; i < size; i++)
D[i] = new int[size];
for (int i = 0; i < size; i++)
for (int j = 0; j < size; j++)
D[i][j] = C[i][j];
int** P = new int* [size];
for (int i = 0; i < size; i++)
P[i] = new int[size];
С.28

for (int i = 0; i < size; i++)


for (int j = 0; j < size; j++)
{
if ((D[i][j] == 0) || (D[i][j] == inf))
P[i][j] = 0;
else
P[i][j] = i + 1;
}
cout << "Матрица D0" << endl;
Print(D, size);
cout << "Матрица P0" << endl;
Print(P, size);

for (int m = 0; m < size; m++)


{
for (int i = 0; i < size; i++)
if ((i != m) || (D[i][m] != inf))
{
for (int j = 0; j < size; j++)
if (D[i][j] > D[i][m] + D[m][j])
{
D[i][j] = D[i][m] + D[m][j];
P[i][j] = P[m][j];
}
}
cout << "Матрица D" << m + 1 << endl;
Print(D, size);
cout << "Матрица P" << m + 1 << endl;
Print(P, size);
}
cout << "Кратчайший путь:" << endl;
cout << 6;
int start = 0, end = 4;
int i = P[start][end];
while (1)
{
cout << " " << i;
i = i - 1;
i = P[start][i];
if (i == start) break;
}
cout << endl;
}

You might also like