Javascript kontra PHP

Właściwie nie można mówić o kontrze, bo języki te powinny nie rywalizować, a współpracować.

Przedmowa

Javascript to typowy język wykonywany po stronie klienta, PHP wręcz odwrotnie - wykonywany jest po stronie serwera. Dzięki PHP możemy tworzyć kod strony, który może przecież zawierać kod Javascriptu. Dzięki temu do JS możemy przekazywać dane wprost z serwera (np kolejne rekordy bazy MySQL, listę plików itp.).

Zaraz, zaraz. Przecież mówiłeś, że skrypty trzeba trzymać w oddzielnych plikach? Tak. Powinno się to robić. Ale nic się nie stanie, jak czasami złamiemy tą zasadę. Większość dużych portali to robi i jakoś żyje. I to całkiem dobrze żyje. Zawsze zresztą można wykorzystać Ajaxa, który jest połączeniem JS ze skryptami po stronie serwera...

Pobieranie szerokości i wysokości ekranu

Standardowo PHP nie udostępnia funkcji, która pobiera szerokość i wysokość ekranu. JS posiada obiekt screen, który ma właściwości screen.width i screen.height służące do pobrania wymiarów okna. Poniższy przykład prezentuje jak za pomocą Javascript (wykorzystując query string ustawiony za pomocą location.href) przekazać do PHP te parametry:


<?php
if (isset($_GET['width']) && isset($_GET['height'])) {
    echo "Szerokość ekranu: ".$_GET['width']." ";
    echo "Wysokość  ekranu: ".$_GET['height'];
} else {
    echo '<script type="text/javascript">';
    echo 'location.href="';
    echo $_SERVER['SCRIPT_NAME'].'?'.$_SERVER['QUERY_STRING'];
    echo '&width=" + screen.width + "&height=" + screen.height'."\n";
    echo "</script>\n";
    die();
}
?>

Pobieranie plików z serwera

Poniższy przykład pokazuje wykorzystanie PHP do pobrania listy plików graficznych z określonego katalogu na serwerze. Za pomocą PHP tworzymy kod JS z tablicą zawierającą nazwy plików:


<?
$dozwolone_rozszerzenia = Array('jpg','gif');
$folder = opendir('zdjecia');
$nazwy_zdjec = Array();
while (@gettype($plik = readdir($folder)) != boolean)
{
    if (!is_dir("$nazwa_katalogu_z_foto/$plik")) {
        if (in_array(substr($plik,strrpos($plik,".")+1), $dozwolone_rozszerzenia)) {
            $nazwy_zdjec[][nazwa] = $plik;
        }
    }
}
closedir($folder);
?>

<script type="text/javascript">
    var Zdjecia = new Array(
    <?php
        for ($x=0; $x < count($nazwy_zdjec); $x++) {
            echo '\''.$nazwy_zdjec[$x][nazwa].'\'';
            if ($x<count($nazwy_zdjec)-1) echo ',';
        }
    ?>
    );
</script>

Skrypt php przeglądając dany katalog sprawdza, czy dany plik ma odpowiednie rozszerzenie. Jeżeli wszystko się zgadza, dodaje go do tablicy $nazwy_zdjec. Po zamknięciu katalogu za pomocą PHP tworzymy kod JS, w którym tworzymy tablicę Zdjecia. Wykonujemy pętlę w PHP po elementach tablicy $nazwy_zdjec i wypisujemy odpowiednio każdy z nich. W naszym skrypcie do PHP pobraliśmy tylko nazwę, jednak nic nie stoi na przeszkodzie by pobrać także wymiary grafik (np za pomocą funkcji getimagesize)

Jeżeli interesuje cię temat czytania katalogów i przekazywania ich do JS, zobacz mój inny artykuł.

Przekazanie do Javascript rekordów z bazy danych MySQL

Bezpośrednio z Javascriptu nie mamy dostępu do bazy danych MySQL. Wystarczy jednak wykorzystać kilka linijek kodu PHP aby taką możliwość sobie sprawić:


