Звіт з Практики-3 - В20

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

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

Сімонов Сергій Миколайович
(підпис, п. і .п.)
Перевірив викладач
________________Г.В. Носова
(дата, підпис)
2023
С2.
ЛІСТИНГ ПРОГРАМИ
Частина 1.
1. (Обов’язковий рівень) Створити макет сторінки index.html, використовуючи
табличне верстання, згідно варіанту завдання.
В10
2. (Обов’язковий рівень) Згідно варіанту, додати в макет:

- меню там «хлібні крихти», як марковані переліки;
- графічний логотип (якщо він є) та графічну шапку;
- розмістити у футері інформацію про виконавця роботи;
- у блоку контенту розмістити довільний текст із включенням зображень;
3-А. (Обов’язковий рівень) Використовуючи атрибути тегів HTML,

налаштувати макет наступним чином:
- встановити колір фону сторінки;
- встановити ширину таблиці в 900 пікселів;
С3.
- встановити ширину колонок таблиці – меню 20%, сайд бар (якщо

присутній) 20%, логотип (якщо присутній) – 20%, «хлібні крихти» - як
ширина блоку контенту;
- розфарбувати комірки таблиці кольорами, що мають рядкові константи
(наприклад, «red», «green», «yellow»);
- зробити межу таблиці невидимою;
- зарезервувати відступи від меж таблиці в 5 пікселів.
3-Б. (Бажаний рівень) Змінити макет із завдання 3-А наступним чином:

- встановити графічний фон сторінки;
- встановити кольори комірок таблиці у шістнадцятиричному форматі (наприклад
FF0000, A0A0A0, 00FF00);
3-В. (Високий рівень) Змінити макет із завдання 3-Б наступним чином:

- усі налаштування зовнішнього вигляду реалізувати із застосуванням CSS
4-А. (Обов’язковий рівень) Змінити зовнішній вигляд пунктів меню,

використовуючи атрибути HTML
4-Б. (Бажаний рівень) Змінити зовнішній вигляд меню з використанням CSS

С4.
4-В
(Високий рівень) Змінити зовнішній вигляд меню та хлібних крихт з
використанням CSS
5-А. (Обов’язковий рівень) виконати завдання 1, 3-А використовуючи блочне

верстання та CSS-фреймворк Bootstrap
5-Б. (Бажаний рівень) виконати завдання 1, 2, 3-А використовуючи блочне

верстання та CSS-фреймворк Bootstrap
5-В (Високий рівень) виконати завдання 1, 2, 3-А, 3-Б, 3-В використовуючи

блочне верстання та CSS-фреймворк Bootstrap
С5.
Код файлу html:

<!DOCTYPE html> "Челсі". Про трансфер футболіста національної збірної
<html lang="en"> офіційно оголосили в неділю, 15 січня. Тоді ж його було
<head> представлено як новачка "Синіх" у перерві гри з "Крістал
<meta charset="UTF-8"> Пелас" у чемпіонаті Англії. А уже менш ніж за тиждень 22-
<title>Структура страницы</title> річний українець може дебютувати у складі нової команди
у грі проти "Ліверпуля". За інформацією The Athletic, клуби
<link rel="stylesheet" href="css/style.css"> зійшлися на компенсації за перехід Мудрика в розмірі 70
</head> мільйонів євро. Ще 30 мільйонів "Шахтар" зможе отримати
<body> у вигляді бонусів, залежно від показників Мудрика в
<div class="wrapper"> Лондоні.<center><img src="https://i.yapx.ru/VYdIvm.jpg"
<div class="hed"> alt="Хостинг картинок yapx.ru"></a></center> </h2>
<div class="logo"> </div>
<div class="inner-logo"><img src="img/chelsea.png" </div>
alt="logo" /></a></div> <div class="sidebar">
</div> <div class="inner-sidebar">
<div class="header"> <center>
<img src="img/алибаба.png"></div> <div class="vertical-menu">
<div class="row"> <a href="#" class="active">Меню</a>
<div class="krosh"> <a href="#">Новини</a>
<div class="inner-krosh"> <a href="#">Про нас</a>
<div id="menu"> <a href="#">Форум</a>
<div id="menuHrefs"> <a href="#">Архів</a></div>
<a </div>
href="https://suspilne.media/359626-z-ukraini-za-100-mln-ne- </div>
prodaut-istoria-rekordnogo-transferu-mihajla-mudrika-do- </div>
celsi/">Інформація</a> <div class="footer">
<a <div class="inner-footer"><span
href="https://web.telegram.org">Зв'язок</a></div> class="left">Зробленно студентом 451 групи Сімоновим
</div> Сергієм</div>
</div>
</div> </div>
<div class="content">
<div class="inner-content"><h1>"З України </div>
за 100 млн не продають". Історія рекордного трансферу
Михайла Мудрика до "Челсі".</h1><h2>Український вінгер </body>
Михайло Мудрик офіційно став гравцем англійського </html>
С6.
Код файлу css:

