This is a revision app for students taking the maths 11 plus 13 plus and 16 plus exams.
I designed a revision app for students who are studying for demanding 11 plus, 13 plus and 16 plus exams in maths. The exams are hard work and currently there is no existing central resource for students to use. Thus the idea was to put useful past and practice papers with markschemes and advice, together in this app. The app is to be used mainly by parents of students who are taking these exams.
Parents can view and order one paper and its associated markscheme for free and then they can order extra papers and markschemes using stripe. The app was deployed to heroku and can be accessed by clicking on the title above. Alternatively here is a link to the heroku app.
The typical user is a parent aged in their mid 30s to mid 50s. The user persona's name is Paul. Paul is the parent of three children who are aged 10, 12 and 15. Each child will soon take the 11+, 13+ and 16+ exam respectively in order to gain a place at a top independent school. Paul is keen for his children to receive an education at a top school as he knows that this means that his children are more likely to gain entry to excellent universities and better career paths, as well as being part of a privileged network.
All his children have been preparing for their entrance exams over the last year and have been using published resources and other resources downloadable from other ecommerce sites. This app gives Paul the opportunity to buy 11+, 13+ and 16+ papers which are not available elsewhere.
Paul expects to see a range of papers to purchase which is updated on a regular basis. Paul also expects the welcome page to display some sort of image which gives him the message that this is the sort of site where he can trust the quality of the papers.
Many users like Paul will use the app. Below is a list of their expectations for the app.
- Each user has a unique username chosen by them and password and a user profile showing past and present orders.
- Users can choose to reset their password when needed.
- A user who has forgotten their password can be issued with a temporary password, go onto the site,then reset their password using a given link.
- A user can see 11 plus, 13 plus and 16 plus papers to select from without logging in.
- A user can only purchase 11 plus, 13 plus or 16 plus papers if they are logged in.
- If a user attempts to buy these papers without login in, the app will direct them to login.
- Once logged in, the user can checkout items in the cart.
- A user will see a message on the screen stating that they are logged in.
- If a user does not have an account they will be directed to create one.
- Once a user has created an account, they will see a message on the screen informing them that their account has been successfully created.
- A user can select items to be purchased and each item selected will be added to their cart.
- A user will be able to view all the items in their cart.
- A user can choose to checkout items using the checkout button. A user can amend items in their cart before checkout. At checkout a user will be asked for their details.
- Checked out items will be paid for using credit or debit cards.
- The user will get an acknowledgement of payment.
- A user can access a blog on the app from the main menu.
- The blog will contain tips on learning maths and ideas on how to measure progress made.
- A contact address appears on the about us page for users to use if required.
- A logged in or logged out user can see a blog which gives extra information on study skills and learning maths.
- A user can see how many times each post has been viewed together with the name of the author and the date the blog post was created.
-
The navbar must appear on every page so that the user can easily navigate between pages.
-
The navbar has the title of of the website, "Maths Plus Revision" on the left hand side. If a user clicks on this they are taken to the Papers page.
-
The home page shows the following items in the navbar: "MathsPlusRevision", "About Us", "Register", "Log in", "Blog", "Cart"
-
A logged out user can see all these items and can select papers to purchase, but they will need to either log in or register an account in order to purchase papers.
-
On logging in or creating an account a user is first take to the about us page which gives some information about the site. A user will know that they are logged in as a message will appear on the top left of the screen.
-
Once a paper has been selected and has been put in the cart, the user is taken to the checkout page. The cart icon will change to show the number of items in the cart and the user can then click on checkout to buy these papers.
-
If a user does not chose a quantity of papers and then hits add an error message will be shown and the user will be asked to click the paper tab and select a quantity of a paper to purchase. Clicking on the paper tab at any time will allow the user to select more papers if needed.
-
A logged out user will see a logged out message on the screen to indicate that they are logged out.
-
The blog page can be seen by all users regardless of whether or not they are logged in.
-
HTML or Hypertext markup language. HTML is used to create the structure of web pages. It consists of tags which tell the browser how to set out text and images on the page. Hypertext is the method by which you move around on the web, markups are the tags which set out the structure of the webpage, thus HTML is a language for web creation with its own structure and syntax. The data in the tags is read by the web browser enabling you to create any web page you like. In this project my templates are all written in HTML. There is a template for adding, deleting, editing and adding recipes as well as one for viewing information about each island. The base template sets out the way in which the website should look and information from this is used in each of the other templates.
-
CSS stands for Cascading Style sheets which is a type of style language which sets out how the webpage should be styled. It allows the user to style the webpage in a particular way, making the UX richer and more meaningful for the user.
-
Django is a web development framework that assists in building and maintaining quality web applications. Django helps eliminate repetitive tasks making the development process an easy and time saving experience.
-
jquery is used to simplify DOM manipulation. Jquery is a javascript library that is used to provide interactivity on websites. The $ sign signals to the browser that jquery is being used.
-
Python is a high level programming language used for apps in many frameworks such as flask, pyramid and django. Python supports many programming paradigms and is object orientated and has a comprehensive set of libraries. Python is managed by a non profit organsation the Python software foundation. The version of Python I used in my app is 3.7.
-
I used Postgres for the models in my database, although sqlite3 was available in django. This was because my app is deployed to heroku and heroku is an ephemeral file system so my data would disappear each time I logged into heroku! Postgres is an open source object-relational database system that provides the user with the facility to create, read, update and delete documents data.
-
Heroku is a cloud platform that allows a developer to build, deliver, scale and monitor apps. Heroku makes the experience of deploying an app relatively straightforward.
-
I used Chrome Developer Tools to work on my code. Chrome dev tools are a set of tools designed to give the developer tools to amend code in a testing environment in order to enhance the UX and functionality experience. I was also able to test the responsiveness of my app using these tools.
-
I used vscode as my coding editor. I found it easy to use and used extensions for markup and also extensions to check the syntax of my code.
SQLite3 is a database provided by django and is the default database for django projects. Postgres is an open source relational database.
Django does not determine a type of database to be used. I decided to use postgres as heroku is an ephemeral system meaning that data stored in SQLite would disappear each time I accessed the app!
In Django, data models are the databases which store data about the objects in the database. The MathsRevisionPlus app used 2 models in addition to the django provided user model which stored details of users. The models were:
| Name | Key in db | Validation | Fieldtype |
|---|---|---|---|
| Name | name | maxlength=254 | Charfield |
| Description | description | no maxlength | Textfield |
| Price | price | maxdigits=6, decimalplaces=2 | Decimalfield |
| Image | image | nomaxlength | Upload to images |
| Name | Key in db | Validation | Fieldtype |
|---|---|---|---|
| Fullname | full_name | maxlength=150 | Charfield |
| AddressLine1 | address_line_1 | maxlength=150 | Charfield |
| AddressLine2 | address_line_2 | maxlength=150, blank=True | Charfield |
| Town/City | town_or_city | maxlength=150 | Charfield |
| County | county | max_length=150,blank=True | Charfield |
| Postcode | postcode | max_length=10 | Charfield |
| Date ordered | date_ordered | default=date.time.today | DateField |
- An order is created first before order line item is created as orderline item connects to order using a foreign key.
| Name | Key in db | Validation | Fieldtype |
|---|---|---|---|
| Order | order | maxlength=150 | Charfield |
| Product | product | maxlength=150 | Charfield |
| Quantity | quantity | maxlength=150, blank=True | Charfield |
*An instance of orderlineitem is only created on receipt of an order by a user for each item the user selects and places in the cart so it uses a foreign key.
| Name | Key in db | Validation | Fieldtype |
|---|---|---|---|
| Title | title | maxlength=200 | Charfield |
| Content | content | no maxlength | Textfield |
| Created date | createddate | dateformat = 6 chars | DateTimefield |
| Published date | publisheddate | dateformat=6 chars | DateTimeField |
| Views | views | no max length | IntegerField |
| Tag | tag | maxlength=30 | Textfield |
Testing was carried out by human beings.
- Manual Testing
I tested each part of my user story to check it worked as expected.
-
Each user has a unique username chosen by them and password and a user profile showing their login and email and a thank you message. Result: works as expected.
-
Users can choose to reset their password when needed. Result: works as expected.
-
A user who has forgotten their password can be issued with a temporary password, go onto the site,then reset their password using a given link. Result: does not work as expected. I spent a long time trying to get reset password to work but kept getting errors that I couldnt sort out, so a user would need to set up a new account if they forgot their password. In the future I hope to sort this out but I am almost out of time now to sort this out and having spent hours on this I am rapidly running out of hours and cannot justify more time spent sorting this out.
-
A user can see 11 plus, 13 plus and 16 plus papers to select from without logging in. Result: Works as expected.
-
A user can only purchase 11 plus, 13 plus or 16 plus papers if they are logged in. Result: Works as expected.
-
If a user attempts to buy these papers without login in, the app will direct them to login. Result: Works as expected.
-
Once logged in, the user can checkout items in the cart. Result: Works as expected.
-
A user will see a message on the screen stating that they are logged in. Result: Works as expected.
-
If a user does not have an account they will be directed to create one. Result: Works as expected.
-
Once a user has created an account, they will see a message on the screen informing them that their account has been successfully created. Result: Works as expected.
-
A user can select items to be purchased and each item selected will be added to their cart. Result: Works as expected.
-
A user will be able to view all the items in their cart. Result: Works as expected.
-
A user can choose to checkout items using the checkout button. A user can amend items in their cart before checkout. At checkout a user will be asked for their details. Result: Works as expected.
-
Checked out items will be paid for using credit or debit cards. Result: Works as expected with test credit card details supplied by stripe.
-
The user will get an acknowledgement of payment. Result: You have successfully paid message appears on screen.
-
A user can access a blog on the app from the main menu. Result: Blog item appears in navbar and user can click on it to see the blog.
-
The blog will contain tips on learning maths and ideas on how to measure progress made. Result: Items on learning maths are in blog.
-
A contact address appears on the about us page for users to use if required. Result: Contact address is at bottom of "about us" page.
-
A logged in or logged out user can see a blog which gives extra information on study skills and learning maths. Result: Logged in and logged in users can see the blog page.
-
A user can see how many times each post has been viewed together with the name of the author and the date the blog post was created. Result: Blog views are shown next to each post.
- Log in page:
Ensure that only registered users can login. If an unregistered user tries to log in they are directed to the register page.
A message is shown that tells the user that they are logged in or that they have created an account. Result: Message "you are logged in" appears.
Ensure that if user forgets password an email is sent to the users registered email address.
Result: email to reset password is not sent to users registered email address. This needs more work.
-
Papers Check that one paper in each set of 11 plus, 13 plus and 16 plus is free to order. Other sets of papers cost £10 each. Result: As expected.
-
User profile Check that the user profile for each registered order is up to date and accurate. Result: User profile appears showing user name and user email. I was unable to pull in orders from the backend to show to the user.
-
Cart Check that the items purchased by users are transferred to the cart ready for checkout. Result: Items are transferred to the cart.
-
Checkout
Check that only the items in the users cart are available for checkout and that the checkout process works. The user is shown a message to say that checkout has been successful for each order. Result: Checkout app shows price user has to pay and connection to stripe is successful using stripe credit card testcase 4242424242424242 with CVV set to any 3 number combination. Also error message shows if user does not select a quantity of papers then clicks on checkout.
- Posts
Ensure that posts added in admin panel appear on blog page. Result: All posts added appear in blog page.
- Models
Ensure that all models are complete by using query set queries in the python shell. Result: All models set up correctly and contain the correct data.
- Urls Ensure that all nav bar items direct the user to the correct page and that the user knows which page they are on as there is a heading on each page telling them what page they are on and the navbar shade changes to a darker colour of blue when a particular item is chosen. Result: All urls and views work as expected except the reset password url.
Initially I used a virtual enviroment created from my vscode editor. However this somehow got lost a few months into the project. I spoke with a CI tutor who advised me to use the pipenv tool to set up a virtual environment for my project. This was great and got me back on track with my project.
The most annoying bug I came across was when I was trying to push my code to heroku. I followed the instructions above but got an error 500 after each attempt. Despite looking at my code in detail I couldnt find anything wrong with it. My mentor suggested that my environment variables may be incorrect or missing, and once I looked into this I discovered that this was the case. Once I corrected my mistakes with my environment variables, I was able to push to Heroku with no problems.
After I pushed my app to heroku I needed to change some details and needed to remember to set debug back to true in the my coding editor - vscode.
I attempted to use travis integrated testing to run automated tests but unfortunately after 63 builds I still could not get my build to pass, so reluctantly I had to switch to manual testing.
I was attempting to get user orders to show on my profile page, however after spending many hours on this and getting help from people in the CI slack community and CI tutors I was unable to get user orders to connect to a user's profile. I managed to build a user profile but couldnt link it to user orders and thus couldnt write a view in my accounts app that displayed user orders. I decided instead to put a thank you message on the profile page for users to see and invite them to re-visit the site at a future date if they had not found a set of papers that they wanted to buy. I will be going back to this app later on this year and attempting to get user orders to show in the user profile. Unfortunately time constraints mean that I cannot spend more time on this aspect of my project.
I created a new folder for my project.
I created a virtual environment and installed django in this. The first virtual environment got lost by the vscode editor so with the help of a CI tutor I was able to create a new virtual environment using the pipenv tool. The virtual environment was necessary to keep all my work on my project isolated from other projects that I was working on.
I then created a new django project, called mathsplusrevision in vscode by typing django-admin startproject projectname . in the terminal as well as a .gitignore folder ready to hold files that I didnt want to push to github. This .gitignore file held my environmental variables and the vscode settings that didnt need to be pushed to github.
My settings.py file contained the list of apps that I created as I created my project. The apps I created were accounts, posts, cart,checkout, search and products. I created my apps using python manage.py startapp appname. I ran my app throughout the development process by typing python manage.py runserver each time I added some fucntionality to the project to check whether or not it was working as expected.
I created a requirements file to hold details of all the packages needed to run my app, eg. pillow for images, stripe and whitenoise and I also created a Procfile. As each package was added using pip install package it was important to remember to update my requirements file.
- media
This folder held pictures of images for the products that would appear on the website.
- products
This app contained information about the products I was selling including models for the database design.
- search
This app contained code for searching the app for a particular item and then displaying it on the screen.
- accounts
This app allowed a user to create an account and also contained a profile page for each user. This app was reused from the CI module on django ecommerce project, which I had followed previously. Authorship of this app is credited to CI.
-
cart This app enabled a user to place items on the cart ready for purchase.
-
checkout
This app enabled a user to checkout and pay for their purchases.
- posts
This app contained a blog with tips on how to successfully learn maths needed to pass the relevant exams and also contained a view counter so that views of each blog post were counted.
- static folder
I created a static folder for my images and my styles.css files and a templates folder for my templates. Next thing was to set up my base template folder with four files inside: base.html, and registration.html.
Effects for the nav bar were put into my styles.css file which was in the static folder.
In my django virtual environment, I imported all the modules I would need and put this in git ignore. I then set up a stripe account and used the secret and publishable key from my env.py file. I ensured that the keys could only be accessed from this and not on public display on github.
At this point I pushed my app to heroku in readiness for the final push to heroku later on. This meant I had to create my procifle and requirements file in order for the app to run.
Lastly I checked that the entire app worked before doing a final push to heroku, making sure that my environment variables were correctly input into the heroku dashboard for the app and that debug was set to false so that the app was secure.
I created a favicon for my app, using a freefavicom creator and had a go at creating a user profile and having it linked to my orders database but unfortunately I ran out of time to complete this part of the app.
I revisited my project later on in response to feedback from CI and decided to restyle it using bootstrap 4. I changed my navbar to dark and also choose a new image for my about us page. As the website is aimed at parents of pupils, I decided to give it a more formal feel so the look of the website was deliberately kept clean and simple so that users could easily navigate through it. I went through all the apps in my project adding in comments as advised by CI and in the navbar I moved my search button so that rather than it showing at the top of each page, it was now incorporated into the navbar.
I had created my wireframes earlier and was working from these when creating my app, but decided to add them in to a folder called wireframes at the top level of my app.
The following section describes the process I undertook to deploy this project to Heroku.
- I ensured that all required technologies were installed locally, as per the requirements.txtfile. It was important to check that stripe was installed using
pip install stripeThis required a valid stripe account to be set up. - I ensured that I had created a procfile indicating that my app was based on python.
- I logged in to Heroku, using 'heroku login' command. Input Heroku login details.
- I then created a new Heroku app, using heroku
apps:create appname command. - I pushed my project to github and enabled automatic link to heroku. This took some time to set up as I had to make sure that my environmental variables were correct.
- I then logged into Heroku and selected newly created app.
- I entered all my environment variables into the heroku panel including: secret key, public key - both of these were from stripe, the host name and the port.
- The final push to heroku was harder than I thought! I first had to set my debug to False in my settings.py file in the mathsplusrevision app. Then I had to do
python manage.py collectstaticto successfully transfer all the files heroku needed to run the app across to heroku. - I then had to put all my environmental settings in my heroku config vars for my project as shown below.
- DATABASE_URL xxxxxxxxxx
- IP xxxxx
- PORT xxxxx
- SECRET_KEY xxxxxxxxx
- STRIPE_PUBLISHABLE xxxxxxxxx
- STRIPE_SECRET xxxxxxxxx
I checked that my app was now deployed via Heroku
Initially I found django really difficult. Although I had gone through the CI videos several times, it all seemed so disjointed, jumping around all over the place and so many files in different folders, some folders with the same name, so I spent many hours trying to work out how the code all fitted together. I looked at you tube videos and 2 udemy courses which I viewed several times before getting django mostly sorted out in my head. The steps below indicate the steps I took to produce my app.
- First I created a virtual environment and made a .gitignore file. I then installed django.
- I put all my virtual environment files and database files into .gitignore so that they would not be pushed to github.
- I then created a new github repo and initialised a local repo for my project.
- I then created a project using djano-admin start project command, giving my project the name mathsplusrevision.
- I set up my project in heroku - linking my github account to heroku so that each time I pushed to github I also pushed to heroku. This took some time as initially my environmental variables were incorrect in heroku and it took a while to figure out what was wrong.
- I then created my env file to hold all my passwords for my database and my secret and publishable keys for stripe. This file was put in .gitignore.
- I then ensured that my settings were correct in my settings.py file in my project. This meant that I had to ensure that heroku was included in my allowed hosts and that my apps were added as I created them into my installed apps list.
- I then started creating my apps. The first one I created was my accounts app which was cloned from the CI site. Sounds easy but there were changes I had to make to this app to make it work, and as I had chosen to use django 2.2 instead of django 1.11 these changes took some time to sort out.
- I had to remember to create a requirements.txt file as I downloaded different packages for my app as I went along. Pillow was used to handle images and whitenoise for my media files.
- I created an overall templates folder which contained my base.html file which controlled the way in which the app which initially be rendered to the screen. This file contained the code for my navbar and the general layout of the initial screen. Within my accounts app I created another templates folder which contained four html files- login, index, profile and register. Each file took its main format from the base.html file and displayed appropriate messages to the user for loging in, registering and displaying a loged in users profile.
- Whilst working through the accounts app, I regularly saved my work to github. I also tried to get travis to work several times without success. I put a link to travis in this readme file and also created a .yml file but despite my best efforts I was unable to get travis to work and the build kept failing, despite the app working as required. I know that there is an issue with travis working with python 3.x and django 2.x so this is something I will need to keep working on after the submission of this project.
- I created the model for my accounts app before creating the views and urls. In my accounts app, I added my url patterns to the url.py file and in my views.py file I added in the python code to render the appropriate view for a user depending on whether they were logging in, displaying their profile once logged in or registering for an account.
- I then moved onto creating my products app, which would store details of all the papers for sale on the mathsplusrevision app. First I created the models for the products app, then the views and the urls, adding patterns for the urls to the app, and finally ensuring that the products app was present in the installed app section of the settings.py file.
- I created a templates folder inside my products app which contained the products.html file which contained the logic for rendering the products app to the website.
- During the creating of my products app I pushed to github and heroku after each bit of functionality had been added.
- I then created my search app so that products could be searched for by a user. I made sure that this was included in my installed app list in my settings.py file and that the url patterns were in the urls.py file in the search app. Views.py in the search app contained the logic for rendering results of the search to the screen.
- I then created my favicon inserting a file for the favicon into my images folder and linking the image in my base.html file.
- I completed my testing manually due to problems with getting travis to work and django unit testing. The result of my tests is shown in the test section.
- The creation of my static folder was done prior to creating the products or search app so that I could style the way that the results of the search and products app displayed using the custom.css file which was held in the css directory. Additionally in the static folder I created the font-awesome folder to contain the fonts I would use in the project and the js folder which contained the stripe file, for use when users wanted to buy a product.
- I then created my carts app; firstly models, then views.py containing the views for this, then the urls.py containing the urls for the cart app. Throughout the project I ensured that I used
python manage.py make migrationsto ensure that migrations of my models for each app were successful and then I usedpython manage.py migrateto ensure that the migrations were applied. I added the cart app to the list of installed apps in settings.py - Finally I created my checkout app, which would enable a user to successfully pay for goods purchased. I needed to create a stripe account, then install stripe ensuring that my public and private key were carefully stored in env.py and in turn, env.py was put in my .gitignore file. Again the checkout app was added to the list of installed apps.
- At the start of this process I ensured that created a media directory to store all the images of the papers on the website and ensured that the correct code was added to the settings.py file in order for the uploaded images to be stored in this directory.
- I created a super user using
django-admin create superuserso that I could add in my products to the products model using the admin dashboard. - I pushed my app to git and heroku at regular intervals, I had linked my git hub repo to heroku so it was automatically pushed to heroku each time I made a change to the repo. As the app was working I hoped that the travis build would be fine but I was wrong. Travis repeatedly failed, so I needed to resort to manual testing.
- It was important to remember to make migrations and then migrate for all the models in each app
python manage.py makemigrationsandpython manage.py migrate. - Finally in order to get into the admin panel it was important to create a superuser
python manage.py createsuperuser
- Add user orders to profile page.
- Allow user to search blog using tags or words of interest.
- Add in a testimonial section where parents can post reviews of papers their children have used - the reviews would have to be moderated first before appearing on this page.
- Include a feature where users can download a paper from the website once the paper has been paid for. Download should be in the form of a zip file.
- Get password reset working.
- Media
The photo used on the about us page was by Dawid Małecki on Unsplash.
- Persona idea
The idea of creating a user persona came from a blog I read by Roman Pichler, a project management expert who specialises in digital products using Agile and Scrum methodologies.
- Code institute modules and code
The code institute modules were useful but following the code at times was problematic, as several areas were gone through very quickly and finding people to discuss this with was difficult at times. People who were around in the slack room did their best to help when they were available and CI tutors helped when I was really stuck. So I have used the code provided by CI in my project, customising it and commenting on it so as to get my project to work. CI code features in all my apps but I have commented on it to show my understanding and how I have adapted it to work in my project.
I received inspiration for this project from my mentor Simen Daehlin, fellow students especially family, friends and my teaching colleagues at JK Educate and school students were also very helpful in giving me feedback. The Code Insitute videos were useful eventually, once I understood them, in giving me the basic way to go about creating different functionality in my app. The accounts app was reused from the CI code and I have spent time annotating each app showing how the code works. I used the django documentation to help me sort things out on a regular basis, although I have to admit that at times it was difficult to understand what to do to sort out a problem and I spent around 80% of my time on this project looking things up on the internet with only 20% of the time actually spent coding. Hopefully next time I do a similar project things wont take so long and I will be better at sorting out any issues that arise!