In order to complete the project, these are the list of technologies used and the purposes

they served
 Twig: a powerful template engine in symfony used to render content
 CSS: style sheets used in restructuring the website and adding beauty to it
 Symfony:Symfony is a good all-purpose PHP framework. It is very configurable,
has great features, and provides tons of plug-ins to ease development
 Bootstrap:
 Revolution js
 Custom JavaScript: scripts like fancy js, mail function js, masonry,isotope Effect
Js and imagesloaded Js. All used to make the site more dynamic and animated.
 MYSQL databases: Used to store site information
 GIT: Used for version control and committing changes to the cloud
 Swift Mailer: Connecting the App to a mailing service
 Material design admin dashboard template
 cleanix front end template.

2: Description of the project

The project task was to develop a business website with symfony( a PHP framework).
As a business website, it has to be able to easily communicate the business to visitors
and find a way of easily engaging them. The project required a responsive fast loading
site, since some of its users will be using a mobile device. To tackle this problem the
project sought for a solution using the PHP framework.

3:these are the various problems or milestones that the project solved.
 Easy navigable site
 responsive site
 contact form to engage with visitors.
 Blog section with updates from a dashboard
 A list of all the mails sent through the contact form
 flash messages to inform visitors of any ongoing promotion
 light weight site that loads faster even on slow internet speeds
4: the most technical concern apart from responsiveness was the security of the site.

6:Functioning of the website

The page which loads when the website link is visited is the homepage.
The first noticeable feature of the homepage, which is same on every other page is the
navigation bar.
The navigation bar( nav bar) has two prominent sections, which is the logo and contact

details section and the the navigation links section. These navigation links open up the
various pages.
Upon scroll the logo and contact details section disappear while the navigation links
section sticks to the to of the window.

On mobile, logo appears on the navigation bar with a toggle button at the extreme right
of the page. Upon clicking this toggle button, the navigation links show up.

Toggle
button
Fig: Functioning of the navigation bar in mobile mode

The next section after the nav bar is a carousel( Content slider) Section.
It contains an image and content on top of it that changes over time or upon click of the
slider control arrows.

Fig: Carousel Section of homepage

on mobile, this section is very responsive

Fig: Responsive view of carousel section on mobile.

Upon scroll of the page, we meet the about us section, which gives a brief about the
business.
Fig: About Us section on Home Page

Just after the about section is the services section. It has a slider with services cards. The
cards are being controlled by a control arrow at the bottom of the cards.

Fig:

Services section
on homepage on
desktop view
above and mobile
view below
The next section is a quick action section, which features an email input form in order to
sign up for a newsletter.

Fig: Desktop and

mobile view of the
newsletter section
Just below this section is a blogs sections that features random articles from the blog
stored on the database. It shows clickable blog cards with an image, date, title and short
description.

Fig: Blog section

desktop and
mobile view
And Finally on the homepage is the footer section which contain some links to various
pages in the website, a newsletter form and a background image of a city.

The About Page:

The about page contains all the necessary information about the company that is relevant
to the client. It starts with a navigation bar which is same as that on the homepage. It
starts with a brief about the companies mission, vision and work statement. It then list
some reasons why a client should choose to work with them, a brief history about the
company and then a picture card area of the main key members of the company.
The about page ends with a footer section which is same as on every other page.

The Services page:

Technical Specifications

The site has a front end and an admin dashboard. The front end is accessible to all
persons both on mobile and on desktop. The admin dashboard is a protected rout only
accessible by authenticated users.
Folder Structure:

 bin
 clear
 config
 migrations
 public
 assets
 bundles
 uploads
 index.php
 src
 controllers
 datafixtures
 Entity
 Form
 Repository
 Service
 Security
 Kernel.php
 templates
 about
 admin
 blog
 contact
 main
 security
 services
 admin-base.html.twig
 base.html.twig
 flash-message.html.twig
 test
 translations
 var
 vendor
 .env
 .env.test
 .gitignore
 composer.json
 composer.lock
 symfony.lock
The assets for the website lie in the public folder. This were all the CSS and java-scripts
and images lies. They are called into the website from the base.html.twig and admin-
base.html.twig file.
By using twig template engine, it is possible to extend the base HTML templates to
other pages and call in the other page elements like the body the title and the footer from
each of the page. some of the block elements used are:

{% block title %}{% endblock %}

{% include 'name of twig file' %}

{% block body %}{% endblock %}

{% block footer %}{% endblock %}

{{ form_start(form) }}
{{ form_end(form) }}

The various routes for the site are

 /home
 /blog
 blog-detail/{id}
 /services
 /contact
 /about
 /logout
 /sign-in
 /admin
 /admin/create-post
 /admin/view-post/{id}
 /admin/show-post
 /admin/delete-post/{id}
 /admin/update-post/{id}
 /admin/show-email

these routes lie in the controllers and in the config/routes.yaml

the controller and the routes and pages they control are:
AboutController:
 About Page
Admin Controller:
 Admin page
 View-Post
 Update-Post
 Delete-Post
 View-Emial
BlogController:
 Blog
 Blog-detail
ContactController:
 Contact Page
MainController:
 HomePage
SecurityController:
 Logout
 signin

ServicesController:
 Services Page