*{ height: 50px;
box-sizing: border-box; padding-left: 20px;
} }
body { .krosh {
color: black; width: 1503px;
font-size: 30px; float: top;
} padding-bottom: 10px;
}
.row:after {
visibility: hidden; .inner-krosh {
display: block; background: #4682B4;
font-size: 0; min-height: 50px;
content: " "; }
clear: both;
height: 0; .content {
} width: 90%;
.row { display: inline-block; } float: left;
/* start commented backslash hack \*/ }
* html .row { height: 1%; }
.row { display: block; } .inner-content {
/* close commented backslash hack */ background: #B0C4DE;
min-height: 500px;
.hed:after { padding-top: 1px;
visibility: hidden; }
display: block;
font-size: 0; #menu {
content: " "; color: #666;
clear: both; font-family: Times New Roman, sans-serif;
height: 0; font-size: 30px;
} text-align: left;
.hed { display: inline-block; } }
/* start commented backslash hack \*/
* html .hed { height: 1%; } #menu hr {
.hed { display: block; } width: 200px;
max-width: 100%;
.header { margin-top: 0px;
margin-bottom: 20px; margin-bottom: 0px;
width: 1522px; font-family: Times New Roman, sans-serif;
max-height: 100px; }
}
#menuHrefs a {
.inner-header { padding: 3px;
background: #4682B4; border-radius: 5px;
height: 100px; margin-right: 5px;
font-family: Vinque, sans-serif; color: #000000;
font-size: 60px; border: 2px solid black;
position: relative; background: #6495ED;
} margin-top: 20px;
}
.logo{
float: right; hr {
width: 10%; display: ;
border: 0;
} height: 0px;
border-top: 1px solid #ccc;
.inner-logo{ padding: 0;
}
С7.
.vertical-menu a {
background-color: #6495ED; /* Grey background color */
h1 { color: black; /* Black text color */
font-family: Times New Roman, sans-serif; display: block; /* Make the links appear below each other */
font-size: 30px; padding: 12px; /* Add some padding */
} text-decoration: none; /* Remove underline from links */
font-family: Arial, sans-serif;
h2 { text-decoration: underline;
font-size: 25px; border: 2px solid black;
font-family: Times New Roman, sans-serif; }
font-weight: normal;
} .vertical-menu a: hover {
background-color: #4682B4; /* Dark grey background on
.sidebar { mouse-over */
width: 10%; }
float: left;
padding-left: 10px; .vertical-menu a.active {
} background-color: #4682B4; /* Add a green color to the
"active/current" link */
.inner-sidebar { color: white;
background: #4682B4; }
min-height: 507px;
padding-top: 10px; .footer {
} margin-top: 10px;
}
.vertical-menu {
width: 100%; .inner-footer {
/* Set a width if you like */ background: #4682B4;
} height: 100px;
}
Частина 2.
Створити форму на екрані з необхідними полями вводу, та виконати завдання
згідно з варіантом, написавши програму на JavaScript.
Завдання 1 (В10). Дано два поля вводу чисел. Розділити більше число на менше та
вивести результат.
С8.
<!DOCTYPE html> <script>
<html lang="ru"> var op;
<head>
<meta charset="utf-8"> function func() {
<title>Калькулятор</title> var result;
<link rel="stylesheet" href="css/style.css"> var num1 =

Number(document.getElementById("num1").value);
</head>
var num2 =
<body> Number(document.getElementById("num2").value);
<center> switch (op) {
<div class="content"> case '/':
<input id="num1" /> result = num1 / num2;
break;
<id="operator_btns"> }
<button id="divide" onclick="op='/'">:</button>
document.getElementById("result").innerHTML = result;
<input id="num2" /> }
</script>
<button onclick="func()">Посчитать</button>
</body>
<p id="result"></p> </html>
</div>
Код файлу css:

body {
background-color: white;
.content {
width: 50%;
float: center;
background-color: gray;
margin-top: 200px;
margin-right: 60px;
margin-left: 60px;
padding: 50px;
}
С9.
Завдання 2 (В5). Дано поле вводу тексту та елемент зображення. Видалити

зображення, якщо у поле введено «!».
Код файлу index.html:

<html> }
<head> });
<title>My Page</title> </script>
<link rel="stylesheet" href="css/style.css"> </body>
</head> </html>
<body> Код файлу css:

