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

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

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

_________ Д.Є.Кирилов
(підпис, п. і. п.)
Перевірив викладач
________________Г.В.Носова
(дата, підпис)
2023
Завдання №1 Варіант 9
Розробка веб-сторінок, використовуючи HTML, CSS, CSS-фреймворк
Bootstrap.
1. Створити макет сторінки index.html, використовуючи табличне верстання,

згідно варіанту завдання.
2. Згідно варіанту, додати в макет:
a) меню там «хлібні крихти», як марковані переліки;
b) графічний логотип (якщо він є) та графічну шапку;
c) розмістити у футері інформацію про виконавця роботи;
d) у блоку контенту розмістити довільний текст із включенням зображень
3. Використовуючи атрибути тегів HTML, налаштувати макет наступним
чином:
a) встановити колір фону сторінки;
b) встановити ширину таблиці в 900 пікселів;
c) встановити ширину колонок таблиці – меню 20%, сайд бар (якщо
присутній) 20%, логотип (якщо присутній) – 20%, «хлібні крихти» - як
ширина блоку контенту;
d) розфарбувати комірки таблиці кольорами, що мають рядкові константи
(наприклад, «red», «green», «yellow»);
e) зробити межу таблиці невидимою;
f) зарезервувати відступи від меж таблиці в 5 пікселів
4. Змінити зовнішній вигляд пунктів меню, використовуючи атрибути HTML
Результати виконання завдання №1
Зображення 1.1 – Скріншот створеної сторінки.
Код створеної сторінки:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-
rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title></title>
</head>
<body>
<div class = "logo" >
<img src="logo.jpg">
</div>
<header class = "header-css"><img src="header.jpg"></header>

<nav class="hlibkriht"><ul>
<li>Хлібні крихти</li>
</ul>«Крёстный оте́ц» (англ. The Godfather) — криминальная драма[2] режиссёра Фрэнсиса
Форда Копполы. Экранизация одноимённого романа Марио Пьюзо, изданного в 1969 году. Слоган:
«Предложение, от которого невозможно отказаться». Главные роли Вито и Майкла Корлеоне
исполняют Марлон Брандо и Аль Пачино, соответственно. Во второстепенных ролях снялись
Джеймс Каан и Роберт Дюваль. </nav>
<div class="menu"><ul>
<a href="#"><li>Пункт меню 1</li></a>
</ul> </div>
<footer class = "footer" colspan="1">Кирилов Дмитро 451 група</div>

