КУРСОВА РОБОТА

⇐ ПредыдущаяСтр 2 из 4Следующая ⇒

Міжрегіональна Академія управління персоналом

Інститут міжнародної економіки, фінансів та інформаційних технологій

КУРСОВА РОБОТА

ТЕМА: „РОЗРОБКА ІНФОРМАЦІЙНОГО САЙТУ – РАДА МОЛОДИХ ВЧЕНИХ”

(спільна робота)

РОБОТУ ВИКОНАВ

СТУДЕНТ ГР Е-9-12-Б3ПІ

3 КУРС

ГРИЩУК В. І.

(Партнер - Шелест В. Е. )

___________________

(підпис)

РОБОТУ ПЕРЕВІРИВ

БОДНЕНКО Д. М.

___________________

(підпис)

Київ 2013

Зміст

ВСТУП……………………………………………………………….. …….. ……. 3

РОЗДІЛ І. ТЕОРЕТИЧНА ЧАСТИНА

Середовище програмування……………………….. ……….. ………….. 4

1. 2. Відомості про сайт……………………………….. ………. …………6

РОЗДІЛ ІІ. ПРАКТИЧНА ЧАСТИНА

Постановка завдання………………………………………. ……. ………. 9

Інтерфейс програми ……………………………………. …………. …….. 9

Описання коду програми……………………………….. ………. ………15

Опис коду адмін панелі……. ………………….. ……. ……………. …. …. 16

Таблиці каскадних стилів……….. …………. ………. ………. ………….. 17

Створення бази данних……………………………………………………23

ВИСНОВКИ…………………………………………………………………….. 24

СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ………………………………………. 25

ДОДАТКИ

Додаток А………………………………………………………... …………. 26

Додаток В……………………………………………………………………29

Вступ

Рада молодих вчених — молодіжна організація, що об’єднує аспірантів та молодих викладачів університету, створена з метою активізації та координації наукових досліджень на засадах добровільної участі та спільності інтересів наукового спрямування.

Завдання роботи:

Завдання курсової роботи полягає в створенні сайту засобами гіпертекстової розмітки, який буде зручно використовувати як джерело інформації про новини в РМВ (Рада Молодих Вчених).

Мета роботи:

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

Актуальність роботи:

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

РОЗДІЛ І. ТЕОРЕТИЧНА ЧАСТИНА

Середовище програмування

Важливим етапом у розробці програмного забезпечення є вибір інструментарію.

Adobe Dreamweaver (див. мал. 1) — Остання версія HTML-редактора Adobe DreamWeaver CS 5, що відноситься до категорії WYSIWYG-редакторів, має дуже багато переваг: зручний інтерфейс, настроювання функцій, підтримка великих проектів і ShockWave-технологій, можливість закачування файлів через FTP, підтримка SSI і багато чого іншого. Для роботи в цій програмі не потрібно досконально знати HTML (у цьому і полягає перевага технології WYSIWYG — що бачу, те й одержую).

Проте DreamWeaver на кілька кроків випереджає інші редактори, що використовують технологію WYSIWYG, у першу чергу завдяки тому, що генерує «чистий» HTML-код. DreamWeaver дозволяє позбутися однотипної роботи при створенні сторінок (наприклад, верстка тексту) за допомогою використання опції «Запис послідовності команд» (записується послідовність вироблених вами команд, після натискаєте, наприклад, CTRL+P, DreamWeaver відтворює їх усі у тій самій послідовності).

Середовище програмування має можливість створювати файли типу: Html, Xlts, CSS, XML, JavaScript, Jsp, Php.
Интерфейс логічний та простий, у правій чатині провідник, меню: вставки, інспектора тегів, меню таблиць каскадних стилів. Робоча зона може бути трьох типів «Код-показує лише код документу» «Код та дизайн- відображуе код та дизайн документу» та «Дизайн- показує лише дизайн документу»

Мал. 1. Adobe Dreamweaver

Відомості про сайт

Сайт (також зустрічається застаріле веб-сайт) —сукупність веб-сторінок, доступних у мережі (Інтернеті), які об'єднані як за змістом, так і навігаційно. Фізично сайт може розміщуватися як на одному, так і на кількох серверах.

Сайтом також називають вузол мережі Інтернет, комп'ютер, за яким закріплена унікальна ІР-адреса, і взагалі будь-який об'єкт в Інтернеті, за яким закріплена адреса, що ідентифікує його в мережі (FTP-site, WWW-site тощо).

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

