PHP – Krijimi i nje komuniteti bazik me antare.

Ne kete tutorial do te krijojme nje aplikacion te thjeshte I cili tregon si mund te regjistrojme nje antare ne database, si mund te ngarkojme fotografi te profilit per xhdo antare dhe sit e shfaqim profil te thjeshte per antaret tane.

Per te kuptuar me mire gjerat do te ndertojme nje websajt me pamje te thjeshte por me funksionalitet te larte. Se pari fillojme dhe ndertojme skeletin bazik per te vazhduar me ndertimin e me tutjeshem.
Ky tutorial si server do te perdor XAMPP server local per te ndertuar kete aplikacion.
I njejti kod mund te implementohet ne server online nese keni, pa problem.
Ne direktoriumin htdocs ne xampp krijoni nje folder test , ose me cfaredo emri. Shih fotografine:

Imazh

Brenda folderit test me Notepad++ (nese jeni duke perdorur kete) krijoni nje fajll php me emrin Index.php. Kjo do te jete pika fillestare ku do te fillojme te ndertojme kete aplikacion.
Imazh

Se pari te percaktojme se cfare do te permban webfaqja yne bazike.
Nje faqe kryesore e cila do te shfaqet fillimisht kur te visitohet webfaqja yne.
Nje faqe qo do tju mundeson regjistrim te antareve ne websajt. Nje faqe tjeter e cila do tju mundeson kycje antareve te regjistruar. Nje faqe e profilit ku antaret mund te shofin profilin e tyre.

Pra:
Index.php
Login.php
Register.php
Profile.php

Gjithashtu do te perdorim css per te percaktuar stilin e webfaqes tone. Pamja do te jete e thjeshte. Te fillojme me programimin e faqes se pare Index.php. Supozojme se jemi duke ndertuar nje komunitet te thjeshte social. Ketu nuk do te japim permbajtje vetem disa linqe per te orientuar viizitorin tek faqja e kycjes apo regjistrimin, dhe nje mesazh pershendetes.
Shkruajme kodin e meposhtem ne Notepad++
Code:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

Ky eshte skeleti fillestar per dokumentin Index.php. Kete do te perdorim edhe per faqet tjera ne vazhdim. Njehere programojme vetem index.php Shtojme nje header ne fillim ku do te vendojme logon e webfaqes tone dhe linqet ne te.
Verejtje: Ky tutorial perdor HTML5 dhe poashtu elementet do te perdoren ne HTML5.
Nese jnuk jeni duke programuar per websajt me HTML5 atehere zevendesoni elementet
qe do te shtojme me <div></div>
Code:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
</header>
</body>
</html>

Pastaj krijojme pjesen e mesme ku do te ndodhet permbajtja e webfaqes dhe pjesen e fundme ku mund te vendojme linqet apo gjera te ndryshme per kontakt.

Code:

<!DOCTYPE html>
<html>
<head> </head>
<body>
<header>
</header>
<div>
<div id=”content”>
</div>
</div>
<footer>
</footer>
</body>
</html>

Kemi disa elemente ketu. Header do te permbaj koken e webfaqes tone me logo dhe linqet.
Mvarur nga statusi I antarit I kycir apo jo linqe te ndryshme do te shfaqen ne header. Psh nese antari eshte I kyqur shfaqim linkun per te vizituar profilin e tij.
Me poshte kemi elementet div njera me klasen centrize dhe tjetra me id content. Elementi div me klasen centrize do te sherben per te pozicionuar permbajtjen e webfaqes Ne mes. Dhe Brenda saj elementi me id content do te permban permbajtjen qe kemi ne sajt.
Tani krijojme nje CSS fajll per te pozicionuar keto elemente ne faqen kryesore.
Se pari ne direktoriumin test ku ndodhet fajlli index.php krijojme nje direktorium me emrin css dhe me notepad++ krijojme nje fajll css dhe leme emrin main.css
Imazh

Ne fajllin kryesor index.php ne elementin head lidhim fajllin main.css ne kete dokument keshtu:

Code:

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”css/main.css”>
</head> <body>
<header>
</header>
<div>
<div id=”content”>
</div>
</div>
<footer>
</footer>
</body>
</html>

Verejme <link rel=”stylesheet” href=”css/main.css”> atributi href drejton tek folder css dhe tek fajli main.css.
Me kete importojme sttilin css qe ndodhet ne fajllin main.css ne dokumentin index.php
Hapim fajllin main.css dhe vendojme kete stil :

Code:

body{
margin:0;
padding:0;
background-color:#ebebeb;
}
header{
width:100%;
height:90px;
border-bottom:3px solid #CC9B6A;
border-top:3px solid #4F4F4F;
background-color:#f2f2f2;
}
.centrize{
margin:auto;
width:980px;
height:auto;
}
#content{
border:1px solid #cecece;
min-height:390px;
border-top:none;
background-color:#fff;
}

