blog.gerr

Кодерский блог Кирилла Герасименко

О себе: php (по совместительству - javascript) кодер с 24-х летним жизненным опытом. В прошлом - писал на Delphi. Кой-чего еще помню.

На этом блоге найдут своё пристанище мои заметки, ранее ютившиеся в разбросанных по всему диску readme файлах + несколько моих работ которые, возможно, станут полезны кому-то еще.

Ах да, спешу разочаровать относительно навигации. Она пока никуда не ведёт. Блог на ранней альфа-стадии. Как только я приведу всё в порядок, этот абзац чудесным образом исчезнет, обещаю.

Синхронизация структуры баз данных

У меня есть проблема. Люблю порядок. Даже не то чтобы люблю... он мне критически необходим. Причем именно в работе, дома-то у меня бардак тот-еще. Так вот о порядке. Работа нескольких программистов над одним и тем же проектом (кодом, данными), или пускай даже одного программиста (что вряд ли) на нескольких копиях проекта (тестовый сервер и живой) уже ведет к образованию неслабого беспорядка, для устранения которого необходимы определенные усилия. Ну скажем когда имеем дело с кодом, на помощь приходят системы контроля версий - CVS, SVN. Тут всё понятно - отредактировал код, протестировал, закоммитил. А теперь допустим вносимые изменения затрагивают... о ужас!... структуру базы. Ну и каков шанс того, что внеся изменения к примеру в 20 файлов проекта вы не забудете о том, что "ах да, я добавил поле 'email' в таблицу пользователей и увеличил длину поля 'login' до 255 символов"? А если изменения структуры базы данных затронули 10 таблиц? 20 полей? Что же теперь, записывать на листочке все запросы, которые вы выполняли к БД для изменения структуры? Или открыть обе базы в phpMyAdmin, сверять всё визуально и вручную добавлять/изменять каждое поле?

А теперь по поводу контроля беспорядков. Я придерживаюсь мнения, что наводиться порядок должен нанавязчиво, безболезненно для креативного процесса творческой личности (ну вот к примеру - творит художник в своей мастерской двое суток к ряду без сна и отдыха, жрет сушеные хотдоги перед холстом и прочим образом мусорит.. а вокруг него - чистота и беспорядок исключительно творческий. И не чудо это вовсе, а баба Дуся, уборщица, величайшей души человек, которая вместо того чтобы орать "выйти всем из помещения! уборка!" - нет-нет да и заглянет в мастерскую - глядит - то ли спит художничек, толи просто сквозь толщу мыслей потолок созерцает. Вот тут-то она раз - пыль со шкафа смахнула, два - крошки с пола подмела, окно протёрла, три - плату за уборку с тумбочку взяла и растворилась осторожно закрыв за собой дверь).

А теперь снова к делу. Так ка же нам поступить со структурой базы? Ситуация как правило такова - имеем 2 базы данных, у одной более актуальная структура, у дрогой - менее. PhpMyAdmin всегда готов нам эту самую структуру продемонстрировать, ну уж не как не сравнить у двух баз... а жаль. Вот тут то и приходит на помощь код, который берет на себя всю рутинную работу по сравнению структуры и даже генерации кода для ее обновления. Я реализовал утилиту, которая выполняет работу по генерации SQL, необходимого для синхронизации структуры баз данных по дампам структуры этих самих баз, взятых, к примеру, из того же phpMyAdmin-а.

Утилита написана на php и ее код доступен на phpclasses.org. Краткая документация к ней на английском лежит здесь. Обсудить можно на форуме.

Столбиковая диаграмма на javascript

Не так давно довелось наваять небольшой яваскрипт для вывода столбиковой диаграммы. Задача была простая - отобразить динамику количества новостей, получаемых по заданной тематике с набора информационных сайтов. Вот собственно что получилось:

Дабы прояснить ситуацию, скажу что:

Скрипт умеет:

Использовать картинку в качестве фона столбцов
Умещаться в заданную высоту
Размещать числовые значения над столбиками "шахматкой", т.е. таким образом, чтобы стоящие на одной высоте цифры не сливались
Отображать название величин, выводимых по горизонтальной и по вертикальной оси

Скрипт не умеет:

Ну как минимум рисовать среднее значение за период. Либо какой-либо другой линейный или нелинейный уровень. А иногда так хочется..
Выводить на диаграмму несколько рядов данных. Мне не понадобилось, но мало ли..