У наші дні питання «Навіщо потрібний сайт? » Задається все рідше. І це не дивно, адже відповідь на нього давно вже став очевидним: сайт потрібний, в основному, для того, щоб допомагати його власникові донести інформацію про себе до інтернет-користувачів, а також продати їм свій товар чи послугу. Існують три основні функції сайту: іміджева, маркетингова і звичайно ж інформаційна. Інформаційні функція полягає в тому, що інтернет-ресурс повинен надати відвідувачам максимум регулярно оновлюваної тематичної інформації. Яскравим прикладом сайту, для якого інформація грає основну роль, є інформаційний портал.

Портал - це великий сайт, що відрізняється високою відвідуваністю і великою кількістю інформації певної тематики. Важлива частина кожного порталу - навігація. У цьому сенсі він є входом в Інтернет, дозволяючи людині знайти або взагалі все, що йому потрібно, або конкретний сайт відповідно з певним запитом. У порталу обов'язково повинна бути сервісна частина - безкоштовна пошта, стрічка новин, служба знайомств, сховище файлів і так далі. Також портал може виконувати функції розсилки новин зареєстрованим користувачам. Оновленням порталу займається не одна людина, а, як правило, група людей з розмежуванням обов'язків. Тому для підтримки необхідна надійна система управління сайтом (CMS).

Мал. 2. Панель адміністратора(CMS)

Одним з яскравих прикладів є «Joomla» та «WordPress»(див. мал. 3).

Мал. 3. CMS Joomla

РОЗДІЛ ІІ. ПРАКТИЧНА ЧАСТИНА

Постановка завдання

Використовуючи мову програмування php розробити сайт на тему «Розробка інформаційного сайту – Рада Молодих Вчених». Сайт повинен містити можливості редагування, видалення, добавлення інформації. Також повинна бути зручна навігація по сайту.

Враховуючи варіант редагування контенту, потрібно реалізувати «Адмін. Панель».

Джерелом для відображення даних користувача повинен виступати файл будь-якої бази даних, що підтримує мову запитів SQL.

Інтерфейс програми

Сайт має класичний віконний інтерфейс, який присутній у більшості сайтів

Інтерфейс побудований с використанням стандартних тегів та компонентів:

· Tabel – служить контейнером для елементів, які визначають вміст таблиці

· include – підключення з зовнішнього файлу

· ul – встановлює маркований список

· li– визначає окремий елемент списку

· div– є блоковим елементом і призначений для виділення фрагмента документа

Загалом сайт розбитий на 5 блоків. (див. мал. 4).

Мал. 4. Головна сторінка сайту

У правій частині знаходяться гіперссилки з назвою сторінки.

(див. мал. 5).

Зверху находиться, графічне меню с 3D анімацією.

(див. мал. 5. 1).

Більшу частину робочої області займає основний блок, в цему блоці виводится інформація з бази данних, на кожну сторінку з своєї таблиці

Нижня частина зайнята графічним елементом «Футер»

Верхня частина зайнята графічним елементом «Хедер»

Мал. 5. Меню з ліва

Мал. 5. 1. Меню зверху

Головне меню розташовується під графічним об’єктом блоку.

Інтерфейс адмін панелі розбитий на 2 блоки.

Адмін. панель (див. мал. 6).

В лівій частині знаходится меню редагування(див. мал. 6. 1).

В основному блоці меню вводу інформації(див. мал. 6. 2).

Мал. 6. Адмін. панель.

Мал. 6. 1 Меню з ліва адмін панелі

Мал. 6. 2 Меню ввода інформації

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

Описання коду програми

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

<? include (" blocks/header. php" ); ? >

<? include (" blocks/lefttd. php" );? >

<? include (" blocks/footer. php" );? >

<? include (" blocks/menu. php" );? >

<? include (" blocks/right. php" );? >

Результатом буде виведення коду з зовнішнього файлу.

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

$result = mysql_query(" SELECT title, meta_d, meta_k, text FROM settings WHERE page='index' ", $db);

$myrow = mysql_fetch_array($result);

В змінну «result» вносятся заносяться потрібні поля з таблиці «settings»
В змінну «myrow» вносятся, як масив результати с змінної «result»

Для виводу інформації на сайт використовуєтся функція виводу echo

<? php echo $myrow['text']; ? >

Вивід с змінної myrow, елемент масиву text

Опис коду адмін панелі

Змінення змінної глобального типу в просту змінну.

if (isset($_POST['title'])) {$title = $_POST['title']; if ($title == '') {unset ($title); }}

Наступним кроком є перевірка, чи всі поля заповнені.

if (isset($title) & & isset($meta_d) & & isset($meta_k) & & isset($date) & & isset($description) & & isset($text) & & isset($author))

{$result = mysql_query (" INSERT INTO NewsMMA (title, meta_d, meta_k, date, description, text, author VALUES ('$title', '$meta_d', '$meta_k', '$date', '$description', '$text', '$author')" );

if ($result == 'true') {echo " It has been successfully added! "; }

else { echo " Operation fails! It has not been added "; }

}

