Övrigt Ramverk mini
Varför?
Vi vill ju spara arbete och med ett ramverk så bygger vi en struktur som ska göra att vi slipper återupprepa kod, vi har en ren logik. Fortsättningen skulle kunna bli ett MVC, Multi View Controller, ramverk. MVC är en speciell arkitektur hur ett ramverk ska byggas.
Kända ramverk som finns gratis att använda är Laravel, Symphony2, CodeIgnitor, Nette.
En undersökning på SitePoint visar lite statistik.
Vi bygger ett exempel som vi ska använda till redovisning av övningar och projekt
Börja med att skapa en mappstruktur enligt bilden, filerna kommer efterhand.
Lägg följande stilmallsfil i mappen style och döp den till stylesheet.css .
Det bör inte vara några konstigheter i den förutom den allra sista delen som vi återkommer till längst ner på denna sida.
Vår startsida "index.php" skulle kunna se ut så här:
<?php
// show all error reporting
error_reporting(-1); // Report all type of errors
ini_set('display_errors', 1); // Display all errors
ini_set('output_buffering', 0); // Do not buffer outputs, write directly
// time page generation, display in footer.
$pageTimeGeneration = microtime(true);
// useful constants
// useful functions
$title = "Webbserv1 :Start";
$pageId = "start";
$pageStyle = '
figure {
border-radius: 10px;
border-color:#333;
box-shadow: 10px 10px 5px #888;
}
';
?>
<!doctype html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title><?php echo $title; ?></title>
<link rel="stylesheet" href="style/stylesheet.css"
title="General stylesheet">
<link rel="shortcut icon" href="img/favicon_pb.png">
<!-- Each page can set $pageStyle to create additional style -->
<?php if(isset($pageStyle)) { ?>
<style>
<?php echo $pageStyle; ?>
</style>
<?php } ?>
</head>
<!-- The body id helps with highlighting current menu choice -->
<body<?php if(isset($pageId)) echo " id='$pageId' "; ?>>
<!-- header -->
<header id="top">
<span class="logga">Webbserverprogrammering 1</span>
<!-- navigation menu -->
<nav class="navmenu">
<a id="start-" href="index.php">Start</a>
<a id="comments-" href="comments.php">Reflektioner</a>
<a id="exercises-" href="exercises.php">Övningar</a>
<a id="viewsource-" href="viewsource.php">Källkod</a>
</nav>
</header>
<!-- sidans huvudinnehåll -->
<div id="content">
<article class="justify border">
<h1>Start</h1>
<figure class="right top">
<img src="img/jagohelge.jpg" alt="Per o helge">
<figcaption>
<p>Per med kompisen Helge</p>
</figcaption>
</figure>
<p>Hej och välkommen till Per's samlingssida i kursen
webbserverprogrammering 1.
</p>
</article>
</div>
<!-- footer -->
<footer id="bottom">
<p>Verktyg:
<a href="http://validator.w3.org/check/referer">HTML5</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>
<a href="http://validator.w3.org/unicorn/check?ucn_uri=referer&ucn_task=conformance">Unicorn</a>
<a href="viewsource.php">Källkod</a>
</p>
<?php if(isset($pageTimeGeneration)) { ?>
<p>Sidan skapades på <?php echo round(microtime(true)-$pageTimeGeneration, 5); ?> sekunder</p>
<?php } ?>
</footer>
</body>
</html>
Som ni ser så har jag lagt lite info i head-elementet i php-variabler. Dessa kommer skilja lite mellan olika sidor och därför vill vi sätta dessa i varje fil MEN vi ser att väldigt mycket kod kommer vara gemensam om vi fortsätter att skapa de övriga sidorna.
Först plockar vi ut php-kod som ska utföras direkt när sidan laddas in. Vi placerar det i filen config.php som placeras incl-mappen.
<?php
// show all error reporting
error_reporting(-1); // Report all type of errors
ini_set('display_errors', 1); // Display all errors
ini_set('output_buffering', 0); // Do not buffer outputs, write directly
// time page generation, display in footer.
$pageTimeGeneration = microtime(true);
// useful constants
// useful functions
Och iställer inkluderar vi filen i vår index.php.
<?php
include("incl/config.php");
Sen plockar vi starten av html-koden, inläsning av head-del och uppritning av navigeringsmenyn i body-delen. Vi placerar det i filen header.php som placeras incl-mappen.
<!doctype html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title><?php echo $title; ?></title>
<link rel="stylesheet" href="style/stylesheet.css"
title="General stylesheet">
<link rel="shortcut icon" href="img/favicon_pb.png">
<!-- Each page can set $pageStyle to create additional style -->
<?php if(isset($pageStyle)) { ?>
<style>
<?php echo $pageStyle; ?>
</style>
<?php } ?>
</head>
<!-- The body id helps with highlighting current menu choice -->
<body<?php if(isset($pageId)) echo " id='$pageId' "; ?>>
<!-- header -->
<header id="top">
<span class="logga">Webbserverprogrammering 1</span>
<!-- navigation menu -->
<nav class="navmenu">
<a id="start-" href="index.php">Start</a>
<a id="comments-" href="comments.php">Reflektioner</a>
<a id="exercises-" href="exercises.php">Övningar</a>
<a id="viewsource-" href="viewsource.php">Källkod</a>
</nav>
</header>
Så nu kommer startdelen index.php se ut på följande sätt. Variablerna kommer få värden innan header.php hämtas in och använder dessa variablr.
<?php
include("incl/config.php");
$title = "Webbserv1 :Start";
$pageId = "start";
$pageStyle = '
figure {
border-radius: 10px;
border-color:#333;
box-shadow: 10px 10px 5px #888;
}
';
?>
<?php include("incl/header.php"); ?>
Till slut plockar vi ut footer-delen. Vi placerar det i filen footer.php som placeras incl-mappen.
<!-- footer -->
<footer id="bottom">
<p>Verktyg:
<a href="http://validator.w3.org/check/referer">HTML5</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>
<a href="http://validator.w3.org/unicorn/check?ucn_uri=referer&ucn_task=conformance">Unicorn</a>
<a href="viewsource.php">Källkod</a>
</p>
<?php if(isset($pageTimeGeneration)) { ?>
<p>Sidan skapades på <?php echo round(microtime(true)-$pageTimeGeneration, 5); ?> sekunder</p>
<?php } ?>
</footer>
</body>
</html>
Och det gör att vår index.php nu avslutas med följande kodrad.
<?php include("incl/footer.php"); ?>
Slutligen ser den ut så här:
<?php
include("incl/config.php");
$title = "Webbserv1 :Start";
$pageId = "start";
$pageStyle = '
figure {
border-radius: 10px;
border-color:#333;
box-shadow: 10px 10px 5px #888;
}
';
?>
<?php include("incl/header.php"); ?>
<!-- sidans huvudinnehåll -->
<div id="content">
<article class="justify border">
<h1>Start</h1>
<figure class="right top">
<img src="img/jagohelge.jpg" alt="Per o helge">
<figcaption>
<p>Per med kompisen Helge</p>
</figcaption>
</figure>
<p>Hej och välkommen till Per's samlingssida i kursen
webbserverprogrammering 1.
</p>
</article>
</div>
<?php include("incl/footer.php"); ?>
Vill vi nu ha vår reflektionsida och övningsredovisningssida. När vi bygger dessa finns ju redan mycket kod att återanvända.
Lägg till filen source.php och viewsource.php i det du byggt så att vi kan se källkoden till php-filer.
"Highlighta" rätt menyalternativ
/* highlight current choice in navigation menu
--------------------------------------------------------
*/
body#start a#start-,
body#comments a#comments-,
body#exercises a#exercises-,
body#viewsource a#viewsource- {
background:rgba(255,255,255,1.0);border:2px solid #656565; color:#000;
}
Ett listigt sätt att markera en av flera menyalternativ är att allt ligger i stilmallen.
OM sidan innehåller en länk med id:et #start-" OCH id:et i body-taggen är "start" så så får länken med id:et #start-" dessa inställningar.
Det vill säga de andra länkarna där detta inte stämmer behäller sitt ursprungliga utseende.
Klickar vi på "Övningar" kommer vi till sidan med id:et "excercises" i body-taggen. Då ska menyalternativet med id:et "excercises-" få dessa inställningar medan övriga behåller sitt ursprungliga utseende.
Källor, referenser, bra länkar
Filen source.php kommer från Mikael Roos, mos@bth.se (Origin: http://github.com/mosbth/Utility, 150929)
Principles Of MVC for PHP Developers (http://www.htmlgoodies.com/beyond/php/article.php/3912211, 150929