РОЗРАХУНКОВО-ГРАФІЧНА РОБОТА. «Програмування гіпертекстових інтерфейсних додатків»

з дисципліни

«Програмування гіпертекстових інтерфейсних додатків»

Виконав:	студент гр. КІ-09-2 Залюбовська Тетяна Сергіївна
Перевірив:	Сохін Н.Л.

КРЕМЕНЧУК 2012

ПЕРЕЛІК УМОВНИХ СКОРОЧЕНЬ

HTTP – англ. HyperText Transfer Prоtocоl – «протокол передачі гіпертексту».

PHP – англ. PHP: Hypertext Preprocessor – «PHP: препроцесор гіпертексту».

CSS – англ. Cascading Style Sheets – каскадні таблиці стилів.

HTML – від англ. HyperText Markup Language – «мова розмітки гіпертексту».

WWW – англ. World Wide Web – всесвітня павутина.

СУБД – система управління базами даних.

ЗМІСТ

Вступ. 4

1 Робоче завдання. 5

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

3 Структура бази даних. 8

4 Програмна частина сайту. 10

4.1 Змістовна частина. 10

4.2 Адміністративна частина. 10

Висновок. 12

Список використаної літератури. 13

Додаток А Зовнішній вигляд головної сторінки сайту. 14

Додаток Б Текст програмних файлів. 16

ВСТУП

У наш час інформаційні технології проникають в усі сфери нашого життя. Вже позаду ті часи, коли Інтернет був чимось екзотичним і доступним обмеженому громадянству. Сьогодні Усесвітня Мережа це один з головних інструментів успішного бізнесу, будь то продаж товару або послуг. З кожним днем кількість людей, що пов'язують свій бізнес з глобальною павутиною, збільшується на сотні тисяч чоловік. Світовий прогрес несе нам нові платформи і технології для ведення бізнесу в мережі. У таких умовах наявність свого web-сайту, що розвивається, – одна з головних потреб для будь-кого, хто бажає стати успішною людиною.

У даній розрахунковій роботі було розроблено сайт «SamorodokArt». Метою розробки було створення робочого сайту, присвяченого мистецтву, демонстрації хобі (художника-аматора) та можливості отримання замовлень.

1 РОБОЧЕ ЗАВДАННЯ

Об’єктом розробки є сайт «SamorodokArt», присвячений мистецтву, демонстрації виконаних робіт та можливості отримання замовлень.

Сайт має зручний та універсальний інтерфейс, забезпечує легкість у користуванні та простоту навігації. Оформлення відповідає тематиці сайту та є привабливим для користувачів. Окрім змістовної частини, сайт має систему адміністрування контенту.

Користувач сайту може отримати наступні можливості:

– реєстрація;

– перегляд галереї;

– отримання інформації про техніки виконання малюнку;

– замовлення робіт;

– перегляд здійснених замовлень.

Система управління контентом надає адміністратору такі можливості:

– перегляд замовлень;

– поповнення галереї сайту.

2 СТРУКТУРА САЙТА

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

Цільовою аудиторією є небайдужі до мистецтва люди, а також люди, які бажають зробити подарунок у вигляді малюнку (частіше всього портрету) своїм рідним, коханим або друзям.

Структура розташування файлів та папок в кореневій директорії сайту наведено нижче (рис.1).

Рис.1 – Структура розташування файлів та папок в кореневій директорії сайту

Сайт містить 7 розділів: «Головна», «Приклади робіт», «Зробити замовлення», «Техніки виконання», «Реєстрація» , «Мої замовлення» та «Перегляд замовлень» .

«Головна» – це головна сторінка сайту, що надає інформацію користувачеві про призначення даного сайту.

«Приклади робіт» ­– сторінка, яка містить галерею прикладів, виконаних мною робіт.

«Зробити замовлення» – сторінка, що надає користувачеві можливість здійснити замовлення.

«Техніки виконання» – інформаційна сторінка для користувачів, що цікавляться різними техніками виконання малюнків.

«Реєстрація» – сторінка для реєстрації користувача.

«Мої замовлення» – сторінка, що містить усі замовлення певного користувача.

«Перегляд замовлень» – сторінка адміністратора, що містить усі надіслані замовлення.