Внесення в базу «it» потрібні поля наприклад '$title', '$meta_d', '$meta_k' значення $title', '$meta_d', '$meta_k
{$result = mysql_query (" INSERT INTO It (title, meta_d, meta_k, date, description, text, author VALUES ('$title', '$meta_d', '$meta_k', '$date', '$description', '$text', '$author')" );

Вивід названня елементу, як силку, та елементи з таблиці
printf (" < a href='edit_index. php? id=%s'> %s %s %s< /a> ", $myrow[" id" ], $myrow[" id" ], $myrow[" title" ], $myrow[" date" ])

Оновлення в базі данних информації

$result = mysql_query (" UPDATE it SET title='$title', meta_k='$meta_d', meta_k='$meta_k', date='$date', title='$title', description='$description', text='$text', author='$author' WHERE id='$id'" );
Оновлення в таблиці «it» поля «title» «meta_d» оновити урок з значенням «id»

Видалення відбувается за допомогою кнопки

< input name=" submit" type=" submit" value=" Delete articlesit" />

$result = mysql_query (" DELETE FROM articleit WHERE id='$id'" );

Видалення з таблиці «articleit» де змінна «id»

Таблиці каскадних стилів

Код CSS стилю до графічного меню.

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

padding: 30px;

font-family: " Helvetica Neue", helvetica, arial;

}

#container {

position: relative;

width: 940px;

}

#container: after {

content: " ";

display: block;

clear: both;

height: 0;

}

#menu {

position: relative;

float: left;

width: 100%;

padding: 0 20px;

border-radius: 3px;

box-shadow: inset 0 1px 1px rgba(255, 255, 255,. 5), inset 0 -1px 0 rgba(0, 0, 0,. 15), 0 1px 3px rgba(0, 0, 0,. 15);

background: #ccc;

}

#menu, #menu ul {

list-style: none;

}

#menu > li {

float: left;

position: relative;

border-right: 1px solid rgba(0, 0, 0,. 1);

box-shadow: 1px 0 0 rgba(255, 255, 255,. 25);

perspective: 1000px;

}

#menu > li: first-child {

border-left: 1px solid rgba(255, 255, 255,. 25);

box-shadow: -1px 0 0 rgba(0, 0, 0,. 1), 1px 0 0 rgba(255, 255, 255,. 25);

}

#menu a {

display: block;

position: relative;

z-index: 10;

padding: 13px 20px 13px 20px;

text-decoration: none;

color: rgba(75, 75, 75, 1);

line-height: 1;

font-weight: 600;

font-size: 12px;

letter-spacing: -. 05em;

background: transparent;

text-shadow: 0 1px 1px rgba(255, 255, 255,. 9);

transition: all. 25s ease-in-out;

}

#menu > li: hover > a {

background: #333;

color: rgba(0, 223, 252, 1);

text-shadow: none;

}

#menu li ul {

position: absolute;

left: 0;

z-index: 1;

width: 200px;

padding: 0;

opacity: 0;

visibility: hidden;

border-bottom-left-radius: 4px;

border-bottom-right-radius: 4px;

background: transparent;

overflow: hidden;

transform-origin: 50% 0%;

}

#menu li: hover ul {

padding: 15px 0;

background: #333;

opacity: 1;

visibility: visible;

box-shadow: 1px 1px 7px rgba(0, 0, 0,. 5);

animation-name: swingdown;

animation-duration: 1s;

animation-timing-function: ease;

@keyframes swingdown {

0% {

opacity: . 99999;

transform: rotateX(90deg);

}

30% {

transform: rotateX(-20deg) rotateY(5deg);

animation-timing-function: ease-in-out;

}

65% {

transform: rotateX(20deg) rotateY(-3deg);

animation-timing-function: ease-in-out;

}

100% {

transform: rotateX(0);

animation-timing-function: ease-in-out;

}

#menu li li a {

padding-left: 15px;

font-weight: 400;

color: #ddd;

text-shadow: none;

border-top: dotted 1px transparent;

border-bottom: dotted 1px transparent;

transition: all. 15s linear;

}

#menu li li a: hover {

color: rgba(0, 223, 252, 1);

border-top: dotted 1px rgba(255, 255, 255,. 15);

border-bottom: dotted 1px rgba(255, 255, 255,. 15);

background: rgba(0, 223, 252,. 02);

}

Ліва та нижні блоки

#leftside {

padding-left: 8px;

color: #888;

background: #FFF;

margin-right: 255px;

margin-left: 8px;

}

#leftside h2 { color: #555; text-indent: 17px; background: #FFF url(.. /images/head.gif) no-repeat left; }

#footer {

clear: both;

