Web Programiranje: November 2011

Saturday, November 19, 2011

JavaScript - pomeranje slike unutar DIV taga

Evo jedne male skriptice za pomeranje pozadinske slike u DIV tagu. Pomeranje slike izgleda ovako:

Ovo je kod:

<html>
<head>
<title></title>
<script type="text/javascript">
function Pomeranje(x, smer, brzina)
{
x += smer * brzina;
if (x <= -400) smer = 1;
if (x >= 0) smer = -1;
document.getElementById("slika").style.backgroundPosition = x + "px 0px";
setTimeout('Pomeranje(' + x + ', ' + smer + ', ' + brzina + ');', 100);
}

</script>
<style type="text/css">

#slika{
width: 200px;
height: 100px;
background: url('slika.png');
background-position: 0px 0px;
margin-left: auto;
margin-right: auto;

}
</style>
</head>

<body OnLoad='Pomeranje(0, -1, 10);'>
<div id='slika'></div>
</body>
</html>

Možete da podešavate početnu poziciju, smer i brzinu kretanja.

Pomeranje (pocetna pozicija, smer, brzina kretanja)

U ovom primeru slika je široka 600 px, a radni prostor (div u kojem se prikazuje slika) je širine 200 px. To znači da sliku pomeramo od 0 do -400 px. Kretanje slike počinje od 0 px i pomera se svaki put za -10 px (na svakih 100ms). Kada dođe do -400px , smer se menja i pomeranje je po +10 px. I tako se slika stalno kreće levo-desno.

Ovu animaciju možete iskoristiti za sliku na vrhu stranice (header image). Ako želite da je postavite unutar posta na blogu, treba da unesete sledeći kod:

<div id='slika' style="width: 200px; height: 100px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmpDjWTLOhWMZAt34apwgJ1WcdfMvr1a16Ptp3WNTeYqYvFbrfMT_jIKEtpe4r2GjojhcGnIVZ_THRiJAfo_-r7yQupeJnQUU95B_qhlGXOfciFp7zbSTYJbgObKvVxNvjrTQZ16RV4g7C/s1600/slika.PNG'); background-position: 0px 0px; margin-left: auto; margin-right: auto;"></div>

<script type="text/javascript">
function Pomeranje(x, smer, brzina)
{
x += smer * brzina;
if (x <= -400) smer = 1;
if (x >= 0) smer = -1;
document.getElementById("slika").style.backgroundPosition = x + "px 0px";
setTimeout('Pomeranje(' + x + ', ' + smer + ', ' + brzina + ');', 100);
}
</script>
<script type="text/javascript">
Pomeranje(0, -1, 10);
</script>

Vodite računa da ubacite odgovarajuće parametre:

width: 200px - stavite željenu širinu div polja u pikselima.
height: 100px - stavite željenu visinu div polja u pikselima
(x <= -400) - umesto -400 stavite odgovarajuću vrednost koju dobijate oduzimanjem širine div-a i širine slike (u ovom slučaju 200 - 600 = -400)
url('http://....') - stavite adresu vaše slike. Slika se mora nalaziti negde na internetu.

Tuesday, November 15, 2011

JavaScript - skripta za odbrojavanje vremena 2.deo

U prošlom članku napisali smo skriptu za odbrojavanje vremena u JavaScript-u. Međutim, ta skripta je prikazivala vreme samo u sekundama i mogla je da broji samo unazad do nule. Sada prikazujemo skriptu koja može da broji u oba smera (napred, nazad) do bilo koje vrednosti i prikazuje vreme o obliku hh:mm:ss.

<html>
<head>
<title></title>
<script type="text/javascript">
function Vreme(t, smer, granica)
{
t += smer;
document.getElementById('ispis-vremena').innerHTML = Format_vremena(t);
if (t != granica)
setTimeout('Vreme(' + t + ',' + smer + ',' + granica + ' );', 1000);
else
alert('Vaše vreme je isteklo !');
}

