Dynamisk Webbsida Med PHP

Idag ska vi skapa en dynamisk webbsida med PHP och du ska redan kunna en del PHP, HTML och CSS för att få ut det mesta av den här guiden.

 

PHP

PHP står för PHP: Hypertext Preprocessor, och är ett av dom populäraste scriptspråk som körs på webbservrar för att driva webbsidor med dynamiskt innehåll (d.v.s. innehåll som genereras från t.ex. en databas, validering av formulärdata mm.) PHP är ett scriptspråk som tolkas av en interpretator som heter Zend Engine. Man använder PHP tillsammans med HTML och SQL (plus en del andra tekniker) för att generera innehåll.

 

Syntax

Man skriver PHP antingen i egna filer eller så blandar man med HTML. Koden skriver man mellan PHP avgränsare. Skriv in följande i en fil och spara den med filändelsen .php i din webbrot [1]:

<?php
// Detta är en kommentar på en rad, och skrivs inte ut

/*
Detta är också en kommentar, 
men på flera rader
*/

echo 'echo är en så kallad språk konstrukt som skriver ut strängar i webbläsaren'; 

# Detta är också en kommentar på en rad
?>

[1] Webbroten » om du kör WAMP är det C:/WAMP/www/ och för MAMP är det /Applications/MAMP/htdocs/ och för en LAMP (Linux Apache MySQL PHP) installation är det /var/www/html.

Kommentarer syns inte i utskrift och kan skrivas på tre sätt:

  1. på en rad, med hashtag #
  2. på en rad, med dubbla snedstreck //
  3. eller på flera rader, mellan /* och */.

Strängar skrivs mellan enkla eller dubbla citationstecken. Men enkla citationstecken bearbetas snabbare, är säkrare och är mindre benägna att orsaka programmeringsfel i PHP. Det finns dock undantag, som t.ex. om man vill få med en PHP-variabel i utskriften använder man dubbla för att slippa man konkatenera den till strängen (vilket skulle bearbetas saktare), utan kan istälet skriva in den direkt i strängen så här:

$someString = 'sträng';
// om vi echo ut en sträng tillsammans med variabeln använder vi dubbla citationstecken
echo "En PHP-variabel i en $someString";

 

En liten sida

Jag tänkte vi skulle skapa en liten sida och lära oss lite på vägen. Börja med att skapa en PHP-fil och skriva in följande och spara som index.php:

<!doctype html>
<html lang="sv-SE">
<head>
	<meta charset="UTF-8" />
	<title>Dynamisk Webbsida Med PHP | cr8gr8designs.com</title>
        <link rel="stylesheet" href="style.css" />
</head>
<body>
	<div class="menu-wrapper">
		<label for="toggle" class="menu-icon">☰</label>
		<input type="checkbox" id="toggle" />
		<aside class="sidebar-menu">
			<nav class="main-menu">
				<ul>
					<li class="menu-item active"><a href="#">Hem</a></li>
					<li class="menu-item"><a href="#">Portfolio</a></li>
					<li class="menu-item"><a href="#">Galleri</a></li>
					<li class="menu-item"><a href="#">Kontakt</a></li>
				</ul>
			</nav>
		</aside>
	</div><!--  /.menu-wrapper -->
        <section class="main-section">
                <!-- PHP kod ska in här senare -->
        </section>
</body>
</html>

…och en CSS-stilmall, med den här koden:

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
 
/* HTML5 display:block reset för äldre webbläsare */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
	font:100 1rem/150% Futura, 'Avenir Next', Avenir, sans-serif;
	width:100%;
	min-height:1000px;
	background-color:rgb(252,252,252);
}
.sidebar-menu {
    	transition: all 0.4s;
    	-webkit-transition: all 0.4s;
	position:fixed;
	top:0;
	left:-120px;
	z-index:1;
	width:120px;
	height:100%;
	padding:38px 38px 38px 20px;
	background:rgb(20,20,20);
}
.menu-item a {
	font:100 1rem/250% Futura, 'Avenir Next', Avenir, sans-serif;
	color:rgba(255,255,255,.9);
	text-decoration:none;
	display:block;
}
.menu-item a:hover {
	color:rgba(255,100,100,.8);
}
.active a {
	color:rgba(255,100,100,.8);
}
.active a:hover {
	color:rgba(255,100,100,.8);
}
.menu-icon {
	text-decoration:none;
	position:fixed;
	top:20px;
	left:200px;
	font-size:2.5rem;
	color:rgb(0,0,0,.9);
}
.menu-icon:hover {
    cursor: pointer;
}
#toggle {
	display: none;  /*hide */
	
}
#toggle:checked + .sidebar-menu {
	left:0;
}

Nu har vi en startsida som vi kan arbeta med. För att göra sidan dynamisk börjar vi med att modifiera menyn genom att modifiera href attributen så här:

<li class="menu-item active"><a href="?page=hem">Hem</a></li>
<li class="menu-item"><a href="?page=portfolio">Portfolio</a></li>
<li class="menu-item"><a href="?page=galleri">Galleri</a></li>
<li class="menu-item"><a href="?page=kontakt">Kontakt</a></li>

Här lägger vi till en variabel page som ändras beroende på vilken länk man klickar på. Testa att klicka på länkarna och kolla i adressfältet, där du bör se följande:

page variabeln syns i adressfältet när man klickar på menylänkarna
page variabeln syns i adressfältet när man klickar på menylänkarna