background: #FFF url(.. /images/footer.jpg) repeat-x;

height: 46px;

margin-left: 8px;

margin-right: 8px;

font-size: 75%;

color: #666;

}

#footer p { padding: 5px }

#footer. rside { float: right; display: inline; padding: 5px; text-align: right}

a { color: #0066B3; background: inherit; text-decoration: none }

h1 { font: bold 1. 9em Arial, Arial, Sans-Serif }

h2 { font: bold 1. 2em Arial, Arial, Sans-Serif; padding: 0; margin: 0 }

ul { padding: 0; margin: 0}

li { list-style-type: none }

. date { border-top: 1px solid #e5e5e5; text-align: right; margin-bottom: 25px; margin-top: 5px; }

#main #leftside. date a, #main #rightside a { border: 0; text-decoration: none; }

. comment. date { text-align: left; border: 0; }

#breadcrumbs {

float: left;

padding-left: 8px;

padding-top: 0px;

font: bold. 8em Arial, Arial, Sans-Serif;

color: #666;

width: 100%;

height: 25px;

margin-top: 10px;

margin-bottom: 10px;

clear: both;

}

#leftside #txt {width: 85%; height: 10em; padding: 3px 3px 3px 6px; margin-left: 0em; }

#leftside textarea { border: 1px solid #bbb; width: 85%; }

/* SNEWS */

#main #leftside fieldset { float: left; width: 95%; border: 1px solid #ccc; padding: 10px 8px; margin: 0 10px 8px 0; background: #FFF; color: #000; }

#main #leftside fieldset p { width: 95%; }

#main input { padding: 3px; margin: 0; border: 1px solid #bbb }

p { margin-top: 5px; }

/*input. search { border: 1px solid #ccc; padding: 4px; width: 160px; }*/

. comment { background: #FFF; color: #808080; padding: 10px; margin: 0 0 10px 0; border-top: 1px solid #ccc; }

. commentsbox { background: #FFF; color: #808080; padding: 10px; margin: 0 0 10px 0; border-top: 1px solid #ccc; }

. template { border: 1px solid #CCC; width: 95%; }

. tamplate1 { background-color: f6f6f6f; }

Центральний блок

#main { background: #FFF; margin: 25px 0 15px 0; color: #666; }

#main #rightside {

width: 220px;

float: right;

background: #FFF;

margin-right: 8px;

color: #666;

}

#main #rightside. box {

background: #efefef;

margin-bottom: 10px;

padding: 5px;

color: #666;

}

#main #rightside h2 {

font: bold 1. 0em Arial, Arial, Sans-Serif;

background: #CDCDCD url(.. /images/greyc.gif) no-repeat top right;

height: 18px;

padding: 3px;

color: #777;

}

Шапка сайта

#topmenu { margin: 0px 8px 0 8px;

padding: 0;

background: url(.. /images/menu.jpg) repeat-x top;

height: 35px;

}

#topmenu. lefts {

background: url(.. /images/menul.jpg) no-repeat left;

height: 35px;

padding-left: 5px;

}

#topmenu. rights {

background: url(.. /images/menur.jpg) no-repeat right;

float: right;

height: 35px;

width: 8px;

}

#topmenu li a {

color: #FFF;

text-align: left;

padding-left: 10px;

padding-right: 15px;

text-decoration: none;

background: transparent;

font-weight: bold

}

#topmenu li { padding: 0px;

float: left;

margin: 0;

font-size: 11px;

line-height: 35px;

white-space: nowrap;

list-style-type: none;

width: auto;

background: url(.. /images/sep.gif) no-repeat top right

}

Створення бази данних

Мал. 7. свторення таблиці

Мал. 7. Створенна таблиця

Мають поля

Id – ід розміром 4 символи

Title – відображення названня сторінки

Date –дата

Description – коротке описання

Text – текс

Висновки

При виконанні курсової роботи на тему «РОЗРОБКА ІНФОРМАЦІЙНОГО САЙТУ – РАДА МОЛОДИХ ВЧЕНИХ» довелось докласти значних зусиль до розробки продукту належної якості. Перед початком роботи було опрацьовано достатню кількість джерел, які дали багато корисної інформації про можливості мови php та роботі з базами данних.

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

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

Список використаних джерел

Основні джерела

1. Евгений Попов - PHP & MYSQL для начинающих

2. http: //ruseller. com/ Видеоуроки по созданию сайта

3. http: //www. magentawave. com Допомога в css

4. http: //www. cssbuttongenerator. com/ Генератор кнопок css

5. http: //htmlbook. ru/ Домога в html та css

6. http: //uk. wikipedia. org/wiki/ Допомога в написанні звіту.

⇐ Предыдущая 123 4 Следующая ⇒