Functioning Of the Website:

Blog Update:

Once the user launches the site, in-order to update a blog post , delete one or create a
new one. We navigate to the admin dashboard by typing website-url/’local’/admin in the
address bar where ‘local’ can be any of the locals en or fr. This displays the dashboard or
if the user is authenticated or redirects to the login page, where the user is required to fill
in the sign-in form
After sign-in, the user is automatically redirected to the route he was heading to, in this
case it is the admin page.
The Admin landing page has a sidebar with the links to services, blogs and emails
sections. At the top right corner we have the logout button.

Clicking the blog link takes on to a list of all the blogs where one can person the various
CRUD functions on the blogs
Security Features:
The admin route and sub routes are all password protected and only accessible by
authenticated users.
The password of the admin is encoded to avoid CSF attacks.

Code Responsible for the Website:

HOMEPAGE:
The homepage elements are hard coded except for the blog sections that fetches data
from the database:
The blog section in the homepage has an if statement, to load a default hard coded blog
sections if there are no post in the post database.
But if there are any entries in the database, this section will not load, instead the entries
will be loaded in this section.
It used a For loop statement to load entries from the database.

To avoid all post to be loaded from the database, we use KnpPaginatorBundle. This
loads only a specific number of entries sorted by their Id.
To install KnpPaginatorBundle, we run: composer require knplabs/knp-
paginator-bundle
More about this and its use, is accessible from its documentation and these various sites
that I used in implementing this feature:
  https://ourcodeworld.com/articles/read/802/how-to-install-the-
knppaginatorbundle-to-paginate-doctrine-queries-in-symfony-4
 https://nouvelle-techno.fr/actualites/symfony-4-creer-un-blog-pas-a-pas-mettre-
en-place-la-pagination
 https://symfonycasts.com/screencast/doctrine-relations/pagination
 https://anil.io/blog/symfony/doctrine/symfony-and-doctrine-pagination-with-twig/
 https://openclassrooms.com/forum/sujet/symfony-4-probleme-de-pagination
 https://bibliocode.fr/biblio/11
 https://jobeet-tutorial-ru.readthedocs.io/ru/latest/days/day-7/
 https://auth0.com/blog/creating-symfony-blog-part-2/

The code responsible for calling the number of entries from the database is found in the
MainController.

The About Page, Services Page are all hard coded.

The blog Page receives entries from the database and its controlled by the same kind of
logic and code as the blog section. The code that controls this section lies in the
BlogController and base/index.html.twig
To access render more post from the database, we put this code
{{ knp_pagination_render(post) }}
 just after the for loop to display a navigation button to navigate to another page with
different entries from the database.

Each blog entry displayed has a READ MORE button which when clicked opens the
complete blog in a new page. The code in the controller that controls the blog-detail
page is found in the BlogController

The blog-detail page page renders elements from the post database and comments from
the comments database. It also has a form to receive comments.
The form is controlled by the CommentType Form and the Comment Entity.

The Contact page has a contact form that sends email to the site admin and stores the
entry in the database.
It is controlled by the Contact controller, and rendered in the contact/index.html.twig
template.
The form rendered is controlled by the ContactType form and the Contact Entity
the logic for receiving data from the form, submitting it to the database and mailing it, is
found in the ContactController.

The Admin Panel

the admin panel contents some sensitive information about the site. The CRUD Action
for the blog and the list of emails sent.
These are all controlled by the AdminController.
The form used to enter new blog entry into the database is the BlogPostType Form and it
uses the Post and PostTranslation Entity. Post contains traites that will not be translated
like the imageFileName for image upload while the PostTranslaton contains all the traits
that can be translated like the post title, and description. Using the A2lix Translation
Form Bundle, we can be able to render the form with options to input the translatable
database entries in different languages. In this case it is English and french
The blog uses a WYSIWYG editor, CKEditor. Which is added by installing the
FosCkeditor bundle and defining the type in the form.

Internalization:
To present the site in different languages, we use symfony built in translator, that ships
in with symfony 5. to translate the twig templates, we simply wrap the text we want to
translate in either of the following wrappers

<h1>{trans} Text to be translated {endtrans}</h1>

<h1>{“text to be translated”| trans} </h1>

Inorder to translte these files we configure the default local and list all the locales we
want to work with
We now update our routes with a local prefix, so that it contains en/ for the English site
and fr/ for the French site versions.

We also manually affix the local on routes in the routes.yaml file

we then extract all the translations using

the translation messages are dumped in the translations/messages.fr.xlf file, which we
edit to suit our translations.

Translating Database Content

in order to translate database entries, we use 2lix Translation Form Bundle, which
renders the form with options to input the translatable database entries in different
languages. In this case it is English and french. As seen in the Post and Posttranslation
entities, this bundle requires that we use two entites one containing the fields that needs
no translation and the other with translatable fields.
When used, and the following code added to the form builder

->add('translations', TranslationsType::class}

it renders a form that accepts content for all the locals specified
When the form is submited the content persist in the database with the same Id and
different locals

to call the entries from the database into the twig template, say the title, we nolonger use
post.title but post.translate.title and the symfony internaization bundle handles the rest,
by displaying content specific to the local selected.

To change the local, we add a button to the twig template.