Upload progressbar s PHP a jQuery

napísal , 1 Nov 2010

upload progressbar

Pri uploadovaní cez HTML formulár, hlavne ak sa jedná o veľké súbory, môže byť problém, že používateľ nevie aká časť zo súboru sa uploadla, či sa súbor vôbec uploaduje a prinajhoršom si myslí, že sa vôbec nič nedeje a nervózne kliká na submit. Ešte horšie ako zvýšená záťaž na server, ktorú generuje, je riziko, že sa na celú stránku vyserie, lebo si myslí, že nefunguje. :)

V tomto tutoriale si povieme ako za pomoci PHPčka a jQuery jednoducho vytvoriť progress bar, ktorý sa priebežne obnovuje podľa množstva prenesených dát z uploadovaných súborov a snáď pomôže predísť úniku netrpezlivých používateľov zo stránky.

Aby ste vedeli o čom je reč, tu si môžete pozrieť demo.

Viac "localhostov"

napísal , 15 Oct 2010

Občas sa môže stať, že potrebujete lokálne pracovať na stránkach, ktoré sú robené s tým, že budú uložené v "roote" domény a využívajú (mimochodom veľmi pohodlné) "polo-relatívne" URLká - napríklad /brm/bla.php. V takom prípade je treba vypratávať všetko, čo máte vo www-roote vášho lokálneho webservera. A to je pain in the ass, hlavne pokiaľ potrebujete naraz robiť s viacerými projektami.

Apache a Windows sa dajú celkom ľahko nakonfigurovať aby sa okrem adresy localhost mohla používať hocijaká iná, pri ktorej sa budú súbory ťahať z iného miesta na disku - príklad:
http://localhost/ -> C:\Program Files\wamp\www
http://tosumiveci/ -> C:\Program Files\wamp\www2
Vďaka tomu môžete v konečnom dôsledku mat k dispozícií viac "localhostov".

localhost in ur localhost

that's one seriously pimped up localhost!

Ako na to?

1) Povolíme v konfigurácii Apacha modul Virtual host.
Konfiguračný súbor Apachu sa volá httpd.conf a vo WAMPe sa nachádza v "C:\Program Files\WAMP\bin\apache\Apache2.2.11\conf\". Tam treba nájsť riadok #LoadModule vhost_alias_module modules/mod_vhost_alias.so a odstrániť znak komentára (#).

2) Do toho istého súboru pridáme adresu nového localhostu a cestu k jeho súborom.
Napríklad ja mám na adresu 127.0.0.2 nastavený adresár www_brmbrm. Tento krok môžete samozrejme zopakovať ľubovoľne veľa krát pre rôzne adresy a cesty.

<Directory "C:/Program Files/wamp/www_brmbrm*">
Options FollowSymLinks
AllowOverride All
Order deny,allow
Satisfy all
</Directory>

<VirtualHost 127.0.0.2>
ServerName brmbrm
DocumentRoot "C:/Program Files/wamp/www_brmbrm"
Directoryindex index.php index.html index.htm
AccessFileName .htaccess
</VirtualHost>

3) A aby to malo gule, do systémového DNS ešte pridáme alias pre našu novú IP adresu. :p
[Windows only] Takže na koniec súboru C:\WINDOWS\SYSTEM32\DRIVERS\ETC\HOSTS dopíšeme

127.0.0.2 brmbrm

That's it!

Yellow fade efekt v jQuery [video]

napísal , 11 Oct 2010

Čo najčastejšie vidíte po úprave profilu? Správu typu "Váš profil bol úspešne upravený". V dnešnej dobe preplnených stránok je ale často problém všimnúť si už len túto správu, nie ešte práve upravený element, na ktorý sa správa vzťahuje.

Yellow fade technika od 37signals proti tomu bojuje šikovným spôsobom - element sa cez JavaScript zvýrazní žltou farbou, ktorá postupne zmizne. To zaručene získa pozornosť a človek hneď vie, na čom je. Like this:

Video ukazuje a vysvetľuje implementáciu yellow fade efektu na stránke, na ktorej práve makáme. Používame jQuery a ideme na to bez pluginov a dodatočných súborov. Riešenie možno nie je ideálne (ani univerzálne), rozhodne je však dostatočne obskúrne a tým pádom hodné podelenia o :) Ostatne pointou týchto videí je predstaviť užitočné koncepty a ukázať veci, ktoré ste (nielen) o jQuery možno nevedeli.

Hráme sa s formulármi, CSS3 a jQuery [video]

napísal , 7 Oct 2010

Aké jednoduché je vytvoriť formulár ako tento od nuly? Takto jednoduché:

Klikni na "povedz mi o tom viac" a dozvieš sa, ako presunúť labels priamo do inputov, ako zariadiť aby zmizli, keď do nich človek klikne a iné JavaScript srandy (warning: includes jQuery).

Najrýchlejší úvod do vytvárania web stránok

napísal , 3 Oct 2010

Tento návod som sa rozhodol napísať, keďže už dosť ľudí po mne chcelo, nech im vysvetlím ako sa dajú tvoriť vlastné web stránky, ako to všetko okolo nich funguje a kde sa to naučiť. Samozrejme, že si môžu nakúpiť knihy, ale tie bývajú spravidla tak rozťahané, že ich veľa ľudí ani nedočíta. Plus zaťažujú množstvom detailov, ktoré na začiatku iba mýlia a zdržujú.

Preto píšem tento návod čo najstručnejšie, aby slúžil ako alternatíva k prehnane ukecaným knihám a aby ste namiesto zbytočného čítania mohli radšej kódiť. :p

Najskôr zbežný prehľad o tom, čo všetko sa deje, keď si v prehliadači otvoríte nejakú stránku. To aby ste vedeli kde sa vlastne používajú všetky tie technológie ako je HTML, CSS, PHP, SQL, JavaScript, jQuery, AJAX a iné.

1) Zadáte URL adresu - to je celý ten text, čo vidíte hore v address bare prehliadača.

2) Na základe názvu stránky (t.j. domény) sa zistí IP adresa servera, na ktorom sa nachádza hľadaná stránka. (Na toto slúži DNS server, ktorého adresu poznáme)

Hviezdičkové hodnotenie cez jQuery [video]

napísal , 1 Oct 2010

Kód, resp. jeho tvorba sa zvykne blbo vysvetľovať v textovej podobe, preto sa o to občas pokúsime formou videa. A keďže opakovanie je matka múdrosti, na začiatku videa si vypočujete to, čo ste práve prečítali :)

V tomto prvom brm.sk video tutoriále krok za krokom ukážem, ako pomocou jQuery spraviť hviezdičkové hodnotenie, ktoré sa používa v našich recenziách.

"Pre najlepšiu kvalitu zvoľte fullscreen HD.", odkázal Captain Obvious.
...