Det här kan vi använda oss av eftersom det går att komma åt page variabeln med PHP superglobaln $_GET. Vi kan nu servera innehåll, beroende på vilket värde page variablen har. Vi skapar nya filer i en ny mapp som vi ger namnet templates, där vi skapar fyra nya filer som ska heta:

  1. hem.php
  2. portfolio.php
  3. galleri.php
  4. kontakt.php

I dessa kan vi nu skriva in vad vi vill visa. Du ska få göra det själv då det inte har någon betydelse för guiden, men jag kan visa ett exempel på en mallsida/template:

<div>
    <h1>Välkommen till cr8gr8designs.com</h1>
    <span>Skapad av <a href="mailto:mail@cr8gr8designs.com">Daniel K</a></span>
    <p>
        Front-end och back-end är begrepp som används inom informationsteknik för att beteckna den bearbetning som sker av eller nära användaren (användargränssnittsorienterad bearbetning – front-end) och själva basbearbetningen (ofta på servernivå – back-end).
        I modern datateknik associeras ofta front-end med webbaserade mjukvarumoduler baserade på HTML, CSS och JavaScript, där utvecklarna av dessa delar kallas webbutvecklare eller webbdesigners.
        Sättet att bygga uppdatorsystem enligt front-end och back-end kallas också two-tier architecture. (källa <a href="http://sv.wikipedia.org/wiki/Front-end_och_back-end">Wikipedia</a>)
    </p>
</div>

Vi behöver inte deklarera <doctype html>, <head> och <body> m.fl. då vi redan har grunden i index.php där denna del av sida ska visas. Så, nu skapar vi en sträng som ändras beroende på vilket värde page har. Skriv in följande mellan <section> taggarna:

<section class="main-section">
<?php
// vi deklarerar en PHP-variabel som får värdet från page
// i PHP behöver man inte ange specifik typ för variabler -
// för det sköter PHP automatiskt
$page = $_GET['page'];

// vi skapar en sträng med sökvägen till template fil,
// som ändras beroende på page variabeln, lägg märke till att man konkatenerar -
// strängar med en punkt istället för + som är en annan operator -
// du kan kolla på all här http://php.net/manual/en/language.operators.php
$filename = "templates/" . $page . ".php";

// om filen finns
if (file_exists($filename)) {
    // renderar vi den
    include_once $filename;
} else {
    // annars har page variabeln inte ett värde är
    // och då är användaren på hemsidan eftersom ingen länk ännu klickats
    include_once 'templates/hem.php';
}
?>

Nu har vi skapat en enkel template system som serverar sida beroende på vilken sida användaren är på.

 

Separera Logik & Presentation

Det är dock inte god kodningsstandard att blanda logik och presentation, utan man ska försöka till så stor del som möjligt separera dom. Därför ska vi skapa en ny mapp som heter functions, och däri en PHP-fil som heter likadant:

Mappstruktur
Mappstruktur

Vi flyttar PHP koden från index.php till en funktion i functions.php:

<?php

/**
 * Renderar sidoinnehåll
 * @param string $page
 */
function renderPage($page) {
    $filename = "templates/" . $page . ".php";
    
    // om page har ett värde och filen finns
    if (file_exists($filename)) {
        // renderar vi sidan
        include_once $filename;
    } else {
        // annars visas hemsidan
        include_once 'templates/hem.php';
    }
}

…och så skriver vi inkluderingen av function.php och deklarationen av $page variabeln på toppen av sidan:

<?php
require_once 'functions/functions.php';
$page = $_GET['page']; ?>
<!doctype html>
<!-- och så vidare -->

Okej, nu kan du använda funktionen genom att anropa den, så byt ut all PHP-kod mellan <section> taggarna i index.php mot det här:

<?php
renderPage($page); 
?>

 

Dynamisk Meny

Jag har även satt ihop en funktion som skapar en dynamisk meny. Den använder sig av en kort if sats, och används på det här sättet:

// detta är inte riktig kod utan visar bara hur det fungerar
(villkor ? sant : falskt);

Där villkor kan vara vilken jämförelse  som helst, t.ex. a === b och om det är sant gäller sant och om det är falskt så gäller den sista som här är ordet falskt. Ett praktiskt exempel med båda if-satserna:

if(a === b) {
   echo $c;
}else {
   echo $a + $b;
}

// samma villkorliga sats med den korta varianten

echo ($a === $b ? $c : $a + $b);

Här kommer koden till createMenu() funktionen:

/**
 * Skapar en dynamisk menu som lägger till klassen active på aktiv länk
 * @param array $links -> array() med menylänkar
 * @param type $active -> $_GET['page']
 */
function createMenu($links, $active) {
    // initiera sträng som ska innehålla menyn
    $menu = '<ul>';

    // en foreach loop skapar menyn
    foreach ($links as $link) {
        $menu .= '<li class="menu-item';
        // ange klass för aktiv länk, eller ( || ) om $_GET['page'] inte har ett värde än så är man på hemsidan
        $menu .= ($active === $link || ($link === 'hem' && $active === NULL) ? ' active' : '');
        $menu .= '"><a href="?page=' . $link . '">' . ucfirst($link) . '</a></li>';
    }
    echo $menu . '</ul>';
}

…som används så här:

<nav class="main-menu">
    <?php
    // anropa funktionen med en array av dom länkar man vill ha 
    // och $page variabeln som vi deklarerade på toppen av sidan
    createMenu(array('hem', 'galleri', 'portfolio', 'kontakt'), $page);
    ?>
</nav>

Okej, det var allt för den här gången, och till nästa gång koda smart 😉

Leave a Comment

E-postadressen publiceras inte. Obligatoriska fält är märkta *

*
*