några sidor på nätet om PHP programmering

Sök efter  
Börja här Uppgifter Testa dig själv Tips Sidokarta mm. Länkar Sök

Din uppgift Extra uppgift

2.6 Skapa en "slideshow"

[ Utskriftsversion av dessa uppgifter ]

 

För denna uppgift behöver du några stycken bilder av samma storlek. På grund av licensproblem med gif-filer så stöds inte dessa i nyare php versioner, så se gärna till att bilderna är av typen jpeg eller png. (Om du vill veta varför - klicka här). För de saker vi skall göra i denna övning duger dock gif bra.

 

[ Klicka här för att ladda ner de bilder jag kommer att använda i mitt exempel - fem blder i ett zip arkiv ]

Skapa en katalog för bilderna

Skapa en katalog med namnet pictures, som du sätter under din php katalog. Se till att där finns etta antal bilder (använd mina exempelbilder om du inte hittar några lämpliga). För att förbereda oss för kommande kod kan det vara bra att se till att denna katalog har read och writerättigheter (=777).

Först måste vi kunna lista alla filer

I sin enklaste form kan vi göra ett program som helt enkelt tar alla bilder i katalogen och visar dessa. Vi skall senare bygga ut detta program med mer funktionalitet, men för att komma i gång nöjer vi oss med att kunna visa bildfilernas namn. getimagesize funktionen används för att få info om builder och fungerar bara med bildfiler. Detta använder vi för att kontrollera om det var en bildfil. (Senare kommer vi att ha ännu mer nutta av funktionen)

<?php
    
# öppna kalatlogen som finns under vår programkatalog
    
$pictureDir = opendir("./pictures");

    
# loopa genom kalatlogen
    
while ($filNamn = readdir ( $pictureDir ) )
    {
        
# visar bara namnen
        
echo $filNamn;
        echo
"<br />\r\n";
    }
    
# stäng katalogen
    
closedir( $pictureDir );
?>
Listning 2.6.1 - samples/s_slide1.php

ws_ftp.log
.
..
_notes
WS_FTP.LOG
winter.jpg
water.jpg
i misstag kom det en textfil hit.txt
sun.jpg
_vti_cnf
clock.jpg
blue.jpg
Resultat av listning 2.6.1

Förbättrad version

Ovastående kod visar alla filer i katalogen men även . och .. Dessutom visas eventuella andra filer i katalogen. Detta måste vi åtgärda genom att kontrollera om det faktiskt är en bildfil som det är frågan om.

<?php
    $pictureDir
= opendir("pictures");

    
# loopa genom den
    
while ($filNamn = readdir ( $pictureDir ) )
    {
        
# kontrollera att det är en bildfil
        # vi skulle kunna kolla med is_file +  kontroll av
        # filtypen men istället använder vi
        # getimagesize som fungerar endast för jpeg, png och gif
        # För att indvika felmeddelanden om det inte är en bildfil så
        # sätter vi @ före funktionen -> bortkopplad felhantering
        
if ( $bildinfo = @getimagesize( "./pictures/" . $filNamn ) )
        {

            
echo $filNamn;
            echo
"<br />\r\n";
        
}
    
}
    
closedir( $pictureDir );

?>
Listning 2.6.2 - samples/s_slide2.php

winter.jpg
water.jpg
sun.jpg
clock.jpg
blue.jpg
Resultat av listning 2.6.2

Visa bilderna

Nu när vi vet vilka bilder vi har kan vi sätta in kod för att visa dessa. Nedan

<?php
    $pictureDir
= opendir("pictures");

    
# loopa genom den
    
while ($filNamn = readdir ( $pictureDir ) )
    {
        if (
$bildinfo = @getimagesize( "./pictures/" . $filNamn ) )
        {
            
# se till att katalogen sätts med i src attributet
            # och se till att en korrekt html img tag plockas ihop

            
echo "<img src=\"./pictures/" .
                
$filNamn .
                
"\">"
;
            echo
"<br />\r\n";
        }
    }
    
closedir( $pictureDir );

?>
Listning 2.6.3 - samples/s_slide3.php
[Visa i separat fönster]

Sätt in bildens storlek i taggen

Man skall alltid sätta width och height för img taggen, eftersom detta gör det lättare för browsern att optimera sidvisningen. PHP har beaktat detta genom att ha en speciell getimagesize funktion som kan göra detta åt oss. Vi har redan använt den för att kontrollera om det var en bildfil - nu skall vi även använda dess returvärde.

<?php
    $pictureDir
= opendir("pictures");

    while (
$filNamn = readdir ( $pictureDir ) )
    {
        if (
$bildinfo = @getimagesize( "./pictures/" . $filNamn ) )
        {
            

            # getimagesize returnerar en array som innehåller följande
            # 0 - bredd i pixel
            # 1 - höjd i pixel
            # 2 - typ (gif=1, jpeg=2 och png=3)
            # 3 - färdigt preparerad width="xx" och height="xx"
            #       som vi kan använda direkt i img taggen
            # "bits" - "Bits per sample" för jpeg bilder
            # "channels" - "Samples per pixels" för jpeg

            
echo "<img src=\"./pictures/" .
                
$filNamn .
                
"\" " .
                
$bildinfo[3] .
                
">";
            echo
"<br />\r\n";
            

            # för att visa lite vad getimagesize ger så visar jag dess här
            
foreach( $bildinfo as $vad=>$värde)
            {
                echo
$vad . " = " . $värde . "<br>\r\n";
            }
            

        
}
    }
    
