Developing a Personal Tutor Web Application with PHP and Symfony

Setting Up the Basic Tutor Interface

Welcome to the first lesson of our course on developing a personal tutor web application with PHP and Symfony! In this lesson, we will focus on setting up a basic tutor interface using Symfony and HTML . This is an essential step in creating a user-friendly web application that enhances the learning experience. A well-designed interface is crucial for engaging students and ensuring they can interact with the tutor seamlessly.

Basic Tutor Interface Mockup

To help you better visualize the interface we're building, here's a simple mockup of how the tutor web page will look after following the steps in this lesson: text +------------------------------------------------------+ | Welcome to Your Personal Tutor | | What would you like to learn today? | +------------------------------------------------------+ | | | [Conversation appears here as messages] | | | | [User] Hello, can you help me with math? | | [Assistant] Sure thing! Let's get started with ... | | | +------------------------------------------------------+ | [ Type your question... ] | | [Send] [New Session] | +------------------------------------------------------+ The header is at the top, welcoming the user. The messages area is in the center, where the conversation between the student and tutor appears. At the bottom, there is an input field for typing questions, a Send button, and a New Session button.

HTML Rendering with PHP and Twig

Symfony is a powerful PHP framework that provides a comprehensive set of tools for building web applications. One of its key features is the Twig templating engine, which allows you to create dynamic HTML content efficiently. Twig is simple yet powerful, offering features like template inheritance, blocks, and macros. Twig allows you to: Insert dynamic PHP variables into HTML Use control structures like loops and conditionals Extend and include templates for reusable components Apply filters to modify variables during rendering By using Symfony with Twig, we can leverage Symfony's powerful routing and controller capabilities alongside Twig's efficient templating system for HTML generation. In this course, we will use static HTML templates to keep things straightforward. However, we will also explain how to set up Twig templates in case you want to switch to dynamic templating in the future.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

AppendMessage Function

To effectively display the conversation in our tutor interface, we use the appendMessage function. This function creates a new message element, assigns it a CSS class based on the message's origin (user or assistant), appends it to the conversation container, and ensures the view scrolls to the latest message.

Twig

<script>
    function appendMessage(role, content) {
        // Create a new div element for the message
        const messageDiv = document.createElement('div');
        
        // Assign a class to the message based on its role (user or assistant)
        messageDiv.className = `message ${role}`;
        
        // Set the text content of the message
        messageDiv.textContent = content;
        
        // Append the message to the messages container
        messagesContainer.appendChild(messageDiv);
        
        // Scroll the messages container to the bottom to show the latest message
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }
</script>

<script>
    function appendMessage(role, content) {
        // Create a new div element for the message
        const messageDiv = document.createElement('div');
        
        // Assign a class to the message based on its role (user or assistant)
        messageDiv.className = `message ${role}`;
        
        // Set the text content of the message
        messageDiv.textContent = content;
        
        // Append the message to the messages container
        messagesContainer.appendChild(messageDiv);
        
        // Scroll the messages container to the bottom to show the latest message
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }
</script>

The appendMessage function is crucial for dynamically adding messages to the tutor interface. It creates a new <div> element for each message, assigns a class to differentiate between student and tutor messages, and appends it to the messagesContainer. This function also ensures that the conversation view automatically scrolls to the bottom, keeping the latest messages in view.

Setting Up the Basic Tutor Interface

Basic Tutor Interface Mockup

HTML Rendering with PHP and Twig

Join the 1M+ learners on CodeSignal

Creating the Templates Directory

Setting Up Twig Templates in Symfony

HTML Structure and Header

Body and Header Section

Tutor Container and Input Elements

JavaScript for Interactivity

Initializing DOM Elements

StartNewSession Function

AppendMessage Function

SendQuery Function

Handling the Enter Key

Summary and Preparation for Practice