W poprzednim tygodniu zaprezentowałem Wam, zaprojektowany przeze mnie wygląd localhosta. Od czasu tego wpisu pojawiło się kilka pytań o kod tego projektu, wiec postanowiłem podzielić się z Wami moim kodem oraz omówić go pokrótce, tak aby każdy wiedział co się dzieje i jak działa od strony technicznej. Do realizacji wykorzystałem technologie takie jak HTML5, CSS3, PHP oraz framework Bootstrap.
Wygląd
Zaczniemy od omówienia wyglądu zapisanego w samym HTML oraz CSS, korzystając przy tym z Bootstrapa, tak aby ułatwić zrozumienie kodu, a później zajmiemy się zautomatyzowaniem dodawania katalogów na stronie poprzez dodanie kodu PHP.
<div class="col-lg-2 col-md-2 col-sm-12 text-center">
<div class="file">
<a href="./Nazwa" class="text-center">
<img src="assets/img/baza.png" alt="folder" class="img-responsive animacja"/>
Nazwa
</a>
</div>
</div>
Powyższy kod HTML jest odpowiedzialny za wyświetlenie pojedynczego katalogu, będącego adresem do odpowiedniego katalogu na naszym dysku. Pierwsza linijka odpowiada za określenie szerokości jaką ma zajmować jeden z folderów oraz wyśrodkowanie zawartości tego diva. Następna linijka tworzy element div z klasą file, której zadaniem jest ustawienie odstępów miedzy kolejnymi folderami oraz ukrycie części elementu w sytuacji, kiedy nie mieściłby się jakiś napis (nazwa katalogu). Następnie tworzymy link, dzięki któremu będziemy przenoszeni do odpowiedniego katalogu. Dodajemy href, odpowiedzialny za wprowadzenie odpowiedniej ścieżki do linku oraz wyśrodkowujemy element. Teraz pozostaje dodać już tylko obrazek jaki ma zostać wyświetlony i wypisać nazwę. W atrybucie elementu img mamy src, w którym podajemy ścieżkę do wczytywanego pliku, alt określa wyświetlany tekst w momencie, kiedy nie zostanie wczytany obrazek oraz nadajemy elementowi dwie klasy img-responsive oraz animacja. Pierwszy z nich dodaje obrazkowi jak sama nazwa wskazuje responsywność, czyli dostosowuje szerokość obrazka do wielkości ekranu. Drugi natomiast tworzy ładnie wyglądający efekt powiększenia po najechaniu myszką. Na sam koniec podajemy nazwę tego katalogu.
Zatem mamy już omówiony kod HTML odpowiedzialny za wyświetlanie elementów. Teraz jeszcze rzucimy oko na klasy CSS, tak aby wiedzieć co się tam dzieje i po co to jest.
.file{
padding-bottom: 15px;
margin-bottom: 30px;
overflow: hidden;
}
.file img{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.file img:hover{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.animacja{
-webkit-transition: 250ms all ease-in-out;
-moz-transition: 250ms all ease-in-out;
-ms-transition: 250ms all ease-in-out;
-o-transition: 250ms all ease-in-out;
transition: 250ms all ease-in-out;
}
Klasa file jak już wspomniałem wcześniej odpowiedzialna jest za odstępy miedzy kolejnymi folderami. Selektor .file img określa powiększenie obrazka w chwili gdy nie ma nad nim kursora, zaś .file img:hover, gdy kursor znajduję się już nad danym elementem, wtedy następuje powiększenie obrazka o 1,1 razy. Tworzeniem animacji zajmuję się klasa animacja, poprzez zmianę wszystkich właściwości z .file img na .file img:hover i odwrotnie w delikatny i płynny sposób.
Automatyzacja
Teraz aby automatycznie po utworzeniu katalogu na naszym dysku, pojawił się on również w naszym Dashboardzie musimy dopisać kilka linijek kodu PHP.
<?
$dir = "./";
$ilosc = 0;
if (is_dir($dir)){
if ($dh = opendir($dir)){
while (($file = readdir($dh)) !== false){
if(is_dir($dir.$file)){
if($file == "." || $file == "assets" || $file == ".." || $file == "Zlecenia" || $file == "Playground" || $file == "Mariusz" || $file == "Student"){
}else{
if($ilosc == 6){
echo'<div class="row">';
$ilosc = 0;
}
if($ilosc == 0){
echo'<div class="space">';
}
echo'<div class="col-lg-2 col-md-2 col-sm-12 text-center">
<div class="file">
<a href="'.$dir . $file .'" class="text-center">
<img src="assets/img/katalogi.png" alt="folder" class="img-responsive animacja">'.$file.'
</a>
</div>
</div>';
$ilosc++;
if($ilosc == 6){
echo '</div></div>';
}
}
}
}
closedir($dh);
if($ilosc != 6){
echo '</div></div>';
}
}
}
?>
Zmienna $dir przechowuje ścieżkę z której będą wyświetlane katalogi, $ilosc, określa, który to już folder został dodany (wiersz w Bootstrapie został podzielony na 12 mniejszych części), $file przechowuję nazwę obecnego katalogu, a $dh zawiera w sobie uchwyt do katalogu. Zacznijmy od 3 linijki, sprawdzamy tam czy katalog podany w zmiennej $dir istnieje. Następnie tworzona jest pętla, która wykonuję się do momentu, kiedy nie będzie już żadnego kolejnego katalogu. Kolejny warunek sprawdza czy istnieje katalog złożony ze ścieżki podanej w $dir oraz kolejno wczytany plik $file. Linijkę niżej tworzymy warunek w którym możemy wykluczać foldery jakie mają nie być wyświetlane np. assets. Dwa kolejne warunki odpowiadają za kończenie wiersza i tworzenie nowego, w chwili kiedy mamy $ilosc równą 6 następuje utworzenie nowego wiersza oraz wyzerowanie $ilosc, jeśli została wyzerowana $ilosc zostaje dodany div z klasą space, tworzący ustalony odstęp miedzy wierszami. Następnie zostaje wyświetlony opisany wcześniej kod html z uwzględnieniem zmiennych $dir i $file wstawiając je w odpowiednie miejsca np. href. Musimy jeszcze pamiętać o inkrementacji $ilosc oraz sprawdzeniu czy aby $ilosc nie jest równa 6, jeśli tak to zamykamy znaczniki div. Na koniec zamykamy otworzony przez nas katalog korzystając z uchwytu zapisanego w $dh oraz sprawdzamy czy $ilosc nie jest różna od 6, jeśli jest różna wtedy musimy zamknąć znaczniki div, aby się strona nie rozsypała.
Podsumowanie
To tak w skrócie opisany wygląd mojego Dashboardu, którym w ubiegłym tygodniu się chwaliłem. Jeśli chcecie zobaczyć cały kod udostępniam go na swoim GitHubie.
Pozdrawiam,
sirmarbug
