search

jbillcliffe / django-renterprise

0 stars 0 forks source link

readme

Renterprise - The Program

Click this banner to load the website.

A secondary prototype for a rental booking system. To create orders for customers and provide them with hired equipment. This example is based on a company hiring mobility equipment. However, the stock is based on what your provide to it. Flexibility is key to this software.

More people are turning to rentals as the world finances are in disarray and they can have your product at a much more manageable cost.

This interface is developed using designs and features from Portfolio 1[^4] and Portfolio 3[^5].

This software will improve your hire bookings right from the start!

User Experience Design

Target Audience

User Stories

Wireframe Program Flow

Program flow wireframe was created using Figma[^1]. The image shows the processes through the stages of the software. Some parts are still in development. New data structure implemented compared to Portfolio 3[^5]. Image of wireframe created for Renterprise software

Logo - Redocumented from Portfolio 1.

The logo was created using the website LOGO.com[^2]. It has been pulled from my previous Renterprise project for Portfolio 1[^4].

Logo Process - Redocumented from Portfolio 1[^4].

Using their step by step builder a full brand could be created from scratch, firstly the selection of software industry was chosen as it was accurate and appropriate.

Logo and brand creation for Renterprise, first step

Next, it gave an overall palette choice, blues, greens etc. Given the fact that a product is trying to be sold, and green symbolises wealth it seemed like a logical decision.

Logo and brand creation for Renterprise, second step

The creator then asked for a styling of the font to be used, a modern font was the best choice as it is for a modern product.

Logo and brand creation for Renterprise, third step

The final font choice for the logo was then made and it displayed the generated logo with it.

Logo and brand creation for Renterprise, fourth step

This was then the branding provided.

Full branding theme for Renterprise

Responsive

Attempts were made to use a responsive tester from previous projects. However, due to every page requiring security clearance the page would not load.

External access failure

Breakdown of Design - Redocumented from Portfolio 1[^4].

Colour Theme

Colour theme was initially chosen and subsequently revised with Coolors.[^3] The overall palette was picked with the website tools which enabled complementary and contrasting colour choices based upon the initial colour from the logo.

Initial colour palette for Renterprise

Features

Existing Features

Create Item

Creating an item can be divided into two categories. The Item Type (stock option) and an Item (the owned stock option with a serial number)

Add New Item Type

A form that asks for little data, this is useful to allow quick adding of item types and with as few margins for error as possible. This security is further enhanced by form validation. A category to assign it to (categories used previously will mean that it can be joined together later on). Validation occurs on all the visible fields. It also uses Cloudinary[^7] to allow images to be stored externally and accessed remotely. These images are useful to provide continuity across items. Also featuring in this is django-crispy-forms[^102]. When complete a success message is sent to the user.

Add New Item

A form that asks for very little data, this is useful to allow quick adding of it ems to stock and with as few margins for error as possible. This security is further enhanced by form validation. A category to assign it to (categories used previously will mean that it can be joined together later on). Validation occurs on all the visible fields. When complete a success message is sent to the user.

Create Customer

An easy to understand form which contains floating labels to increase space available. It also features multiple points of validation to ensure that there is a minimum amount of data required to create a customer. Also features a drop down menu of counties across the UK. Provided by django-localflavor[^101] python/django library. When complete a success message is sent to the user.

Create Order

More data is required for this form/complete form. Requires a user to enter a delivery and collection dates will only validate if collection is after delivery, historical orders (dates before today) can be entered with no consequences.

Orders are created in steps. First it asks for dates, secondly an item category then item type The program searches the database for orders already on the system that match the item chosen, it will then filter any items out that are already booked in this date range. After filtering it will display the items that can be chosen from the list of stock available. Once the item has been chosen, the submit button appears and it gets booked for those days and it will be unavailable to others in this date range. It does this and creates an initial invoice record (unpaid) into the system, once saved the user is moved to another view, which displays the order just created and gives a prompt to show it has been created. Finally, when the order is created it adds the amount paid onto the tally for the item. So it can be determined how much money an item has earned in rental payments.

Creating Customer/Order Notes

These two entries are discussed together as they perform the same function. But save into different places. Customer notes are designed to log communications with the customer across all of their orders. Order notes are entered within an order itself and are relevant only to the order.

If no notes are available, a prompt is shown to the user : ( Empty customer notes / Empty order notes )

Entering a note uses django-summernote[^103], to allow for rich text editing : Summernote

When the note is created a success prompt is displayed and the user is sent back to the customer notes list / order notes list.

Creating Invoice, Paying Invoices, Marking Invoices Unpaid

Invoices are key to the customer/order experience as this relates to the company being able to reliably get an income from the software.

Updating Invoices

Select an invoice

Mark Unpaid

Confirm the process -> Success prompt displayed

Paying An Invoice

Confirm the process -> Success prompt displayed

Creating Invoices

Displays a modal which has two fields of entry. One for the amount of the invoice and another for the text description for the invoice.

Load the create invoice modal -> Validate the fields to ensure clean data.

When all data is in that is required. Clicking submit will take the user to the order view with an updated table of invoices. Along with this a success prompt is generated for the user.

List Displays

Customer

Shows all the customers in the system. The only other status that is visible is deceased. If someone is marked as archived they become restricted to all and can only be recovered by the user being re-opened in the django-admin back end.

Once a customer has been clicked on, their status can be edited.
A customer can be marked available, deceased or archived

If they are deceased/archived only an administrator can recover them to "Available", if they are deceased regular users can see them, but only administrators can unlock them back to "Available" in the back end.

