Ознакомление с языками программирования web-приложений. Основы работы с базами данных
Введение
Производственная практика проходила на ЗАО НПП «ЗНАК».
За время прохождении практики были выполнены следующие виды работ:
· ознакомление с деятельностью и задачами предприятия;
· ознакомление с языками программирования web-приложений (HTML, CSS, PHP);
· изучение основ работы с БД в среде MS SQL server management express 2005.
и полученные следующие результаты:
1. Постановка
задачи и целей практики
Задание: модернизация сайта. Есть БД в которую записывается время прихода
и ухода на работу, а также место работы (офис и производство), необходимо
сформировать отчет ( в виде интернет - страницы) в котором отображается
календарь с полной информацией о проделанной работе выбранногосотрудника.
Цели:
· Разработать форму представления данных на экране.
· Сформировать данные из БД, пригодные для вывода на экран.
· Изучение основ web-программирования
(HTML, CSS, PHP).
· Изучение основ работы с БД в среде MS SQL server management express 2005.
· Реализация технологии всплывающих подсказок (javascript).
2. Реализация
поставленных целей
2.1
Разработка формы представления данных на экране
Исходная форма (рисунок 1):
Рисунок 1 -исходная форма представления данных на экране.
Недостатки данного представления:
· Нет возможности посмотреть данные за весь месяц.
· Сложно просматривается соответствие между входом на работу и
выходом с нее.
· Сложное представление данных, результатом чего является
сложность восприятия информации.
2.2
Разработка новой формы представления
Для возможности просмотра информации о сотруднике за весь месяц
предусмотрена возможность просмотра всего рабочего месяца в виде календаря. Для
более удобного ориентирования по календарю выходные дни выделены красным, а
также выделен текущий день. В каждом дне календаря заносится следующая
информация:
· Дата (формат: день.месяц.год).
· Учет обеда (формат: часы:минуты).
· Учет дороги (формат: часы:минуты).
· Количество отработанных часов в текущий день (формат:
часы:минуты). Отображается зеленным, если у сотрудника за текущий день не было
нарушений и красным, если нарушения были.
· Иконка, при наведении на которую показывается дополнительная
информация.
Один день календаря представлен на рисунке 2.
Рисунок 2 - один день из календаря.
В результате разработки вида представления информации была получена
следующая форма (рисунок 3).
Рисунок 3 - новая форма представления информации на экране.
2.3
Формирование данных из БД, которые пригодны для вывода на экран
Исходная форма (рисунок 4):
Рисунок 4 - исходная формировка данных.
Для удобства восприятия информации вход и выход объединили в одну строку
и, если в данной строке присутствует нарушение, то вся или часть строки
выделяется оранжевым цветом. Так же вся дополнительная информация показывается
только при наведении на определенный участок формы и скрывается при сдвиге
курсора мыши с определенного места на форме. Результатпредставлен на рисунке 5.
Рисунок 5 - новая формировка данных.
2.4
Реализация технологии всплывающих подсказок
Для реализации данного пункта был выбран язык программирования javascript для которого необходимо подключить
плагин tiptip:
<script type="text/javascript"
src="script/jquery.tipTip.js"></script>
Для реализации подсказки необходимо прописать следующую функцию:
<script typr="text/javascript">
$(function()
{
$(".someclass").tipTip({maxWidth: '500px'});
});
</script>
Далее необходимо присвоить данный класс объекту, при наведении на который
будет появляться подсказка. Пример всплывающей подсказки представлен на рисунке
5.
Конечный результат работы представлен на рисунке 4 и рисунке 6. Код
программы представлен в приложении А.
Рисунок 6 - итог
Заключение
база данные время сотрудник
В результате прохождения практики были получены следующие результаты:
· Разработана новая форма представления данных на сайте.
· Изучены основы web-
программирования (HTML, CSS, PHP).
Изучена работа плагина tiptip,
который предназначен для создания всплывающих подсказок.
· Получены навыки работы с БД в среде MSSQL server management express 2005.
Список
литературы
1. Джон Коггзол - PHP5 полное руководство.
2. Евгений Попов - Видеоурок (Создание всплывающих
подсказок).
. Евгений Попов - Видеокурсы (html,css,php,javascript)
Приложение
А - листинг программы
(дополнительное)
detail.php
<?php'wta_func.php'; //подключение необходимых функций
function actions ($out,$move,$place,$time,$interval)
{($move == 'entry') $move = 0;$move = 1;($place == '(офис)') $place = 1;$place = 0;
$str='';($time=='00:00:00')
{
$str = '<span style=color:#ff8800> '.$time.' ( Отсутствует выход вконце дня )
</span>';$str;
}($out)
{0: //если человек находится на улице
{
$str = 'Офис:
'.$time.' - ';
$out = 1;$str;
}($move==0&&$place==2) //вход на производство
{
$str = 'Производство: '.$time.' - ';
$out = 2;$str;
}($move==1&&$place==1) //выход из офиса
{
$str = '<span style=color:#ff8800>Офис: ... - '.$time.'( Отсутствует вход
)<br></span>'; $str;
}($move==1&&$place==2) //выход с производства
{
$str = '<span style=color:#ff8800>Производство: ... - '.$time.'(
Отсутствует вход )<br></span>';$str;
}
}1: //если человек находится в офисе
{($move==1&&$place==1) //выход из офиса
{
$str = $time.' ( '.$interval.' )<br>';
$out = 0;$str;
}($move==0&&$place==1) //вход в офис (двойной)
{
$str = '<span style=color:#ff8800> ... ( Пропущен выход
)<br></span>Производство: '.$time.' - ';$str;
}($move==0&&$place==2) //вход на производство(пропущен выход из
офиса)
{
$str = '<span style=color:#ff8800>... ( Пропущен выход из
офиса)<br></span> Производство: '.$time.' - ';
$out = 2;$str;
}($move==1&&$place==2) //выход с производства(пропущен выход из
офиса и вход на производство)
{
$str = '<span style=color:#ff8800> ... ( Пропущен выход
)<br></span>Производство: ... - '.$time.' ( Пропущен вход
)<br>';
$out = 0;$str;
}
}2: //если человек находится на производстве
{($move==1&&$place==2) //выход с производства
{
$str = $time.' ( '.$interval.' )<br>';
$out = 0;str;
}($move==0&&$place==2) //вход на производство (двойной)
{
$str = '<span style=color:#ff8800> ... - '.$time.' ( Пропущен вход )
<br></span>';$str;
} ($move==0&&place==1) //пропущен выход с производства
{
$str = '<span style=color:#ff8800> ... ( Пропущен выход )<br></span>'.$time.' - ';
$out = 1;
return $str;
}($move=1&&place==0) //пропущен выход с производства и вход в
офис
{
$str = '<span style=color:#ff8800>... ( Пропущен выход )<br> ... -
'.$time.'( Пропущен вход )<br></span>';
};
}
}
}{ (isset($_GET["uid"])) {$uid =
$_GET['uid'];}(isset($_GET["begin_date"]))
{
$date1 = $_GET['begin_date'];
$begin_date = new DateTime($date1,$timezone);
$month = $begin_date->format('m');
$year = $begin_date->format('Y');
}
{
$month =
date("m",mktime(0,0,0,date('m'),1,date('Y')));
$year = date('Y',mktime(0,0,0,date('m'),1,date('Y')));
}(isset($_GET["end_date"]))
{
$date2 = $_GET['end_date'];
$last_date = new DateTime( $date2, $timezone ); //конец месяца
} $uid = 1;
$timezone = new \DateTimeZone( 'Europe/Moscow' ); //выбираем временной пояс
$current_date = new DateTime("now",$timezone);
$begin_date->setDate( $begin_date->format('Y'),
$begin_date->format('m'), 1 ); //формат получения (начало месяца)
$conn = new \sqlsrv\connection( \WTA\SERVER, array(
"Database"=>\WTA\DATABASE, "UID"=>"sa",
"PWD"=>"1" ) );
$users_query = $conn->query("$uid_u, $name, $name1,
$name2$userlist$uid_u = $uid AND $tab_number_filterBY $name");
$username.= '
'.$user_row[\WTA\NAME].' '.$user_row[\WTA\NAME1].' '.$user_row[\WTA\NAME2];
//формирование строки
с ФИО
$skip = date('w',mktime(0,0,0,$month,1,$year)); //узнаем номер для недели
$skip=$skip - 1; ($skip == -1) $skip=6;
$daysInMonth = date('t',mktime(0,0,0,$month,1,$year)); //узнаем
количество дней в месяце
$calendar_head = '';
$calendar_body = ''; //обнуляем переменнаые для календаря
$day = 1; //переменная цикла
for($i=0; $i<6;$i++)
{
$calendar_body.='<tr>'; //открываем тег строки
for($j = 0; $j <7;$j++) //внутренний цикл для дней недели
{(($skip>0)or($day>$daysInMonth))
{
$calendar_body.='<td>
$skip--;
}
{(($j == 5) OR ($j == 6)) //если воскресение или суббота,то отмечаем
выходной
$calendar_body.='<td>Выходной</p></td>';
else {//иначе просто выводи день ячейки
$beg_date = new DateTime( $begin_date->format('Y-m-d'),
$timezone );
$result = \WTA\get_worktime( $conn, $user_row[\WTA\UID_U],
$beg_date ); //необходим формат
времени format('Y-m-d')
$info='';
$mistake ='';
$where_event_place='';
$out = 0;
foreach( $result[\WTA\EX] as $ex_info )
$class_warning = '';
$event_class = '';
$event_string = '';( $ex_info[\WTA\MODE] == \WTA\EVENT_ENTRY
) //определяем какое событие произошло (вход или выход)
{
$event_class = 'entry';
$event_string = 'вход';
}if( $ex_info[\WTA\MODE] == \WTA\EVENT_EXIT )
{
$event_class = 'exit';
$event_string = 'выход';
}( $ex_info[\WTA\DOOR] == \WTA\DOOR_OFFICE ) //определяем где произошло событие
{
$where_event_place='(офис)';
$event_string.= " (офис)";
}if( $ex_info[\WTA\DOOR] == \WTA\DOOR_FACTORY ) {
$where_event_place='(пр-во)';
$event_string.= " (пр-во)";
}( $ex_info[\WTA\WARNINGS] )
{
$class_warning = '>
}
// $info.=$ex_info[\WTA\TIME]->format('H:i:s').' -
'.$event_string.' '.$ex_info[\WTA\INTERVAL].'<br>';
$info .=
actions(&$out,$event_class,$where_event_place,$ex_info[\WTA\TIME]->format('H:i:s'),$ex_info[\WTA\INTERVAL]);(
$ex_info[\WTA\WARNINGS] as $warning )
{
$mistake .=$warning.'<br>';
}
}
$dinner = $result[\WTA\DINNER]; //учет обеда(
$dinner != 0 )
{
$min = (int)(($dinner%3600)/60); $min = $min > 9 ? $min :
"0$min";
$hour = (int)($dinner/3600); $hour = $hour > 9 ? $hour :
"0$hour";
$dinner = "вычет $hour:$min";
$html_table.= "<tr>Учет обеда</td><td>$dinner</td><td> </td></tr>";
}
$road = $result[\WTA\ROAD]; //учет дороги(
$road != 0 )
{
$min = (int)(($road%3600)/60); $min = $min > 9 ? $min :
"0$min";
$hour = (int)($road/3600); $hour = $hour > 9 ? $hour :
"0$hour";
$road = "$hour:$min";
$html_table.= "<tr>Время в дороге</td><td>$road</td><td> </td></tr>";
}((date(j)==$day)&&(date(m)==$month)&&(date(Y)==$year))
//проверяем на текущий день
{
if($mistake=='')
{
<table style=" border: solid 0px BLACK; width: 100%;
height: 150px; ">
<tr><td style=" border: solid 0px
BLACK;">'.$begin_date->format('d.m.Y').'<img>Нарушений нет!" align = "right"
src="img/button.ico"/></td></tr>
<tr><td style=" border: solid 0px BLACK;
font-size:16px; ">Отработано: <strong
style="color:green;">'.$result[\WTA\WORKT]->format('%H:%I').'</strong>
</td></tr>
<tr><td style=" border: solid 0px
BLACK;font-size:16px;">Обед:
<strong>'.$dinner.'</strong></td></tr>
<tr><td style=" border: solid 0px
BLACK;font-size:16px;">Дорога:
<strong>'.$road.'</strong></td></tr>
</table>
</td>';
}
{
$calendar_body.='<td>
<table style=" border: solid 0px BLACK; width: 100%;
height: 150px; ">
<tr><td style=" border: solid 0px
BLACK;">'.$begin_date->format('d.m.Y').'<img>
<tr><td style=" border: solid 0px BLACK;
font-size:16px;">Отработано: <strong
style="color:red;">'.$result[\WTA\WORKT]->format('%H:%I').'</strong>
</td></tr>
<tr><td style=" border: solid 0px
BLACK;font-size:16px;">Обед:
<strong>'.$dinner.'</strong></td></tr>
<tr><td style=" border: solid 0px
BLACK;font-size:16px;">Дорога:
<strong>'.$road.'</strong></td></tr>
</table>
</td>';
}
}//если это обычный день(производим разбиение на строки и ячейки)
{($mistake=='')
{
$calendar_body.='<td>
<table style=" border: solid 0px BLACK; width: 100%;
height: 150px; ">
<tr><td style=" border: solid 0px
BLACK;">'.$begin_date->format('d.m.Y').'<img>Нарушений нет!"align = "right"
src="img/button.ico"/></td></tr>
<tr><td style=" border: solid 0px BLACK;
font-size:16px; ">Отработано: <strong
style="color:green;">'.$result[\WTA\WORKT]->format('%H:%I').'</strong>
</td></tr>
<tr><td style=" border: solid 0px
BLACK;font-size:16px;">Обед:
<strong>'.$dinner.'</strong></td></tr>
<tr><td style=" border: solid 0px
BLACK;font-size:16px;">Дорога:
<strong>'.$road.'</strong></td></tr>
</table>
</td>';
}
{
$calendar_body.='<td>
<table style=" border: solid 0px BLACK; width: 100%;
height: 150px; ">
<tr><td style=" border: solid 0px
BLACK;">'.$begin_date->format('d.m.Y').'<img>
<tr><td style=" border: solid 0px BLACK;
font-size:16px;">Отработано: <strong
style="color:red;">'.$result[\WTA\WORKT]->format('%H:%I').'</strong>
</td></tr>
<tr><td style=" border: solid 0px
BLACK;font-size:16px;">Обед:
<strong>'.$dinner.'</strong></td></tr>
<tr><td style=" border: solid 0px
BLACK;font-size:16px;">Дорога:
<strong>'.$road.'</strong></td></tr>
</table>
</td>';
}
}
}
$day++;//увеличиваем день на один
$begin_date->modify('+1 DAY'); //увеличиваем
день на один
}
} //закрытие внутреннего цикла
$calendar_body.='</tr>'; //закрываем тег строки
} //закрытие внешнего цикла
//заголовок календаря
$calendar_head = '<h1 align=center >'.$username.'</h1>';
$begin_date->modify('-1 DAY');
$months = array( 'Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь',
'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь' ); //массив
с месяцами
$mn = (int)$begin_date->format('m');
$calendar_head.='<h3 align=center><<
'.$months[(int)$begin_date->format('m')-1].' >></h3>';
$calendar_head .= '<p align = "right"
style="font-size:20px;" >Необходимо отработать в этом месяце:
'.$need_work[$begin_date->format("Y")][$begin_date->format("n")].'</p>';
$calendar_head .= '<tr style = "height:25px">
<th>Понедельник</th>
<th>Вторник</th>
<th>Среда</th>
<th>Четверг</th>
<th>Пятница</th>
<th>Суббота</th>
<th>Воскресенье</th>
</tr>';"<!DOCTYPE html PUBLIC \"-//W3C//DTD
XHTML 1.0 Transitional//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">";"<link
rel=\"stylesheet\" type=\"text/css\"
href=\"styl.css\">";"<link
rel=\"stylesheet\" type=\"text/css\"
href=\"tipTip.css\">";"<body bgcolor=#f5f5dc
>";"<table align=\"center\" style=\" width:
1600px;height:
900px;\">";$calendar_head;$calendar_body;"</table>";(isset($_GET["begin_date"]))
{
$month = (int)$begin_date->format('m');
}'<a href="index.php?month='.$month.'"><p
align= "right" >Вернуться на главную</p></a>';"</body>";
} catch( \sqlsrv\exception $e )
{"Ошибка при обращении к SQL серверу: ".$e->getMessage();
{( $errors as $error)
{"<hr>SQLSTATE: ".$error[
'SQLSTATE']."<br>";"code: ".$error[
'code']."<br>";"message: ".$error[
'message']."<hr>";
}
}
}
?>
<script type="text/javascript"
src="script/jquery-1.3.2.min.js"></script>
<script type="text/javascript"
src="script/jquery.tipTip.js"></script>
<script type="text/javascript">
$(function()
{
$(".someclass").tipTip({maxWidth: '500px'});
});
</script>.css (таблица
стилей для оформления календаря)
td
/*отображение границ таблицы*/
{
width:
80px;
border: 0px;: solid 3px BLACK; size: 22px;
/*text-align: center;*/
}
.today /*выделениесегодняшнейдаты*/
{color:*#FFFF99; color:#FF531A;
}
.holiday/*выделениевоскресения*/
{ color:#fffff0;color:#FF531A; : 7%;align: center;
}
{:0 auto;:10px;
}
.day
{ color:#f5f5dc; :#000000;size:20px;
}
.none
{:0px;
}
.tdcells
{=" border: solid 1px BLACK;: 0px; : 100%; : 100%;
"
}