- Stefanescu Mihai a postat in Paginare in PHP
- johhny a postat in Paginare in PHP
- Stefanescu Mihai a postat in Cum pot afisa eroarea cand utilizatorul a scris un username gresit sau o parola gresita?
- madalin a postat in Cum pot afisa eroarea cand utilizatorul a scris un username gresit sau o parola gresita?
- Stefanescu Mihai a postat in Featureuri site
Afisare dinamica a proiectelor in XAMPP
Nu stiu ce fac alte persoane, dar eu folosesc foarte mult soft-uri precum XAMPP si WampServer. Ambele sunt compuse din Apache, MySql si PHP (+ alte lucruri, acestea iind cele mai importante). Acestea sunt solutia perfecta pentru a iti crea un mediu de programare PHP local (precum LAMP, WAMP, MAMP).
De-a lungul aniloram instalat toate aceste produse manual pe toate platformele si nu pot spune decat ca sunt niste unelte grozave pentru un mediu de programare php pregatit rapid. Doar apesi pe executabil si ai un server WAMP sau LAMP in cateva minute.Un lucru care imi place foarte mult in WampServer este afisarea dinamica a proiectelor la care lucrezi. Este o lista simpla a tuturor folderelor din root-ul Apache ce iti ofera accesul rapid la proiecte. Nu trebuie decat sa creezi un folder nou si sa iti pui fisierele in el si va fi afisat pe prima pagina a serverului (localhost).Iata cum arata asta in WampServer:
In acest articol am sa va arat cum puteti face acelasi lucru in XAMPP.
XAMPP foloseste frameuri si are mai multe fisiere ascunse cu care functioneaza, oricum, motorul de functionare este c-am acelasi. Singura diferenta este ca nu afiseaza proiectele stocate in htdocs. In continuare am sa va arat cum sa faceti acest lucru.
Do It Yourself
In primul rand vei fi nevoit sa creezi un fisier nou. Numestel naviother.inc si pune-l in c:\xampp\htdocs\xampp . Continutul acestui fisier ar trebuii sa arate asa:
<br/><a class="n" target="content" onclick="h(this);" href="/projects.php">Projects</a><br>
Acum creeaza un fisier PHP numit projects.php si salveaza-l in c:\xampp\htdocs .
Codul din acest fisier:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="xampp/xampp.css" rel="stylesheet" type="text/css">
<title></title>
<base target="_blank"/>
</head>
<body>
<?php
$handle=opendir(".");
$projectContents = '';
while ($file = readdir($handle))
{
if (is_dir($file) && ($file != "..") && ($file != "."))
{
$projectContents .= '<li><a href="'.$file.'">'.$file.'</a>';
$projectContents .= '</li>';
}
}
closedir($handle);
if (!isset($projectContents))
$projectContents = "No Projects";
?>
<ul id="projectList">
<?php echo $projectContents ?>
</ul>
</body>
</html>
Viziteaza-ti serverul web in browse (localhost sau 127.0.0.1) si ai sa vezi un link nou numit Projects in sidebar,in sectiunea Tools.
Da click pe el si iti va aparea o lista ca ce-a de mai jos (am adaugat cateva foldere doar ca exemplu)
Acum, de fiecare data cand adaugi un folder in c:\xampp\htdocs va fi afisat aici.Cum Functioneaza?
Cum functioneaza!? Simplu.
Mai intai trebuie sa stii cum XAMPP isi genereaza sidebar-ul cu toate link-urile. In interiorul folderului xampp din htdocs exista un fisier numit navi.php. Acesta contine toate link-urile meniului de pe prima pagina. La linia 57 vei gasi ceva de genul:
<tr valign="top">
<td align="right" class="navi">
<?php
$navi = array('navitools.inc', 'naviservers.inc', 'naviother.inc');
foreach ($navi as $inc) {
if (is_readable($inc)) {
include $inc;
}
}
?>
<br><br>
</td>
</tr>
Aceasta sectiune parcurge un array de fisiere (navitools.inc, naviservers.inc si naviother.inc) si include continutul acestora.
Fisierul navitools.inc contine link-uri catre phpMyAdmin si Webalizer, naviservers.in contine link-urile catre Mercury Mail si Filezilla FTP.
naviother.inc este fisierul mai ciudat, pentru ca in instalarea standard a XAMPP-ului nu exista, dar codul totusi il cauta si daca il gaseste il include.Deci, fisierul naviother.inc contine un link catre pagina Project pe care am creat-o mai inainte(projects.php).
<br/><a class="n" target="content" onclick="h(this);" href="/projects.php">Projects</a><br>
Doar am clonat continutul altui fisier *.inc si am setat target-ul catre “content”, care este frame-ul principal din pagina.Nota: Daca ai versiunea “Lite” este posibil sa nu ai aceleasi fisiere.Acum ca avem link-ul Projects putem merge mai departe, la fisierul projects.php.Aici este codul acelui fisier:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="xampp/xampp.css" rel="stylesheet" type="text/css">
<title></title>
<base target="_blank"/>
</head>
<body>
<?php
$handle=opendir(".");
$projectContents = '';
while ($file = readdir($handle))
{
if (is_dir($file) && ($file != "..") && ($file != "."))
{
$projectContents .= '<li><a href="'.$file.'">'.$file.'</a>';
$projectContents .= '</li>';
}
}
closedir($handle);
if (!isset($projectContents))
$projectContents = "No Projects";
?>
<ul id="projectList">
<?php echo $projectContents ?>
</ul>
</body>
</html>
Acesta este decat un fisier HTML cu cateva linii de cod PHP
- randul 5 contine un link catre css-ul xamppului, pentru a mentine acelasi look
- randul 8 este locatia in care se vor deschide link-urile
- randul 13 deschide php-ul si directorul cu proiectele
- randul 15 citeste subfolderele si fisierele
- randul 17 verifica daca directorul
- randul 19 adauga numele folderelor intr-o lista si le pune un link catre adresa
- randul 24 verifica daca mai sunt foldere de afisat
- randurile 28-30 afiseaza folderel intr-o lista neordonata
Extra
Iata cateva chestii pentru a-ti face afisarea proiectelor putin mai interesanta. In primul rand v-om adauga titlul “Your Projects” pe pagina:
<h1>Your Projects</h1> <ul id="projectList"> <?php echo $projectContents ?> </ul>
Rezultatul:
In continuare, pe masura ce lista cu proiecte va creste o vei gasi ca fiind monotona si greu se gasit ceva in ea (si lunga…). Pai…hai sa folosim ceva jQuery si sa facem ceva interesant cu ListNav si sa afisam lista plictisitoare ceva mai interesant.
<h1>Your Projects</h1> <div id="projectWrapper"> <div id="projectList-nav"></div><br/> <ul id="projectList"> <?php echo $projectContents ?> </ul> </div>
In sfarsit, acum adaugam si jQuery-ul si JavaScriptul in partea de sus a fisierului projects.php
<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>
<script type="text/javascript" src="scripts/jquery.listnav-2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#projectList').listnav();
});
</script>
Singurul cod scris este un selector ce preia lista noastra neordonata (projectList) si o foloseste in pluginul listnav().
Acum, lista noastra plictisitoare va arata de astfel:
Folosesc CSS-ul din #DemoFour din codul ListNav pentru a obtine acest efect, dar XAMPP ingreuneaza putin situatia. ListNavi creaza cate o clasa pentru fiecare litera din bara de meniu. In acelasi timp, si XAMPP-ul face acelasi lucru in stylesheet-ul lui, deci s-ar putea ca literele D,N, s.a.m..d sa arate putin “ciudat”.Iata suprascrierea CSS-ului pe care il puteti adauga unui nou stylesheet si nu trebuie decat sa il includeti in projects.php
/* fix for some classes that xampp defines */
a.n:link, .n, .d, .h
{
color:#BB3902;
background-color:#F8E8A0;
font-size:12px;
}
#projectWrapper
{
width:100%;
}
#projectList li
{
list-style: none;
float:left;
}
#projectList a
{
width:185px;
display:block;
text-decoration:none;
border:1px solid silver;
padding:10px;
margin:0 10px 10px
}
Gata!
Sper ca acest mic tutorial v-a ajutat si v-a facut serverul web putin mai prietenos.
Comentarii