closedir( $pictureDir );
?>
Listning 2.6.4 - samples/s_slide4.php
[Visa i separat fönster]

Visa en bild åt gången

Idén bakom en slideshow är följande:

  1. Sätt ut den första bilden

  2. Sätt länkar till de ävriga bilderna

  3. Sätt vid behov "föregående" och "nästa" länkar

  4. När vi klickar på någon av dessa länkar skall sidan laddas om, men med en ny bild.

För att implementera detta behöver vi göra följande:

  1. Använd url-parametrar. I vårt fall skall vi sätta ?vilken=bildnummer till adressraden. t.ex. ?vilken=2 för att visa en viss bild. Vi måste komma ihåg att i datavärden är första=0, andra=2, tredje=2 o.s.v

  2. Kontrollera i programmet om ?vilken= finns i adressen.
    Om det finns använder vi detta nummer, och om inte så skall vi visa den första bilden.

  3. Räkna ut vilket nummer föregående och nästa bild har.

  4. Vi bör även beakta att det kan sättas ett bildnummer i adressen som inte finns, t.ex. att vi vill se den femte bilden av fyra.

Nedan finns kod som beaktar detta:

<?php
    $pictureDir
= opendir("pictures");

    
# ny kod
    
while ($filNamn = readdir ( $pictureDir ) )
    {
        
# läser in filnamnen i en array istället
        # så vi kan manipulera dem senare
        
if ( $bildinfo = @getimagesize( "./pictures/" . $filNamn ) )
        {
            
$bildarray[] = $filNamn;
        }
    }
    
closedir( $pictureDir );

    
# kontrollera om det fanns ?vilken= i adressens url
    
if ( ! isset ( $_REQUEST[ "vilken" ] ) )
    {
        
# om inte skall vi börja med att visa den första bilden (=0)
        
$vilkenbild = 0;
    }
    else
    {
        
# i annat fall skall vi visa en annan bild
        # om text url var ?vilken=2 skall den tredje bilden visas
        
$vilkenbild = $_REQUEST[ "vilken" ];
    }    
    
    
# preparerar färdigt föregående och nästa bilds nummer
    
$förrabilden = $vilkenbild - 1;
    
$nästabild = $vilkenbild + 1;
    
    
# lite felhantering:
    # om det står ?vilken=999 i url men vi bar har 3 bilder
    # så visar vi den första bilden istället
    
if ( $vilkenbild >= count( $bildarray ) )
        
$vilkenbild = 0 ;        
    
    
# om vi inte är på första bilden
    
if ( $vilkenbild > 0)
    {
        
# så kan vi sätta en länk till den föregående bilden
        
echo " <a href=\"?vilken=" .
                
$förrabilden . "\">&lt;&lt;</a>\r\n";
    }
    else
    {
        
# i annat fall lämnar vi bara lite plats
        # med några mellanslag
        
echo " &nbsp;&nbsp; ";
    }
    
# loopa genom arrayen
    
for( $i = 0; $i < count( $bildarray ) ; $i++)
    {
        
# vi vill visa 1, 2, 3, osv och inte 0,1,2 som
        # är de nummer som egentligen används för
        # indexering i arrayen
        
$visatnummer = $i+1;
        
        
# om den nuvarande loopens nummer är
        # samma som nuvarande bilds nummer
        
if ( $vilkenbild == $i )
        {
            
# så sätter vi bara ut numret men inte som länk
            
echo " <b>" . $visatnummer . "</b>\r\n";
        }
        else
        {
            
# i annat fall sätter vi en länk till bild nr. $i
            
echo " <a href=\"?vilken=" . $i . "\">" .
                        
$visatnummer . "</a>\r\n";
        }
    }
    
    
# kontrollera om vi visar sista bilden
    
if ( $vilkenbild < count( $bildarray ) - 1 )
    {
        
# och sätt ut en länk till nästa bild
        # om vi inte redan visar sista bilden
        
echo " <a href=\"?vilken=" .
                
$nästabild . "\">&gt;&gt;</a>\r\n";
    }
    echo
"<br>\r\n";
    
# nya koden slut


    # nedan är den kod som fanns i föregående exemplet
    # loopa genom den
    while ($filNamn = readdir ( $pictureDir ) )  
    {  

       
if( $bildinfo = @getimagesize( "./pictures/" .
                   
$filNamn $bildarray[ $vilkenbild ]) )
        {
            echo
"<img src=\"./pictures/" .
                
$filNamn
                
$bildarray[ $vilkenbild ] .
                
"\" " .
                
$bildinfo[3] .
              
">";
            echo
"<br />\r\n";
        }
    
}
     closedir( $pictureDir );  
?>
Listning 2.6.5 - samples/s_slide5.php
[Visa i separat fönster]

   UppgifterUppgift 5