Archiv rubriky: ajax

Fotoalbum v NETTE (flickr style)

Již delší dobu plánuji, že přepíšu dávno nevyhovující fotoalbum oddílu BVÚ.

Nevýhody současného alba:
Viditelné:

  • malé náhledy (generuje je aplikace)
  • v případě aktualizace fotek, není dostupné
  • závislost na datumu souboru (pokud se nepovedlo nahrání, bylo tam nesmyslné datum)

Neviditelné:

  • složité nahrávání fotek (přes již prastarou aplikaci Olympus Camedia Photoalbum)
  • proprietální databáze Olympus Camedia Photoalbum postavená na MS ACCESS 1997, bez rozumné možnosti rozšíření
  • nesnadná správa stránek v prostředí MS – ASP (VB SCRIPT)
  • závislost na datumu souboru – musel se dodržovat speciální postup jinak se o datum přišlo, případně se musel synchronizovat s EXIF informacemi

Co čekám od nového alba:
Vyditelné:

  • rozumné rozhraní odpovídající době
  • možnost větší interakce se stránkami – TOPování fotek, komentáře, TAGy, …
  • větší propojení stránek oddílu (www, stream, fotoalbum)

Neviditelné:

  • sjednocení platforem webů
  • moderní programátorské prostředí (NETTE, jQuery)
  • lepší správa, menší závislost na proprietálním prostředí

Požadavky na nové fotoalbum:
Vyditelné:

  • rychlost
  • přístupnost
  • maximální orientace na prohlížení fotek – je to fotoalbum že!

Neviditelné:

  • minimální závislost na databázi
  • maximální jednoduchost nahrávání fotek