Items Shows all the items and their status is visible in the list view by the colour of the row. Their status can be changed within the item view

Sidebar Navigation A key feature in the program. (Almost) all through the web application it provides options for the user and the list changes depending upon the users location in the site. Where applicable, one of the options will be highlighted to show where the user is currently active. It can also hold options such as "Add an Invoice" which brings up the modal window to create an invoice for an order. Examples of its use are below:

Example of sidebar use (1)
Example of sidebar use (2)
Example of sidebar use (3)

Although not principally designed for smaller devices such as mobile phones (it's designed to be a comprehensive CRM system) there is responsiveness which will, when the screen resolution is small enough, relocated the sidebar and collapse it at the top of the main container. The two below images show the sidebar at the top of this first image, oepned, after that showing them sidebar collapsed.

Top location sidebar
Top location sidebar collapsed

Testing

Linting

Given the framework involved. Using a standard linter was not strictly the best option. I did manage to install a a django specific linter called djLint which worked within the IDE, this was also combined with Flake8 and it also worked with the html templates too. No python files have any poorly formated areas of code. Except for in renterprise.settings where :

Manual Testing

This section is broken down into the different areas of the program and to how it is expected to function.

Main Menu

Admin

Create Customer

View Customer

Customer List

Customer Notes

Create Order

View Order

Order Notes

Items List

Item View

New Item

New Item Type

Deployment

To deploy this project:

LIVE RENTERPRISE SOFTWARE

Technologies Used

Languages

Relevant Help Links

  1. Back to customers etc. https://stackoverflow.com/questions/524992/how-to-implement-a-back-link-on-django-templates

  2. How to toggle class //https://www.w3schools.com/howto/howto_js_toggle_class.asp

  3. get_context help : https://stackoverflow.com/questions/37370534/django-listview-where-can-i-declare-variables-that-i-want-to-have-on-template

  4. A useful testing tool for debugging/testing

    import logging
    logger = logging.getLogger(name)
    logger.warning(trace) -> general.log

  5. Bootstrap kept overriding button style when it is unwanted. Have to use javascript to submit the form and keep FloatingField styles

  6. Adding pagination to a non-class ListView https://www.geeksforgeeks.org/how-to-add-pagination-in-django-project/

  7. def invoice_create
    Bug zone
    wsgirequest' object has no attribute 'amount_paid'
    Change to same type as status change, to implement as posting form is causing problems. So values will be sent by URL. the form created by JS. JS dynamically validates the fields prior to submission.
    Main fix was in the end dynamically and manipulating javascript to create the form for the modal window and functions associated with it.

  8. Best practice for django constants : https://stackoverflow.com/questions/12822847/best-practice-for-python-django-constants

Frameworks, Libraries & Programs Used

Technologies Used

Python Libraries :

Sourced from PyPI[^8] [^101]: django-localflavor is a package that offers additional functionality for particular countries or cultures : https://pypi.org/project/django-localflavor/ [^102]: django-crispy-forms is a package that allows greater form manipulation and quick template tag insertion : https://django-crispy-forms.readthedocs.io/en/latest/ [^103]: django-summernote is a "WYSIWYG" text editor. Allows for rich text field entries.: https://pypi.org/project/django-summernote/ [^104]: djlint a django template formatting analyser: https://open-vsx.org/extension/monosans/djlint [^105]: Flake8 : https://marketplace.visualstudio.com/items?itemName=ms-python.flake8 bleach - an HTML sanitising library cloudinary - an image hosting service to allow uploads and downloads dj3-cloudinary-storage - part of the above package for hosting images crispy-bootstrap5 - a bootstrap 5 styling for django-crispy-forms gunicorn- Gunicorn is a Python WSGI HTTP Server for UNIX psycopg2 - Implementation of a PostgreSQL adapter for Python pylint-django - a python linter that incorporates django frameworks structure. whitenoise - implified static file serving for Python web apps

*NB. There are other libraries but they were installed as part of others.

Website Tutorials/References

References

[^1]: Figma is a free website for designing storyboards and wireframes : https://www.figma.com/ [^2]: LOGO website used for creating a logo and branding from scratch for free : https://app.logo.com/ [^3]: Coolors website for creating free colour themes : https://www.coolors.com/ [^4]: Renterprise Portfolio 1 - My own web design I created as part of my first project for Code Institute. This software is an extension of the idea of Renterprise: https://github.com/jbillcliffe/portfolio1-renterprise/ [^5]: Renterprise Portfolio 3 - My own python console program created as part of my third project for Code Institute. This software is an extension of the idea of Renterprise: https://github.com/jbillcliffe/portfolio3-booking-system/ [^6]: GitHub projects - A way of creating workflows for a project and being able to manage across teams.: https://github.com/users/jbillcliffe/projects/4 [^7]: Heroku - A place to host projects. In this case to host the python terminal. : https://www.heroku.com [^8]: PyPI - the package index. Containg a whole wealth of python libraries to plug in: https://pypi.org/ [^10]: W3Schools- Invaluable for providing details on elements and their attributes and so much HTML/CSS information : https://www.w3schools.com/ [^11]: Stack Overflow - One of the most important resources for developers : https://stackoverflow.com/ [^12]: How to do correct formatting for PEP8 : https://peps.python.org/pep-0008/ [^13]: Django Frameworks. The framework that allows the operation of this as an MVC model : https://www.djangoproject.com/ [^14]: Gitpod, a cloud based IDE for developing the web application : https://www.gitpod.io [^15]: Font Awesome - A great source of free icons to use in many formats : https://www.fontawesome.com