Dynamische Websites. Week 9



Vergelijkbare documenten
Dynamische Websites. Week 10

Dynamische Websites. Week 6. vrijdag 25 oktober 13

Object Oriented Programming

Dynamische Websites. Week 2

MVC BASICS 2. Kevin Picalausa

Kleine cursus PHP5. Auteur: Raymond Moesker

Drupal theming. 28 april CVO Crescendo

Tentamen Object Georiënteerd Programmeren TI januari 2013, Afdeling SCT, Faculteit EWI, TU Delft

Hosting. Bestelformulier en domeinnaamcontrole. Januari, WeFact B.V. Kuiper 7a 5521 DG Eersel Nederland. w: e:

Les 12 : database koppeling, opmaken van template, webstructuur en afdrukken van gegevens. (deel2).

Extra voorbeelden. 1 Objectenhierarchie. 2 Kalender

Les 15 : updaten van gegevens in de database (deel2).

Dergelijke functionaliteit kunnen we zelf ook aan eigen code toevoegen.

Een website maken met databasetoegang.

Basis-theme. Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme >

IMP Uitwerking week 13

Handleiding Authenticatie

Exercise assistant on-line

Chris de Kok TDI 3. Vak: Software Architectuur Datum: Docent: Fons van Kesteren

Testondersteuning in frameworks voor webapplicaties

Een sjabloon (in PHP template genaamd) bevat de volledige

Datatypes Een datatype is de sort van van een waarde van een variabele, veel gebruikte datatypes zijn: String, int, Bool, char en double.

! GeoNetwork INSPIRE Atom!

ContentSearch. Deep dive

HTML in Outlook Hoe zorgt u ervoor dat uw goed in beeld komt?

Handleiding Woonz.nl iframe


Formulier maken en opvangen met php

Uitwerkingen derde deeltentamen Gameprogrammeren Vrijdag 6 november 2015, uur

Zonnepanelen Hoe krijg je de data op je website?

Project Embedded Linux Domaza. Elektronica-ICT. Dimitri Kozakiewiez Jonas Govaerts. Academiejaar

Hand-out Introduction to Programming, werkcollege 7 Alex Reuneker 2013

Formulieren en waarden posten naar een view

Formulieren maken met Dreamweaver CS 4/CS 5

Verder zijn er de nodige websites waarbij voorbeelden van objectgeoriënteerd PHP (of Objec Oriented PHP, OO PHP) te vinden zijn.

Externe pagina s integreren in InSite en OutSite

Inhoud. Pagina 2 van 13

Een unit test is geen integratie test. Niet het hele systeem, maar onderdelen van een systeem worden getest.

Tweede deeltentamen Gameprogrammeren Vrijdag 17 oktober 2014, uur

Maak een pivot uit een Generic.List

Inleiding Software Engineering! Unit Testing, Contracten, Debugger! 13 Februari 2014!

TaskCentre Web Service Connector: Creëren van requests in Synergy Enterprise

Datastructuren Werkcollege Intro

Project network. Gebaseerd op paragrafen , uit het boek. We simuleren een sociaal netwerk

Het toepassen van een gelaagde architectuur

AJAX (XMLHttpRequest)

Handleiding RS Form! 1.0.4

What is the advantage of using expression language instead of JSP scriptlets and JSP expressions?

Universiteit van Amsterdam FNWI. Voorbeeld van tussentoets Inleiding programmeren

Lichtgewicht CSS design voor Drupal 6

Websitecursus deel 1 HTML

Vakgroep CW KAHO Sint-Lieven

Hoofdstuk 1: Inleiding. Hoofdstuk 2: Klassen en objecten Datahiding: afschermen van implementatiedetails. Naar de buitenwereld toe enkel interfaces.

NBTC html wijzigingen juni

Javascript oefenblad 1

MARTINA. Wist je dat..? Truckjes en weetjes in Drupal Artikels, lengte en aantal op frontpagina (en welkomtekst zonder lees meer )

Zo kan je linken maken tussen je verschillende groepen van gegevens.

Aanvullende toets Gameprogrammeren Woensdag 5 januari 2011, uur

Uitwerking Aanvullend tentamen Imperatief programmeren Woensdag 24 december 2014, uur

SEO plan. Bart Janssen Semester 4 Fontys ICT & Media Design

Formulieren maken met Dreamweaver CS 4

ASP.NET Test Jan Van Ryckeghem

