Zabezpieczenie plików serwera www – .htaccess i .htpasswd

Poniższa metoda jest przeznaczona dla systemu Windows, ale dla Linux-a jest bardzo podobna.

.htpasswd :

Otwieramy wiersz polecenia i przechodzimy do lokalizacji pliku wykonalnego htpasswd, jest to zazwyczaj ~\apache\bin.

Tworzymy plik .htpasswd za pomocą komendy:

htpasswd -bc .htpasswd username password

Gdzie argument -b odpowiada za podanie hasła z linii poleceń, -c za stworzenie nowego pliku. W miejsce username i password wstawiamy odpowiednie wartości.

Dla bezpieczeństwa umieszczamy plik .htpasswd w lokalizacji innej niż pliki www.

.htaccess :

Tworzymy plik z rozszerzeniem .htaccess i umieszczamy go w folderze z plikami www. W celu ochrony całego folderu umieszczamy w nim:

AuthUserFile [sciezka]\.htpasswd
AuthType Basic
AuthName "Zaloguj się, aby uzyskać dostęp do folderu"
require valid-user

Gdzie ścieżka to ścieżka dostępu do naszego pliku.

HTML, CSS i JavaScript: przykładowy kod strony

Poniżej przedstawiam przykładowe zastosowanie tych języków w utworzeniu prostej strony www. Składa się z czterech plików dostępnych poniżej.

 

Plik index.html:

<!DOCTYPE html>
<html>
<head>
<title>Menu</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="skrypt.js"></script>
</head>
<body>
<div id="menu">
<ul>Kurs: 
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
<div id="srodek">
Strona z odrobiną HTML-a, CSS-a i JavaScript. Kliknij na podkreślony tekst, a zmieni on kolor: <div onclick="zmiana(this);" class="czarny" id="podkreslonyDiv">kliknij tu, a zmienię kolor.</div>
</div>
</body>
</html>

Strona jest zgodna ze specyfikacją HTML5. Składa się ze standardowej struktury znaczników: html, head, body.

W głowie dokumentu w znaczniku link umieszczamy odnośnik do zewnętrznego arkusza stylów. Dalej podobnie w znaczniku script zewnętrzny skrypt napisany w języku JavaScript.

W ciele dokumentu znajduje się menu w postaci listy nieuporządkowanej.

Następnie blok, który wypośrodkujemy i zastosujemy w znajdującym się w nim tekście, dynamikę strony, polegającą na wywołaniu funkcji zmiana(), która jest odpowiedzialna po kliknięciu na element o id podkreslonyDiv, za zmianę klasy tego elementu.

 

Plik style.css:

body{
background-color: #C0C0C0;
}
ul{
list-style-type:none;
background: url(menu.png) repeat-x;
font-size:23px;
width:332px;
border-radius:15px;
margin:0;
}
ul li{
display:inline;
padding:5px;
}
ul li a:hover{
background: rgb(45,75,80);
border-radius:2px;
color:white;
}
a{
text-decoration:none;
color:#303030 ;
}
#menu{
width:372px;
height:27px;
margin-left: auto ;
margin-right: auto ;
}
#srodek{
margin-top:10px;
width:700px;
margin-left: auto ;
margin-right: auto ;
border-radius:15px;
background-color:#e8edef;
padding:30px;
}
.czerwony{
color:red;
}
.czarny{
color:black;
}
#podkreslonyDiv{
text-decoration:underline;
display: inline;
cursor: pointer;
}

W liście wyłączamy style listy (wypunktowanie). Następnie podajemy lokalizację do obrazka, który posłuży za tło menu, musimy go odpowiednio rozciągnąć w poziomie. Za pomocą ul li, odpowiednio przodka i potomka, określamy, że elementy listy mają wyświetlać się w jednej linii. Pseudoklasa :hover odpowiada za czynność najechania kursorem na element łącza a, zmieniamy tu, m.in. tło i kolor. W łączu wyłączamy charakterystyczne dla linków podkreślenie tekstu.

.czerwony i .czarny odpowiednio to zdefiniowane własne klasy, każda posiada określony inny kolor.

 

Plik skrypt.js:

function zmiana(div){
if (div.className == "czarny")
div.className = "czerwony";
else
div.className = "czarny";
}

Wspomniana wcześniej funkcja zmiana() wywołana z parametrem div. Początkowo klasa div-a jest ustawiona na kolor czarny. Odpowiednio po wywołaniu funkcji ma się zmieniać na przeciwną, o odmiennym kolorze.

 

Plik menu.png (kliknij prawym przyciskiem myszy na linie pionową i kliknij zapisz jako):

 

Wszystko umieszczamy w jednym folderze i uruchamiamy plik index.html za pomocą dowolnej przeglądarki internetowej.