function Format_vremena(v)
{
var sekunde;
var minuti;
var sati;
sekunde = v % 60;
minuti = ((v - sekunde) / 60) % 60;
sati = parseInt(v / 3600);
if (sati < 10) sati = "0" + sati;
if (minuti < 10) minuti = "0" + minuti;
if (sekunde < 10) sekunde = "0" + sekunde;
return sati + ":" + minuti + ":" + sekunde;
}

</script>
<style type="text/css">

#ispis-vremena{
width: 100px;
height: auto;
margin-top: 200px;
margin-left: auto;
margin-right: auto;
text-align: center;
background: #dfefff;
font-family: Arial;
font-size: 20px;
line-height: 40px;
color: #00007f;
}
</style>
</head>

<body OnLoad='Vreme(0, 1, 300);'>
<div id='ispis-vremena'></div>
</body>
</html>

prilikom poziva, funkciji prosleđujemo 3 parametra:

početno vreme u sekundama (t)
korak i smer (smer)
krajnje vreme u sekundama (granica)

Primeri:

Ako funkciju pozovemo:
Vreme(0, 1, 300);
skripta će brojati od 00:00:00 do 00:05:00

Ako funkciju pozovemo:
Vreme(600, -1, 300);
skripta će brojati unazad od 00:10:00 do 00:05:00

Friday, November 11, 2011

JavaScript - skripta za odbrojavanje vremena 1.deo

Verovatno ste videli na mnogim sajtovima i u skoro svakoj online igrici deo sa odbrojavanjem vremena. Ovo je veoma lako napraviti i zato Vam prikazujemo jednu malu skripticu i primer kako to radi.

<html>
<head>
<title></title>
<script type="text/javascript">
function Vreme(t)
{
document.getElementById('ispis-vremena').innerHTML = t;
t--;
if (t >= 0)
setTimeout('Vreme(' + t + ');', 1000);
else
alert('Vaše vreme je isteklo !');
}
</script>
<style type="text/css">
#ispis-vremena{
width: 100px;
height: auto;
margin-top: 200px;
margin-left: auto;
margin-right: auto;
text-align: center;
background: #dfefff;
font-family: Comic Sans MS;
font-size: 50px;
line-height: 100px;
color: #00007f;
}
</style>
</head>

<body OnLoad='Vreme(10);'>
<div id='ispis-vremena'></div>
</body>
</html>

Da bi ste videli kako ovo radi, u Notepad-u na svom računaru napravite običan tekstualni fajl sa nastavkom .html umesto .txt (npr: index.html ili brojac.html). Zatim kopirajte kompletan kod i snimite. Otvorite u nekom pretraživaču ( FireFox, Opera, Chrome, IE ...)

Kako ovo radi ?

Ceo kod se sastoji iz 3 dela: HTML-a, CSS-a i JavaScript-a. Unutar tagova <script type="text/javascript"></script> pišemo JavaScript kod, a unutar tagova <style type="text/css"></style> pišemo CSS kod. JavaScript i CSS se najčešće piše u posebnim fajlovima, ali pošto je skripta veoma kratka i jednostavna odlučili smo se za varijantu "sve u jednom fajlu".

Kada se učita html stranica pokreće se funkcija Vreme.
<body OnLoad='Vreme(10);'>

Unutar elmenenta čiji je ID="ispis-vremena" ispisujemo vrednost t.

document.getElementById('ispis-vremena').innerHTML = t;

t umanjujemo za 1
t--;

ako je t veće ili jednako od nule po isteku vremena od 1000 ms (tj. 1 sekunde) pokreće se funkcija Vreme, ali kako smo t umanjili za jedan sad se poziva funkcija u obliku Vreme(9).
if (t >= 0)
setTimeout('Vreme(' + t + ');', 1000);
else
alert('Vaše vreme je isteklo !');

ponavljanjem ovog procesa dolazimo do uslova kada će t biti manje od 0. Tada se ispisuje poruka na ekranu i prekida se sa ponovnim pozivanjem funkcije Vreme. Umesto ove poruke, može se nešto drugo uraditi. Npr: ponovo učitati stranica, učitati neka druga stranica, ispisati na ekran neki podatak iz baze...

