Реализация клиентской части на Java
Разработка серверной части интернет магазина
«Кондитерская Симпсонов»
Подготовительный этап серверной части
Для работы нам потребуется XAMPP - полностью бесплатный и простой в установке дистрибутив Apache, содержащий MariaDB, PHP.
Скачать данный дистрибутив можно по ссылке: http://www.apachefriends.org.
После установки комплекта на рабочем столе и в меню «Пуск» появляется ярлык для запуска панели управления XAMPP (рис. 1), с его помощью происходит запуск Apache и MySQL. Напротив, модулей Apache и MySQL нажмите кнопку «Start»
Рис. 1
Работа с MySQL из PHP
После запуска становятся доступны кнопки Admin. Нажмите MySQL Admin — phpMyAdmin откроется браузер и перейдет по адресу http://localhost/phpmyadmin/ (рис 1.1.)
Рис. 1.1
Далее нажимаем «Создать БД» в поле «Имя базы данных» - введите «sim», в выпадающем списке выберите «utf8_bin» (рис. 1.2)
Рис. 1.2
После чего откроется страница с возможностью создания таблицы. В поле «Имя:» - введите «tovar», «Количество столбцов:» - выберите «5» и нажмите кнопку «Вперёд» (рис. 1.3)
Рис. 1.3
После чего появится новое окно, где нужно будет указать данные по каждой колонке. Присвоим следующие имена колонкам: id, naim, kol, dv, img (см. рис. 1.4):
Рис. 1.4
Имена колонок задаются по правилам именования переменных. Кроме этого, нужно указать тип данных, которые будут хранится в данной колонке, Типы данных выбираются из списка. Нам потребуются следующие типы:
· INT – целые числа – аналог типа int из Java.
· TINYNT – тоже целые числа, но малой размерности, так как наименование товара это числа от 1 до 10, то такой размерности вполне достаточно.
· DATETIME – дата, содержащая ещё и время.
· VARCHAR – хранит строки.
Далее перемещаемся вправо до колонки A_I – это сокращение от AUTO_INCREMENT – автонумерация необходимо установить галочку для колонки id – в самой верхней строке (см. рис. 1.5):
Рис. 1.5
Теперь рассмотрим пример работы с базой данных из PHP – выполним запрос на добавление одной строки в таблицу tovar. Для добавления данных используется команда SQL под названием INSERT. Чтобы добавить данные в нашу таблицу необходимо выполнить следующий запрос: (рис. 1.6)
INSERT INTO tovar (naim,kol,img) VALUES (1,117,"img/1.png")
Рис. 1.6
По аналогии заполните таблицу до конца используя следующие данные:
Таблица 1
| naim | kol | img |
| img/2.png | ||
| img/3.png | ||
| img/4.png | ||
| img/5.png | ||
| img/6.png | ||
| img/7.png | ||
| img/8.png | ||
| img/9.png | ||
| img/10.png |
Самостоятельно создайте таблицу «razmetka» c 2 двумя столбцами «id» - поле типа «int», A_I и «html» - поле типа «text».
При помощи команды INSERT INTO внесите следующие данные в таблицу «razmetka»:
Таблица 2
| id | html |
| <div class="left_b"> <h1>Главная</h1> <img src="img/r1.png" border="0" width="50%" height="25%" /> </div> | |
| <div class="left_b"> <h1>Товары</h1> <img src="img/r2.png" border="0" width="50%" height="25%" /> </div> | |
| <div class="left_b"> <h1>Заказать</h1> <img src="img/r3.png" border="0" width="50%" height="25%" /> </div> | |
| <div class="left_b"> <h1>Контакты</h1> <img src="img/r4.png" border="0" width="50%" height="25%" /> </div> | |
| <div id="right_b"> <h1>Работаем по <br/> всему Миру!</h1> <br/> <object width="200" height="200" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"> <param name="movie" value="img/3dClock.swf" /> <param name="quality" value="high" /> <param name="scale" value="noborder" /> <param name="3dClock" value="t" /> <param name="wmode" value="opaque" /> <param name="src" value="img/3dClock.swf" /> <!--[if !ie]>--><object width="250" height="250" type="application/x-shockwave-flash" data="img/3dClock.swf"><!--<![endif]--> <param name="quality" value="high" /> <param name="scale" value="noborder" /> <param name="salign" value="t" /> <param name="wmode" value="opaque" /> <param name="src" value="img/3dClock.swf" /> <p>Flash умер! Причём давнооооо!!!!!</p> <!--[if !ie]>--></object><!--<![endif]--> </object> </div> | |
| <h1 class="h1_opisan">Добро пожаловать!</h1> <br/> <div class="div_opisan"> Мы готовим наши пончики с любовью, начиняем, декорируем и бережно упаковываем их по 6 штук в фирменную коробочку и перевязываем лентой. Собери коробочку на свой вкус ! </div> <div class="div_opisan"> Проект "Кондитерская симпсонов" был создан командой энтузиастов своего дела. Основными задачами проекта являются распространение наших пончиков и пропаганда всяких вкусностей. Наши пончики - это сокровища, которые подарила нам наша семейка "Симпсонов" для поддержания вкусного образа жизни! </div> <div class="div_opisan"> Проект "Кондитерская симпсонов" является некоммерческим, благотворительным. Финансирование проекта происходит за счет основной деятельности компании - продажи нашей вкусной продукции. </div> <div class="div_opisan"> Предполагаемые пончики можно получить бесплатно! При оформлении заказа имеется ограничение по количеству отгружаемого товара!: не более 6 штук от количества на складе. Полученные пончики запрещается использовать в коммерческих целях! </div> <br/> | |
| <h1 class="h1_opisan">Главное представительство</h1> <br/> <div class="div_opisan"> +7 (495) 000-00-00<br/> +7 (499) 000-00-00<br/> <br/> Адрес: Москва, проспект Симпсонов, дом 7<br/> <br/> E-mail: edu@1c.ru<br/> <br/> </div> | |
| <h1 class="h1_opisan">Правила заказа товара</h1> <br> <div class="div_opisan"> <br/> </div> | |
| <div id="zakaz"> <form action="index.php?id=2" target="_self" method="post"> <table border="0" cellpadding="0" width="50%"> <tr> <th>Пончик</th> <th>Товар</th> <th>Остаток,шт</th> </tr> | |
| <tr><td>-----</td><td>-----</td><td>-----</td></tr> <tr><td>Имя(*)</td><td><input type="text" name="user_name" maxlength="15"/></td><td></td></tr> <tr><td>Телефон(*):</td><td><input type="text" name="user_tel" maxlength="20"/></td><td></td></tr> <tr><td></td><td><input type="submit" id="btn" name="btn" value="Заказать звонок"/></td><td></td></tr> </table> </form> </div> </div> <br/> |
Самостоятельно создайте таблицу «opisan» c 3 двумя столбцами «id» - поле типа «int», A_I, «naim» - типа varchar и «txt» - поле типа «text».
При помощи команды INSERT INTO внесите следующие данные в таблицу «opisan»:
Таблица 3
| Id | Naim | Txt |
| Малиновый | Малинка, малинка, какая вечеринка! малиновая начинка и мягкая глазурь. Невероятный пончик с малиновым кремом, покрытый малиново-сахарной глазурью. | |
| Мятный | Пончик который с первого дня стал любимцем всех сладкоежек, наполнен сливочно-мятным кремом и покрыт мятной глазурью. | |
| Апельсиновый | Наш фирменный пончик, вручную начиненный нежным апельсиновым кремом, покрытый апельсиново-сахарной глазурью. | |
| Яблоко с корицей | Пышный пончик, вручную наполнен яблочным джемом с корицей, покрыт сахарной глазурью со вкусом спелого яблока | |
| Вишнёвый | Перга - это законсервированная медоферментным составом пчелиная обножка, сложенная и утрамбованная пчелами в соты, прошедшая молочнокислое брожение, в процессе которого пыльцевые зерна превращаются в пергу. Пчеловоды называют пергу "хлебиной", что говорит о ее особой важности для пчел и человек.Сочный вишневый джем, мягкая вишнёвая глазурь и пышные формы это все про вишневый пончик. | |
| Рафаэлло | Любимец женских сердец! Красавец Рафаэлло! С любовью наполнен сливочно-кокосовым кремом, покрыт белым шоколадом и кокосовой стружкой. | |
| Сникерс | Сливочная карамель и жаренный арахис, что же еще? Наш самый сытный пончик "Сникерс", от души наполнен сливочной карамелью, полит белым шоколадом и усыпан жаренным арахисом. | |
| Нутелла | Легендарный пончик с шоколадно - ореховой пастой "нутелла", покрыт молочным шоколадом и украшен воздушным рисом в карамели. | |
| Баварский крем | " О, Да. Этот пончик бесподобен", - так говорят о нем наши гости. Он наполнен нежнейшим заварным баварским кремом и сливочной глазурью. | |
| Шоколадный | Наш самый брутальный пончик настолько крут, что он на 100% состоит из шоколада. Начинка, глазурь, посыпка и шоколадное тесто - это мечта любого шокоголика. |
Верстка серверной части
Для создания серверной части посредствомPHP понадобится среда разработки Eclipse for PHP.На момент создания данного методического пособия официальный сайт находится по адресу: http://www.eclipse.org/ (оригинальная версия находится по этому адресу).
Установка Eclipse for PHPпроизводится стандартным способом.
· Запустите среду разработки Eclipse for PHP.
· Создайте новый PHP проект, при помощи контекстного меню «File»-«New»-«PHP Project» (рис. 1.7).
Рис. 1.7
В поле «Project name» введите имя проекта «simp» и нажмите кнопку «Finish» (рис. 1.8).
Рис. 1.8
В окне навигации проекта выберите папку «simp», нажмите правой кнопкой мыши по иконке папки и выберите пункт «New» - «PHP File». (рис. 1.9).
Рис. 1.9
В поле «File name:» введите «index.php» и нажмите кнопку «Finish» (рис. 1.10).
Рис. 1.10
Аналогичным образом создайте в проекте папки «doc» и «img».
В корневой папке «simp» создайте аналогичным образом файлы «lib.php» «simp.css» «tovar.php»
Результат продемонстрирован на рис 1.11
Рис 1.11
Откройте файл проекта для верстки: «lib.php», внего поместите следующий код:
<?php
//Параметры подключения к БД
@error_reporting(E_STRICT);
define ( "ServerName", "localhost" );
define ( "UserLogin", "root" );
define ( "UserPassword", "" );
define ( "DbName", "sim" );
Дополните код следующей функцией «makeOpisan()»:
//функци для формирования описания товаров
function makeOpisan() {
// Подключаемся кMySQL
$db = mysqli_connect ( ServerName, UserLogin, UserPassword ) or die( "cannot connect" );
// Если подключение выполнено
if($db) {
// Выбираем базу данных с проверкой успешного выбора
if(mysqli_select_db ( $db, DbName ) or die( "cannot select DB" )) {
//Указываем использование кодировки UTF-8
mysqli_query ( $db, "SET names 'utf8'" );
$rez = mysqli_query ( $db, "SELECT * FROM opisan" );
$out_page = "";
// Перебираем десять строк результат запроса
for($i = 0; $i < 10; $i ++) {
//Получаем очередную строку из запроса
$row = mysqli_fetch_row ( $rez );
//Получаем наименование
$naim = $row [1];
//Получаем описание
$txt = $row [2];
//Добавляем в конец строки
$out_page .= "<h1 class='h1_opisan'>{$naim}</h1>" . "<div class = 'div_opisan'>{$txt}</div><br/>";
}
// Выводим на страницу браузера
echo$out_page;
}
//Отключаемся от MySQL
mysqli_close ( $db );
}
}
Далее добавьте функцию «getIdMenu()» для получения раздела меню:
// Получение номера раздела меню
function getIdMenu() {
// Результат
$tmp = 0;
// Если есть данные вGET-запросе
if($_GET) {
// Если параметр: id имеет значение вGET-запросе
if($_GET ["id"]) {
// Получаем значение параметра: id
$tmp = $_GET ["id"];
}
// Если это значение не лежит в интервале [1..3],
// то записываем нулевое значение в$tmp
if(! (($tmp >= 1) && ($tmp <= 3)))
$tmp = 0;
}
// Возвращаем значение из функции
return$tmp;
}
Далее добавьте функцию «getHTML()» для получения HTML-разметки из базы данных и вывода на веб-страницу:
// Получение HTML-разметки из базы данных и вывод на веб-страницу
function getHTML($nom) {
// Результат работы функции
$html = "";
// Подключаемся кMySQL
$db = mysqli_connect ( ServerName, UserLogin, UserPassword ) or die( "cannot connect" );
// Если подключение выполнено
if($db) {
// Выбираем базу данных с проверкой успешного выбора
if(mysqli_select_db ( $db, DbName ) or die( "cannot select DB" )) {
//Указываем использование кодировки UTF-8
mysqli_query ( $db, "SET names 'utf8'" );
//Выполняем запрос для получения данных
$rez = mysqli_query ( $db, "SELECT * FROM razmetka WHERE (id={$nom})" );
//Определяем количество строк в результате запроса
$kol_str = mysqli_num_rows ( $rez );
// Если получена одна строка
if($kol_str == 1) {
//Получаем строку
$row = mysqli_fetch_row ( $rez );
// Получаем значение поля: html
$html = $row [1];
}
}
//Отключаемся от MySQL
mysqli_close ( $db );
}
// Выводим HTML на страницу
echo$html;
}
Далее добавьте функцию «getHTML()» для обработки заявки заказа в интернет магазине:
// Функция обработки заявки
function testPost() {
// Если была нажата кнопка отправления данных
if($_POST ["btn"]) {
//Переменная для сообщения
$rez = "";
// Если поле Имя не заполнено
if(trim ( $_POST ["user_name"] ) == "")
$rez = "Введите Имя!";
// Если поле Телефон не заполнено
else if(trim ( $_POST ["user_tel"] ) == "")
$rez = "Введите Телефон!";
else{
//Данные для записи в файл
$info = "Name: " . trim ( $_POST ["user_name"] ) . " Tel: " . trim ( $_POST ["user_tel"] );
// Создаем случайное имя файла
$file_name = "" . rand ( 1000000, 9999999 ) . ".txt";
// Сообщение о приеме заявки
$rez = "Заявка принята!";
// Создаем файл для записи
$f = fopen ( "./doc/" . $file_name, "w" );
// Если файл создан
if($f) {
// Записываем в него данные
fwrite ( $f, $info );
// Закрываем файл
fclose ( $f );
}
}
//Выводим сообщение на веб-страницу ввиде заголовка
echo"<h1 class='h1_opisan' style='font-size: 35px;'>{$rez}</h1>";
}
}
Далее добавьте функцию «makeTabl()» для обработки заявки заказа в интернет магазине:
//Функция для формирования таблицы товаров
function makeTabl() {
// Подключаемся к MySQL
$db = mysqli_connect(ServerName,UserLogin,UserPassword);
// Если подключение выполнено
if($db) {
//Выбираем базу данных с проверкой успешного выбора
if(mysqli_select_db($db,DbName ) {
// Указываем использование кодировки UTF-8
mysqli_query($db, "SET names 'utf8'");
// Запрос для получения остатков товаров
$sql1="SELECT img, naim, SUM(kol) FROM tovar GROUP BY naim ASC";
// Выполняем запрос
$rez1 = mysqli_query($db, $sql1);
// Запрос для получения наименований товаров
$sql2 = "SELECT naim FROM opisan";
// Выполняем запрос
$rez2 = mysqli_query($db, $sql2);
// Запрос для получения изображения товаров
$sql3 = "SELECT img FROM tovar";
// Выполняем запрос
$rez3 = mysqli_query($db, $sql3);
// Переменная для вывода тегов на веб-страницу
$out_page = "";
// Перебираем десять строк результата запроса
for($i=0;$i<10;$i++) {
// Получаем очередную строку из запроса
$row1=mysqli_fetch_array($rez1);
// Получаем очередную строку из запроса
$row2=mysqli_fetch_array($rez2);
// Получаем очередную строку из запроса
$row3=mysqli_fetch_array($rez3);
// Получаем количество
$kol=$row1[2];
// Получаем наименование товара
$naim=$row2[0];
// Получаем изображение
$img=$row3[0];
//Добавляем строку таблицы с двумя ячейками,
// в ячейки помещаем наименование товара и количество
$out_page .="<tr><td><img src= $img></td><td>{$naim}</td><td>{$kol}</td></tr>";
}
// Выводим на страницу браузера
echo$out_page;
}
//Отключаемся от MySQL
mysqli_close($db);
}
}
?>
Сохраните файл lib.php и перейдите к верстке главной страницы index.php:
В самом начале файла index.php подключите файл lib.php при помощи конструкции однократного включения require_once ' ';
<?php
require_once'lib.php';
?>
После подключения конструкции однократного включения require_once 'lib.php'; поместите в файл index.php следующий код:
<html>
<head>
<title>Кондитерская симпсонов</title>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<!--Подключаем иконку для сайта-->
<link rel="shortcut icon" href="img/icon.png" type="image/x-icon">
<!--Разрешаем поисковым роботам индексировать страницы сайта-->
<meta name="robots" comtent="all"/>
<link href="simp.css" rel="styLesheet" type="text/css" />
<!--Указываем заголовок сайта в списке поисковой системы-->
<meta name="description" content="Project Simpson and Company" />
<!--Указываем ключевые слова для поисковой системы-->
<meta name="keywords" content="Симпсоны,пончики,заказать,кондитерские изделия" />
<script type="text/javascript" src="puh.js"></script>
</head>
Дополните файл index.php следующим кодом:
<body onload="func()">
<div id="top" >
<a href="index.php" target="_self">
<img src="img/shapka.png" border="0" id="img_logo" />
</a>
</div>
<div id="menu">
<ul>
<li><a class="buttons" href='index.php' target="_self">Главная</a></li>
<li><a class="buttons" href='index.php?id=1' target="_self">Товары</a></li>
<li><a class="buttons" href='index.php?id=2' target="_self">Заказать</a></li>
<li><a class="buttons" href='index.php?id=3' target="_self">Контакты</a></li>
</ul>
</div>
<div id="sheet" align="center">
<?php
// Получаем и выводим левую боковую часть
getHTML ( getIdMenu () + 1 )?>
</div>
<div id="main">
<div id = "cen">
<?php
// Получаем номер раздела меню
$id_menu = getIdMenu ();
if($id_menu == 1) { // Если номер: 1 -Товары
// Выводим описание товаров
makeOpisan ();
} else if($id_menu == 0) { // Если номер: 0 - Главная страница
// Получаем разметку по номеру
getHTML ( 6 );
} else if($id_menu == 3) { // Если номер: 3 - Контакты
// Получаем разметку по номеру
getHTML ( 7 );
} else if($id_menu == 2) { // Если номер: 2 - Заказы
// Получаем разметку по номеру
getHTML ( 8 );
//Принимаем данные через POST-запрос
testPost ();
//Получаем разметку верхней части таблицы
getHTML ( 9 );
//Вывод десяти строк таблицы с остатками товаров
makeTabl ();
// Получаем разметку нижней части таблицы
getHTML ( 10 );
}
?>
</div>
</div>
<div id="sidebar" align = "center">
<?php
// Получаем и выводим правую боковую часть
getHTML ( 5 );
?>
</div>
<div id="footer">
</div>
</body>
</html>
После написания главной страницы напишите php– скрипт для работы с товарами интернет магазина. Откройте файл tovar.php и поместите в него следующий код:
<?php
$db = mysqli_connect ( "localhost", "root", "" );
//возврат количества товаров
function javaKol() {
// Переменная, в которой будет результат остатков
$otvet = "";
global$db;
// Запрос для подсчета остатков
$sql = "SELECT naim, SUM(kol) FROM tovar GROUP BY naim ASC";
//Выполним запрос и получим результат:
$rez = mysqli_query($db,$sql);
// Перебираем десять строк результата запроса
for($i = 0; $i < 10; $i ++) {
//echo $otvet ."\n";
// Получаем очередную строку из запроса
$row = mysqli_fetch_row ( $rez );
// Получаем количество
$kol = $row [1];
// Добавляем количество в конец строки
$otvet .= $kol;
// Добавляем разделитель тильда (~)
if($i != 9)
$otvet .= "~";
}
// Выводим на страницу браузера
echo$otvet;
}
Дополните Файл tovar.php функцией «getQuery()»:
//Добавление даты на момент изменения данных в БД
function getQuery() {
global$db;
//получаем дату и время на момент записи в бд
$date_time = date ( 'Y-m-d [H:i:s]' );
//перебираем в цикле 10 параметров
for($i = 1; $i <= 10; $i ++) {
//переменная для имени параметра
$tmp = "tov" . $i;
//если такой параметр передан в гет-запросе
if($_GET [$tmp]) {
//значение текущего параметра-колич товара
$kol = $_GET [$tmp];
//строка запроса
$q = "INSERT INTO tovar (naim, kol, dv)" . "VALUES ({$i},{$kol}, '{$date_time}')";
//выполняем запрос
mysqli_query ($db,$q);
}
}
}
Дополните Файл tovar.php функцией «runMySQL()»:
//Выполнение операций с БД
function runMySQL() {
global$db;
//если подключение выполнено
if($db) {
//выбираем бд с проверкой успешного выбора
if(mysqli_select_db ( $db, "sim" )or die( "cannot select DB" )) {
//указываем кодировку
mysqli_query ( $db, "SET names" );
//выполняем запрос на добавление
getQuery ();
// возврат количества товаров
javaKol ();
}
//отключаемся
mysqli_close ( $db );
}
}
// Если есть данные в гет-запросе
if($_GET) {
// выполняем проверку формата гет-запроса
//флаг проверки данных
$flag = false;
//цикл, выполняющий 10 шагов
for($i = 1; $i <= 10; $i ++) {
//переменная для имени параметра
$tmp = "tov" . $i;
//если такой параметр передан в гет-запросе
if($_GET [$tmp]) {
//меняем значение флага
$flag = true;
//прерываем цикл
break;
}
}
//если формат гет-запроса оказался верным
if($flag) {
runMySQL ();
}
}
?>
Поместите прилагающийся изображения в папку «img» проекта, далее опишите стили для интернет-магазина.
Откройте файл simp.css и поместите в него следующий код:
Для полного ознакомления с каждой функцией воспользуйтесь css справочником: http://htmlbook.ru/css
@CHARSET "UTF-8";
/*Отключение отступов от краёв экрана*/
body, table, tr, td, div, ul, li, img, a, h1, th, input, from {
padding: 0px;
vertical-align: top;
margin: 0px;
background-color: #FFE4C4;
}
/*Логотип/шапка интернет магазина*/
#img_logo {
height: 13%;
width: 100%;
background-size: 100% 100%;
background-position: 70% 70%;
background-repeat: no-repeat;
}
/*Меню интернет магазина*/
#menu {
height: 5%;
width: 100%;
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
background-repeat: repeat;
background-attachment: scroll;
background-position: top left;
background-size: cover;
font-size: 15%px;
}
/*Стиль кнопок меню*/
a.buttons {
display: inline-block;
text-decoration: none;
padding: 0.5em;
outline: none;
border-radius: 5%;
}
/*Стиль неактивных кнопок меню*/
a.buttons:hover {
background-image:
radial-gradient(1% 45% at 0% 50%, rgba(0,0,0,.6), transparent),
radial-gradient(1% 45% at 100% 50%, rgba(0,0,0,.6), transparent);
}
/*Стиль активных кнопок меню*/
a.buttons:active {
background-image:
radial-gradient(45% 45% at 50% 100%, rgba(255,255,255,.9), rgba(255,255,255,0)),
linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.3));
box-shadow:
inset rgba(162,95,42,.4) 0% 0% 0% 1%,
inset rgba(255,255,255,.9) 0% 0% 1% 3%;
}
/*Стиль списка*/
#menu ul {
list-style: none;
}
/*Стиль списка*/
#menu li {
float: left;
padding-top: 0%;
padding-left: 17%;
}
/*Стиль списка*/
#sheet {
height: 69%;
width: 20%;
background-color: #FFE4C4;
float: left;
}
/*Стиль списка*/
#main {
height: auto;
width: 60%;
background-color: #FFE4C4;
float: left;
padding: 0% 0%;
}
#cen {
width: 60%;
height: auto;
padding: 0% 25%;
}
#sidebar {
height: 69%;
width: 20%;
background-color: #FFE4C4;
background-repeat: repeat;
background-attachment: fixed;
background-position: top left;
float: right;
}
/*Подвал/нижняя картинка интернет магазина*/
#footer {
height: 13%;
width: 100%;
background-image: url('img/podval.png');
background-size: 100% 100%;
background-position: 70% 70%;
background-repeat: no-repeat;
clear: both;
}
/*Стиль блока описания*/
.div_opisan {
text-decoration: none;
font-size: 100%;
font-family: verdana, arial, serif;
font-style: normal;
font-weight: normal;
line-height: auto;
color: black;
width: 100%;
white-space: normal;
text-align: justify;
}
/*Стиль заголовка*/
.h1_opisan {
width: 100%;
text-align: center;
text-decoration: none;
font-size: 100%;
font-family: verdana, arial, serif;
font-style: italic;
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}
/*Стиль левого заголовка*/
.left_b h1 {
color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
0px -5px 35px rgba(255,255,255,0.3);
}
/*Стиль левого заголовка при наведении на него*/
.left_b h1:HOVER {
background-color: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}
#right_b {
padding-top: 0%;
padding-bottom: 5%;
width: 100%;
}
/*Стиль правого заголовка*/
#right_b h1 {
color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
0px -5px 35px rgba(255,255,255,0.3);
}
/*Стиль правого заголовка при наведении на него*/
#right_b h1:HOVER{
background-color: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}
/*Стиль таблицы*/
#zakaz td, #zakaz th, #zakaz input
{text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
white-space: nowrap;
text-decoration: none;
font-size: 100%;
font-family: ‘Verdana’, sans-serif;
font-style: normal;
line-height: 100%;
color: black;
}
/*Стиль шапки таблицы*/
#zakaz th
{
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
color: #000000;
}
/*Стиль таблицы*/
#zakaz td, zakaz th
{
width: 100%;
vertical-align: middle;
text-align: center;
border: black 1% solid;
background-color: #FFE4C0
}
/*Стиль формы заказа товара*/
#zakaz input
{
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
width: 100%;
height: 135%;
background-color: #FFE4C0;
padding: 3%;
color: black;
}
Реализация клиентской части на Java
Для создания приложения на Java понадобится уже знакомый вариант Eclipse для Java, который был использован в реализации серверной части. Чтобы использовать Eclipseдля Java,понадобится установленный JDK– пакет разработчика Java. На момент создания данного методического пособия официальный сайт находится по адресу: http://www.eclipse.org/ (оригинальная версия находится по этому адресу).
Установка Eclipse for JavaSEпроизводится стандартным способом.
Запустите новый проект: «File» - «New» - «Java Project» (см. рис. 1.12):
Рис 1.12
Введите имя проекта: «simp» и нажмите кнопку «Finish» (см. рис 1.13):
Рис 1.13
Выделите заголовок проекта, нажмите правую клавишу мыши для открытия меню, выберите: «File» - «New» - «Other…» (см. рис. 1.14):
Рис 1.14
Теперь нужно добавить форму для визуализации разработки.
В появившемся окне выберите: «WindowsBuilder» - «Swing Designer» - «JFrame» (см. рис. 1.15):
Рис 1.15
Нажмите кнопку «Next» и введите имя проекта prog (см. рис. 1.16):
Рис 1.16
Нажмите на кнопку «Finish» - появится интерфейс для визуальной разработки. На сайте представлены кондитерские изделия, всего их будет десять.
Перейдите в визуальный редактор и включите возможность произвольного размещения элементов формы. Для этого нажмите левой клавишей мыши на панель JPanel внутри окна, при этом панель должна выделится рамкой (см. рис. 1.17):
Рис 1.17
Далее в свойствах для Layout укажите значение: Absolute layout (см. рис. 1.18):
Рис 1.18
Измените заголовок окна на: Поступление товаров (см. рис. 1.19):
Рис 1.19
Для удобного отображения списка товаров и их количества воспользуемся элементом формы: JTable (таблица). Добавим таблицу на панель (см. рис.1.20):
Рис 1.20
Обратите внимание, что после добавления таблицы на панель –появится черный квадратик (см. рис. 1.21):
Рис 1.21
Этот квадрат нужно растянуть мышью, чтобы увеличить размеры таблицы (см. рис. 1.22):
Рис 1.22
Если нажать на элемент в общем списке, то он становится выбранным(текущим) элементом. Выберем таблицу.
Список свойств всегда отображается для выбранного элемента формы!
Найдем свойство model для таблицы и откроем его. При помощи этого свойства можно создать строки и колонки таблицы, а также записать значения в ячейки таблицы. При открытии свойства – появится новое окно.С помощью этого окна мы создадим строки и колонки таблицы. В нашей таблице будет четыре колонки и десять строк. с колонок: нажмем четыре раза кнопку Insert в разделе Columns.
Далее добавим строки: нажмем десять раз кнопку Insert в разделе Rows.
В итоге должна получиться таблица из четырех колонок и десяти строк.
Двойной щелчок левой клавишей мыши позволяет ввести текст в ячейку. В первую колонку необходимо ввести номера товаров от 1 до 10, а во вторую колонку наименование товара. Заполните таблицу наименованиями продукции.
При выборе ячейки в колонке –внизу отображаются ее свойства.
В поле:
· Title - указывается название колонки;
· галочка editable - включает/отключает возможность редактирования ячеек колонки пользователем;
· галочка resizable - включает/отключает возможность изменения ширины колонки пользователем.
Зададим названия колонок: №, Наименование товара, Остаток на складе, Количество поступления. Запретим пользователю редактирование первых трех колонок при помощи свойства editable, но оставим возможность редактирования четвертой колонки (Количество поступления). Запретим пользователю изменение размеров колонок при помощи свойства resizable; сделаем ширину колонок удобной для восприятия (см. рис. 1.23):
Рис 1.23
Примечание:ширину колонок можно менять настройкой Pref.Width.
Теперь в окне слева, там, где находится список элементов формы, выделим нашу таблицу и нажмем правую клавишу мыши для открытия контекстного меню, в котором выбираем команду Surround with, JScrollPane.
JScrollPane –это полосы прокрутки по горизонтали и вертикали. Эти полосы автоматически появляются, если содержимое элемента формы не помещается в его пределах. Теперь таблица получилась вложенной в полосы прокрутки.
После вложения таблицы в полосы прокрутки должны появиться наименования колонок (см. рис. 1.24):
Рис 1.24
Установим цвет текста ячеек таблицы на синий и поместим таблицу в угол формы, изменим ее размеры и размеры линий прокрутки так, чтобы таблица полностью помещалась без линий прокрутки.
Обратите внимание, что при нажатии левой кнопкой мыши на заголовок колонок - выделяется фрагмент с линиями прокрутки, а при нажатии внутрь таблицы – сама таблица! Выберем таблицу и в свойстве Variable укажем tableTovar (это имя переменной, через которое мы будем обращаться к таблице из программного кода).
Осталось добавить кнопку для завершения создания интерфейса. Выбираем JButton и добавляем элемент ниже, под таблицей. Укажем название кнопки - Выполнить, цвет текста - зеленый, размер шрифта - 17, имя переменной buttonOK и добавьте самостоятельно кнопку «Выход» (см. рис. 1.25):
Рис 1.25
Измените размеры формы (по вашему усмотрению) так, чтобы она смотрелась удобной. Окончательный вариант будет примерно следующим (см.рис. 1.26):
Рис 1.26
После придания стилей кнопок, дважды щелкните по кнопке выполнить, вы перейдёте в режим «Source» в кнопку выполнить поместите следующий код:
Рис 1.27
Далее пролистайте в самый верх кода и поместите следующий метод «makeGet()» как показано на рис 1.28:
Рис 1.28
Дополните кнопку «Выход» следующей строчкой (см.рис. 1.29):
Рис 1.29
Скомпилируйте данный код, в колонку «Количество поступления» введите в качестве примера значения 10, 5 и нажмите кнопку выполнить (см.рис. 1.30):
Рис 1.30
Перейдите в браузере по ссылке: http://localhost/simp/index.php, у вас должно было получиться как показано на рисунке 1.31 - :
Рис 1.31
Рис 1.32