WEB-програмування



 

Міністерство  освіти і науки, молоді та спорту України

Полтавський національний технічний університет  імені Юрія Кондратюка

Факультет інформаційних  та телекомунікаційних технологій і  систем

Кафедра комп’ютерних та інформаційних технологій і систем

 

 

 

 

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

З ДИСЦИПЛІНИ

«WEB-програмування»

 

 

 

 

 

Виконав:

студент групи 202-ТН

Рак Б.В.

Викладач:

Демиденко М.І.

 

 

Зміст

ВСТУП 3

Опис завдання 4

Проектування бази даних 5

Розробка сторінок сайту 6

Головна сторінка «index.php» 6

Модуль «block_menu.php» 6

Модуль «mysql.php» 7

Список контактів «book.php» 8

Додавання контактів «add.php» «add+.php» 8

Редагування контактів «edit.php» «edit+.php» 9

Видалення контактів «delete+.php» 10

Модуль «police.php» 10

Реєстрація «reg.php» «reg+.php» 11

Авторизація «log.php» «log+.php» 12

Вихід «logout.php» 12

 

Розробка інтерфейсу 13

Шаблон сайту 13

Каскадні таблиці стилів «base.css» 13

Результат роботи 18

ВИСНОВКИ 20

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

 

ВСТУП

World Wide Web – глобальна комп'ютерна мережа, яка на сьогоднішній день містить мільйони сайтів, на яких розміщена різноманітна інформація. Люди отримують доступ до цієї інформації за допомогою використання технології Internet. Для навігації в WWW використовуються спеціальні програми  –  Web – браузери, які істотно полегшують подорож по безкрайніх просторах WWW. Вся інформація в Web – браузері відображається у вигляді Web – сторінок, які є основним елементом байтів WWW.

Web – сторінки, підтримуючи технологію мультимедія, об’єднують в собі різні види інформації: текст, графіку, звук, анімацію і відео. Від того, наскільки якісно і креативно розроблена та чи інша Web - сторінка, залежить її успіх у Мережі.

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

В даній роботі було розглянуто основи мови програмування Web – сторінок – HTML, який є загальноприйнятим стандартом WWW, а також скриптової мови – PHP.

 

Опис завдання

«Персональни телефонний довідник»

Для розробки я використовував мову PHP 5.x. Це найновіша версія, більш стабільна та швидка. Перед написанням коду я створив невелике техзавдання.  Це полегшило та пришвидшило процес написання.

На сайті виконується  реєстрація користувачів. Кожен зареєстрований користувач має можливість додавати, видаляти або редагувати контакти.

Переглядати контакти може навіть не авторизований користувач «Гість».

На сторінці де розміщується список всіх контактів є можливість сортування:

«За телефоном», «За ім’ям», «По порядку».

 

Сайт розміщений на даний  хостинг: http://cpanel.byethost22.com . Адреса сайту: http://phonebook.byethost22.com

 

Проектування  бази даних

Для роботи сайту використовується база даних та запити MySQL.

На сайті існує дві таблиці. Далі вказана назва таблиці та поля що в ній містяться.

  1. Таблиця користувачі
      1. ID
      1. Логін
      2. Пароль
      3. Мобільний телефон
      4. Ім’я
      5. Компанія
      6. Посада
      7. Адреса
      8. Факс
      9. День народження

 

  1. Таблиця контакти
      1. ID
      1. Логін користувча, котрий додав контакт
      2. Мобільний телефон
      3. Ім’я
      4. Компанія
      5. Посада
      6. Адреса
      7. Факс
      8. День народження

 

 

 

 

Розробка сторінок сайту

До складу сторінок також  входять модулі для роботи з ним. 

Головна сторінка «index.php»

Так як цей файл перший для  сайта, я відвів йому роль перевірки користувача на авторизацію.

Перевірка виконується наступним  чином:

  1. Із cookie приймаються данні «логін» та «пароль» юзера.
  2. Із таблиці користувачів вибирається пароль, де логін юзера дорівнює логіну із cookie
  3. Якщо паролі співпадають то переадресовувати його на сторінку «book.php» , якщо ні то на сторінку авторизації «log.php».

<?php

include("mysql.php");

$login = $_COOKIE[login];

$pass = $_COOKIE[pass];

$result = mysql_query("SELECT * FROM user WHERE login='$login'");

$myrow = mysql_fetch_array($result);

if(!empty($myrow[id])){

if($pass==$myrow[pass])

{

    header("location: book.php"); 

}}

else

{

header("location: log.php");

}

?>

Модуль «block_menu.php»

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

                    <table border="0" id="menu_table" cellpadding="0" cellspacing="0">

                    <tr>

