Šta je novo?

Web tutorijali

sirNemanjapro

Slavan
VIP član
Učlanjen(a)
29.11.2006
Poruke
4,511
Poena
440
Pozivam sve članove BENCHmark foruma koji su u web development vodama da doprinesu ovoj zajednici svojim znanjem. Prvenstveno početnicima.

Sve što je potrebno jeste da želite nekome da pomognete i, prvenstveno, da znate nešto u vez web developmenta.
Teme mogu da budu od banalnih stvari vezanih za FTP, pravljenje php.ini, određene funkcije sa .htaccess fajlovima, cPanel faq, Flash animacije, instalacije foruma, upotreba neke od JS biblioteke, sopstveni plugin... Bukvalno, šta god želite da podelite sa svojim kolegama i/ili početnicima. Bilo šta što je vezano za web development generalno.

Komentarisanje ove teme neće biti omogućeno. Drugim rečima, ako želite da se zahvalite autoru ili da postavite neko pitanje, najbolje je da to uradite preko PM poruke, ili eventualno, da otvorite temu sa konkretnim pitanjem u vezi tutorijala.

Za sve dopune, promene i izmene tutorijala posle grejs perioda za editovanje, možete me kontaktirati na PM.

Forma u kojoj se tutorijal predstavlja.
Kod:
= = = = = = = = = = = = = = =
Naziv:
[B]Hello world u .NET[/B]
- - - - - - - - - - - - - - -
Oblast:
[B].NET[/B]
- - - - - - - - - - - - - - -
Autor:
[B]Imenko Prezimenović[/B]
- - - - - - - - - - - - - - -
Dodatno:
[B]Želeo bih da se zahvalim Akademiji, članovima
svoje velike porodice i roditeljima...
Težina ovog tutorijala je na osnovnom nivou.
Za njegovu izradu potrebno je 5-6 minuta.[/B]
= = = = = = = = = = = = = = =
Kod:
= = = = = = = = = = = = = = =  PART I
Tekst/kod/slike prvog dela
= = = = = = = = = = = = = = = 

= = = = = = = = = = = = = = = PART II
Tekst/kod/slike drugog dela
= = = = = = = = = = = = = = = 

= = = = = = = = = = = = = = = PART III
Tekst/kod/slike trećeg dela

[spoiler]<%
    HelloWorldLabel.Text = "Hello, world!";
%>[/spoiler]
= = = = = = = = = = = = = = =
I tako redom do kraja. Sav sadržaj ide u CODE tagove.
Ako imate dugačne snipete koda, možete ih staviti u spoiler tagove zbog preglednosti.
 
Ajd da razbijem led. :)

Kod:
= = = = = = = = = = = = = = =
Naziv:
Osnovna animacija u jQuery
- - - - - - - - - - - - - - -
Oblast:
Javascript/jQuery
- - - - - - - - - - - - - - -
Autor:
Aleksandar Radovanovic
- - - - - - - - - - - - - - -
Dodatno:
Težina ovog tutorijala je na osnovnom nivou.
= = = = = = = = = = = = = = =

Kod:
= = = = = = = = = = = = = = =  PART I

$('#adds').click(function () {
	$('#adsBox').animate({height: 'show'});
	$('#noAds').show();
	$('#ads').hide()
	});

= = = = = = = = = = = = = = =

Klikom na kontejner sa sa id=ads startuje animacija i kontejner sa id=adsBox koji je u startu sakriven (CSS kod, display: none) se prikazuje i siri po visini, po zavrsetku animacije, prikazuje se kontejner sa id=noAds a prethodni sa id=ads se krije.

*Ovo moze biti korisno u slucaju da zelite da se sadrzaj/poruka koju prikazujete promeni.

Kod:
= = = = = = = = = = = = = = =  PART II 

$('#noAds').click(function () {
	$('#adsBox').animate({height: 'hide'});
	$('#noAds').hide();
	$('#ads').show()
	});

= = = = = = = = = = = = = = =

U drugom delu sakrivamo kontejner koji smo upravo prikazali, mislim da je ovde sve jano ko dan.:)

Evo na kraju i komplet kod sa css:

HTML:
<html>
<head>
<style>
#ads { text-align: right; width: 130px; padding: 5px 10px; margin: 0 0 10px 0; cursor: pointer; }
#noAds { text-align: right; display: none; width: 130px; padding: 5px 10px; margin: 0 0 10px 0;  cursor: pointer; }
a { color: #39a7e4; font-family: Arial; font-size: 12px; text-decoration:none; }
#adsBox { display: none; height:150px; width:150px; }
.rounded { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border:1px solid #999; }
p {padding: 10px; font-family: Arial; font-size: 12px; }
</style>
</head>

<body>
<div id="ads" class="rounded"><a href="#">Show</a></div>
<div id="noAds" class="rounded"><a href="#">Hide</a></div>
<div id="adsBox" class="rounded"><p>Neki sadrzaj<p></div>
<script>
$('#ads').click(function () {
	$('#adsBox').animate({height: 'show'});
	$('#noAds').show();
	$('#ads').hide()
	});

$('#noAds').click(function () {
	$('#adsBox').animate({height: 'hide'});
	$('#noAds').hide();
	$('#ads').show()
	});
</script>
</body>
</html>
 
Poslednja izmena od urednika:
Kod:
= = = = = = = = = = = = = = =
Naziv:
Osnova konekcije na mysql i logovanje korisnika- sessija
- - - - - - - - - - - - - - -
Oblast:
PHP/HTML
- - - - - - - - - - - - - - -
Autor:
Nikola Djokic
- - - - - - - - - - - - - - -
Dodatno:
Težina ovog tutorijala je na srednje-osnovnom nivou.
Znaci morate da posedujete osnovno znanje php-a i programiranja da biste razumeli.
= = = = = = = = = = = = = = =

Ovde cu vam prestaviti jednu mogucu osnovu vase php/database aplikacije. Ona sadrzi:
/inc/config.php - Osnovni config fajl
/inc/dbclass.php - Klasa za bazu podataka i sesiju, mozda i nije najbolja praksa da se obe klase stave u jedan fajl
login.php - Login forma
index.php - Provera da li je korisnik ulogovan i slanje na login formu ako nije.
logout.php - Odjava korisnika


config.php - Ovde mislim da je sve jasno, samo smo nabrojali 6 konstanti

PHP:
<?php
= = = = = = = = = = = = = = =  PART I
define('MY_SERVER_ADR', "http://localhost/"); //adresa do aplikacije
define('MY_PATH', "C:\Program Files\Apache Software Foundation\Apache2.2\htdocs");//fizicka putanja do aplikacije na disku


define("MY_SQL_HOST", "localhost"); //adresa mysql servera
define("MY_SQL_USER", "user");       //korisnicko ime
define("MY_SQL_PASS", "pass");      //lozinka
define("MY_SQL_DB", "database");   //ime baze koju koristite
= = = = = = = = = = = = = = = 
?>

dbclass.php
PHP:
= = = = = = = = = = = = = = =  PART II
<?php

include'/config.php';
class MyDb //Nasa database klasa, u nju treba stavljati vase upite koje cesto koristite u oblicima funkcija, 2 primera imaju dole
{

    var $MyHost; //host za bazu
    var $MyUser; //Korisnicko ime
    var $MyPass; //Lozinka
    var $MyDbName; //Ime baze sa kojom radimo
    var $con; //nasa konekcija

    var $lastERR;  // Zadnja greska koja se javila

    function __construct() //konstruktor klase
    {
        $this->MyHost= MY_SQL_HOST;
        $this->MyUser= MY_SQL_USER;
        $this->MyPass= MY_SQL_PASS;
        $this->MyDbName= MY_SQL_DB;
        $this->db_connect();
    }

    function db_connect()  //konektovanje na bazu, moze i da se pozove u konstruktoru
    {
        $this->con=mysql_connect($this->MyHost,$this->MyUser,$this->MyPass);
            
        $n=10; //Broj koliko ce puta pokusati da se konektuje
        for($n=0;$this->con==false and $i<n;$i++)
        {
            $this->con=mysql_connect($this->MyHost,$this->MyUser,$this->MyPass);
        }
        if(! $this->con)echo mysql_error($this->con);

        mysql_select_db($this->MyDbName,$this->con);
    }

    function db_query($my_query) //Osnovni sirovi upit
    {
        $this->lastERR = "";
        $result=mysql_query($my_query,$this->con);
        if(!$result){
            $this->lastERR = mysql_error();
        }
        return $result;
    }
    
    function db_delete($table,$id) //brisanje iz tabele po ID-u, napomena: tabela mora imati ID kolonu
     {    
      $this->lastERR = "";
      $my_query="DELETE FROM ".$table ." WHERE id='". $id . "'";
      $result=mysql_query($my_query,$this->con);
      if(!$result){
         $this->lastERR = mysql_error();
       }
      return $result;
     }
    
    function is_there($table, $key, $value)  //Da li postoji neki podatak u bazi
        //Na primer da li postoji korisnik nnnn, u tom slucaju bi bilo: $table='korisnici';   key='nick';   $value='nnnn';
        //Ovako nesto je korisno imati, jel ce cesto trebati neka provera pre unosa, neko ce reci dobro ako je element u bazi unique, 
        //baza ce prijaviti gresku, ali to onda znaci proveru koji je tipa greska pa, onda odluciti sta dalje. 
        {
            $my_query="SELECT COUNT(*) FROM ".$table." WHERE ".$key." = '".$value."' ";
            //echo $my_query;
            //die();
            $result=mysql_query($my_query,$this->con);
            $rez=mysql_fetch_assoc($result);
            if($rez['COUNT(*)']>0)
                return true;
            else return false;
        }

}

class Mysession   //Klasa za sesiju
{
    public static function start()  //Jasno, startovanje sesije
    {
        session_start();
    }

    public static function auth($user,$pass)//Autentikacija korisnika
    {
        global $db; //Znaci da cemo koristiti globalni objekat klase Mydb, a ne neku lokalnu promenjivu

        $result= $db->db_query("SELECT * FROM korisnici WHERE korisnicko_ime='".addslashes($user)."' and
                                    lozinka ='".addslashes($pass)."';");
            
        //addslashes - funkcija koja dodaje escape znak ispred specijalnih karaktera koji bi mogli da uticu na upit O'nill postaje O\'Nill

        if($row=mysql_fetch_assoc($result))   //vraca red iz rezultata u niz na asocijativan nacin, detaljno pojasnjenje dole
        {
            $_SESSION['user']=$row['ime'];    //$_SESSION - to je globalna promenjiva nase sesije
            $_SESSION['access']=$row['access'];   //ovde dodeljujemo 2 vrednosti user i access, promenjivama sessije. One se cuvaju sve dok korisnik                    
                                                                 //ne zatvori pretrazivac
            return(true);//Prosla je autentifikacija korisnika iliti postoji u bazi.
        }
        return(false);//Nije prosla. Ovde se mogu raditi neke dodatne provere, da li je korisnicko ime neispravno, password i vratita ta informacija.
            
    }

    public static function is_admin()  // Da li je logovani korisnik administrator? Ovo se moze koristiti za razne  nivoe pristupa, rankove itd
    {
        if($_SESSION['user']!="")
        {
            return $_SESSION['access'];  // U mom slucaju 1 je bio administator, 0 obican korisnik
        }
        else return -1; //ukoliko nije ulogovan
    }
        
    public static function get_name()  // Vraca ime trenutno logovanog korisnika
    {
        if($_SESSION['user']!="") return $_SESSION['user'];
        else return "";
    }

    public static function is_logged()  //Da li je neko logovan na sistem
    {
        if ($_SESSION['user']!="")
        return 1;
        else
        return 0;
    }

}

$db=new MyDb();  // Pravljenje objekta MyDb;
Mysession::start();  //Startovanje sessije.
?>
= = = = = = = = = = = = = = =

$row=mysql_fetch_assoc($result) - Vec sam rekao da ovo vraca red iz rezultujuce tabele kao associjativan niz. Sta to znaci pa to znaci da ako ste imali tabelu u bazi |ID| |Ime| |email| imacete niz koji je indeksiran associjativno, znaci po nazivma kolona. znaci imacemo $row['ID'], $row['Ime'], $row['email'] Preporucujem da kotisti ovakav nacin indeksiranja, jel u realnom radu mnogo lakse i pregledniji kod postane. Napomena, index je case sensitive sto znaci da ako vam je u bazi Ime mora da bude ne a ne ime ili IME.


Login forma, ovde cemo videti jednostavnu login formu. Supstina je da imamo formu koja na submit "baca"opet na sebe gde se vrsi provera, ako provera prodje, on na vraca na onu stranicu sa koje smo dosli. Primer pozivanja je sledeci

login.php
PHP:
= = = = = = = = = = = = = = =  PART III
<?php
require_once "inc/config.php";
require_once "inc/dbclass.php";

$prebaci_na=$_GET["prebaci_na"]; //prebaci_na - adresa gde se vracamo
//Stranicu uvek pozivamo sa neke druge stranice, na primer imamo 4 stranice u aplikacij, dve su dozvoljene za 
//citanje svakome a dve zahtevaju da se korisnik uloguje, kada korisnik pokusa da otvori "zabranjenu" stranicu ona ga baca vamo,
// i kada prodje login opet vraca odkale je dosao

if (empty($prebaci_na)) $prebaci_na=MY_SERVER_ADR; //Ukoliko ne postoji vrati na pocetnu stranu

if(isset($_REQUEST["potvrdi"])) //isset - proverava da li je unesena forma
{
    if(Mysession::auth($_POST["user"],$_POST["pass"])) //Pokusaj logavanja, pogledati dbclass.php
    {
        header("Location: ".$prebaci_na); //Ukoliko je proslo logovanje prebaci gde trba
        die();
    }
    else
    {       Ako nije izbaciti prozorce korisniku
        ?>
         <script type="text/javascript">
        alert("Greska u loginu, molimo pokusajte opet"); 
        </script>
        <?php 
    }
}

?>

<center><br>
<font class="Arial12"><b>Prijava na sistem</b></font>
<form method="POST"   <!--Klasicna forma sa metodom post-->
    action="login.php?prebaci_na=<?=urlencode($prebaci_na)?>">  <!--Ovde smo koristili short tags umesto <?php echo urlencode($prebaci_na); ?>-->
Korisnicko ime: <input type="text" name="user" size=15><br>
<br>
Lozinka: <input type="password" name="pass" size=15><br>
<br>
<input type="submit" name="potvrdi" value="Prijavite se"></form>
</center>

I evo mali primer kako izlgeda kada neka stranica
index.php
PHP:
= = = = = = = = = = = = = = =  PART IV
<?php
require_once "inc/config.php";
require_once "inc/dbclass.php";

if(Mysession::is_logged()!=1)//Da li smo ulogovani?
{
	header("Location: login.php?prebaci_na=".urlencode($_SERVER['PHP_SELF'])); //Nismo, prebaci nas na login
	die();
}

?>

I za sam kraj
logout.php
PHP:
= = = = = = = = = = = = = = =  PART V
<?php
session_start();
session_unset();
session_destroy();
header("Location: index.php"); 
die();
?>

Ako imate nekih pitanja slobodno pitajte. Mozda kod i nije najlepsi, ali mislim da se moze svatiti i da sluzi kao osnova za dalje unaredjivanje.
 
Može li mi neko reću koji su dobri tutorijali za učenje Web design-a? Dakle, hteo bih naučiti HTML, CSS i još neke stvarčice koje bi mi pomogle da napravim jednostavan, pregledan sajt.

Pretpostavljam da je program za izradu web sajtova Adobe Dreamweaver.
 
Zao mi je ali moram da protestujem protiv koda koji je nnnn postavio. Veoma je nesiguran kod. $prebaci_na=$_GET["prebaci_na"] je prosto nedopustivo. $_GET mora da se sanitizuje inace moze da se prebacuje gde god hoces. Uopste mi nije jasno zasto koristiti dinamicko prebaci_na. U osnovnom sistemu bi morao da hardkodujes lokaciju gde ces da se vratis u osnovnom "use case". Ako hoces da se vratis na prethodnu stranicu posle logovanja onda preporucujem koriscenje referrer-a ili barem sanitizaciju $_GET["prebaci_na"] da moze samo da prima imena fajlova tvoje aplikacije i tvoj domen.

U Mysession metodi auth addslashes() na query-ju nije dovoljno sigurno - najbolji izbor je mysql_real_escape_string() ali trebalo bi koristiti i filtere da se izbace nepozeljni karakteri ako se zna koji se input ocekuje. Npr. username znas da mogu da budu velika/mala slova i brojevi i eventualno neki specijalni znakovi interpukcije. Sve van toga brises regularnim izrazima. Ako ti je username=email postoji vise regularnih izraza koji potvrdjuju da li je unesena validna email adresa.

Ovaj kod je takodje potpuno nesiguran. Dovoljno je neko da edituje session cookie i postavi access na 1 da bi dobio admin privilegiju i da funkcija is_admin vrati TRUE
Kod:
if($_SESSION['user']!="")
        {
            return $_SESSION['access'];  // U mom slucaju 1 je bio administator, 0 obican korisnik
        }

Ista stvar vazi i za tvoj index.php - tu proveravas Mysession::is_logged(). Jedino sto ti tu proveravas jeste if($_SESSION['user']!=""). Dakle - dovoljno je da editujem Session cookie i u njega unesem user="bilo koji user"(!) i ja sam "ulogovan"? To je apsolutno nedopustivo. Ceo flow log-in sekcije mora da bude:

na svakoj stranici web aplikacije:
Kod:
if(isset($_SESSION['user']) && isset($_SESSION['pass']))
{
$test = Mysession::auth($_SESSION['user'],$_SESSION['pass']); //ovde moras da vrisis sanitizaciju $user i $pass promenjivih i da ne snimas access u sesiju nego pamtis u promenjivu koja ce da se koristi u globalu.
if($test===FALSE)
{
unset($_SESSION['user']);
unset($_SESSION['pass']);
//you are not logged in
}
}


Kod je na pocetnickom nivou u redu ali pada na osnovnoj stvari za user authentication - a to je security.

DB klasa je korektna mada koristi mysql_ umesto mysqli_ koji je moderniji i ne pokriva mnoge use cases - npr. gde je vracanje insert_id-ja?

Sve u svemu - ovo jeste najvaznija stvar svake aplikacije. Nemojte od pocetka da ucite pogresno...
 
Nazad
Vrh Dno