Меню сайту розташоване горизонтально і містить у собі 4 розділи: «Головна», «Приклади робіт», «Зробити замовлення» та «Техніки виконання» (рис.2).

Рис.2 – Схематичне зображення меню

Оформлення сайту розміщене у файлі style.css (Додаток Б).

Ознайомитись із виглядом сторінок сайту можна у Додатку А.

3 СТРУКТУРА БАЗИ ДАНИХ

Для належного функціонування сайту було створено базу даних samorodok_art, що містить в собі 3 таблиці: example, orders та users.

Структура бази даних: таблиці, назви полів та зв’язки між таблицями наведені на рисунку 3.

Рис.3 – Структура бази даних

Таблиця orders має 9 полів.

id – номер замовлення;

id_user – ай_ди замовника;

date – дедлайн замовлення;

format – формат паперу, на якому буде виконано малюнок;

material – матеріал для виконання малюнку;

photo – фото, з якого потрібно малювати;

text – особисті бажання замовника;

status – статус замовлення;

add_date – дата відправки замовлення.

Таблиця users має 7 полів.

id – номер користувача;

fname – ім’я;

lname – прізвище;

email – пошта;

login – логін;

password ­– пароль;

phone – телефонний номер.

Таблиця example має 4 полів.

id – номер малюнка;

image – назва;

thumb – назва ескізу;

desc – опис.

4 ПРОГРАМНА ЧАСТИНА САЙТУ

4.1 Змістовна частина

У змістовній частині використані наступні php-файли: database.php, login.php, logout.php, orders.php та registration.php.

В них використані такі змінні:

$login – отримання логіну;

$passw – отримання паролю;

$date – отримання дати;

$format – отримання формату малюнка;

$material – отримання назви матеріалу;

$text – отримання особистих побажань замовника;

$db – об’єкт з’єднання з базою даних;

$query – об’єкт запиту до бази даних;

$dir – шлях до потрібного каталогу;

$new_name – нове ім’я файлу;

$first_name – отримання ім’я користувача;

$last_name – отримання прізвища користувача;

$mail ­– отримання ел. адреси;

$login – отримання логіну;

$password – отримання паролю;

$tel – отримання тел.номеру.

$_SESSION – суперглобальний асоціативний масив, що зберігає в собі змінні сесії поточного користувача;

$_POST – суперглобальний асоціативний масив змінних, що передаються поточному скрипту через HTTP методом POST.

4.2 Адміністративна частина

Для адміністрування контенту сайта були використані такі php-файли: image_proc.php, change_status.php, addimage.php.

В них використані наступні змінні:

$width – ширина;

$height – висота;

$id – значення, переданого номеру замовлення;

$status – значення, переданого статусу замовлення;

$db – об’єкт з’єднання з базою даних;

$query – об’єкт запиту до бази даних;

$dir – шлях до потрібного каталогу;

$new_name – нове ім’я файлу;

$_SESSION – супер глобальний асоціативний масив, що зберігає в собі змінні сесії поточного користувача;

$_POST – супер глобальний асоціативний масив змінних, що передаються поточному скрипту через HTTP методом POST.

ВИСНОВОК

У даній розрахунковій роботі був розроблений сайт «SamorodokArt». Здійснено аналіз робочого завдання, який встановив основні вимоги до розроблюваної сайту. Після цього була розроблена структура сайту. Була побудована база даних samorodok­_art, що містить 3 таблиці: example, orders та users. Було описано таблиці, їх атрибути, описані їх типи та призначення та встановлені взаємозв’язки між таблицями.

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

Недоліками сайту є непряме звертання користувача до автора (через пошту), а також неможливість залишати коментарі до представлених робіт.

Подальшими вдосконаленнями можуть бути: створення можливості діалогу між користувачем та автором всередині сайту та створення можливості залишати коментарі до представлених робіт.

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

1. Гончаров А. «Самоучитель по HTML». – СПб.: Питер, 2002. – 240 с.

2. Самойлов А.М. «Методичні вказівки щодо виконання розрахунково–графічної роботи» . – Кременчук.: КДПУ, 2004. – 10 с.

3. http://htmlbook.ru/.