<?php

include("mysql.php");

$login = $_COOKIE[login];

$pass = $_COOKIE[pass];

$result = mysql_query("SELECT * FROM user WHERE login='$login'");

$myrow = mysql_fetch_array($result);

if(!empty($myrow[id])){

if($pass==$myrow[pass])

{

echo

'

<td id="li_menu"><a id="link_menu" href="book.php" >Моя книга</a></td>

<td id="li_menu"><a id="link_menu" href="add.php" >Добавить</a></td>

<td id="li_menu"><a id="link_menu" href="logout.php" >Выйти</a></td>

';

}}

else

{

 

  echo

'

<td id="li_menu"><a id="link_menu" href="book.php" >Моя книга</a></td>                       

<td id="li_menu"><a id="link_menu" href="log.php" >Войти</a></td>

                     <td id="li_menu"><a id="link_menu" href="reg.php" >Регистрация</a></td>

';

 

}

?>

                    </tr>

                    </table>

                   

                   

                                       

   Модуль «mysql.php»

Модуль в якому встановлене з’єднання з БД.

<?php

 

$db = mysql_connect("sql207.byethost22.com","b22_10531967","852456");

mysql_query('SET NAMES cp1251');

mysql_select_db("b22_10531967_adres",$db);

 

?>

 

 

 

 

Список контактів «book.php»

На цій сторінці виводяться в циклі контакти користувача, або усі (якщо користувач не авторизований). Присутня можливість сортування.

<?

$mylogin = $_COOKIE[login];

$order = $_GET['order'];

if($_GET['order']!="mobile" && $_GET['order']!="id" && $_GET['order']!="fname"){$order="id";}

