ForestLink app allows you to create your personalised desktop with pages. By creating your own desktop you can save some time and have all of the pages which you’re using daily in one place. The application allows you to add and customize your pages.
- Authentication - This web application is using the build-in Django authentication system to authenticate users. This process includes filling Register form and then logging in to your account by providing your user name and password.
- Customization - When adding a new website to your desktop you’re able to choose the background colour of the text and background of the tile.
- Pagination - The content of your desktop is depending only from how many pages you’re going to add to it. Some users might have a lot of pages and that’s why the pagination system is displaying 20 sites per page.
- Reporting sites - User can report any site which may be insecure and cause harm. Then this report is inspected by the administrator and can be either rejected or blocked. When the website is blocked users are not able to add this website to their desktop anymore.
- Responsive Web Design - This application is fully responsive and because of that it can work on all platforms and devices.
- forest/
- urls.py - contains paths for all routes of the application.
- templates/forest/
- layout.html - contains HTML template which is used across all sub-pages. It is also including all the js and CSS files required.
- index.html - Html for the main website which presents the whole application to the new user.
- login.html - contains login form with user name and password fields and login button.
- register.html - contains register form with the user name, email, password and confirm password fields and register button.
- report.html - contains two sections. First one is a simple form with button to submit your report and the second one is displaying the table of your reports, pagination and menu.
- user.html - displaying content of user desktop, pagination, modals to edit, remove and add page and menu.
- static/forest/
- styles.css - main styles file to define new styles and overwrite or add, edit bootstrap classes.
- static/forest/js/
- scrolling.js - simple scrolling script for the main menu on the index page. Allows scrolling to the appropriate section when clicking on a link.
- managePage.js - contain functions to enable or disable edit mode on the desktop and showing modals. Talking to the API to get data and putting it to the input fields of edit modal.
Use of external library. My application is using an external open source library called ‘django-fontawesome-5’ which is supplying the application with icons from well-known site called fontawesome.com. I’m also using it to generate the icon drop-down input field.
Talking to the API when editing page. Inputs from modal which is displaying form when editing the website are pre-filled with this websites’ data. This is achieved because of the API talking to the server and getting data to put it to the inputs of this modal.
User desktop is displaying all of your pages from the newest one and it is limiting the number of sites per page because of the pagination. When hovering on one of your pages the animation made in CSS is going to be executed. Also when edit mode is launched then this hover effect will be disabled and two buttons (edit and delete) will be displayed for every site. This is achieved using JavaScript and a framework called jQuery.
All of the user data is stored inside of the database which contains following rows:
- User - store all information about the user. (default table from Django authentication system)
- Page - contains all information about user pages. This table has relationship with User and Color table. This table also contains IconField added by django-fontawesome-5 library.
- Color - contains colour of the text and background of user’s pages.
- Report - store all reports made by users. This table also contain the drop-down menu which allows the administrator to accept or deny reports.