Ну если вас всё устраивает, то вот собственно сам код: function drawBars(keys, values, height, x_title, y_title, title) { /* Todo: add some space between bars by making spacer wider, include spacer with the bar (and date) into div with border to romeve vertical lines extended over the bars. */ var arMax = 0; for (var j=0; j<values.length; j++) { arMax = Math.max(values[j], arMax); } var scale = height/arMax; var s = '<table cellpadding="0" cellspacing="0" width="30" border="0" style="background-color:#F5F5F5;padding:10px">'; if (title) { s += '<caption>'+title+'</caption>'; } s += '<tbody><tr>'; s += '<td valign="bottom" style="padding:0px 0px 0px 4px;border-right:1px solid #777;"><small>'+y_title+'</small> <div style="border-top:1px solid #777;"><small>'+x_title+' <br><br><br></small></div></td>'; var prevH, h, space, prevSpace; prevH = 0; prevSpace = 0; var borderStyle='style="border-right:1px solid #777;"'; for (var i=0; i<keys.length; i++) { space = 0; h = Math.max(values[i]*scale, 1); while (Math.abs(h+space-prevH-prevSpace)<7) { space +=8; } //if (i==keys.length-1) borderStyle = ''; s += '<td valign="bottom" align="center" width="20" style="padding:0px"><small>'+values[i]+'</small><img src="../images/spacer.gif" height="'+space+'" width="20"><div style="border-top:1px solid #777;border-left:1px solid #777;border-right:1px solid #777;width:16px"><img src="../images/bar.png" alt="" height="'+h+'" width="16"></div><small><div style="border-right:1px solid #777;border-top:1px solid #777;">'+mysqlDateReformat(keys[i])+'</div></small></td>'; prevH = h; prevSpace = space; } //s += '</tr><tr><td> </td><td align="center" colspan="'+(keys.length)+'">'+x_title+'</td></tr></tbody></table>'; s += '</tr></tbody></table>'; document.write(s); }

В моем примере код был использован следующим образом: drawBars(traceKeys, traceVals, 150, 'dates', 'newsitems'); Здесь traceKeys и traceVals массивы ключей и значений соответсвенно, 150 - высота диаграмы в пикселях, 'dates', 'newsitems' - названия осей.

Яваскрипт слайдшоу с fade-эффектом


//change the opacity for different browsers
function changeOpac(opacity, id) {
	var object = document.getElementById(id).style;

	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
}

function slideshow(divId, slideTimeMs, showTimeMs, curImage)
{
	slideTimeMs = parseInt(slideTimeMs);
	if (isNaN(slideTimeMs))
	{
		slideTimeMs = 500;
	}
	showTimeMs = parseInt(showTimeMs);
	if (isNaN(showTimeMs))
	{
		showTimeMs = 1000;
	}
	var imageDiv = document.getElementById(divId);
	if (!imageDiv) return false;

	if (curImage == undefined)//called for the first time
	{
		slideshowImages = new Array();
		var img;
		var images = imageDiv.getElementsByTagName('img');
		for (var i=0; i<images.length; i++)
		{
			img = images[i];
			img.style.position = 'absolute';
			if (!img.id) img.id = divId+'_slideshowimage_'+i;
			slideshowImages[slideshowImages.length] = img;
			if (i>0)
			{
				changeOpac(0, img.id);
			}
		}
		curImage = 0;
	}

	if(slideshowImages.length == 0)
	{
		return false;
	}

	if (curImage>1)
	{
		changeOpac(0, slideshowImages[curImage-1].id);
	}
	if (curImage>=slideshowImages.length)
	{
		curImage = 0;
	}
	var nextImage = ((curImage+1)<slideshowImages.length)?(curImage+1):0;

	var speed = Math.round(slideTimeMs / 100);
	var timer = 0;

	if (nextImage == 0)
	{
		var image = slideshowImages[curImage];
		for(var i = 0; i <= 100; i++)
		{
			setTimeout("changeOpac(" + (100-i) + ",'" + image.id + "')",(timer * speed));
			timer++;
		}
	}
	else
	{
		var image = slideshowImages[nextImage];
		for(var i = 0; i <= 100; i++)
		{
			setTimeout("changeOpac(" + i + ",'" + image.id + "')",(timer * speed));
			timer++;
		}
	}
	setTimeout("slideshow('" +divId+ "', "+slideTimeMs+", "+showTimeMs+", "+nextImage+")", timer * speed+showTimeMs);
}

И пример использования:


		<div id="fader">
    <a href="../en/dyn_output.html?content.void=6579" title="Find out more about products, applications and suppliers">
    <img src="/img1.jpg" alt="" title="" width="196" height="123" />
    <img src="/img2.jpg" alt="" title="" width="196" height="123" />
    <img src="/img3.jpg" alt="" title="" width="196" height="123" />
    <img src="/img4.jpg" alt="" title="" width="196" height="123" />
    <img src="/img5.jpg" alt="" title="" width="196" height="123" />
    </a>
</div>
<script type="text/javascript">slideshow('fader', '2000', '3500');</script>

Ну, и как пишут в кулинарных книгах, на выходе имеем: