Home > front end >  Creating PHP method for declaring multiple CSS files
Creating PHP method for declaring multiple CSS files

Time:07-05

I am working through a PHP beginners book and going over all the exercises to ensure I fully understand before moving on and I am stuck as to why I can't get my method for CSS to work. I have created a method to enable me to declare two CSS files on one page (index.php). I'm not sure if this is best practice but I am a beginner so please bare with me and it is in my book so would like to know where I am going wrong.

Thank you in advance :)

This is my index.php where I call my addCSS function.

<?php
//this correctly outputs any errors 
error_reporting( E_ALL );
ini_set("display_errors", 1);

include_once "classes/Page_Data.class.php";
//creates a new object from our custom made class Page_Data which can be found in Page_Data.class.php
$pageData = new Page_Data();
$pageData->title = "Image gallery";
$pageData->content = include_once "views/navigation.php";
$pageData->addCSS = ('css/layout.css');
$pageData->addCSS = ('css/navigation.css');
                         

$navigationIsClicked = isset($_GET['page']);
if ($navigationIsClicked) {
    $fileToLoad = $_GET['page'];
}
    else {
        $fileToLoad = "gallery";
    }
    $pageData->content .= include_once "views/$fileToLoad.php";

$page = include_once "templates/page.php";
echo $page;

This is my Page_Data.class.php

<?php
class Page_Data {
    public $title = "";
    public $content = "";
    public $css = "";
    public $embeddedStyle = "";
    
    public function addCSS( $href ) {
        $this->css .= "<link href = '$href' rel='stylesheet' />";
    }
}

This is my page.php which is my master or template page.

<?php
return "<!DOCTYPE html>
<html>
<head>
<title>$pageData->title</title>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
$pageData->css
$pageData->embeddedStyle
</head>
<body>
$pageData->content
</body>
</html>";

navigation.css which is inside my css folder

nav a{
    text-decoration: none;
    color: black;
}

nav a:hover {
    text-decoration: underline;
}

layout.css which is inside my css folder

h1 {
    color: red;
}

CodePudding user response:

Let's review your code

  1. As a recommend, i would add a method for my PageData class and name it getCssLinks() maybe. getCssLinks will return css attribute. Now css cant be changed from outside of class like this and only changes in a legal way.
$pageData = new Page_Data();
$pageData->css = '<script>alert(\'hey i am here because css attribute is not protected\')';

so my Page_Data class will be like this

<?php
class Page_Data {
    public $title = "";
    public $content = "";
    protected $css = "";
    public $embeddedStyle = "";
    
    public function addCSS( $href ) {
        $this->css .= "<link href = '$href' rel='stylesheet' />";
    }

    public function getCssLinks()
    {
        return $this->css;
    }
}
  1. Now we need keep track of our css files. so we may store our css files in an array and let getCssLinks handle converting them to a valid html link.
<?php
class Page_Data {
    public $title = "";
    public $content = "";
    protected $cssLinks = [];
    public $embeddedStyle = "";
    
    public function addCSS( $href ) {
        $this->css [] = $href;
    }

    public function getCssLinks()
    {
        $htmlOutput = '';
        foreach($this->cssLinks as $cssLink) 
        {
            $htmlOutput .= "<link href = '$cssLink' rel='stylesheet' />";
        }

        return $htmlOutput;
    }
}

This will help us to know which css files included and with some helper we are able to remove css files from the list or add them.

  1. You also can do this for your content method. this keep your code more clean and maintainable. another advantage is you don't need to be worry about concating the content in your template.

  2. title and other attributes can have their own setter and getters.

public function setTitle($title) 
{
     $this->title = $title;
}

public function getTitle()
{
    return $this->title;
}
  1. It is good to name your class the way that RFC suggests. so PageData instead of Page_Data.

After all, the way that you have chosed to render a html templates and your concerns about best practices shows how careful you are and it is right. But always there is a long way. Keep going strong.

  • Related