- •Занятие 1. "Быстрый старт: организация рабочего места веб-разработчика. Создание и запуск первого проекта"
- •Установка и настройка пакета Denwer
- •Установка среды разработки Eclipse для php
- •Создание и запуск веб-проекта php
- •Добавление php кода к веб-проекту
- •Занятие 2. "Технология верстки веб-страницы: изучениеHtml"
- •Предназначение html иCss
- •Вспомним основные тегиHtml
- •Правила записиHtml-кода
- •Занятие 3. "Технология верстки веб-страницы: изучениеCss"
- •Несколько слов оCss
- •Основы css
- •Посмотрим на результат в браузере (см. Рис. 3.5)
- •Селекторы css
- •Селектор по идентификатору:
- •Селектор по классу:
- •Основной способ подключения css
- •Основные csSстили
- •Из списка стандартных цветов.
- •При помощи указания компонентов цвета: rgb, в этом случае перед компонентами цвета ставится символ "#" – решетка.
- •Проект "Винни-Пух и компания"
- •Технология создания крупного проекта
- •Реализация клиентской части на Java
- •Title - указывается название колонки;
- •Галочка editable - включает/отключает возможность редактирования ячеек колонки пользователем;
- •Галочка resizable - включает/отключает возможность изменения ширины колонки пользователем (см. Рис. Тот же).
- •Обмен данными с сайтом
- •Занятие 5. "Начало создания серверной части проекта"Винни-Пух и компания"
- •Создание серверной части проекта на php
- •Кодировка проектаUtf-8
- •Обработка get-запроса вPhp
- •Работа с MySql изPhp
- •Занятие 6. "Завершение создания php-скрипта для приема данных от клиентской части на Java"
- •ФормированиеSql-запросов из php
- •Занятие 7. "Верстка основного каркаса сайта интернет-магазина"
- •Методики верстки
- •При большой вложенности таблиц друг в друга снижается скорость загрузки страницы браузером.
- •Индексация страницы поисковой системой происходит сложнее, что влияет на оптимизацию сайта для поисковых систем(сайт хуже находится).
- •При открытии страницы в старых браузерах страница может отображаться не корректно –старый браузер не поддерживает современные css- свойства.
- •Типы верстки
- •Верстка основного каркаса сайта
- •Изучение верстки других сайтов
- •Занятие 8. "Создание главного меню и раздела описания товаров"
- •Создание таблицы описания товаров
- •Формирование верхнего горизонтального меню
- •Создание белой прямоугольной области
- •Получение описания товаров из базы данных и вывод на веб-страницу
- •Занятие 9 "Создание левой и правой боковой части страницы"
- •Создание таблицы дляHtml-разметки
- •Программирование пунктов меню
- •Получение html-разметки из базы данных
- •Создание левой боковой части страницы
- •Использование Flash на веб-странице
- •Создание правой боковой части страницы
- •Занятие 10. "ПодключениеJavaScript. Создание разделов сайта: Главная и Контакты"
- •Реализация раздела сайта: Главная
- •Реализация раздела сайта: Контакты
- •Немного оJavaScript
- •Создание эффекта подмены изображения
- •Создание эффекта появления изображения
- •Занятие 11. "Создание раздела сайта: Заказать"
- •Создание верхней части раздела
- •Отправка и получение данных с веб-страницы
- •Использование файлов для хранения данных
- •Открытие файла для записи/чтения;
- •Запись/Чтение;
- •Закрытие файла.
- •Создание функции для получения и сохранения данных
- •Создание таблицы и формы отправки данных
- •Создание тегов для верхней части таблицы с заголовком.
- •Создание функции формирования десяти строк таблицы с остатками.
- •В заключение внешний вид подкорректируем при помощи css.
- •Занятие 12. "Отладка проекта"
- •Кросс-браузерная отладка
- •Посмотреть сайт на различных разрешениях экрана. Для этого необходимо изменять текущее разрешение экрана.
- •/*Вертикальное выравнивание по верхней части*/
- •Создание дополнительных настроек в тегахHead
- •Перенос сайта на веб-сервер
- •Выгрузка базы данных с исходного компьютера.
- •Загрузка базы данных на веб-сервер.
- •Проверка взаимодействия с клиентской частью наJava
- •Заключение
- •Постановка задачи(логическое описание проекта):
- •Техническое описание проекта:
Title - указывается название колонки;
Галочка editable - включает/отключает возможность редактирования ячеек колонки пользователем;
Галочка resizable - включает/отключает возможность изменения ширины колонки пользователем (см. Рис. Тот же).
Зададим названия колонок: №, Наименование товара, Остаток на складе, Количество поступления. Запретим пользователю редактирование первых трех колонок при помощи свойства editable, но оставим возможность редактирования четвертой колонки (Количество поступления). Запретим пользователю изменение размеров колонок при помощи свойства resizable; сделаем ширину колонок удобной для восприятия. Должно получится примерно следующее (см. рис. 4.16):
Рис. 4.16
Примечание: ширину колонок можно менять настройкой Pref.Width (см. рис.4.17):
Рис. 4.17
После выполнения всех настроек –нажимаем кнопку OK.
Теперь в окне слева, там,где находится список элементов формы,выделим нашу таблицу и нажмем правую клавишу мыши для открытия контекстного меню, в котором выбираем команду Surround with, JscrollPane.
JScrollPane –это полосы прокрутки по горизонтали и вертикали. Эти полосы автоматически появляются, если содержимое элемента формы не помещается в его пределах. Теперь таблица получилась вложенной в полосы прокрутки (см. рис. 4.18):
Рис. 4.18
После вложения таблицы в полосы прокрутки должны появиться наименования колонок (см.рис. 4.19):
Рис. 4.19
Щелкнем левой клавшей мыши внутрь таблицы и перейдем в свойствоforeground (см. рис. 4.20):
Рис. 4.20
Изменим цвет текста ячеек таблицы на синий и поместим таблицу в угол формы, изменим ее размеры и размеры линий прокрутки так, чтобы таблица полностью помещалась без линий прокрутки.
Обратите внимание, что при нажатии левой кнопкой мыши на заголовок колонок - выделяется фрагмент с линиями прокрутки, а при нажатии внутрь таблицы – сама таблица! Выберем таблицу и в свойствеVariableукажемtableTovar (это имя переменной, через которое мы будем обращаться к таблице из программного кода).
Осталось добавить кнопку для завершения создания интерфейса.Выбираем JButton и добавляем элемент ниже, под таблицей.Укажем название кнопки - Выполнить, цвет текста- зеленый,размер шрифта - 17, имя переменной buttonOK (см. рис. 4.21):
Рис. 4.21
Изменим размеры формы(по вашему усмотрению) так, чтобы она смотрелась удобной. Окончательный вариант будет примерно следующим (см.рис. 4.22):
Рис. 4.22
Чтобы пользователь не мог изменять размеры окна, нажмем на заголовок окна и перейдем в свойства формы,снимем галочку resizable.
На этом проектирование интерфейса приложения - закончено.Запустим приложение и проверим, что получилось.
Проверьте: пользователь должен иметь возможность вводить значения в колонку "Количество поступления", но не иметь возможности редактировать первые три колонки!
В колонку"Количество поступления" будут вводиться данные о количестве поступающего товара. При нажатии на кнопку"Выполнить",данные будут передаваться на сайт. В колонку "Остаток на складе"будут выводиться данные об остатках товара, полученные с сайта.
Учет количества будет вестись в килограммах. В таблицу можно будет вводить только целое число. Но при этом, в последнюю колонку пока можно ввести даже буквы. Исправим это обстоятельство!Выделим таблицу и перейдем в ее свойствоmodel. Выберем четвертую колонку и в свойстве Type установим значение–Integer.
Данная настройка указывает, что в четвертой колонке будут целые числа. При попытке ввода в эту колонку другого типа –ячейка выделяется красной рамкой, и ввод значения блокируется!
Важно!!!При создании интерфейса пользователя важно создать его максимально защищенным от ошибочных действий. Такой интерфейс повышает надежность вашего приложения!
