Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

PHP Building Websites with PHP Slim Basics & Twig Templates Layouts with Twig

Yaroslav Hata
Yaroslav Hata
3,066 Points
Posted by Yaroslav Hata
Yaroslav Hata
3,066 Points

Twig markup is not interprenting while using XAMPP

Hi, there! Please help with next issue. I'm using XAMPP (WAMP) as an analog of Workspace. And somewhy when opening "localhost/<project_name>/" page in Chrome, just text appearing. Without graphic and CSS, but with HTML justifying and active hyperlink. Also there are "{% extends "main.twig" %} {% block content %}" on the begining of it and "{% endblock content %}" in the end. Before Twig templating, project was runnig just like in video of this course.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

You have to post the code for any real help. Please post the composer.json, index.php, and main.twig. I suspect that you are running Slim 3.? and the course was designed with Slim 2.6. The new Slim release fundamentally changes how you access Twig through slim.

Yaroslav Hata
Yaroslav Hata
3,066 Points
Yaroslav Hata
Yaroslav Hata
3,066 Points

Ted, thanks a lot for response! Here are mentioed in your comment files. Whole project is in '.../htdocs/emerson'.

***composer.json:

{
    "name": "yarkopol/first-proj",
    "description": "My first Composer proj",
    "authors": [
        {
            "name": "Yarko",
            "email": "yarko@pol.com"
        }
    ],
    "require": {
        "monolog/monolog": "^1.17",
        "slim/slim": "^2.6",
        "twig/twig": "^1.22"
    }
}
Yaroslav Hata
Yaroslav Hata
3,066 Points
Yaroslav Hata
Yaroslav Hata
3,066 Points

***index.php

<html>
<head>
<title>PHP Test</title>
</head>
<body>
<?php 

require '/vendor/autoload.php';
date_default_timezone_set('Europe/Warsaw');

use Monolog\Logger;
use Monolog\Handler\StreamHandler;

$log = new Logger('name');
$log->pushHandler(new StreamHandler('app.log', Logger::WARNING));
$log->addWarning('Foo');

$app = new \Slim\Slim();

$app->get('/', function() use($app){
    $app->render('about.html');
});

$app->get('/contact', function() use($app){
    $app->render('contact.html');
});

$app->run();

?>

</body>
</html>
Yaroslav Hata
Yaroslav Hata
3,066 Points
Yaroslav Hata
Yaroslav Hata
3,066 Points

*** main.twig

<!doctype html>

<html lang="en">
<head>
    {% block head %}
      <meta charset="utf-8">
      <title>{% block title %}Ralph Waldo Emerson{% endblock title %}</title>
      <meta name="description" content="Ralph Waldo Emerson">
      <meta name="author" content="Treehouse">
      <link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" href="css/master.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src="js/global.js"></script>
    {% endblock %}
</head>

<body>
<!--
  <div id="feedback" class="success">
    <h3>Success!</h3>
    <p>You're reading all about Emerson.</p>
  </div>
-->


  <header>
    <h1>Ralph Waldo Emerson</h1>
    <nav>
      <a href="index.html" class="selected">About</a>
      <a href="contact.html">Contact</a>
    </nav>
  </header>

  <div class="emerson">
    {% block hero %}<img src="images/emerson.jpg" alt="Picture of Ralph Waldo Emerson">{% endblock hero %}
  </div>

  <main>
    {% block content %}
    {% endblock content %}
  </main>

  <footer>
    {% block footer %}
        <p>A project from <strong><a href="http://teamtreehouse.com">Treehouse</a></strong></p>
        <nav>
          <a href="index.html" class="selected">About</a>
          <a href="contact.html">Contact</a>
        </nav>
    {% endblock footer %}
  </footer>

</body>
</html>