Pasi qe kjo nuk eshte tutorial per CSS nuk do te shpjegojme detajet per kete kod.
Vetem kopjone ne fajllin main.css dhe riferskoni faqen. Rezultati qe do te fitoni eshte ky:

Te krijojme permbajtjen e headerit.
Ne rrenjen e webfaqes pra ne folderin test brenda krijojme nje folder per fotografite qe do te vendosim.
Krijojme folderin me emrin images dhe ketu vendosim te gjitha fotografite qe do te perdorim.
Tani per tani ne photoshop ose nese keni logon tuaj vendosni ne kete folder dhe ne elementin head shfaq ne index.php keshtu :

Code:

<div class=”centrize”>
<a href=”index.php” id=”logo”><img src=”images/logo.png” height=”60″></a>
</div>

Verejme se edhe ne header kemi future elementin div me klasen centrize per te pozicionuar logon tone ne mes resiprokisht me permbajtjen e faqes. Me atributin float:left ne css me poshte logo do te shfaqen ne anen e majte, por duke ruajtur proporcionin me permbajtjen.
Mvaresisht nga madhesia e logos tuaj percaktone ate ne atributin height.
Gjeresia I jepet automatikisht sipas proporcionit te fotografise.
Verejme qe src= tregon ne folderin images/logo.png I cili ndodhet ne te njejtin folder ku ndodhet index.php.
Emri I fotografise eshte logo.png Ne fajllin main.css shtojme edhe stilin per elementin e logos

Code:

#logo{
display:block;
width:220px;
margin-top:12px;
float:left;
}

Dhe nje pershjendetje e thjeshte ne mes te permbajtjes. Pastaj do te futemi ne pjesen e php.

Code:

<h1>Welcome Visitor</h1>
<p>This site is to demonstrate how awesome tutorials can be. You can build
me up as you wish. Your imagination is your limit. Just try it…</p>

Ne vazhdim tek fajlli main.css vendosni kete stil

Code:

h1{
margin:0;
padding:8px;
font-family:”Trebuchet MS”,sans-serif;
color:#3b3b3c;
}
p{
margin:0;
padding:12px;
font-family:”Tahoma”,sans-serif;
font-size:11px;
color:#3b3b3c;
}

Kodi ne index.php:

Code:

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”css/main.css”>
</head> <body>
<header>
<div>
<a href=”index.php” id=”logo”><img src=”images/logo.png” height=”60″></a>
<div id=”headerLinksContainer”><?php echo $headerLinks; ?></div>
</div>
</header>
<div>
<div id=”content”>
<h1>Welcome Visitor</h1>
<p>This site is to demonstrate how awesome tutorials can be. You can build
me up as you wish. Your imagination is your limit. Just try it…</p>
</div>
</div>
<footer>
</footer>
</body>
</html>

Kodi ne main.css

Code:

body{
margin:0;
padding:0;
background-color:#ebebeb;
}
header{
width:100%;
height:90px;
border-bottom:3px solid #CC9B6A;
border-top:3px solid #4F4F4F;
background-color:#f2f2f2;
} .centrize{
margin:auto;
width:980px;
height:auto;
}
#content{
border:1px solid #cecece;
min-height:390px;
border-top:none;
background-color:#fff;
}
#logo{
display:block;
width:220px;
margin-top:12px;
float:left;
}
h1{
margin:0;
padding:8px;
font-family:”Trebuchet MS”,sans-serif;
color:#3b3b3c;
}
p{
margin:0;
padding:12px;
font-family:”Tahoma”,sans-serif;
font-size:11px;
color:#3b3b3c;
}

Me ne fund arrijme ne pjesen PHP. Ky tutorial me teper eshte I orientuar ne php dhe mysql.
Ne index.php mbi <!DOCTYPE html> krijoni taget per php

Code:

<?php ?>
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”css/main.css”>
</head>
<body>
<header>
<div>
<a href=”index.php” id=”logo”><img src=”images/logo.png” height=”60″></a>
</div>
</header>
<div>
<div id=”content”>
<h1>Welcome Visitor</h1>
<p>This site is to demonstrate how awesome tutorials can be. You can build
me up as you wish. Your imagination is your limit. Just try it…</p>
</div>
</div>
<footer>
</footer>
</body>
</html>