4. Дені Гудман, Майкл Моррисон «JavaScript – Біблія користувача» 5-те видання. – Київ, 2006 – 452с.

5. Артемій Ломов «HTML, CSS, скрипти: практика створення сайтів». – Санкт-Петербург, 2006. – 412с.

6. Артеменко Ю.Н. «MySQL. Довідник по мові». – Москва, 2005 – 378с.

Додаток А
Скріншоти
Рис. А.1 – Зовнішній вигляд головної сторінки сайту

Рис. А.2 – Зовнішній вигляд сторінки «Приклади робіт»

Рис. А.3 – Зовнішній вигляд сторінки «Техніки виконання»

Рис. А.4 – Зовнішній вигляд сторінки з описом техніки виконання пастеллю «Пастель»

Рис. А.5 – Зовнішній вигляд сторінки реєстрації користувача

Додаток Б
Текст програмних файлів

Style.css

body{

width:100%;

margin: 0 auto;

background-image: url("images/body2.png");

background-repeat: no-repeat;

}

#header{

width: 1024px;

height: 250px;

background-image: url("images/header.png");

background-repeat: no-repeat;

}

#reg{

position:relative;

top:110px;

left:1130px;

width:240px;

height:90px;

font-family:Segoe Script;

font-size: 16px;

color: #7a531c;

}

#header #reg form {

text-align:left;

height:90px;

}

#header #reg form table{

border-bottom: 2px solid #582515;

border-right: 1px solid #582515;

text-align:left;

font-weight:bolder;

}

#header #reg form table tr td{

height: 30px;

width:100px;

}

#header #reg form table a{

background-image: url("images/header_.png");

background-repeat: no-repeat;

color: #853b25;

text-decoration: none;

}

#header #reg form table a:active{

color: #c06217;

}

#menu_adm{

width: 1024px;

font-family:Segoe Script;

font-size: 20px;

height:5px;

margin: 0 auto;

}

#menu_adm ul{

list-style:none;

width:1024px;

height: inherit;

padding: 0;

margin: 3px;

}

#menu_adm ul li{

float:left;

width:33%;

text-align:center;

height:30px;

}

#menu_adm ul li a{

border-bottom: 2px solid #582515;

display:block;

background-color: none;

text-decoration:none;

color: #7a531c;

}

#menu_adm ul li a:hover{

background-image: url("images/link_adm.png");

}

#menu{

width: 1024px;

font-family:Segoe Script;

font-size: 20px;

height:5px;

margin: 0 auto;

}

#menu ul{

list-style:none;

width:1024px;

height: inherit;

padding: 0;

margin: 3px;

}

#menu ul li{

float:left;

width:25%;

text-align:center;

height:30px;

}

#menu ul li a{

border-bottom: 2px solid #582515;

display:block;

background-color: none;

text-decoration:none;

color: #7a531c;

}

#menu ul li a:hover{

background-image: url("images/link.png");

}

#content{

min-height:370px;

width: 1024px;

margin: 20px auto;

height: auto;

color: #582515;

text-decoration: none;

font-weight:bolder;

font-family:Segoe Script;

font-size: 18px;

}

#content form{

width: 1024px;

margin: 20px auto;

height: auto;

color: #582515;

text-align:center;

text-decoration: none;

font-weight:lighter;

font-family:Segoe Script;

font-size: 18px;

}

.description{

margin: 0 auto;

background-image: url("images/content_.png");

background-repeat: no-repeat;

font-family:Segoe Script;

font-size: 15px;

font-weight:bolder;

}

#content a{

background-image: url("images/header_.png");

background-repeat: no-repeat;

font-family:Segoe Script;

font-size: 23px;

color: #853b25;

font-weight:bolder;

text-decoration: none;

}

#content a:active{

color: #c06217;

}

#content table {

text-align:left;

margin: 0 auto;

background-image: url("images/content.png");

background-repeat: no-repeat;

font-weight:bolder;

}

#content table tr td{

height: 50px;

padding-right: 20px;

}

#content #form_order{

text-align:left;

}

.form_error{

color:red;

}

#footer{

margin: auto auto 0;

position: relative;

width: 1024px;

color: #582515;

height: 30px;

