Как мне сделать благотворительный целевой индикатор с использованием php

Question

Я пытаюсь создать приложение, похожее на JustGiving.com, которое позволяет людям, которые хотят собрать деньги на благотворительность, зарегистрироваться и создать страницу «кампании».На этой странице они обрисовывают в общих чертах то, что они предлагают сделать (например, пробежать марафон или побрить голову), установить денежную цель, а затем пригласить всех своих друзей спонсировать их по электронной почте, в Твиттере, Facebook и т. Д. *

Друзья приходят и делают пожертвования через PayPal, и цель приближается.

Я хочу сделать какой-нибудь индикатор, чтобы показать, насколько близка цель к кампании.Я не прошу помощи с графикой здесь, но я имел в виду некое подобие термометра, которое вы могли бы увидеть на вашем местном церковном сборе средств http://www.google.co.uk/search?q=target+thermometer&hl=en&prmd=ivns&tbm=isch&tbo=u&source=univ&sa=X&ei=-RfdTYrcEs-2hAeW65y3Dw&ved=0CDcQsAQ&biw=1280&bih=685

Я строю этот сайт, чтобы выучить cakephpи я должен признать, что мои знания php тоже не такие уж блестящие, поэтому я тоже учусь этому.Я удивлен, как далеко я продвинулся.

Во всяком случае, я понятия не имею, как мне поступить, и подумал, не даст ли какая-нибудь добрая душа мне немного карты маршрута.Если это маршрут CakePHP, это здорово, но если это просто обычный PHP, это тоже круто!

Answer 1

Вот как я это сделал для tescoforschoolsandclubs.co.uk

У вас есть два изображения.У одного есть полный термометр, у другого - пустой термометр.

Используйте пустой в качестве фона для div, а также располагайте абсолютно точно положение и изображение с полным дном термоментера, прямо над пустым.

Затем вы можете установить высоту полного изображения для отображения%

например,

<div id='thermometer'>
<img src='full'>
</div>

#thermometer {
  width: 100px;
  height: 200px;
  position: relative;
  background: url(empty.jpg) no-repeat top left;
}
#thermometer img{
  position: absolute;
  bottom: 0;
  left: 0;
}

, а затем:

#thermometer img{
  height: 0; /* completely empty */
}
#thermometer img {
  height: 100px; /* 50% */
}
#thermometer img {
  height: 200px; /* 100% */
}

Вы можете рассчитатьвысота «полного» изображения на основе

height = (height of image / 100) * percentage

Answer 2

Не знаком с Cake конкретно, но вот как я бы это сделал:

• 2 изображения - термометр с прозрачным индикатором, за ним сплошной красный блок.
• Рассчитайте тепло в вашем контроллере и передайте его на ваш взгляд
• Стиль красного блока с использованием встроенного CSS

вроде так:

  <img src="red.gif" style="height: <?php echo $bar_height ?> ">

Answer 3

Вы также можете рассчитать процент и использовать jQuery UI Progress Bar . Это не было бы вертикально (я не думаю), и у этого не было бы выпуклого наконечника как термометр, но это упростило бы вещи и , Вы могли бы динамически изменить это после пожертвования, или через AJAX, когда приходят другие пожертвования.

Answer 4

Я бы сделал это с помощью JavaScript и / или CSS на стороне клиента, и все, что нужно было бы сделать php - это предоставить текущую сумму и цель. Затем пусть JavaScript вычислит, насколько «горячо» отображать термометр и как его нарисовать.