Wednesday, November 9, 2011

ASP.NET generator jedinstvenog ključa

U prošlom postu smo imali generator jedinstvenog ključa napisan u PHP-u. Sada imamo sličan generator jedinstvenog ključa napisan za ASP/ASP.NET. Kod izgleda ovako:

<script language="VB" runat="Server">
Function Random_Kod(Optional ByVal Broj As Integer = 10, Optional ByVal Karakteri As String = "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ") As String
Dim i As Integer
Dim s As String
Dim Duzina As Integer
Dim b As Integer
Randomize
If Broj < 1 Then Broj = 1
If Broj > 32 Then Broj = 32
Duzina = Len(Karakteri)
s = ""
For i = 1 To Broj
b = Int(1 + Duzina * Rnd)
s = s & Mid(Karakteri, b, 1)
Next
Random_Kod = s
End Function
</script>

Funkciji možemo da prosledimo nijedan, jedan ili 2 parametra:

Random_Kod ()
Random_Kod(dužina ključa)
Random_Kod(dužina ključa, dozvoljeni karakteri)

Primer:

<%
Response.Write (Random_Kod() & "<br>")
Response.Write (Random_Kod(5) & "<br>")
Response.Write (Random_Kod(20) & "<br>")
Response.Write (Random_Kod(8, "01") & "<br>")
Response.Write (Random_Kod("1234") & "<br>")
Response.Write (Random_Kod(20, "0123456789ABCDEF") & "<br>")
%>

na stranici dobijamo:

Wpbua6piwU
Tn4iI
KV1QeNGddSyvSrmN7H3z
10011101
0dk5Knekg06pfOGlF983R1mWx9SW63Dt
D41F5B06725ED9792CB9

Napomena:

U ASP.NET-u funkcije i procedure se pišu unutar tagova: <script language="VB" runat="Server"></script>, dok se u ASP-u pišu nutar standardnih ASP tagova: <% i %>.

Pozivanje funkcija i procedura u ASP/ASP.NET, kao i ostali programski kod na stranici se piše unutar tagova <% i %>.

Ceo kod (npr: index.aspx) stranice bi izgledao ovako:

<script language="VB" runat="Server">

Function Random_Kod(Optional ByVal Broj As Integer = 10, Optional ByVal Karakteri As String = "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ") As String
Dim i As Integer
Dim s As String
Dim Duzina As Integer
Dim b As Integer
Randomize
If Broj < 1 Then Broj = 1
If Broj > 32 Then Broj = 32
Duzina = Len(Karakteri)
s = ""
For i = 1 To Broj
b = Int(1 + Duzina * Rnd)
s = s & Mid(Karakteri, b, 1)
Next
Random_Kod = s
End Function
</script>

<html>
<head>
<title> Gererator jedinstvenog ključa </title>
</head>
<body>

<%
Response.Write (Random_Kod() & "<br>")
Response.Write (Random_Kod(5) & "<br>")
Response.Write (Random_Kod(20) & "<br>")
Response.Write (Random_Kod(8, "01") & "<br>")
Response.Write (Random_Kod("1234") & "<br>")
Response.Write (Random_Kod(20, "0123456789ABCDEF") & "<br>")
%>

</body>
</html>

Tuesday, November 8, 2011

PHP generator jedinstvenog ključa

Ova PHP skripta generiše kljuc proizvoljne dužine i ključ koji je sastavljen od karaktera koje izabere sam korisnik

Skripta (funkcija) izgleda ovako:

<?php
function Generator_kljuca($duzina = 10, $karakteri = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789")
{
$MIN_DUZINA_KLJUCA = 1;
$MAX_DUZINA_KLJUCA = 32;

if ($duzina < $MIN_DUZINA_KLJUCA) $duzina = $MIN_DUZINA_KLJUCA;
if ($duzina > $MAX_DUZINA_KLJUCA) $duzina = $MAX_DUZINA_KLJUCA;

$s = "";
$broj_karaktera = strlen($karakteri) - 1;
for ($i=0; $i<$duzina; $i++)
$s .= substr($karakteri, mt_rand(0, $broj_karaktera), 1);

return $s;
}
?>

Pojašnjenje promenljivih:

$duzina - dužina ključa.
$MIN_DUZINA_KLJUCA - minimalna dužina ključa.
$MAX_DUZINA_KLJUCA - maksimalna dužina ključa.
$karakteri - spisak dozvoljenih karaktera od kojih se kreira ključ.
$s - string u kojem se kreira ključ.
$broj_karaktera - broj dozvoljenih karaktera od kojih se kreira ključ.

Prilikom pozivanja funkcije postoje dva parametra koja imaju podrazumevanju (default) vrednost. To su $duzina i $karakteri. U slučaju se funkcija pozove bez parametara:

echo Generator_kljuca();

rezultat će izgledati ovako (dužine 10 karaktera, sastavljen od podrazumevanih karatkera tj cifara, malih i velikih slova):

YT7frGtsm6

Ukoliko želimo tačno određen ključ, npr dužine 8 karaktera sastavljen samo od cifara, potrebo je pozvati funkciju na sledeći način:

echo Generator_kljuca(8, "0123456789");

i dobijamo:

859649

Ako funkciju pozovemo sa parametrima koji su van opsega dozvoljene dužine ključa (u ovom slučaju od 1 do 32 karaktera):

echo Generator_kljuca(-5, "013456789");
echo Generator_kljuca(105, "013456789ABCDEF");

dobijamo:

9
10FF979653B1EF609EB43E4C005647D8

Funkciju možemo pozvati samo sa jednim karakterom, npr:

echo Generator_kljuca(10);
echo Generator_kljuca(5);

dobijamo:

pvALJ9gYji
sZodD

Ako funciju pozovemo samo sa drugim parametrom, a pri tome računamo da prvi parametar ima podrazumevanu vrednost:

echo Generator_kljuca("0123456789");

nećemo dobiti ono što želimo:

pm4liTuSK21W0MueXBHwuR6kghTj0fXS

jer se deo "0123456789" računa kao prvi parametar, a to je u ovom slučaju dužina ključa. kada se string "0123456789" pretvori u broj, dobija se broj veći od 32, pa se dućina ključa ograničava na 32 karaktera.

U tom slučaju ispravno pozivanje funkcije izgledalo ovako:

echo Generator_kljuca(10, "0123456789");

Naravno, funkcija se može izmeniti tako da neki drugi parametri budu podrazumevani, a isto tako da se promeni maksimalna dužina ključa.

Sunday, November 6, 2011

Jednostavan PHP brojač unikatnih poseta

Jednostavan PHP brojač poseta je brojao posete pri svakom učitavanju stranice. To znači, ako jedan korisnik učita stranicu nekoliko puta ili učita više stranica (pretpostavimo da se na svakoj stranici nalazi brojač) brojač će svaki put zabeležiti posetu. Naravno, to nije stvaran broj posetilaca, već više odgovara broju pregledanih stranica (pageviews).

Da bismo imali stvaran broj posetilaca, moramo svakog posetioca računati samo jednom i pored toga što on učita više stranica u toku jedne posete. Ovo se može uraditi pomoću kolačića.

Evo i koda:

<?php
function brojac_v2()
{
$naziv_fajla = "brojac unikata.txt";
if (!(isset($_COOKIE["poseta"])))
{
setcookie("poseta", "dan", time() + 60 * 60 * 24, "/");
file_put_contents($naziv_fajla, "X", FILE_APPEND);
}
if (file_exists($naziv_fajla))
$broj_poseta = filesize($naziv_fajla);
else
return 0;

return $broj_poseta;
}
?>

Prvo proveravamo da li kolačić postoji. Ako postoji to znači da je posetilac već bio na sajtu, a ako ne postoji onda ga kreiramo. Ovde smo kolačiću dali naziv "poseta", a vrednost je "dan". Rok važenja je 60 * 60 * 24 = 86400 sekundi, tj 1 dan. To znači da će ovaj kod brojati samo unikatne posetioce u intervalu od 24h. Ako isti posetilac dođe nakon 24h on se računa kao novi posetilac.

Funkciju pozivamo na sledeći način:

<?php
$broj_unikatnih_poseta = brojac_v2();
echo $broj_unikatnih_poseta;
?>

U kombinaciji sa brojačem iz prethodnog članka, možemo napraviti brojač unikatnih poseta i brojač pregledanih stranica.

Možemo dodati još dva brojača koji bi merili unikatne posete u toku 7 dana i 30 dana. Na ovaj način pomoću jednostavnih brojača možemo napraviti statistiku posećenosti sajta.

Na primer:

ako podelimo broj poseta sa brojem unikatnih poseta, možemo dobiti prosečan broj pregledanih stranica po posetiocu.
ako pogledamo odnos broja unikatnih poseta za 30 dana i za 24 h, možemo zaključiti sledeće: ako je taj broj približno isti, to znači da nam stalno dolaze novi posetioci na sajt, a ako je broj unikatnih poseta za 30 dana znatno manji od broja unikatnih poseta za 24h to znači da imamo dosta posetilaca koji često dolaze na sajt. Zašto? Pa zato što se njihova poseta kod brojača za "mesečne unikate" evidentira jednom u 30 dana, dok se kod "dnevnih unikata" evidentira svaki dan kad posete sajt (pod uslovom da je prošlo 24h). Ako podelimo ova dva broja, dobijamo prosečan broj poseta jednog posetioca u toku mesec dana.

Jednostavan PHP brojač poseta

Ovaj jednostavan programčić vam omogućava da napravite brojač poseta u slučaju da nemate mogućnost korišćenja baze podataka na web hostingu (ovo je skoro pa nemoguće osim u slučaju da imate besplatan hosting).

Prvo pravimo funkciju pod nazivom "brojac_v1" - brojač verzija 1:

<?php

function brojac_v1()
{
$naziv_fajla = "brojac.txt";
file_put_contents($naziv_fajla, "X", FILE_APPEND);
if (file_exists($naziv_fajla))
$broj_poseta = filesize($naziv_fajla);
else
return 0;

return $broj_poseta;

}

U promenljivu $naziv_fajla smeštamo naziv fajla. U ovom slučaju to je "brojac.txt", a možemo mu dati i neki drugi naziv npr: "brojac.dat" ili "dir/brojac.br". Ovo poslednje bi značilo da se fajl "brojac.br" nalazi u direktorijumu "dir".

Zatim pomocu funkcije file_put_contents, dodajemo jedan karakter (u ovom slučaju znak "X") na kraj fajla. To znači, ako je fajl bio veličine 10 karaktera, posle ovog dodavanja fajl je veličine 11 karaktera.

Zatim učitavamo veličinu fajla pomoću funkcije filesize. Ako fajl ne postoji ili ne može da se otvori, funkcija vraća vrednost 0, inače vraća broj poseta.

Posle možemo da koristimo ovu funkciju na sledeći način:

<?php

$broj_poseta = brojac_v1();
echo $broj_poseta;

ili jednostavno:

<?php

echo brojac_v1();

Prvu opciju koristimo u slučaju da na više mesta na jednoj stranici ispisujemo broj poseta, a drugo ako samo na jednom mestu ispisujemo broj poseta.

Ovo je veoma efikasno ako broj poseta nije velik. Ukoliko je broj poseta izuzetno velik (>> 100.000) tada verovatno imamo i ozbiljniji hosting sa bazom (ili čak više baza podataka) pa koristimo i ozbiljniji brojač.

U slučaju da funkcija file_put_contents ne radi, možemo je zameniti sa sledećim kodom:

<?php

$file = fopen($naziv_fajla, "a");
fputs($file, "X");
fclose($file);

?>