<script type="text/javascript">
    var tabRekordy = new Array(
    <?php
        $baza = @mysql_pconnect("$server", "$uzytkownik", "$haslo");
        if (!$baza) die("Połączenie z $server się nie powiodło.");
        if (!@mysql_select_db($baza)) die("Wybranie bazy $baza się nie powiodło.");

        $rezultat = @mysql_query("SELECT * FROM $tabelaMySQL");
        $ileRekordow = mysql_num_rows($rezultat);

    for ($y=0; $y<$ileRekordow; $y++) {
        $rekord = @mysql_fetch_row($query);
        echo 'Array(';
        for ($x=0; $x<count($rekord); $x++) {
            echo '"'.$rekord[$x].'"';
            if ($x<count($rekord)-1) echo ',';
        }
        echo ')';
        if ($i<$ileRekordow-1) echo ',';
    }
    ?>
    );
</script>

Zasada działania jest podobna jak w poprzednim skrypcie. Pobieramy rekordy z bazy danych, a następnie wykonując po nich pętlę tworzymy kod JS.

W wyniku powyższego rezultatu możemy dostać taką wielowymiarową tabelę:


<script type="text/javascript">
    var tabRekordy = new Array(
    Array('Marcin','184','brązowe','czarne','m'),
    Array('Ania','170','brązowe','blond','k'),
    Array('Agnieszka','172','brązowe','czarne','k')
    );
</script>

Pobieranie wartości z pol wielokrotnego wyboru

Powiedzmy, że chcemy utworzyć na naszej stronie serię przycisków typu checkbox, które moglibyśmy wykorzystać np. do oznaczania wiadomości do usunięcia.

Aby grupa takich pól była reprezentowana w PHP przez tablicę (co w znaczący sposób ułatwi operacje na takich wartościach), powinniśmy do ich nazwy dodać kwadratowe nawiasy np. nazwa[].


<form name="Formularz" method="post" action="skrypt.php">
<fieldset>
    <input type="checkbox" name="hobby[]" value="komputer">komputer
    <input type="checkbox" name="hobby[]" value="rower">rower
    <input type="checkbox" name="hobby[]" value="koszykowka">koszykowka
    <input type="checkbox" name="hobby[]" value="basen">basen
    <input type="checkbox" name="hobby[]" value="film">film
    <input type="submit" value="Wyślij" />
<fieldset>
</form>

Kod pliku skrypt.php:

    
<?php
if (!empty($_POST[hobby])) {
    foreach ($_POST[hobby] as $pozycja) {
        echo "zaznaczyłeś: $pozycja<br/>";
    }
}
?>

Jeżeli powyższy formularz zostanie wyslany do skryptu PHP, wartości zaznaczonych checkboxów będą dostępne w PHP w postaci tablicy hobby.

Jako, że w nazwie widnieją nawiasy kwadratowe, zwykłe odwołanie się poprzez nazwę nie będzie możliwe. Aby odwołać się do tak nazwanych elementów z poziomu Javascript powinniśmy skorzystać z instrukcji:


var tablicaHobby = document.getElementById('hobby[]');

for (x=0; x<tablicaHobby.length; x++) {
    if (tablicaHobby[x].checked) document.write('Zaznaczyłeś: ' + tablicaHobby[x].value + '<br />');
}

Oczywiście powyższa technika dodawania nawiasów kwadratowych do nazw nie tyczy się li tylko elementów typu checkbox.

Każdy element, który nazwiemy z zastosowaniem powyższej metody zostanie zgrupowany w tablicę. I tak częstokroć spotykanym przypadkiem jest zastosowanie powyższej metody dla znacznika typu SELECT, dla którego zastosowano parametr multiple (który powoduje, ze możemy na raz wybrać kilka wartości):


<select names="narzedzia[]" multiple="multiple">
    <option value="srubokret">
    <option value="mlotek">
    <option value="wiertarka">
</select>