<center>
body {
<div class="content">
background-color: white;
<input type="text" id="input">
}
<img src="https://i.yapx.ru/VZaYQ.png" alt="Хостинг
.content {
картинок yapx.ru" id="image">
width: 50%;
<script>
float: center;
const input = document.getElementById('input');
background-color: gray;
const image = document.getElementById('image');
margin-top: 200px;
margin-right: 60px;
input.addEventListener('input', () => {
margin-left: 60px;
if (input.value === '!') {
padding: 50px;
image.s
}
tyle.display = 'none';
С10.
Частина 3. (В10)
Завдання 1. Розробити базу даних «Футбол» згідно відповідному технічному
завданню.
С11.
Частина 3. (В20)
Завдання 1
20 Іподром • Кличка коня, масть, вік, вид забігу, є кінь фаворитом,
прізвище наїзника, зайняте місце, примітка;
• ранг змагання, місце проведення, дата проведення,
кількість учасників, склад учасників.
Приклад виконання
Постановка задачі з предметної області до «Іподром».
Нехай потрібно розробити інформаційну систему для автоматизації обліку

проведення змагань на іподромі. Система повинна передбачати режими ведення
системного каталогу, що відображає перелік видів забігу, за яким є змагання на
іподромі. Усередині іподрома видів змагань в систематичному каталозі можуть
мати унікальний внутрішній номер і повне найменування. Кожне змагання може
містити відомості з різних забігів. Кожен кінь в іподромі може бути присутнім в
єдиному екземплярі. Кожен кінь, що знаходиться на іподромі , характеризується
наступними параметрами :
• Кличка коня;
• масть;
• вік;
• вид забігу;
• є кінь фаворитом;
• прізвище наїзника;
• зайняте місце;
• примітка;
Коні можуть мати однакові клички , але вони розрізняються за приміткою та
віком.
С12.
На іподромі ведеться облік змагань.

На кожне змагання в облік заносяться такі відомості:
• ранг змагання;
• місце проведення;
• дата проведення;
• кількість учасників;
• склад учасників;
• кількість учасників.
Кожному змаганню присвоюється унікальний номер.
Кожне змагання може містити в собі не більше 5 забігів. Кінь не повинен
перевтомлюватися .
Кожна змагання на іподромі є унікальним. Кожен раз заносяться нові данні,
такі як:
• унікальний номер;
• назва;
У разі проведення змагання по його закінченню вносяться данні:
• номер змаганнь які пройшли;
• час закінчення;
Передбачити наступні обмеження на інформацію в системі :
1. Кінь не може не мати наїзника
2. Приймають участь від 21 року.
3. Кожен кінь є унікальним
Кожна вид забігу може мати посилання на безліч видів змагань, але кожне
змагання може відноситися до різних видів забігів.
З даної інформаційної системою повинні працювати такі групи користувачів
:
• ведучі;
• наїзники;
При роботі із системою ведучий повинен мати можливість вирішувати такі
завдання:
1. Приймати нових коней на іподром .
2. Відносити забіги до одного або декількох змагань.
С13.
3. Проводити каталогізацію коней, тобто призначення нових номерів

прийнятим коням.
4. Проводити списання старих коней, і коней, які не Приймають участь у
змаганнях. Списувати можна тільки тих коней, які не приймають участі у
ніяких забігах та змаганнях. Списання проводиться за спеціальним актом
списання.
5. Вести облік змагань , при цьому передбачається два режими роботи:
проведення та анонс .
6. Проводити закриття кар’єри коня та наїзника, тобто знищення даних про
нього, якщо наїзник хоче виписатися з іподрому.
Наїзник повинен мати можливість вирішувати такі завдання:
1. Переглядати список, тобто перелік усіх змагань які будуть проведені на
іподромі.
2. За обраними змаганнями отримати повний перелік тих хто приймає участь.
3. Для обраного коня отримати номер або повідомлення про те, що вільних
коней немає. У разі відсутності вільних коней наїзник має можливість
отримати повідомлення про те коли буде вільний кінь.
4. Для обраного учасника отримати список коней , які числяться на іподромі.
Розроблена діаграма прецедентів представлена на рисунку 2.1 :
Рисунок 2.1 Діаграма прецедентів предметної області «Іподром».
Рисунок 2.2 Діаграма класів предметної області «Іподром».

С14.
Завдання 3. Торговая фирма производит продажу бытовой техники в 7 городах

страны. Сеть филиалов представлена в виде графа на рис.20. Расстояния между
городами представлены в тысячах километрах. Определить кратчайшие
маршруты между городами, в которых расположены филиалы торговой фирмы.
for (int i = 0; i < size; i++)

#include <iostream>
for(int j = 0; j < size; j++)
#include <iomanip>
D[i][j] = C[i][j];
using namespace std;
int ** P = new int * [size];

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

int main()
Print(D, size);
{
cout << "Матрица P0" << endl;
setlocale(LC_ALL, "Rus");
Print(P, size);
const int size = 5;
const int inf = 100;

for (int m = 0; m < size; m++)
int C[size][size] =
{
{
{0,3,4,6,inf},
if ((i !=m) (D[i][m] != inf))
{0,2,2,3,2},
{
{1,1,5,5,6},
for (int j = 0; j < size; j++)
{0,1,2,3,6},
if (D[i][j] > D[i][m] + D[m][j])
{2,5,4,7,5}
{
};
D[i][j] = D[i][m] + D[m][j];
P[i][j] = P[m][j];
int** D = new int*[size];
}
for (int i = 0; i <size; i++)
}
D[i] = new int[size];
С15.
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;
if (i == start) break;
cout << endl;

Звіт з Практики-3 - В20

Uploaded by

Document Information

Original Title

Copyright

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Звіт з Практики-3 - В20

Uploaded by

Copyright:

С1.

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

Звіт з навчальної практики-3

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

2. (Обов’язковий рівень) Згідно варіанту, додати в макет:

3-А. (Обов’язковий рівень) Використовуючи атрибути тегів HTML,

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

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

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

4-А. (Обов’язковий рівень) Змінити зовнішній вигляд пунктів меню,

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

5-А. (Обов’язковий рівень) виконати завдання 1, 3-А використовуючи блочне

5-Б. (Бажаний рівень) виконати завдання 1, 2, 3-А використовуючи блочне

5-В (Високий рівень) виконати завдання 1, 2, 3-А, 3-Б, 3-В використовуючи

Код файлу html:

Код файлу css:

<!DOCTYPE html> <script>

<html lang="ru"> var op;

<meta charset="utf-8"> function func() {

<title>Калькулятор</title> var result;

<link rel="stylesheet" href="css/style.css"> var num1 =

Код файлу css:

Завдання 2 (В5). Дано поле вводу тексту та елемент зображення. Видалити

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

<title>My Page</title> </script>

<link rel="stylesheet" href="css/style.css"> </body>

<body> Код файлу css:

Постановка задачі з предметної області до «Іподром».

Нехай потрібно розробити інформаційну систему для автоматизації обліку

На іподромі ведеться облік змагань.

3. Проводити каталогізацію коней, тобто призначення нових номерів

Розроблена діаграма прецедентів представлена на рисунку 2.1 :

Рисунок 2.1 Діаграма прецедентів предметної області «Іподром».

Рисунок 2.2 Діаграма класів предметної області «Іподром».

Завдання 3. Торговая фирма производит продажу бытовой техники в 7 городах

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

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

cout <<"Матрица D0" << endl;

const int inf = 100;

cout << "Матрица D" << m + 1 << endl;

cout << "Матриця P" << m + 1 << endl;

cout << "Кратчайший путь:" << endl;

int start = 0, end = 4;

cout << " " << i;

cout << endl;

You might also like