Tani do te fillojme te programojme pjesen PHP. Kur nje antar kycet ne websajt, ne session variabla ruhen informatat per kete antar. Informatat mund te jene username, id po edhe password. Me id te antarit nenkuptojme id e tij ne databazen e webfaqes.
Session variable eshte variable globale e cila mund te qaset nga secili fajll ne wefbaqen tone.
Ne kete rast ne index.php do te kontrollojme se a eshte vene ne session username I antarit dhe nese po Ateher antari yne eshte kycur ne web dhe ne header shfaqim linqet per te vizituar profiling e tij, e nese jo atehere antari nuk eshte I kycur dhe ne header shfaqim linqet per login, register.
Vendosim kete kod brenda elementeve php

Code:

$headerLinks = “”;
$username = “”;
$userId = “”; if(isset($_SESSION['username']) && isset($_SESSION['userid'])){
$username = $_SESSION['username'];
$userId = $_SESSION['userid'];
$headerLinks = “<a href=’profile.php?userid=$userId&username=$username’>My Profile</a>”;
}
else{
$headerLinks = “<a href=’login.php’>Login</a> • <a href=’register.php’>Register</a>”;
}

Sic thame se pari kontrollojme a eshte krijuar session variable me username dhe id te antarit. Nese po atehere antari eshte I kycur dhe tek variabla $headerLinks vendojme link per tek profile I tij verejme mir atributet e linkut tek
$headerLinks = “<a href=’profile.php?userid=$userId&username=$username’>My Profile</a>”;

Pas profile.php? si parametra shtojme userid qe eshte e barabarte me variable userid qe merret nga session variabla dhe username qe eshte e barabarte me variable qe me rret nga sesson variabla perkatese.
Ne kodin html menjehere pas elementint per logon shkruajme keshtu:

Code:

<div id=”headerLinksContainer”><?php echo $headerLinks; ?></div>

Mvaresisht nga vlera e variables $headerLinks do te shfaqen si linqe ose My Profile ose Login dhe Register.
Dhe ne main.css vendojme stilin per keto linqe keshtu:

Code:

#headerLinksContainer{
float:right;
margin-top:50px;
}
#headerLinksContainer a{
padding:3px 6px 3px 6px;
color:#3b3b3c;
font-weight:bold;
font-family:”Helvetica”,sans-serif;
font-size:13px;
}

I gjith kodi per kete project do tem und te shkarkohet ne fund te tutorialit.
Pamja momentale e faqes:

Tani per tani kemi perfunduar me krijimin e index.php.
Do te kthehemi me vone per te shtuar disa gjera. Ne vazhdim me Notepad++ ose qfaredo tekst editori qe perdorni krijoni fajllat per faqet tjera Login.php, Register.php dhe Profile.php dhe ruani ne te njejtin vend ku ndodhet index.php
Ne te gjitha keto fajlla kopjoni kodin e meposhtem dhe beni Save.

Code:

<?php
$headerLinks = “”;
$username = “”;
$userId = “”;
if(isset($_SESSION['username']) && isset($_SESSION['userid'])){
$username = $_SESSION['username'];
$userId = $_SESSION['userid'];
$headerLinks = “<a href=’profile.php?userid=$userId&username=$username’>My Profile</a> • ”;
}
else{
$headerLinks = “<a href=’login.php’>Login</a> • <a href=’register.php’>Register</a>”;
}
?> <!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”css/main.css”>
</head>
<body>
<header>
<div>
<a href=”index.php” id=”logo”><img src=”images/logo.png” height=”60″></a>
<div id=”headerLinksContainer”><?php echo $headerLinks; ?></div>
</div>
</header>
<div>
<div id=”content”>
</div>
</div>
<footer>
</footer>
</body>
</html>

Beni save te gjitha fajllat dhe ruani gati per me vone. Deri tani folder kryesor I webfaqes tone duhet te duket keshtu:
Imazh

Pasi qe ky tekst u zgjerua shume, pjesa tjeter do te vazhdojme ne tutorialin e ardhshem.

Ne pjesen tjeter do te krijojme formen per regjistrim te antareve ne database.
Do te krijojme tabelat e nevojshme ne mysql dhe kryesisht do te punojme ne fajllin register.php

Per te shkarkuar kodin e deritanishem klikoni ne kete link:
http://www.2shared.com/file/nqSPFBS3/test.html

Burimi: itshqip

PHP – Krijimi i nje komuniteti bazik me antare.

0 comments:

Post a Comment

Popular Posts

Blog Archive

PHP – Krijimi i nje komuniteti bazik me antare.

Next

Newer Post

Previous

Older Post

0 comments:

Post a Comment

PHP – Krijimi i nje komuniteti bazik me antare.

iPad mini me Retina display: Çfarë duhet të dini

29 certefikime ne IT

Ja cilet jane smartphone-et qe do te mund te perditesohen me Android 4.4 KitKat

Si të vini re nëse kompjuteri juaj është mbinxehur dhe çfarë duhet të bëni rreth kësaj dukurie