The live website can be viewed here
Trainees Portal is a site that facilitate all trainees to be more organised with all tasks they should have on their internship. Since during an internship, trainees very often have several notes to take about work operations, daily tasks to do as well as assignments to test their knowledge. On this, in Trainee Portal, trainees can write down all their notes, tasks and assignments which are well kept and protected. They will be able to update them whenever they want, as well as delete them once the task or assignment is finished.
Trainees Portal also has some blog posts, which are beneficial to the trainees before, during and even after their work placement. Since these blog posts teach them to work on their mindset, their relationship during the internship, some tips on how to behave and many more. On these blog posts, trainees can read and leave comments.
Trainees must first sign up or register in order to create their information, to comment, and also to view their profile with all due assignments and tasks.
There are many other site features which will be discussed in depth later on in this document.
This is the fourth of five milestone projects that the developer is required to complete as part of their full web development course at the Code Institute.
- As a first time user, I want to see the main functions of the site
- As a first time user, I want to be able to easily navigate throughout the site to find content
- As a first time user, I want to read the blog post and see the comment
- As a returning user, I want the site to be responsive across all devices.
- As a returning user, I want to be able to create an account easily.
- As a returning user, I want to be able to creates notes, assignments and tasks
- As a returning user, I want to be able to see my profile
- As a frequent user, I want to be able to login
- As a frequent user, I want to see my notes, assignments and tasks
- As a frequent user, I want to update my assignments and tasks
- As a frequent user, I want to delete my unwanted data
- As a frequent user, I want to check to see there are any blog posts
- As a site administrator, I want to be able to create, update and delete tasks, notes, assignments, blog posts.
- As a site administrator, I want to be able to edit or delete coomments that may contain inappropriate content.
The Ideal User of this site:
- is someone who wants to start a work placement
- is someone who wants to start a traineeship
- is someone who has just started a traineeship or work placement
Wireframes were created using Balsamiq wireframes
The wireframe mockup links can be found below:
- Desktop
- Home Page
- Login Page
- Register Page
- Notes Page
- Assignments Page
- Task lists Page
- Post 1 Page
- Tablet
- Home Page
- Login Page
- Register Page
- Notes Page
- Assignments Page
- Task lists Page
- Post 1 Page
- Phone
- Home Page
- Login Page
- Register Page
- Notes Page
- Assignments Page
- Task lists Page
- Post 1 Page
-
Features on all pages
-
Navbar
- The navbar contains a conventionally placed logo at the top left of the page, if the user is not register, there are five buttons: Home, Profile, Options, Register and login
- If the user login, there are four buttons: Home, Profile, Options which contains three personal options of the site and Logout.
-
-
Home Page Features
- There are six boxes representing the different options of the site: Notes, assignments, task lists and as a blog: Mindset, Relationship and Advice. They are all represented with a picture and a description.
-
Register Page Features
- The Register button directs the user to the sign in page which asks the user to fill their username, email(optional), set the password and confirm it.
-
Log In Page Features
- The login button directs the user to the login page which asks the user to fill their username and password.
-
Profile Page Features
- A profile page is automatically created for the user once they have registered with the site. The profile form is automatically updated with the due information that the user put in the tasks and assignments. The user can update this information. Beneath the profile form there is a table with the user's personal information. There are tasks and assignments buttons that lead the user directly to the options wanted.
-
Log Out Features
- The log out button directs the user to the signout page which asks the user to confirm that they wish to sign out.
-
Notes features
- There is a form that the user should fill to create note and once the note created, it will appear above the form.
-
Notes detail features
- After creating the note, user can seen in details the note created
-
Assignments features
- There is a form that the user should fill to create assignment and once the assignment created, it will appear in the table above the form.
-
Task lists features
- There is a form that the user should fill to create task and once the task created, it will appear in the table above the form.
-
Blog posts features
- There are three blog posts, they contain picture, content and comment arrea.
-
Comment features
- The user can write a comment at the end of the blog post.
-
Message features
- Everytime that the user makes a successfully operation, there is successfully message appears at the top.
-
Features exclusive to Admin
- Only the Admin can edit/delete all content on the site.
The scope of this project was quite large at its inception and decisions had to be made to sacrifice certain content and features in order to meet the submission deadline. The following features will be explored and implemented at a later date:
-
ABOUT page was a potential feature in which users would be able to find out more information about Trainess Portal and also about the staff and the purpose of the site. All this data would be contained in its own model which would be modified when necessary by the site administrator through the site management tab and in the admin view.
-
Like, will be a attractive feature, so that user can see how many person likes the page and make blog posts more attractive.
-
An error message, whenever that user want to delete the data, he will need to confirm the action.
-
Typography
- At the beginning of this project, the developer had opted for a combination of fonts many fonts but after more testing, he decided to change fonts and opted this time for a combination of Acme and Lato fonts which are used throughout the site, with Sans Sérif as a back-up font in case of import failure.
-
Colour Scheme
-
The colours used throughout the site for its main styling are shown below, this mix of colours comes from coolors and they were chosen for a better design to maintain a simplified pleasure for the user.
-
These colours are used in a specific and complementary way, maintain the simple design.
-
There is a layer of red for when the user will hover the trash icon.
-
-
Imagery
- All the images usedon the site was sourced from unsplash.
- Python
The following Python modules were used on this project:
- asgiref==3.4.1
- cloudinary==1.26.0
- dj-database-url==0.5.0
- dj3-cloudinary-storage==0.0.6
- Django==3.2.8
- django-allauth==0.45.0
- django-crispy-forms==1.13.0
- django-summernote==0.8.20.0
- gunicorn==20.1.0
- oauthlib==3.1.1
- psycopg2==2.9.1
- PyJWT==2.3.0
- python3-openid==3.2.0
- pytz==2021.3
- requests-oauthlib==1.3.0
- sqlparse==0.4.2
- Django
- Django was used as the main python framework in the building of this project.
- jQuery
- This framework was used to create some of the site's interactive functions.
- Gitpod
- This project was built using Gitpod as the IDE.
- Github
- Github was used for online version control and storing files and documents.
- Heroku
- Heroku was used as a cloud-based platform to deploy this site.
- Google fonts
- The font styles used on this website were chosen from Google fonts.
- Bootstrap
- Various aspects of this website were structured using Materialize.
- Bootstrap was used to make this website responsive
- Fontawesome
- The icons used on this page were found in Fontawesome.
- Heroku Postgres
- Heroku was used as the database for this project in production mode after deployment to Heroku.
- Cloudinary
- Cloudinary was used to store all medias of this site.
- Balsamiq
- The wireframes for this project were created using Balsamiq.
- Freeformatter- CSS beautifier
- This was used to format the CSS stylesheet.
- Freeformatter- HTML formatter
- This was used to format each HTML page
- PEP8online
- PEP8 online was used to make sure all python code was pep8 compliant.
- Google DevTools
- Google Dev Tools was extensively used throughout the project for various styling and testing purposes. Its lighthouse feature was used as one of the main testing tools for this project.
- Favicon.io
- This was used to create the site's favicon.
- Am I Responsive
- This was used to test the responsiveness of the site and also to create the mock-up image presented at the start of this document.
-
- Dbdiagram.io
- Dbdiagram.io was used to create the Database Schema presented in this document.
- Coolors.co
- Coolors.co was used to create the project's color palette.
- StackOverflow
- Stack Overflow was used as a general reference resource.
- FreeConvert
- Free convert was used to convert video to gif.
Testing information can be found in a separate testing file.
The developper met some issues during the development of the website, below are the issues, bugs and solutions that the developer has encountered:
-
Git push Issue
- The developer met an error while trying to push commit changes to github.
-
To achieve this, the developer consulted the Code Institute Tutor Support. The problem was that the developer pushed a commit changes directly to github and gitpod breaks.
-
The developer did these steps to fix the problem:
git addgit remote -vgit loggit statusgit loggit addgit commit -m " any messageandgit push origin main --force -
Django admin
-
The django admin was working perfectly but without any style
-
The developer consulted the Code Institute Tutor Support, to achieve this. The problem was that DEBUG was equal to True in settings.py file. To resolve it, the developer put DEBUG = FALSE and remove DISABLE_COLLECTSTATIC to Heroku settings.
-
-
Server Error 500:
- The developer met a lot of times the Server Error 500, the problem was in the views.py code
-
Page not found
-
Profile : the page profile was not working. After many attempts, the developer noticed that the problem was in the urls.py, it was missing a
slashafter profile. -
Post_details : the post_details was not showing up after the developer create views, connect to the template and get urls. In order to understand and resolve this problem, the developer consulted the Code Institute Tutor Support. The main problem was that the blogs that was showing on the index page awas placeholders, they was not coming from database. They should normally need to come from database in order to show them and link to the correct id for the url.
The developer did these following steps to get that sorted:
- Get all the blog posts from the database
- Create a context dictionnaries
- Inside the context dict, create a key:value pair: key is posts, value is the posts got from database
- Add context into the render: render(request, template, context) Then in the post_details TEMPLATE:
- loop through the list: for post in posts
- get all fields for each post with post.fieldname
- update the url to use post.id
-
-
Unfixed Issue
-
Notes details: The developer encountered issue to display notes information on the notes_detail.html lack of time.
-
Likes: The developer had issues to permit user to like and unlike. So, the developer decide to remove this option and just leave the comment option.
-
Settings.py: The pep8 online validator shows some error
line too long, the developer didn't fixed that because there are sensible informations.
-
-
Request
- There was a error message about request: Unused argument 'request'.
- The developer visited this post
- To this problem, the developer write an
underscorebefore request.
-
Except
- The developer met a problem with the try and except, the error was: do not use bare except
- To resolve this problem, the developer visit Real Python, and just add `KeyError() after except.
-
Am I responsive
-
The developer encountered an issue when he tried to put the site deployed on the am I responsive to check the site responsive but there was this message: The website that you're trying to view on Am I Responsive has X-frame Options set to Same Origin or Deny. This isn't great for the tool, but it is great thng for a more secure web
-
The developer installed then the Ignore X-Frame headers extension in chrome and set the
class=hideintead ofclass=showin Chrome Dev tools.
-
-
Post_details.html
- The developer encountered an issue when trying to pass the post_details file to the validator. The Html validator shows some css in this html file but there is no more css inside.
-
Signup
- The developer get an error when testing the signup page, after the user finished to fill the signup form, this error occurs:
ConnectionRefusedError at /accounts/signup/. So, the developer fixed it by visiting this post on Slack. The developer added this in settings.py:- EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
- ACCOUNT_EMAIL_VERIFICATION = "none"
- The developer get an error when testing the signup page, after the user finished to fill the signup form, this error occurs:
-
Profile, assignments and tasks' redirections
- The developer encountered an issue while testing manually mark as completed in profile, assignments and tasks pages. Each time that he hit 'mark as completed' in assignements or tasks pages, he was redirected directly into the profile page, the same when he hit it in the profile page, he was redirected into the assignments/tasks page. So, to fix this, the developer consulted the tutor support, James_ci and Scott_ci, adviced the developer to use the session variable.
In the profile, assignments and tasks views, before return, the developer add
request.session['page_url'] = request.pathand im update_task and update_assignment viewsreturn redirect(request.session["page_url"]).
This project was developed using Gitpod IDE and pushed to Github using the in-built terminal. However, because Github can only host static websites it was necessary to deploy this project to Heroku because it is a compatible hosting platform for a back-end focused site like Trainees Portal.
This project was deployed using Heroku and stored in GitHub.
- Navigate to Github.
- Create a new repository by first clicking the green button labeled new on the top left of the screen.
- Select the Code Institute Full Template in the templates section.
- Give the repository a name, in this case Trainees Portal.
- Click the green 'Create Repository' button at the bottom of the page.
- Inside the repository click the green 'gitpod' button to initialize your repository.
- Future access to this workspace must be gained through gitpod workspaces, clicking the green button in gitpod again will initialize a new workspace.
- Use the
git add .command to add all modified and new files to the staging area. - Use the
git commit -mcommand to commit a change to the local repository. - Use the
git pushcommand to push all committed changes to github.
Before deploying the website to Heroku, the following five must be followed to allow the app to work in Heroku:
-
Install
django-gunicorn,psycopg2anddj_database_url,cloudinaryin your workspace cli. -
Create requirements.txt file that contains the names of packages being used in Python. It is important to update this file if other packages or modules are installed during project development by using the following command:
- pip freeze --local > requirements.txt
-
Create Procfile that contains the name of the application file so that Heroku knows what to run. If the Procfile has a blank line when it is created remove this as this may cause problems.
-
Create env.py that conrtains all secret variables as DATABASE_URL, SECRET_KEY and CLOUDINARY_URL, this file is hidden.
-
Push these files to GitHub.
Once the above steps are done, the website can be deployed in Heroku using the steps listed below:
- Log into Heroku .
- Click the New button.
- Click the option to create a new app.
- Enter the app name in lowercase letters.
- Select the correct geographical region.
- Click to create
- Click the resources tab in heroku.
- Under Add-ons search for heroku postgres.
- Click on heroku postgres when it appears.
- Select the Hobby Dev-Free option in plans.
- Click submit order form.
-
In the heroku settings click the reveal config vars button and set the following variables:
- DATABASE_URL
- SECRET_KEY
- CLOUDINARY_URL
- DISABLE_COLLECTSTATIC (This variable was removed, see more in Issues and bugs)
The values of these variables are secret and for security purposes will not be shared here.
- In heroku select the deploy tab.
- Click github button.
- Enter the repository name and click search.
- Select the relevant repository and click connect
- Select Main branch
- Click on deploy branch
- Click the Deploy tab
- In the Automatic deploys section, the main branch is enabled to deploy then click Enable Automation Deploys.
It is important to note that this project will not run locally unless an env.py file has been set up by the user which contains the DATABASE_URL, SECRET_KEY and CLOUDINARY_URL which have all been kept secret in keeping with best security practices.
- Log into GitHub.
- Select the respository.
- Click the Code dropdown button next to the green Gitpod button.
- Download ZIP file and unpackage locally and open with IDE. Alternatively copy the URL in the HTTPS box.
- Open the alternative editor and terminal window.
- Type 'git clone' and paste the copied URL.
- Press Enter. A local clone will be created.
Once the project been loaded into the IDE it is necessary to install the necessary requirements which can be done by typing the following command.
-pip install -r requirements.txt
- Log into GitHub.
- In Github go to the respository.
- In the top right hand corner click "Fork".
This project is primarily built using:
- HTML5 semantic markup
- CSS stylesheets
- Python
- Django
- Heroku Postgres.
- All images used in this site was originally obtained from unsplash
- The Mindset blogpost content was originally obtained from GVI
- The Relationship blogpost content was originally obtained from Michael Page
- The Advice blogpost content was originally obtained from NSW
- A large portion of this project's code was inspired by Matt Rudge's. This Code Institute tutorial was instrumental in the creation of this site.
- Bootstrap4 : Bootstrap library was used throughout the project mainly to make site responsive.
- The css code about table media queries was taken on Stack Overflow
- Nilesh
-
I would like to thank my mentor, Adegbenga Adeye, for his guidance and helpful feedback.
-
I would like to thank the entire slack community for being a source of support, knowledge and positive feedback throughout this project.
-
I would like to thank the tutor support for their patience and guidance throughout the development of this project. In particular, I would like to thank jo_ci, sean_ci, Igor_ci, Ed_ci, and Kasia. I really am immensely grateful and cannot thank each of them enough.
-
I would like to thank my own class cohorts for being supportive and helpful throughout the duration of the course. This particular channel provided a great deal of respite and also necessary feedback throughout the course which has proven invaluable for maintaining motivation.
-
Finally I would like to thank my fiance Jimmy for constantly helping to test the project throughout its development, providing insightful suggestions. I would also like to thank Jimmy for his constant love, his ear to listen my ideas and his support throughout this course and for never allowing me to give up, this would not have been possible without him and I will always been grateful for everything he has done to make this possible.