Pro představu uvedu postupy nahrávání fotek:
Postaru:

  • stáhnout fotky v něčem co nemění datumy souborů
  • protřídit
  • zmenšit v něčem co nemění datumy souborů
  • zabalit do ZIP archívu – aby při nahrávání na FTP se nezměnily datumy souborů
  • nahrát archiv na FTP
  • přes vzdálenou plochu na serveru v aplikaci Olympus Camedia Photoalbum vytvořit složku – od otevření aplikace je fotoalbum na webu nedostupné, jelikož si aplikace drží výhradní přístup
  • najít na disku vytvořenou složku (stromová struktura má formát: /ALBUM/001/001/038/019/)
  • nakopírovat fotky z archivu
  • otevřít vytvořené album ve Olympus Camedia Photoalbum – dojde k pomalému vytvoření náhledu a indexaci fotek
  • dříve se ještě v rámci speciální aplikace řešily publikované fotky, to již před časem odpadlo…
  • velké originály popsat a zazálohovat
  • Nově:

    • stáhnout fotky
    • protřídit
    • nahrát na FTP do pojmenované složky (tady ještě uvažuji o použití SAMBA protokolu a ukládání fotek na Windows share, který je pro běžné uživatele dostupnější)

    Úspora kroků je zřejmá!

    Na co se můžete těšit v dalších kapitolách?

    • zpracování fotek – od nahrání až po prezentaci
    • prezentace fotek na celou obrazovku prohlížeče – kdo zná flickr ví o čem píšu

    Zamezní propagace submitu odeslání vnořeného formuláře

    Pokud potřebujeme vyvolávat submit událost vnořeného formuláře a zároveň omezit odeslání vnějšího, tak musíme použít následující postup.
    Pro názornost máme následující příklad:

    <form id="frm">
    	<!-- nějaké formulářové pole -->
    	<!-- kus HTML -->
    	<!-- následuje INPUT, který se odesílá pomocí AJAXu, jak na click, tak na klávesu enter -->
    	<input name="zprava" id="zprava" type="text" />
    	<input type="button" id="sb_submit" value="Odeslat" />
    	<!-- kus HTML -->
    </form>

    A pomocí následujícího JavaScriptu docílíme kýžené funkcionality.

    $(function() {
    	var enter = false;		// pomocná proměnná
    	$('#frm').submit(function(e) {
    		if (enter) {		// pokud byl stisknut enter v poli, které nesouvisí s hlavním formulářem (viz nastavení níže) ...
           			enter = false;	// ... proměnou vynulujeme pro další použití ...
           			return false;	// ... tak odeslání vnějšího formuláře neprovádíme
    		}
    	});
     
    	// odeslání na stisk klávesy enter
    	$('#zprava').keydown(function(e) {
    		if (e.keyCode == 13) {	// došlo ke zmáčknutí klávesy enter
    			enter = true;	// nastavíme pomocnou proměnou na TRUE
    			send();		// odešleme data
    		}
    	});
     
    	// odeslání na událost onClick
    	$('#sb_submit').click(function(e) {
    		send();
    	});
    });

    Automatické dotahování údajů o podnikatelích z databáze ARES

    Někde na internetu jsem viděl jak po zadání IČ se zbytek údajů o živnostníkovi/firmě dotáhl sám. A jelikož jsem si chtěl o tuto možnost rozšířit i své personální účetnictví, tak jsem pátral jak na to.

    O databázi ARES jsem se dozvěděl již dříve, ale nikdy jsem se nedostal k samotné implementaci. Až dneska jsem narazil na článek Radka Hulána, řešící přesně toto a tak jsem si řekl, že se na to podívám.

    Zdroj dat: Databáze ARES
    Script: MyEGO blog

    Script po úpravě na straně serveru (jedná se o NETTE akci):

    public function handleLoadInfo($IC) {
    	$this->payload->firma = array();
        	// dá se vybrat hned z několika zdrojů dle potřeby http://wwwinfo.mfcr.cz/ares/ares_xml.html.cz#k3
    	define('ARES','http://wwwinfo.mfcr.cz/cgi-bin/ares/darv_bas.cgi?ico=');
    	$ico = intval($IC);
    	// nemohl jsem použít kvůli omezení na serveru, nahradil jsem pomocí CURL
    	//$file = @file_get_contents(ARES.$ico);
    	if ($curl = curl_init(ARES.$ico)) {
    		curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    		$content = curl_exec($curl);
    		//$info = curl_getinfo($curl);
    		curl_close($curl);
    		$xml = @simplexml_load_string($content);
    	}
    	$a = array();
    	if (isset($xml)) {
    		$ns = $xml->getDocNamespaces();
    		$data = $xml->children($ns['are']);
    		$el = $data->children($ns['D'])->VBAS;
    		if (strval($el->ICO) == $ico) {
    			$a['ico'] 	= strval($el->ICO);
    			$a['dic'] 	= strval($el->DIC);
    			$a['firma'] = strval($el->OF);
    			$a['ulice']	= strval($el->AA->NU).' '.strval($el->AA->CD).'/'.strval($el->AA->CO);
    			$a['mesto']	= strval($el->AA->N).'-'.strval($el->AA->NCO);
    			$a['psc']	= strval($el->AA->PSC);
    			$a['stav'] 	= 'ok';
    		} else {
    			$a['stav'] 	= 'IČ firmy nebylo nalezeno';
    		}
    	} else {
    		$a['stav'] 	= 'Databáze ARES není dostupná';
    	}
    	$this->payload->firma = $a;
    	$this->sendPayload();
    }

    Script po úpravě na straně uživatele:

    <script type="text/javascript">
        <!--
    	$('#frmkontakt-IC').change(function(event) {
    		$.getJSON({link loadInfo!}, {'IC': $('#frmkontakt-IC').val()}, function(payload) {
    			if (payload.firma.stav == 'ok') {
    				$('input[name=DIC]').val(payload.firma.dic);
    				$('input[name=prijmeni]').val(payload.firma.firma);
    				$('input[name=ulice]').val(payload.firma.ulice);
    				$('input[name=mesto]').val(payload.firma.mesto);
    				$('input[name=psc]').val(payload.firma.psc);
    			} else {
    				alert(payload.firma.stav);
    			}
    		});
    	});
    	-->
    </script>

    Chtělo by to ještě doladit o podmínky kdy co a jak vypisovat, spojovat (číslo orientační a popisné, město a čtvrť, atd.), ale jako referenční implementace to je dobrý základ.