Documentation
Documentation
Documentation
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.
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.
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.
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.
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.
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:
{{ form_start(form) }}
{{ form_end(form) }}
/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
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
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.
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.
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.
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
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.
->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.