</body>
</html>
CSS:
.logo{
display: block;
float: left;
width: 20%;
padding-top: 25px;
.logo img{
max-width: 100%;
.header-css{
display: block;
float:right;
width: 78%;
}
.header-css img{
width: 100%;
height: 120px;
margin-left:-18px;
}
.hlibkriht{
display: block;
float:right;
width: 78%;
background-color: lightcoral;
height: 40px;
margin-right: 15px;
}
.hlibkriht ul li {
display: inline-block;
margin-right: 5px;
padding: 3px;
border: 1px solid;
background-color: darkkhaki;
margin-top: 5px;
}
.menu{
display: block;
float: left;
width: 20%;
overflow: auto;
background-color: grey;
clear: both;
}
.menu ul li {
list-style-type: none;
background-color: blanchedalmond;
font-family: Arial;
color:#000000;
border: 1px solid;
margin: 2px;
text-decoration: underline;
}
.menu ul{
padding: 0px;
}
.content{
display: block;
float:right;
width: 80%;
overflow: auto;
}
.content img{
float:right;
}
.footer{
display: block;
clear: both;
text-align: center;
background-color: darkmagenta;
}
body{
width: 1000px;
}
html, body{
background-color: yellowgreen;
div, aside, footer, header{

padding: 5px;
}
Частина 2. JavaScript
1. В9. Дано поле вводу числа. Вирахувати корінь квадратний, виконавши перевірку на невід’ємність.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<p><h2>Ваше число </h2>
<input type="text" id="num" /></p>
<h2>Результат</h2>
<p id="result"></p>
<button onclick="squareRoot()">Виконати обчислення</button>
<script>
function squareRoot(){
var result;
var num = Number(document.getElementById("num").value);
if(num >= 0){
result = Math.sqrt(num);
} else if (num < 0) {
result = "Число від'ємне";
}
else{
result = "Введене не правильне число";
}
document.getElementById("result").innerHTML = result;
return;
}
</script>
</body>
</html>
Виглядає
2. В9. Дано поле вводу тексту. Оновити сторінку, якщо у поле введено «!»
<!DOCTYPE html> function check(){

<html> var field =
<head> document.getElementById("field").value;
<meta charset="utf-8"> if(field.indexOf('!') > -1){
<title>JavaScript</title> location.reload();
</head> }
<body> return;
<p><h2>Поле</h2> }
<input type="text" id="field" </script>
onkeyup="check()" /></p> </body>
<script> </html>
3.Підключити бібліотеку jQuery та виконати завдання 1, використовуючи

селектори класів та ідентифікатори
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>JQuery</title>
</head>
<body>
<p><h2>Ваше число </h2>
<input type="text" id="num" /></p>
<h2>Результат</h2>
<p id="result"></p>
<button onclick="squareRoot()">Виконати обчислення</button>
<script>
function squareRoot(){
var result;
var num = $("#num").val();
if(num >= 0){
result = Math.sqrt(num);
} else if (num < 0) {
result = "Число від'ємне";
}
else{
result = "Введене не число";
}
$("#result").text(result);
return;</script>
</body>
</html>Виглядає:
Частина 3. Access
Створити базу даних БД сайту.
Зображення 3.1 – Головна форма.
Зображення 3.2 – Форма Запити.

Зображення 3.3 – Форма Публікації .
Зображення 3.4 – Форма Учасники.

Зображення 3.5 – Розділи.
.
5. Частина 4:
Задача №1. «Структуры данных»
«Линейные структуры данных»
Таблиця 1 Предметні області
Варі- Предметна Мінімальний список характеристик:

ант область
9 Телефонна • ПІБ абонента, номер телефону, дата установки;
станція • адреса абонента, дата народження, місце роботи (навчання),
додаткові відомості;
• абонентна або погодинна оплата, наявність пільги, сума оплати,
дата оплати, номер квитанції про оплату, примітка.
Постановка задачі з предметної області до «Телефонна станція».
Нехай потрібно розробити інформаційну систему для автоматизації обліку телефонної станції.
Система повинна передбачати режими ведення системного каталогу, що відображає абоненти та
плати за них. Усередині телефонної станції області знань в систематичному каталозі можуть мати
унікальний номер телефону і імя користувача. Кожна інформація по абоненту може містити
відомості з оплати, наявність пільг,суму оплати, дату та номер квітанції.. Кожен абонент, що що є у
доступі , характеризується наступними параметрами :
• абонентна або погодинна оплата;
• наявність пільги;
• сума оплати;
• дата оплати;
• номер квитанції про оплату;

• примітка.
Абоненти можуть мати однакові назви , але вони розрізняються за своїм унікальним номером
телефону.
У телефонній станції ведеться облік абонентів.
На кожного абонента в облік заносяться такі відомості:
• ПІБ абонента;
• дата установки;
• адреса абонента;
• дата народження;
• місце роботи (навчання),;
• номер телефону;
Кожному абоненту присвоюється унікальний номер телефону.
Кожен абонент може підключити тільки один тариф і мати безліч номерів телефону. Абонент
не повинен одночасно бути підключеним до декількох тарифів.
Кожен номер телефону має такі характеристики:
• унікальний номер;
• Кодове слово
• PUK;
• PIN.
У разі підключення тарифу абонента в телефонній станції зберігається форма, в якій мають бути
записані такі відомості:
• номер телефону абонента , який підключив тариф;
• дата оплати тарифу;
• дата закінчення сроку тарифу.
Передбачити наступні обмеження на інформацію в системі :
1. Номер телефону може не мати жодного тарифа

2. У телефонній станції повинні бути зареєстровані абоненти не молодше 14 років.
3. Кожен абонент може мати безліч номерів телефону
4. Кожен абонент при реєстрації повинен надати паспортні данні.
Кожен тариф може містити посилання до безліч номерів, але кожен номер повинен мати лише
один тариф.
З даної інформаційної системою повинні працювати такі групи користувачів :

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

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

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

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 - В9

Uploaded by

Copyright:

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

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

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

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

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

Зображення 1.1 – Скріншот створеної сторінки.

Код створеної сторінки:

<header class = "header-css"><img src="header.jpg"></header>

<footer class = "footer" colspan="1">Кирилов Дмитро 451 група</div>

div, aside, footer, header{

<!DOCTYPE html> function check(){

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

Зображення 3.1 – Головна форма.

Зображення 3.2 – Форма Запити.

Зображення 3.4 – Форма Учасники.

«Линейные структуры данных»

Таблиця 1 Предметні області

Варі- Предметна Мінімальний список характеристик:

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

• абонентна або погодинна оплата;

• номер квитанції про оплату;

У телефонній станції ведеться облік абонентів.

На кожного абонента в облік заносяться такі відомості:

• місце роботи (навчання),;

Кожному абоненту присвоюється унікальний номер телефону.

Кожен номер телефону має такі характеристики:

• номер телефону абонента , який підключив тариф;

• дата оплати тарифу;

• дата закінчення сроку тарифу.

Передбачити наступні обмеження на інформацію в системі :

1. Номер телефону може не мати жодного тарифа

З даної інформаційної системою повинні працювати такі групи користувачів :

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

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

You might also like