Basic Website with Tina4


Tina4 uses Twig template engine, so creating a website is one of the easiest things you can do.
Start off by creating an index.twig file in the src/templates folder. If you hit up the default URL http://localhost:7145 then you will see a blank page.

You can then flesh out your index.twig file with valid HTML. The beauty of Twig is you can include other files, for example a header or footer. The example below illustrates this. 

<!DOCTYPE html>
<html lang="en">
{% include "snippets/header.twig" %}
{% include "snippets/body.twig" %}
{% include "snippets/footer.twig" %}
</html>

Here's an example of what you would include in your header twig file: 

<head>
    <title>Your Website Title</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- Stylesheet and Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/stylesheet.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

Now create a snippets folder inside the src/templates directory. Inside the snippets directory we can create our twig templates which we have included inside the index.php file (e.g. header,body,footer)

Here's an example of what you would include in your body twig file: 

<body>
<div class="container-fluid text-center">
    <div class="col-lg-12 col-sm-6 bg-dark text-white ">
        <h1>Welcome...</h1>
        <h1>This is my website</h1>
    </div>
    <div class="row">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-lg-6">
                    <h1>I made this with Tina4</h1>
                </div>
                <div class="col-sm-12 col-lg-6">
                    <h3>Its really easy</h3>
                    <p>Cant believe it!!!</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="container" >
            <div class="row justify-content-center">
                <div class="col-12 col-lg-7">
                    <h2 class="bg-dark text-white">About Us</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate faucibus tortor non sollicitudin. Cras ornare felis at sapien eleifend cursus. Sed ullamcorper placerat ex ullamcorper bibendum. Donec vitae metus non metus pulvinar porttitor id nec lacus. Quisque condimentum tortor nunc, id viverra nisl gravida sed. Praesent laoreet elementum placerat. Praesent elementum nunc quis efficitur porttitor. Cras mollis mattis ligula. Aliquam commodo enim arcu, ut sagittis dui finibus non. Maecenas ut arcu mauris.</p>
                </div>
                <div class="col-sm-12 col-lg-5">
                    <div class="bg-dark text-white mb-4">
                        <h4>Our products include:</h4>
                    </div>
                    <div class="col-lg-12 col-sm-6 p-0">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">Bacon</li>
                            <li class="list-group-item">Eggs</li>
                            <li class="list-group-item">Mushrooms</li>
                            <li class="list-group-item">Toast</li>
                            <li class="list-group-item">Coffee</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

Here's an example of what you would include in your footer twig file: 

<div class="row">
    <div class="col bg-dark text-white fixed-bottom text-center">
        <p class="foot">Copyright ©
            <script>document.write(new Date().getFullYear())</script>  <!-- gets current year -->
            Your Site. All Rights Reserved
        </p>
    </div>
</div>


Spin up a Web-Server and your page should look something like this as an example:



You have just created a landing page for your website using Tina4. Please feel free to reach out to the developers if you have any questions or suggestions.

Powered by ComboStrap