Создание сайтов Скачать
презентацию
<<  1С-Битрикс Создание сайтов  >>
"Аяксификация" корзины:
"Аяксификация" корзины:
Шаг Г1: перемещение корзины
Шаг Г1: перемещение корзины
Фрагмент сохраняем в файле _cart_item
Фрагмент сохраняем в файле _cart_item
При вызове фрагмента мы можем использовать метод render
При вызове фрагмента мы можем использовать метод render
2) внесём изменения в макет store и включим в его боковую панель новый
2) внесём изменения в макет store и включим в его боковую панель новый
<a href="http://www
<a href="http://www
3) внесём изменения в контроллер магазина store (в действии
3) внесём изменения в контроллер магазина store (в действии
Изменим работу кнопки «Добавить в корзину» - вместо отображения
Изменим работу кнопки «Добавить в корзину» - вместо отображения
Шаг Г2: корзина, использующая технологию AJAX
Шаг Г2: корзина, использующая технологию AJAX
Нужно приспособить браузер к отправке AJAX-запроса нашему приложению
Нужно приспособить браузер к отправке AJAX-запроса нашему приложению
Когда метод add_to_cart завершит обработку AJAX-запроса, Rails для
Когда метод add_to_cart завершит обработку AJAX-запроса, Rails для
Возможные проблемы
Возможные проблемы
Вопросы
Вопросы
Картинки из презентации «Корзина» к уроку информатики на тему «Создание сайтов»

Автор: . Чтобы познакомиться с картинкой полного размера, нажмите на её эскиз. Чтобы можно было использовать все картинки для урока информатики, скачайте бесплатно презентацию «Корзина.ppt» со всеми картинками в zip-архиве размером 34 КБ.

Скачать презентацию

Корзина

содержание презентации «Корзина.ppt»
Сл Текст Сл Текст
1"Аяксификация" корзины: Поместим информацию о 8отображения страницы корзины ей нужно будет обновить главную
корзине на боковую панель каталога применим ajax-технологию для страницу каталога. В конце действия add_to_cart браузер
обновления корзины на боковой панели без повторного отображения перенаправляется обратно на каталог.
всей страницы. app/controllers/store_controller.rb def add_to_cart begin
2Шаг Г1: перемещение корзины. При помощи шаблонных фрагментов product = Product.find(params[:id]) rescue
перенесём обслуживание корзины в макет, отображающий общий ActiveRecord::RecordNotFound logger.error("Attempt to
каталог. Фрагмент – часть представления, размещённая в access invalid product #{params[:id]}")
собственном файле. Перепишем представление корзины: redirect_to_index("Invalid product") else @cart =
app/views/store/add_to_cart.rhtml <div find_cart @cart.add_product(product) redirect_to_index end end
class="cart-title">Your Cart</div> Чтобы этот код работал, нужно изменить определение метода
<table> <%= render(:partial => redirect_to_index и сделать параметр сообщения необязательным.
"cart_item", :collection => @cart.items) %> app/controllers/store_controller.rb def redirect_to_index(msg =
<tr class="total-line"> <td nil) flash[:notice] = msg if msg redirect_to :action =>
colspan="2">Total</td> <td :index end Шаблон add_to_cart.rhtml можно удалить.
class="total-cell"><%= 9Шаг Г2: корзина, использующая технологию AJAX. Сначала
number_to_currency(@cart.total_price) %></td> изменим страницу каталога, заставив её посылать AJAX-запрос на
</tr> </table> <%= button_to "Empty серверное приложение и заставив приложение ответить
cart", :action => :empty_cart %> HTML-фрагментом, содержащим обновлённую корзину. Заменим метод
3Фрагмент сохраняем в файле _cart_item.rhtml каталога button_to на следующий код: app/views/store/index.rhtml <%
app/views/store app/views/store/_cart_item.rhtml <tr> form_remote_tag :url => { :action => :add_to_cart, :id
<td><%= cart_item.quantity %>&times;</td> => product } do %> <%= submit_tag "Add to
<td><%= h(cart_item.title) %></td> <td Cart" %> <% end %> С помощью параметра url мы
class="item-price"><%= сообщаем form_remote_tag способ вызова серверного приложения.
number_to_currency(cart_item.price) %></td> </tr> Код между do и end – тело формы.
Т.о. мы убрали отображение корзины. 10Нужно приспособить браузер к отправке AJAX-запроса нашему
4При вызове фрагмента мы можем использовать метод render. приложению. app/views/layout/store.rhtml <html>
Параметр :object захватывает объект, который присвоен локальной <head> <title>Pragprog Books Online
переменной с тем же именем, что и у фрагмента. Поэтому в макете Store</title> <%= stylesheet_link_tag
можем воспользоваться вызовом <% render(:partial => “cart” "depot", :media => "all" %> <%=
, :object => @cart) %> и в шаблоне _cart.rhtml можем javascript_include_tag :defaults %> </head> Приложение
сослаться на на корзину с помощью переменной cart. Для этого: также должно возвращать ответ. Действием add_to_cart прекращаем
создадим шаблон _cart.rhtml app/views/store/_cart.rhtml <div перенаправление на отображение каталога
class="cart-title">Your Cart</div> app/controllers/store_controller.rb def add_to_cart begin
<table> <%= render(:partial => product = Product.find(params[:id]) rescue
"cart_item", :collection => cart.items) %> ActiveRecord::RecordNotFound logger.error("Attempt to
<tr class="total-line"> <td access invalid product #{params[:id]}")
colspan="2">Total</td> <td redirect_to_index("Invalid product") else @cart =
class="total-cell"><%= find_cart @cart.add_product(product) end end.
number_to_currency(cart.total_price) %></td> 11Когда метод add_to_cart завершит обработку AJAX-запроса,
</tr> </table> <%= button_to "Empty Rails для отображения страницы станет искать шаблон add_to_cart,
cart", :action => :empty_cart %> а мы его удалили. Создадим шаблон rjs-шаблон (.rjs шаблоны –
52) внесём изменения в макет store и включим в его боковую способ передачи браузеру кода JavaScript, который целиком
панель новый фрагмент app/views/layouts/store.Rhtml <!DOCTYPE выполняется созданием кода на стороне сервера).
html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN" app/views/store/add_to_cart.rjs
"http://www.W3.Org/TR/xhtml1/DTD/xhtml1-transitional.Dtd&qu page.replace_html("cart", :partial =>
t;> <html> <head> <title>pragprog books "cart", :object => @cart) Переменная page –
online store</title> <%= stylesheet_link_tag экземпляр JavaScript-генератора (Rails-класса, который создаёт
"depot", :media => "all" %> код JavaScript на сервере. Чтобы он выполнялся браузером). Этот
</head> <body id="store"> <div шаблон представляет HTML-код для отображения корзины и
id="banner"> <%= image_tag("logo.Png") предписывает браузеру заменить содержимое контейнера <div>
%> <%= @page_title || "pragmatic bookshelf" с параметром id=”cart” этим HTML-кодом. Т.о. мы создали
%> </div> <div id="columns"> <div AJAX-приложение.
id="side"> <div id="cart"> <%= 12Возможные проблемы. - Вы удалили старый файл
render(:partial => "cart", :object => @cart) add_to_cart.rhtml? - Вы не забыли включить библиотеки JavaScript
%> </div> в макет store (используя javascript_include_tag)? - Пора сделать
6<a полную перезагрузку страницы? - Вы получали какие-нибудь
href="http://www....">Home</a><br /> сообщения об ошибках? Посмотрите файл development в каталоге
<a logs - Если в регистрационном файле нет входящих запросов на
href="http://www..../faq">Questions</a><br выполнение действия add_to_cart, то браузер не создаёт
/> <a AJAX-запросов. У браузера может быть отключено выполнение
href="http://www..../news">News</a><br JavaScript (посмотреть сгенерированный HTML-код) - Остановить и
/> <a снова запустить приложение - Поместить в макет заголовок
href="http://www..../contact">Contact</a>< <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
r /> </div> <div id="main"> <% if Transitional//EN"
flash[:notice] -%> <div id="notice"><%= "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&qu
flash[:notice] %></div> <% end -%> <%= yield t;>, чтобы переключить IE в стандартный режим, который лучше
:layout %> </div> </div> </body> работает с AJAX-содержимым.
</html> 13Вопросы. Что такое шаблонный фрагмент? Как работает метод
73) внесём изменения в контроллер магазина store (в действии render? Каким образом мы ссылаемся на текущий элемент корзины в
контроллера index нужно определить @cart) коде шаблонного фрагмента? Какие возможности предоставляет
app/controllers/store_controller.Rb def index @products = технология AJAX? Как приспособить браузер к отправке
product.Find_products_for_sale @cart = find_cart end. AJAX-запроса в адрес нашего приложения? Для чего нужны шаблоны
8Изменим работу кнопки «Добавить в корзину» - вместо .rjs? Что позволяет делать метод replace_html?
«Корзина» | Корзина.ppt
http://900igr.net/kartinki/informatika/Korzina/Korzina.html
cсылка на страницу

