Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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.

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

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

***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

*** 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>