Introductie en even voorstellen

APPLICATIEBOUW 3E COLLEGE: OBJECT GEORIËNTEERD PROGRAMMEREN, METHODEN, PARAMETERS, SCOPE VAN VARIABELEN. Onderdeel van SmartProducts

Programmeren voor het web met PHP

HTML. inhoud structuur semantiek. HTML5 & semantiek of betekenis. semantisch coderen. Semantisch coderen: waarom? 3/09/2016

Overerving & Polymorfisme

Template maken voor Webshops van FreeWebShop

Contactformulier...74 Gebruikers...77 Login...78 Registratie...79 Gebruikersnaam vergeten en wachtwoord vergeten...81 Module stijlen bepalen en

Zelftest Programmeren in Java

et Zend Framework bestaat volledig uit objectgeoriënteerde

SQL INJECTIE Door Eoghain Verdonckt Beveiliging december 2013


Nieuws & RSS in DotNetNuke

INFITT01 - Internettechnologie WEEK 8

Tentamen Object Georiënteerd Programmeren TI oktober 2014, Afdeling SCT, Faculteit EWI, TU Delft

CBSOData Documentation

Hoofdstuk 1 Inleiding PHP 7 of ouder Hoe dit boek werkt 2

Drupal 7 tip: voeg overal contextual links toe Gepubliceerd op Dominique De Cooman (

Programmeren in C# Interfaces. Hoofdstuk 23

Hoe bouw ik een component? Drs. Arjan Burger

Website beoordeling proplantdesign.com

Agenda. Wat is HTML? Meer over HTML... Waarom HTML leren? Aniel Bhulai. Inleiding Computergebruik - HTML 1. Waarin maak je een HTML-bestand?

2.ouderbeleid.3.plaatsingsprocedure werk admini Pagina 1 van 14

Inleiding C++ Coding Conventions

Programmeermethoden. Recursie. week 11: november kosterswa/pm/

Excel Controller. Handleiding Excel Controller Wizard

General info on using shopping carts with Ingenico epayments

HTML5 overzicht Tag Uitleg Versie Attributen

Modelleren en Programmeren

Joomla! Modules. Iedereen kan ze maken!

Website beoordeling facebook.com

Controllers, actions en views

Programmeren in C# Samenvatting van C#

Examen Programmeren 2e Bachelor Elektrotechniek en Computerwetenschappen Faculteit Ingenieurswetenschappen Academiejaar juni, 2010

DATA BINDING Hans Gruyaert en Rogier van der Linde

Programmeermethoden. Pointers. Walter Kosters. week 10: november kosterswa/pm/

Contents. Introduction Problem Definition The Application Co-operation operation and User friendliness Design Implementation

Voor vragen: of mail naar

Transcriptie:

Dynamische Websites Week 9

AGENDA Nut van een framework? Relatieve URLs Views Slicing 2 step design

NUT VAN EEN FRAMEWORK? Heel veel code is voor jullie al geschreven, jullie moeten deze op de juiste plaatsen kunnen gebruiken en aanroepen. System folder kan je in verschillende projecten herbruiken Application folder daar komt de specifieke functionaliteit van je project telkens in

AGENDA Nut van een framework? Relatieve URLs Views Slicing 2 step design

CATEGORY_DETAIL.PHP <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>dynamische Websites</title> <link href="/2013/lessons/theorie08_template/frontcontroller_uitbreiding_category/application/css/bootstrap.css" rel= <link href="/2013/lessons/theorie08_template/frontcontroller_uitbreiding_category/application/css/eigenstijl.css" rel=" <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">vehicles example</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class=""><a href="/2013/lessons/theorie08_template/frontcontroller_uitbreiding_category/home">hom <li class=""><a href="/2013/lessons/theorie08_template/frontcontroller_uitbreiding_category/home/display <li class=""><a href="/2013/lessons/theorie08_template/frontcontroller_uitbreiding_category/vehicle/index <li class=""><a href="/2013/lessons/theorie08_template/frontcontroller_uitbreiding_category/category/ind </ul> </div> </div> </div> </head>

VEHICLE_DETAIL.PHP <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>dynamische Websites</title> <link href="/2013/lessons/theorie08_template/frontcontroller_uitbreiding_category/application/css/bootstrap.css" rel= <link href="/2013/lessons/theorie08_template/frontcontroller_uitbreiding_category/application/css/eigenstijl.css" rel=" <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">vehicles example</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class=""><a href="/2013/lessons/theorie08_template/frontcontroller_uitbreiding_category/home">hom <li class=""><a href="/2013/lessons/theorie08_template/frontcontroller_uitbreiding_category/home/display <li class=""><a href="/2013/lessons/theorie08_template/frontcontroller_uitbreiding_category/vehicle/index <li class=""><a href="/2013/lessons/theorie08_template/frontcontroller_uitbreiding_category/category/ind </ul> </div> </div> </div> </head>

URLS Wat als het path nu verandert? Overal aanpassen???

CATEGORY_DETAIL.PHP <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>dynamische Websites</title> <link href="<?php echo baseurl('/application/css/bootstrap.css');?>" rel="stylesheet" /> <link href="<?php echo baseurl('/application/css/eigenstijl.css');?>" rel="stylesheet" /> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">vehicles example</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class=""><a href="<?php echo baseurl('home');?>">home</a></li> <li class=""><a href="<?php echo baseurl('home/display/dynweb');?>">display</a></li> <li class=""><a href="<?php echo baseurl('vehicle/index');?>">vehicle</a></li> <li class=""><a href="<?php echo baseurl('category/index');?>">category</a></li> </ul> </div> </div> </div> </head>

VIEWHELPERS.PHP <?php function baseurl($uri = '') { return str_replace('index.php', '', $_SERVER['SCRIPT_NAME']). $uri;... $_SERVER[ SCRIPT_NAME ] = /2013/lessons/theorie08_template/frontcontroller_uitbreiding_category $uri = /application/css/bootstrap.css return geeft /2013/lessons/theorie08_template/ frontcontroller_uitbreiding_category/application/css/bootstrap.css

NAVBAR.PHP <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbarcollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">vehicles Example</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <?php foreach ($this->menuitems as $menuitem):?> <li class="<?php echo ($menuitem['link'] == getcurrentpath())? 'active' : '';?>"><a href="<?php echo baseurl($menuitem['link']);?>"><?php echo $menuitem['description'];?></a></li> <?php endforeach;?> </ul> </div> </div> </div>

VIEWHELPERS.PHP <?php function getcurrentpath() { $path = substr($_server['request_uri'], strlen(dirname($_server['script_name'])) + 1); $path = trim($path, '/'); // if no scriptfile in de request_uri, we assume index.php is called $path = ($path)? $path : 'index.php'; return $path;...

HTML VAN NAVBAR <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">vehicles Example</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="/2013/lessons/theorie08_template/ 2stepdesign_stap03/home">home</a></li> <li class=""><a href="/2013/lessons/theorie08_template/ 2stepdesign_stap03/home/display/dynweb">display</a></li> <li class=""><a href="/2013/lessons/theorie08_template/ 2stepdesign_stap03/vehicle">vehicles</a></li> <li class=""><a href="/2013/lessons/theorie08_template/ 2stepdesign_stap03/category">categories</a></li> </ul> </div> </div> </div>

RELATIEVE URLS Zie dynweb2013examples/svn/theorie09/ RelatieveURLs/ frontcontroller_uitbreiding_relatieve_urls

AGENDA Nut van een framework? Relatieve URLs Views Slicing 2 step design

VIEWS In een view staat alles header, footer,... Tot nu toe hebben we de views via require_once binnen gehaald of getoond

VOORBEELD Footer in Vehicles voorbeeld

HOME.PHP <!DOCTYPE html> <html lang="en"> <head>... </head> <body>... <footer> <p>questions? <a href="mailto:elke.steegmans@khleuven.be">elke Steegmans</a> or <a href="mailto:kurt.beheydt@khleuven.be">kurt Beheydt</a> </p> </footer> </div> </body> </html>

DISPLAY.PHP <!DOCTYPE html> <html lang="en"> <head>... </head> <body>... <footer> <p>questions? <a href="mailto:elke.steegmans@khleuven.be">elke Steegmans</a> or <a href="mailto:kurt.beheydt@khleuven.be">kurt Beheydt</a> </p> </footer> </div> </body> </html>

VEHICLE_OVERVIEW.PHP <!DOCTYPE html> <html lang="en"> <head>... </head> <body>... <footer> <p>questions? <a href="mailto:elke.steegmans@khleuven.be">elke Steegmans</a> or <a href="mailto:kurt.beheydt@khleuven.be">kurt Beheydt</a> </p> </footer> </div> </body> </html>

VOORBEELD Uitbreiding We zijn vergeten om mevrouw Kemme ook toe te voegen als contactpersoon Probleem In alle view files moeten we nu de footer aanpassen heel veel dubbele code

AGENDA Nut van een framework? Relatieve URLs Views Slicing 2 step design

SLICING view <html> <head>... </head> <body> <div id="menu"> </div> </body> </html> heading.php navbar.php main.php footer.php OK?

SIMPEL VOORBEELD Simpele home pagina met een menubar, header, footer en inhoud Zie dynweb2013examples/svn/ theorie09/2stepdesign/slicing_simple_example

HOME_VIEW.PHP <?php require_once('layout_header.php');?> <?php require_once('layout_navbar.php');?> <h1>sliced theme</h1> <div class="row"> <div class="span12"> <h3>welcome to this sliced example.</h3> </div> </div> <hr> <?php require_once('layout_footer.php');?>

LAYOUT_HEADER.PHP <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title><?php echo $title;?></title> <link href="css/bootstrap.css" rel="stylesheet" /> <link href="css/eigenstijl.css" rel="stylesheet" /> </head> <body>

LAYOUT_NAVBAR.PHP <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">slicing Example</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class=""><a href="#">home</a></li> <li class=""><a href="#">item 1</a></li> <li class=""><a href="#">item 2</a></li> <li class=""><a href="#">item 3</a></li> </ul> </div> </div> </div> <div class="container">

LAYOUT_FOOTER.PHP <footer> <p>questions? <a href="mailto:elke.steegmans@khleuven.be"> Elke Steegmans</a> or <a href="mailto:mieke.kemme@khleuven.be"> Mieke Kemme</a> or <a href="mailto:kurt.beheydt@khleuven.be"> Kurt Beheydt</a> </p> </footer> </div> </body> </html>

SLICING Probleem indien we de layout_navbar.php eruit laten invalid HTML-pagina pagina s op zich zijn niet herbruikbaar NOK!

Front controller Relatieve URLs Views Slicing 2 step design AGENDA

PUZZEL- FRAME 2 STEP DESIGN layout partials view PUZZEL- STUKJES default.php <html> <head>... </head> <body> header.php view navbar.php <div class="container"> footer.php view view.php view </div> </body> </html> view OK?

2 STEP DESIGN Stap 1 logische view opbouwen puzzelframe en alle puzzelstukjes klaar leggen Stap 2 HTML genereren op basis van de puzzel (= puzzelframe en puzzelstukjes) nu de HTML genereren

2 STEP DESIGN - STAP 1 SIMPEL VOORBEELD Simpele home pagina met een menubar, header, footer en inhoud Zie dynweb2013examples/svn/ theorie09/2stepdesign/ 2stepdesign_simple_example

DEFAULT.PHP <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <?php require_once('partial_header.php');?> <?php require_once('partial_navbar.php');?> </head> <body> <div class="container"> <?php require_once( home_view.php );?> <?php require_once('partial_footer.php');?> </div> </body> </html>

PARTIAL_HEADER.PHP <title><?php echo $title;?></title> <link href="css/bootstrap.css" rel="stylesheet" /> <link href="css/eigenstijl.css" rel="stylesheet" />

PARTIAL_NAVBAR.PHP <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">slicing Example</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class=""><a href="#">home</a></li> <li class=""><a href="#">item 1</a></li> <li class=""><a href="#">item 2</a></li> <li class=""><a href="#">item 3</a></li> </ul> </div> </div> </div>

HOME_VIEW.PHP <h1>two step design pattern</h1> <p>welcome to this two step design pattern example.</p>

PARTIAL_FOOTER.PHP <footer> <p>questions? <a href="mailto:elke.steegmans@khleuven.be">elke Steegmans</a> or <a href="mailto:mieke.kemme@khleuven.be">mieke Kemme</a> or <a href="mailto:kurt.beheydt@khleuven.be">kurt Beheydt</a> </p> </footer>

2 STEP DESIGN - STAP 1 SIMPEL VOORBEELD Elk stukje van de view is een op zich staand stuk code en kan herbruikt worden in andere voorbeelden probleem van Slicing is weggewerkt hierdoor OK!

2 STEP DESIGN - STAP 1 VEHICLE VOORBEELD Op elke pagina zijn de volgende HTML stukken niet hetzelfde het grootste gedeelte van de body de header waar de titel verschillend is de navbar waar de active URL telkens verschillend is

2 STEP DESIGN - STAP 1 VEHICLE VOORBEELD Voorbeeld u0034562.webontwerp.khleuven.be/ theorie09/2stepdesign/2stepdesign_stap00/ vehicle/index Zie dynweb2013examples/svn/ theorie09/2stepdesign/2stepdesign_stap00

INDEX.PHP <?php session_start(); define('application_path', 'application/'); define('system_path', 'system/'); require_once(application_path. 'config.php'); require_once(system_path. 'model/db.php'); require_once(system_path. 'controller/controller.php'); require_once(system_path. 'view/viewhelpers.php'); $controller = new Controller(); $controller->run(); Code Onveranderd

CONTROLLER.PHP <?php class Controller { private function parseuri() { $scriptprefix = str_replace(self::controller_file, '', $_SERVER['SCRIPT_NAME']); $uri = str_replace(self::controller_file, '', $_SERVER['REQUEST_URI']); $path = substr($uri, strlen($scriptprefix)); $path = preg_replace('/[^a-za-z0-9]\//', "", $path); $path = trim($path, '/'); @list($controller, $action, $params) = explode("/", $path, 3); if (isset($controller)) { $this->setcontroller($controller); if (isset($action)) { $this->setaction($action); if (isset($params)) { $this->setparams(explode("/", $params)); Code Onveranderd

CONTROLLER.PHP... public function run() { // checking the parameter count, using Reflection (http://www.php.net/reflection) $reflector = new ReflectionClass($this->controller); $method = $reflector->getmethod($this->action); $parameters = $method->getnumberofrequiredparameters(); if (($parameters) > count($this->params)) { die("action '$this->action' in class '$this->controller' expects $parameters mandatory parameter(s), you only provided ". count($this->params). "."); // create an instance of the controller as an object $controller = new $this->controller(); // call the method based on $this->action and the params call_user_func_array(array($controller, $this->action), $this->params); Code Onveranderd

VEHICLECONTROLLER.PHP <?php require_once(system_path. 'view/template.php'); class VehicleController { private $_vehiclemapper; private $_template; private $_view; private $_pagetitle; private $_menuitems; private $_text; public function construct () { require_once(application_path. 'model/vehiclemapper.php'); $this->_vehiclemapper = new VehicleMapper();

VEHICLECONTROLLER.PHP... public function index() { $this->_view = 'vehicle_overview.php'; $this->_pagetitle = 'Vehicles'; $menumapper = new MenuMapper(); $this->_menuitems = $menumapper->getmenuitems(); $this->_object = $this->_vehiclemapper->getall(); require_once(application_path. 'view/default.php');...

MENUMAPPER.PHP <?php class MenuMapper { public function getmenuitems() { $menuitems = array( array( 'link' => 'home', 'description' => 'home', ), array( 'link' => 'home/display/dynweb', 'description' => 'display', ), array( 'link' => 'vehicle', 'description' => 'vehicles', ), ); return $menuitems;

VEHICLEMAPPER.PHP <?php require_once(system_path. 'model/db.php'); require_once(application_path. 'model/vehicle.php'); class VehicleMapper { private $_db; public function construct() { $this->_db = Db::getInstance(); public function add($object) {... public function getall() { $query = " SELECT * FROM vehicles "; return $this->_db->queryone($query, 'Vehicle'); public function get($id) {... Code Onveranderd

DEFAULT.PHP <!DOCTYPE html> <html lang="en"> <head> <?php require_once('headermeta.php');?> </head> <body> <?php require_once('navbar.php');?> <div class="container"> <h1><?php echo $this->_pagetitle;?></h1> <?php require_once("$this->_view");?> <hr> <?php require_once('footer.php');?> </div> </body> </html>

HEADERMETA.PHP <meta charset="utf-8"> <title><?php echo $this->_pagetitle;?></title> <link href="<?php echo baseurl('css/bootstrap.css');?>" rel="stylesheet"> <link href="<?php echo baseurl('css/eigenstijl.css');?>" rel="stylesheet">

2 STEP DESIGN - STAP 1 PUZZEL- FRAME SAMENVATTING layout partials view PUZZEL- STUKJES default.php <html> <head>... </head> <body> header.php view navbar.php <div class="container"> footer.php view view.php view </div> </body> </html> view

2 STEP DESIGN REFACTORING STAP 1 Probleem 1 Stel dat we de default.php file anders willen noemen => op heel veel plaatsen nu code aanpassen We willen een klasse die we in andere projecten ook kunnen gebruiken om views mee op te bouwen

2 STEP DESIGN REFACTORING STAP 1 Probleem 2 Eigenlijk ook geen 2 step design op dit moment je neemt je puzzel, dan begin je al HTML te maken, dan leg je het eerste puzzelstukje erin, en maak je verder HTML, en zo ga je verder voor ieder puzzelstukje

2 STEP DESIGN REFACTORING STAP 1 Oplossing Template klasse hier de 2 stappen in implementeren en herbruikbaarheid eerst partials en view zetten (eerst puzzelframe en puzzelstukjes maken) daarna renderen van volledige HTML (daarna HTML renderen van volledige puzzel ( = puzzelframe + puzzelstukjes))

2 STEP DESIGN PUZZEL- FRAME REFACTORING STAP 1 layout partials view PUZZEL- STUKJES default.php <html> <head>... </head> <body> <div class="container"> header.php view navbar.php view footer.php view.php view </div> </body> </html> view

2 STEP DESIGN - STAP 1+2 VEHICLE VOORBEELD Toon het overzicht van alle vehicles die tot nu toe in de DB zitten vehicle/index Zie dynweb2013examples/svn/ theorie09/2stepdesign_stap01

INDEX.PHP <?php session_start(); define('application_path', 'application/'); define('system_path', 'system/'); require_once(application_path. 'config.php'); require_once(system_path. 'model/db.php'); require_once(system_path. 'controller/controller.php'); require_once(system_path. 'view/viewhelpers.php'); $controller = new Controller(); $controller->run(); Code Onveranderd

CONTROLLER.PHP <?php class Controller { private function parseuri() { $scriptprefix = str_replace(self::controller_file, '', $_SERVER['SCRIPT_NAME']); $uri = str_replace(self::controller_file, '', $_SERVER['REQUEST_URI']); $path = substr($uri, strlen($scriptprefix)); $path = preg_replace('/[^a-za-z0-9]\//', "", $path); $path = trim($path, '/'); @list($controller, $action, $params) = explode("/", $path, 3); if (isset($controller)) { $this->setcontroller($controller); if (isset($action)) { $this->setaction($action); if (isset($params)) { $this->setparams(explode("/", $params)); Code Onveranderd

CONTROLLER.PHP... public function run() { // checking the parameter count, using Reflection (http://www.php.net/reflection) $reflector = new ReflectionClass($this->controller); $method = $reflector->getmethod($this->action); $parameters = $method->getnumberofrequiredparameters(); if (($parameters) > count($this->params)) { die("action '$this->action' in class '$this->controller' expects $parameters mandatory parameter(s), you only provided ". count($this->params). "."); // create an instance of the controller as an object $controller = new $this->controller(); // call the method based on $this->action and the params call_user_func_array(array($controller, $this->action), $this->params); Code Onveranderd

VEHICLECONTROLLER.PHP <?php require_once(system_path. 'view/template.php'); require_once(application_path. 'model/menumapper.php'); class VehicleController { private $_vehiclemapper; private $_template; public function construct () { $this->_template = new Template(); $menumapper = new MenuMapper(); $this->_template->menuitems = $menumapper->getmenuitems(); $this->_template->setpartial('navbar'); $this->_template->setpartial('headermeta'); $this->_template->setpartial('footer'); require_once(application_path. 'model/vehiclemapper.php'); $this->_vehiclemapper = new VehicleMapper();

<?php class Template { TEMPLATE.PHP const TEMPLATE_PATH = 'application/view/'; const LAYOUT_FOLDER = 'layouts/'; const PARTIALS_FOLDER = 'partials/'; protected $data = array(); protected $content = array(); protected $partials = array(); protected $layoutfile; private $pagetitle; $this->layoutfile = application/view/layouts/default.php // on instantiation: check the layoutfile public function construct($layoutfile = 'default') { $layoutfile = self::layout_folder. $this->addextension($layoutfile); if (file_exists(self::template_path. $layoutfile)) { $this->layoutfile = self::template_path. $layoutfile; else { error_log("not found: $layoutfile"); exit;

VEHICLECONTROLLER.PHP <?php require_once(system_path. 'view/template.php'); require_once(application_path. 'model/menumapper.php'); class VehicleController { private $_vehiclemapper; private $_template; public function construct () { $this->_template = new Template(); $menumapper = new MenuMapper(); $this->_template->menuitems = $menumapper->getmenuitems(); $this->_template->setpartial('navbar'); $this->_template->setpartial('headermeta'); $this->_template->setpartial('footer'); require_once(application_path. 'model/vehiclemapper.php'); $this->_vehiclemapper = new VehicleMapper();

MENUMAPPER.PHP <?php class MenuMapper { public function getmenuitems() { $menuitems = array( array( 'link' => 'home', 'description' => 'home', ), array( 'link' => 'home/display/dynweb', 'description' => 'display', ), array( 'link' => 'vehicle', 'description' => 'vehicles', ), ); return $menuitems;

VEHICLECONTROLLER.PHP <?php require_once(system_path. 'view/template.php'); require_once(application_path. 'model/menumapper.php'); class VehicleController { private $_vehiclemapper; private $_template; public function construct () { $this->_template = new Template(); $menumapper = new MenuMapper(); $this->_template->menuitems = $menumapper->getmenuitems(); $this->_template->setpartial('navbar'); $this->_template->setpartial('headermeta'); $this->_template->setpartial('footer'); require_once(application_path. 'model/vehiclemapper.php'); $this->_vehiclemapper = new VehicleMapper();

TEMPLATE.PHP <?php class Template {... $this->data[ menuitems ] = array die getmenuitems methode van MenuMapper klasse teruggeeft // automatic getter and setter, remapping every value to the protected attribute // read more about this on www.php.net/manual/en/language.oop5.overloading.php public function set($name, $value) { $this->data[$name] = $value;

VEHICLECONTROLLER.PHP <?php require_once(system_path. 'view/template.php'); require_once(application_path. 'model/menumapper.php'); class VehicleController { private $_vehiclemapper; private $_template; public function construct () { $this->_template = new Template(); $menumapper = new MenuMapper(); $this->_template->menuitems = $menumapper->getmenuitems(); $this->_template->setpartial('navbar'); $this->_template->setpartial('headermeta') $this->_template->setpartial('footer'); require_once(application_path. 'model/vehiclemapper.php'); $this->_vehiclemapper = new VehicleMapper();

TEMPLATE.PHP // helper to generate a partial public function setpartial($partialname, $partialfile = '') { // if $partialfile is not set, use the partialname as filename $partialfile = ($partialfile)? $partialfile : $partialname; $partialfile = self::template_path. self::partials_folder. $this->addextension($partialfile); if (file_exists($partialfile)) { $this->partials[$partialname] = $partialfile; else { error_log("not found: $partialfile"); exit; return $this; $this->partials = array { navbar => application/view/partials/navbar.php headermeta => application/view/partials/headermeta.php footer => application/view/partials/footer.php

VEHICLECONTROLLER.PHP... public function index() { $this->_template->_vehicles = $this->_vehiclemapper->getall(); $this->_template->setpagetitle('vehicles'); $this->_template->render('vehicle_overview');...

TEMPLATE.PHP public function setpagetitle($title) { $this->pagetitle = $title; $this->pagetitle = Vehicles

VEHICLECONTROLLER.PHP... public function index() { $this->_template->_object = $this->_vehiclemapper->getall(); $this->_template->setpagetitle('vehicles'); $this->_template->render('vehicle_overview');...

TEMPLATE.PHP // render the main content of the site // while rendering the layout, render the partials as well public function render($templatefile) { $templatefile = $this->addextension($templatefile); if (file_exists(self::template_path. $templatefile)) { $this->content = $this->renderview(self::template_path. $templatefile); else { error_log("not found: $templatefile"); exit; $this->renderlayout(); $this->content = volledige HTML van vehicle_overview als een string

TEMPLATE.PHP private function renderview($view) { ob_start(); include($view); $data = ob_get_contents(); ob_end_clean(); return $data; deze functie maakt een buffer in waar char per char inkomt en dus waar uiteindelijk 1 grote string in zit (de view die we meegeven als parameter)

TEMPLATE.PHP // render the main content of the site // while rendering the layout, render the partials as well public function render($templatefile) { $templatefile = $this->addextension($templatefile); if (file_exists(self::template_path. $templatefile)) { $this->content = $this->renderview(self::template_path. $templatefile); else { error_log("not found: $templatefile"); exit; $this->renderlayout();

TEMPLATE.PHP public function renderlayout() { include($this->layoutfile); $this->layoutfile = application/view/layouts/default.php dit haalt default.php binnen en gaat dit lijn per lijn uitvoeren

DEFAULT.PHP <!DOCTYPE html> <html lang="en"> <head> <?php $this->renderpartial('headermeta');?> </head> <body> <?php $this->renderpartial('navbar');?> <div class="container"> <h1><?php echo $this->getpagetitle();?></h1> <?php $this->getcontent();?> <hr> <?php $this->renderpartial('footer');?> </div> </body> </html>

TEMPLATE.PHP public function renderpartial($name) { if (array_key_exists($name, $this->partials)) { echo $this->renderview($this->partials[$name]); else { error_log("partial not rendered: $name"); print de inhoud van headermeta, dan van navbar,...

2 STEP DESIGN - STAP 1+2 SAMENVATTING Template klasse stap 1: eerst wordt het puzzelframe en de puzzelstukjes gezet puzzelframe: default.php puzzelstukjes: header.php, navbar.php, view.php en footer.php stap 2: dan wordt de HTML pas gerenderd (dus de HTML wordt in 1 keer gerenderd als de puzzel klaar is)

2 STEP DESIGN - STAP 1+2 UITBREIDING Uitbreiding zorg er ook voor dat je het overzicht van alle categorieen kunt zien Zie dynweb2013examples/svn/ theorie09/2stepdesign_stap02_uitbreiding_category

2 STEP DESIGN - STAP 1+2 NOG VERDERE REFACTORING Probleem veel dubbele code refactoren door super klasse van Controller klassen te maken Zie dynweb2013examples/svn/ theorie09/2stepdesign_stap03

2 STEP DESIGN - STAP 1+2 NOG VERDERE REFACTORING Oplossing Controller klasse noemt nu FrontController klasse Superklasse van HomeController, VehicleController,... gemaakt noemt Controller klasse

FRONTCONTROLLER.PHP <?php class FrontController { private function parseuri() { $scriptprefix = str_replace(self::controller_file, '', $_SERVER['SCRIPT_NAME']); $uri = str_replace(self::controller_file, '', $_SERVER['REQUEST_URI']); $path = substr($uri, strlen($scriptprefix)); $path = preg_replace('/[^a-za-z0-9]\//', "", $path); $path = trim($path, '/'); @list($controller, $action, $params) = explode("/", $path, 3); if (isset($controller)) { $this->setcontroller($controller); if (isset($action)) { $this->setaction($action); if (isset($params)) { $this->setparams(explode("/", $params));

FRONTCONTROLLER.PHP... public function run() { // checking the parameter count, using Reflection (http://www.php.net/reflection) $reflector = new ReflectionClass($this->controller); $method = $reflector->getmethod($this->action); $parameters = $method->getnumberofrequiredparameters(); if (($parameters) > count($this->params)) { die("action '$this->action' in class '$this->controller' expects $parameters mandatory parameter(s), you only provided ". count($this->params). "."); // create an instance of the controller as an object $controller = new $this->controller(); // call the method based on $this->action and the params call_user_func_array(array($controller, $this->action), $this->params);

CONTROLLER.PHP <?php require_once(system_path. 'view/template.php'); require_once(application_path. 'model/menumapper.php'); class Controller { protected $_template; public function construct () { $this->_template = new Template(); $menumapper = new MenuMapper(); $this->_template->menuitems = $menumapper->getmenuitems(); // method chaining in php. http://www.php.net/manual/en/language.references.return.php#78123 $this->_template->setpartial('navbar') ->setpartial('headermeta') ->setpartial('footer');

HOMECONTROLLER.PHP <?php require_once(system_path. 'controller/controller.php'); class HomeController extends Controller { public function construct () { parent:: construct(); public function index() { $this->_template->setpagetitle('welcome to controller home, action index'); $this->_template->render('home'); public function display($text = 'no text') { $this->_template->setpagetitle('welcome to controller home, action display'); $this->_template->text = $text; $this->_template->render('home_display');

AGENDA Nut van een framework? Relatieve URLs Views Slicing 2 step design?

LABO Kopieer de laatste versie van de system folder naar je eigen project Refactor de rest van je project (je application folder) zodat je geen dubbele code in je views hebt en werk volgens het 2 step design patroon begin met player_overview