Создание сайтов

другие презентации о создании сайтов

«Массивы в Паскале» - Одномерные массивы. Нижняя граница отделяется от верхней двумя точками; 4) Тип элементов массива. Массивы. Заполнение с клавиатуры. Заполнение массива. Для получения доступа к элементу массива используется индекс. Массив в Паскале имеет фиксированное количество элементов. Нижняя граница не может превосходить верхнюю.

«История развития языков программирования» - 22. 11. 25. Язык БНФ (пример метаформул). При процедурном подходе операторы объединяются в группы - процедуры. Языки программирования высокого уровня. 16.

«Прикладная среда» - Для создания такого рода документов требуются соответствующие приложения. Учительница биологии задала составить классификацию увиденных растений. Люди научились формировать искусственные. В памяти компьютера нужно сохранить информацию о проведенной лабораторной работе по физике. Например, проверка орфографии.

«Язык HTML» - История развития html. Общие сведения о html. На самом деле одной строкой дело не обходится. Общие сведение о HTML. операционной системы, установленной на нем. Тело документа – святая святых. Все было приведено к логической и структурной разметке текста. Язык HTML состоит из элементов, называемых тегами.

«Грамматика языков» - 5. 2. 4. КС-грамматики широко используются при описании синтаксических конструкций языков программирования. 1. Классификация языков.

«Требования к условиям реализации ООП» - Требования к условиям реализации ООП. Вуз должен обеспечить каждому студенту возможность работать с сетью Интернет. Занятия лекционного типа не могут составлять более (40) 45% аудиторных занятий. Требования к ООП. Материальное обеспечение учебного процесса. Требования к организации практик. Текущий контроль успеваемости.

Урок

Информатика

126 тем
Картинки
Презентация: Корзина | Тема: Создание сайтов | Урок: Информатика | Вид: Картинки