text-align:center;

}

change_status.php

<?php

if(!isset($_POST['change']))

{

header('Location: ../');

exit();

}

$id = $_POST['id'];

$status = $_POST['status'];

include_once('../actions/database.php');

$db = db_connection();

$query = $db->prepare("UPDATE orders

SET status = ?

WHERE id = ?");

$query->execute(array($status, $id));

header('Location: ./orders.php?id='.$id);

?>

database.php

<?php

define('DB_DRIVER','mysql');

define('DB_HOST','localhost');

define('DB_NAME','samorodok_art');

define('DB_USER','root');

define('DB_PASS','');

function db_connection()

{

try

{ $db = new PDO

(DB_DRIVER.':host='.DB_HOST.';dbname='.DB_NAME,DB_USER,DB_PASS);

$db->query("SET NAMES 'cp1251'");

return $db;

}

catch(PDOException $e)

{

die($e->getMessage());

}

}

?>

<?php

session_start();

?>

index.php

<!DOCTYPE html>

<html lang="ru">

<head>

<title>SamorodokArt</title>

<link rel="shortcut icon" href="favicon.ico">

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

<script type="text/javascript" src="./scripts.js"></script>

</head>

<body>

<div id="header">

<div id="reg">

<?php

if(isset($_SESSION['id_user']))

{

include_once('form_greetings.php');

}

else

{

include_once('form_login.php');

}

?>

</div>

</div>

<center>

<div id="menu">

<ul>

<li><a href="index.php">Головна</a></li>

<li><a href="examples.php">Приклади робіт</a></li>

<li><a href="zakaz.php">Зробити замовлення</a></li>

<li><a href="tech.php">Техніки виконання</a></li>

</ul>

</div>

<div id="content" >

<table style="text-align:center;">

<td style="font-size: 20px;">

Вітаю Вас на сайті <b style="font-size: 27px; color: #a4320f;">SamorodokArt</b>

</td>

<tr>

<td>

<div>

<p align="justifi">Це один із багатьох сайтів, який присвячений мистецтву.

<br>До вашої уваги пропоную свою працю.

<br>Не судіть строго. Я художник-аматор.

Займаюся цією благородною справою вже 2 роки.

<br>Досить успішно.

</p>

</div>

<tr>

<td>

<p align="justifi">На цьому сайті Ви можете дізнатися про різні техніки виконання,

переглянути деякі із моїх робіт, зробити замовлення або придбати будь-яку з робіт.

<br><p align="justifi">Малюнок може стати <font size=5; color=#a4320f; >оригінальним</font> та <font size=5; color=#a4320f;>неочікуваним приємним подарунком</font>

для будь-кого з ваших близьких : родичів, коханих або друзів.

</p>

<p align="justifi">Щоб отримати деталі по здійсненню замовлення пишіть на адресу

<font size=5; color=#a4320f; >[email protected]</font>.

</p>

</td>

</tr>

</td>

</tr>

</table>

</div>

<div id="footer">

<p>&copy;samorodok 2012</p>

</div>

</body>

</html>

<?php

session_start();

?>

zakaz.php

<!DOCTYPE html>

<html lang="ua">

<head>

<title>SamorodokArt</title>

<link rel="shortcut icon" href="favicon.ico">

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

<script type="text/javascript" src="./scripts.js"></script>

</head>

<body>

<div id="header">

<div id="reg">

<?php

if(isset($_SESSION['id_user']))

{

include_once('form_greetings.php');

}

else

{

include_once('form_login.php');

}

?>

</div>

</div>

<div id="menu">

<ul>

<li><a href="index.php">Головна</a></li>

<li><a href="examples.php">Приклади робіт</a></li>

<li><a href="zakaz.php">Зробити замовлення</a></li>

<li><a href="tech.php">Техніки виконання</a></li>

</ul>

</div>

<div id="content" style="text-align:center;">

<?php

if(isset($_SESSION['id_user']))

{

include_once('form_order.php');

}

else

{

echo '<span style="color:red;">Ви маєте авторизуватися, щоб зробити замовлення</span>';

}

?>

</div>

<div id="footer">

<p>&copy;samorodok 2012</p>

</div>

</body>

</html>