Настоящий блог поставляется на условиях "как есть". Автор не принимает на себя никаких гарантийных обязательств и не несет ответственности за любые убытки читателя, полученные при применении знаний, почерпнутых из этого блога.
Страницы
Ярлыки
moodle
затачивание пилы
автоматизированная обучающая система
php
python
yii
байесовские сети
вспомнить-все
красивый код
модель обучаемого
git
linux
интеллектуальная обучающая система
проверка решений
.tex and HTML
Automatic Assessment In Math Education
CSS
Django
Front-end
HTML
ImageJ
PyDev
South
Sublime
Ubuntu
VirtualBox
ajax
haskell
jQuery
javascript
mathjax
maxima
ООП
вычислительная сложность алгоритмов
зарубежные конференции
интернет-технологии
логистическая регрессия
машинное обучение
методы классификации
пятница, 30 августа 2013 г.
вторник, 27 августа 2013 г.
Предобработка картинок в административной панели (фреймворк Yii).
Сразу же оговорюсь, что ниженаписанное тестировалось только для Yii версии 1.1.2, поскольку сайт я делаю в процессе изучения этой книги (на момент ее публикации эта версия была последней).
Задача: реализовать возможность в административной панели приложения при редактировании страницы новости загружать фотографии и позволить их обрезать под нужный размер перед сохранением на сервере. Вот что должно получиться:
Далее, в /protected/views/layouts/main.php напишем следующее:
Вот мы и подключили нужную версию jQuery и заодно imgAreaSelect. WideImage будем подключать "на лету" прямо в контроллере.
Также добавляем место, куда будем подгружать картинку для предпросмотра и переменные, где будем хранить сведения о координатах для обрезки картинки и о пути к загруженному файлу:
В самый верх файла добавляем скрипты. Они делают следующее.
После выбора пользователем файла, он отправляется на сервер, где файл сохраняется в папке tmp, обратно приходит ссылка на него. Далее в область предпросмотра подгружается картинка из присланной ссылки. Подключается к работе плагин imgAreaSelect. При изменении параметров обрезки картинки в скрытых данных формы сохраняются координаты обрезки. Эти скрытые данные будут также переданы при нажатии на кнопку "Отправить". Кстати, за возможность отправки файла без перезагрузки страницы стоит поблагодарить плагин jquery.form, у него есть полезнейший метод ajaxSubmit. Оказалось, что просто так без перезагрузки страницы файл на сервер не отправить (из соображений безопасности). Вот этот плагин и выручил.
А вот и сама функция preview:
Она такая большая, потому что выполняет кучу проверок - на формат файла, на размер, и т.д. Генерирует уникальное имя файла, зависящее от времени загрузки, ужимает до макс. 600 px по ширине и высоте, сохраняет файл в папку tmp и сообщает клиенту его адрес.
А вот функция создания новости (вызывается, когда на клиенте нажимается кнопка "Отправить"). Как видим, перед сохранением новости производится обрезка изображения по координатам, выбранным пользователем. Кстати, функция обновления новости видоизменяется аналогично.
Задача: реализовать возможность в административной панели приложения при редактировании страницы новости загружать фотографии и позволить их обрезать под нужный размер перед сохранением на сервере. Вот что должно получиться:
Решение.
1. Подключение необходимых библиотек
Нам помогут три библиотеки: imgAreaSelect, WideImage, jquery.form. Первая библиотека требует более нового jQuery, который поставляется с Yii, поэтому также пришлось отключать "старый" jQuery и подключать "новый". Для этого в /protected/config/main.php под 'components' напишем следующее:Далее, в /protected/views/layouts/main.php напишем следующее:
Вот мы и подключили нужную версию jQuery и заодно imgAreaSelect. WideImage будем подключать "на лету" прямо в контроллере.
2. Изменение модели
Объявляем переменные (photo - ссылка на файл-картинку, остальные переменные - координаты обрезания картинки). У меня модель находится в файле /protected/models/News.php):
В этом же файле изменяем функцию rules (в ней прописываются правила, которым должны удовлетворять данные, вносимые в форму):
3. Изменение формы
В форме редактирования страницы (у меня это файл /protected/views/news/_form.php) убираем текстовое поле Picture, где хранится путь к файлу и добавляем кнопку выбора файла:В самый верх файла добавляем скрипты. Они делают следующее.
После выбора пользователем файла, он отправляется на сервер, где файл сохраняется в папке tmp, обратно приходит ссылка на него. Далее в область предпросмотра подгружается картинка из присланной ссылки. Подключается к работе плагин imgAreaSelect. При изменении параметров обрезки картинки в скрытых данных формы сохраняются координаты обрезки. Эти скрытые данные будут также переданы при нажатии на кнопку "Отправить". Кстати, за возможность отправки файла без перезагрузки страницы стоит поблагодарить плагин jquery.form, у него есть полезнейший метод ajaxSubmit. Оказалось, что просто так без перезагрузки страницы файл на сервер не отправить (из соображений безопасности). Вот этот плагин и выручил.
4. Изменение контроллера
В контроллере (у меня это файл /protected/controllers/NewsController.php) изменяем функцию accessRules - для того, чтобы разрешить пользователям сайта запускать функцию preview (функция preview сохраняет выбранный файл в папку tmp и передает на клиент ссылку на него):А вот и сама функция preview:
Она такая большая, потому что выполняет кучу проверок - на формат файла, на размер, и т.д. Генерирует уникальное имя файла, зависящее от времени загрузки, ужимает до макс. 600 px по ширине и высоте, сохраняет файл в папку tmp и сообщает клиенту его адрес.
А вот функция создания новости (вызывается, когда на клиенте нажимается кнопка "Отправить"). Как видим, перед сохранением новости производится обрезка изображения по координатам, выбранным пользователем. Кстати, функция обновления новости видоизменяется аналогично.
четверг, 8 августа 2013 г.
Фреймворк Yii: продолжение
Продолжаю изучать Yii по этой книге. Удивило то, что надо "ручками" создавать таблицы БД, а затем автоматом генерировать ORM-модели (например в Django все наоборот, в models пишешь модели, а потом запускаешь syncdb и таблицы генерируются сами). Для создания таблиц скачала phpmyadmin, его можно очень просто поставить (распаковать в папку откуда запускаются веб-приложения, переименовать, переименовать пример файла настроек config.sample.inc.php просто в config.inc.php). Таблицы в нем тоже очень просто создаются, а вот с настройкой связей между ними сложнее. В книге , например, приводится вот такой код для настройки связей между двумя таблицами:
ALTER TABLE 'tbl_issue' ADD CONSTRAINT 'FK_issue_project' FOREIGN KEY
('project_id') REFERENCES 'tbl_project' ('id') ON DELETE CASCADE ON
UPDATE RESTRICT;
такой запрос никак не хотел выполняться из-за ошибок в синтаксисе. В итоге выполнился вот такой запрос (спасибо stackoverflow):
ALTER TABLE `tbl_issue`
ADD CONSTRAINT `FK_issue_project` FOREIGN KEY (`project_id`) REFERENCES `tbl_project` (`id`);
Ну а запрос INSERT INTO ... принял такой вид:
INSERT INTO `tbl_user`
(`email`, `username`, `password`)
VALUES
('test1@notanaddress.com','Test_User_One', MD5('test1')),
('test2@notanaddress.com','Test_User_Two', MD5('test2'));
Для набора этих кривых кавычек, оказывается, есть отдельная кнопка на клавиатуре :)
ALTER TABLE 'tbl_issue' ADD CONSTRAINT 'FK_issue_project' FOREIGN KEY
('project_id') REFERENCES 'tbl_project' ('id') ON DELETE CASCADE ON
UPDATE RESTRICT;
такой запрос никак не хотел выполняться из-за ошибок в синтаксисе. В итоге выполнился вот такой запрос (спасибо stackoverflow):
ALTER TABLE `tbl_issue`
ADD CONSTRAINT `FK_issue_project` FOREIGN KEY (`project_id`) REFERENCES `tbl_project` (`id`);
Ну а запрос INSERT INTO ... принял такой вид:
INSERT INTO `tbl_user`
(`email`, `username`, `password`)
VALUES
('test1@notanaddress.com','Test_User_One', MD5('test1')),
('test2@notanaddress.com','Test_User_Two', MD5('test2'));
Для набора этих кривых кавычек, оказывается, есть отдельная кнопка на клавиатуре :)
Подписаться на:
Сообщения (Atom)