$result_book = mysql_query("SELECT * FROM tel ORDER BY ".$order."");

                            do

                            {

                             if(!empty($myBook[id]))

                             {

                             echo '

    <tr>

<td align="center" width="150"><a href="info.php?id='.$myBook[id].'">'.$myBook[mobile].'</a></td>

<td align="center" id="contact">'.$myBook[fname].'</td>

<td width="50" align="center"><form method="get" action="edit.php"><input type="hidden"  name="id" value="'.$myBook[id].'"/><input type="image"  src="img/telephone_edit.png"/></form></td>

<td width="50" align="center"><form method="post" action="delete+.php"><input type="hidden"  name="id" value="'.$myBook[id].'"/><input type="image"  src="img/telephone_delete.png"/></form></td>

                               </tr>

                                               

                                <tr>

                                <td colspan="4" height="10" style="border-bottom: 1px dashed #787878;"> </td>

                               </tr>

                                  ';}

}while($myBook = mysql_fetch_array($result_book))

                                           

?>

Додавання контакту «add.php» «add+.php»

 

У файлі «add.php» знаходиться форма, яка заповнюється користувачем

У файлі «add+.php» знаходиться скрипт, який обробляє отримані данні

<?php

include("police.php");

include("mysql.php");

$mylogin = $_COOKIE[login];

$mobile = htmlspecialchars($_POST['mobile']);

$name = htmlspecialchars($_POST['name']);

$company = htmlspecialchars($_POST['company']);

$post = htmlspecialchars($_POST['post']);

$adres = htmlspecialchars($_POST['adres']);

$fax = htmlspecialchars($_POST['fax']);

$hb = htmlspecialchars($_POST['hb']);

if(

   !empty($name) &&

   !empty($hb) &&

   !empty($mobile)

  )

      {

        $result = mysql_query("INSERT INTO tel (`mobile`, `fname`, `company`, `post`, `adres`, `fax`, `hb`, `user`)

                                VALUES ('$mobile','$name','$company','$post','$adres','$fax','$hb','$mylogin')");

        if($result==true){header("location: add.php?result=true");}

                         else {header("location: add.php?result=false");}

                        

      } else {header("location: add.php?result=empty");}

?>

Редагування контакту «edit.php» «edit+.php»

У файлі «edit.php» знаходиться форма, яка вже заповнена даними з БД

У файлі «edit+.php» знаходиться скрипт, який обробляє отримані данні

<?php

include("police.php");

include("mysql.php");

$id = htmlspecialchars($_POST['id']);

$mobile = htmlspecialchars($_POST['mobile']);

$name = htmlspecialchars($_POST['name']);

$company = htmlspecialchars($_POST['company']);

$post = htmlspecialchars($_POST['post']);

$adres = htmlspecialchars($_POST['adres']);

$fax = htmlspecialchars($_POST['fax']);

$hb = htmlspecialchars($_POST['hb']);

if(

   !empty($name) &&

   !empty($hb) &&

   !empty($mobile)

  )

      {

        $result = mysql_query("UPDATE  tel SET mobile='$mobile', fname='$name', company='$company', post='$post', adres='$adres', fax='$fax', hb='$hb'

                                WHERE id='$id'");

        if($result==true){header("location: edit.php?result=true&id=".$id."");}

                         else {header("location: edit.php?result=false&id=".$id."");}

                        

      } else {header("location: edit.php?result=empty&id=".$id."");}

?>

Видалення контакту «delete+.php»

На сторінці списку поряд  з контактом існує кнопка «Видалити», яка відправляє id контакту, котрий потрібно видалити.

<?php

include("police.php");

include("mysql.php");

$id = htmlspecialchars($_POST['id']);

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

if($result==true)

{

    header("location: book.php?result=deltrue");

}

else

{

    {

    header("location: book.php?result=delfalse");

}

}

?>

Модуль «police.php»

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

<?php

include("mysql.php");

$login = $_COOKIE[login];

$pass = $_COOKIE[pass];

$result = mysql_query("SELECT * FROM user WHERE login='$login'");

$myrow = mysql_fetch_array($result);

if(!empty($myrow[id])){

if($pass==$myrow[pass])

{}}

else

{

header("location: log.php");

 

}

?>

Реєстрація «reg.php» «reg+.php»

У файлі «reg.php» знаходиться форма, яка заповнюється користувачем

У файлі «reg+.php» знаходиться скрипт, який обробляє отримані данні

<?php

include("mysql.php");

$login = htmlspecialchars($_POST['login']);

$pass = htmlspecialchars($_POST['pass']);

$mobile = htmlspecialchars($_POST['mobile']);

$name = htmlspecialchars($_POST['name']);

$company = htmlspecialchars($_POST['company']);

$post = htmlspecialchars($_POST['post']);

$adres = htmlspecialchars($_POST['adres']);

$fax = htmlspecialchars($_POST['fax']);

$hb = htmlspecialchars($_POST['hb']);

if(

   !empty($login) &&

   !empty($pass) &&

   !empty($name) &&

   !empty($hb) &&

   !empty($mobile)

  )

      {

        $result = mysql_query("INSERT INTO user (`login`, `pass`, `mobile`, `fname`, `company`, `post`, `adres`, `fax`, `hb`)

                                VALUES ('$login','$pass','$mobile','$name','$company','$post','$adres','$fax','$hb')");

        if($result==true){header("location: index.php?result=regtrue");}

                         else {header("location: reg.php?result=false");}

                        

      } else {header("location: reg.php?result=empty");}

?>

 

Авторизація «log.php» «log+.php»

У файлі «log.php» знаходиться форма, яка заповнюється користувачем

У файлі «log+.php» знаходиться скрипт, який обробляє отримані данні

<?php

include("mysql.php");

$login = $_POST[login];

$pass = $_POST[pass];

$result = mysql_query("SELECT * FROM user WHERE login='$login'");

$myrow = mysql_fetch_array($result);

if($pass==$myrow[pass])

{

    setcookie("login",$login);

    setcookie("pass",$pass);

    header("location: book.php");

   

}

else

{

   header("location: log.php?result=logbad");

}

?>

Вихід «logout.php»

Файл очищує cookie , тобто дезактивує користувача і переводить в категорію «Гість»

<?php

 

    setcookie("login","");

    setcookie("pass","");

    header("location: log.php");

   

 

?>

 

 

 

 

 

Розробка інтерфейсу

«Шаблон сайту»

<?

include("mysql.php");

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=windows-1251" />

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

<title>Личная адрессная книга</title>

</head>

<body>

        <table width="100%" border="0" cellpadding="0" cellspacing="0">

        <tr>

         <td id="header">

                    <table border="0" id="logo">

                    <tr>

                     <td rowspan="2"><img src="img/logo.png"/></td>

                     <td id="logo_text">Адресная книга</td>

                    </tr>

                    <tr>

                     <td id="logo_desc"><i> Персональный телефонный справочник </i></td>

                    </tr>

                    </table>

            

           

            </td>

        </tr>

        <tr>

         <td id="menu">

<? include ("block_menu.php"); ?>

           

           

            </td>

        </tr>

        <tr>

         <td id="outher" valign="top">

           

                <table width="90%" align="center" border="0" cellpadding="0" cellspacing="0" id="main">

                <tr>

                 <td id="main_header">

                    </td>

                </tr>

                <tr>

                 <td id="main_content" valign="middle">

                           

КОНТЕНТ

 

                    </td>

                </tr>

                </table>

                <br />

               

            </td>

        </tr>

        </table>

</body>

</html>

Каскадні таблиці  стилів «base.css»

body

{

    background: #E3E7ED;

    margin: 0px;  

}

 

a

{

     color: #417FDA;

    font-size: 12px;

        font-family: Verdana, Arial, Helvetica, sans-serif;

    text-align: center;  

    text-decoration: none;

}

 

a:hover

{

     color: #787878;

    text-decoration: underline;

}

 

#header

{

    background: url('img/bg_head.gif') repeat-x;

    height: 150px;

}

 

 

#menu

{

    background: url('img/bg_menu.gif') repeat-x;

    height: 50px;

}

 

#outher

{

    background: url('img/bg_outher.gif') repeat-x top;

}

 

#main_header

{

  background: url('img/main_header_bg.gif') repeat-x;

  height: 39px; 

}

 

#main_content

{

    background: #ffffff;

    height: 500px;

}

 

#main

{

    border: 1px solid #C8CDD1;

    border-top: 1px solid #ffffff;

    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.3); /* Äëÿ Firefox */

    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.3); /* Äëÿ Safari è Chrome */

    box-shadow: 0 0 10px rgba(0,0,0,0.3); /* Ïàðàìåòðû òåíè */

   

}

 

p#autor

{

    font-size: 12px;

    text-align: center;

    color: #3D444F;

    font-family: Verdana, Arial, Helvetica, sans-serif;

}

 

 

#logo_text

{

    color: #616161;

    font-family: Verdana, Arial, Helvetica, sans-serif;

    font-size: 18px;

    vertical-align: bottom;

}

 

#logo_desc

{

    color: #616161;

    font-family: Verdana, Arial, Helvetica, sans-serif;

    font-size: 13px;

    vertical-align: top;

}

 

#li_menu

{

    width: 100px;

    text-align: center;

    border-right: 1px solid #242A34;

    height: 50px;

 

}

#link_menu

{

    font-family: Verdana, Arial, Helvetica, sans-serif;

    color: #ffffff;

    font-size: 12px;

    text-decoration: none;

    cursor: pointer;

}

#link_menu:hover

{

    text-decoration: underline;

}

 

#menu_table

{

    margin-left: 40px;

}

 

#blocks

{

    width: 250px;

    height: 400px;

}

#block_head

{  

    width: 220px;

    height: 40px;

  

    font-family: Verdana, Arial, Helvetica, sans-serif;

    color: #ffffff;

    font-size: 16px;

    text-indent: 20px;

    font-weight: bold;

}

#block_body

{  

    font-family: Verdana, Arial, Helvetica, sans-serif;

    font-size: 12px;  

    height: 140px;

    color: #787878;

    vertical-align: top;

 

}

 

#content

{

    background: url('img/border1.png') repeat-y;

}

 

#text

{

    font-family: Verdana, Arial, Helvetica, sans-serif;

    color: #333333;

    font-size: 12px;

    text-align: right   

}

 

#input

{

    width: 150px;

    border: 1px solid #C0CAD5;

    color: #000000;

    font-family: Verdana, Arial, Helvetica, sans-serif;

    font-size: 12px;

    height: 15px;

   

}

 

#login_reg_ok

{background-color:#EEF5DD; border:1px solid #9ACD32; width:350px; height:50px;

line-height: 50px;

    color: #666666;

    font-family: Verdana, Arial, Helvetica, sans-serif;

    font-size: 12px;

    text-align: center;

 

    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Äëÿ Firefox */

    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Äëÿ Safari è Chrome */

    box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Ïàðàìåòðû òåíè */

 

}

 

#login_reg_bad

{background-color:#FFE1E1; border:1px solid #FB774B; width:350px; height:50px;

line-height: 50px;

    color: #666666;

    font-family: Verdana, Arial, Helvetica, sans-serif;

    font-size: 12px;

    text-align: center;

 

    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Äëÿ Firefox */

    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Äëÿ Safari è Chrome */

    box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Ïàðàìåòðû òåíè */

 

}

 

#fname

{

    color: #2D3541;

    font-size: 16px;

        font-family: Verdana, Arial, Helvetica, sans-serif;

    text-align: center;

    font-weight: bold;  

}

#mobile

{

    color: #417FDA;

    font-size: 14px;

        font-family: Verdana, Arial, Helvetica, sans-serif;

    text-align: center; 

}

#hb

{

    color: #000000;

    font-size: 12px;

        font-family: Verdana, Arial, Helvetica, sans-serif;

    text-align: center; 

}

 

#contact

{

WEB-програмування 📙 Курсовая → 🆔 1422

WEB-програмування 📙 Курсовая → 🆔 1422

WEB-програмування