COIT20248 Website Design and Modeling Editing Services

COIT20248 Website Design and Modeling Editing Services

Introduction

This assignment is in context with assignment aims at developing a design of website for the Australian labs via which they can monitor their client details and inventory of the system. In previous assignment we have worked on the database of the system, in this assignment we are going to create some diagrams that will depict the data flow of the system, identifies the entities of the system and the processes. The tasks allotted will help to better understand the modeling and the process of website design. This assignment is fruitful for further website implementation.

1.Find out all Critical Use Cases

A use case diagram comprises of actors, use cases and flow lines. In our use case diagram, we have several use cases such as:

Vial tests
Login
Client Registration
Add/delete/update
Record test vials
Testing
Generate Test reports
Sent fax
Receive test results
View test status
Logout

The actors are Head technician, lab technician and clients (medical offices, doctors, clinics etc.)

2.Draw Context Level diagram

A context diagram is a diagram consists of a system with its components. It depicts how the entities perform operations and related to the system. The flow lines shows direction of data flow.

3.Draw Level 0 data flow diagram depicting all the business process description provided

The data flow diagram as the name suggests depicts the flow of data from one process to another with the help of entities. The 0-level DFD doesn’t have data stores but the several process and internal or external entities who has some effect or who will affect the activities of the system.

4.Draw ERD showing all required entities and its relationships

ER diagram can be described as a relationship between attributes and entities. We have identified all the entities and their attributes along with cardinality and key constraints. Below are the tables for the database of Australian labs inventory tracking system. Entities are represented as rectangles, attributes in circles and relationships in diamonds.

Client
Contact
Client_type
Head_technician
Lab_technician
Test_vials
Test_vials_result

5.Draw CRUD diagram

The crude diagram was difficult to understand and needs a thorough analysis before starting it. Here CRUD means create, read, update and delete. These are all database operations. On the extreme left column there are process and rest are the action performed on that process by an entity will be examined by symbols C, R, U and D.

6.Provide a prototype of website design and architecture you have developed based on the case study

Below are some of the mockups made in order to show the design of website. As of now we have 6 pages like homepage, about us page, contact us page as main menus. Then we have a login button via which our clients can log in to our system and can access its functionalities. As you can see on the homepage there is a logo at the extreme left corner and a banner image is there as a welcome screen. Then below that there comes some introductory content and at last the footer having copyright. The website combination will be blue and white.

The user (clients) will register them in order to send test vials and view the test results and so on. He has to fill up the below registration form.

After get registered, user can login to the system by entering his login credentials and then click on submit button.

Here the client can add his test vials or samples.

He can also view the status of his test request in order to keep the tack of processing.

7.Details of individual group members contribution towards the development of the project

For this project we are four members and we have divided the task as project analyst, designer, modeler, and the one who implements the system and each of the member did his best to deliver the successful website design. The analyst gets the information for the project and researched everything. He understood the client’s requirements and what all data, resources are required for the system. He then delivers those insights to the project designer who designs the database and functionalities of the project that will fulfill its requirements like tracking, view_status, getting test reports, receiving test vials etc. He prepared a blueprint of the project in sketches form to let us acquainted with flow of the website.

The project modeler has created the diagrams like use cases, ER diagram, DFD’s and other related models required for the system. The implementer actually implemented the prototype of the website like diagrams made in Pencil tools that will give the actual look and feel of the fully functional website.

Advantages and disadvantages of the tool used for website design

1. We have used the Pencil Tool for developing the prototype of the website. The pencil tool makes it to draw the wireframes that gives the look and feel of actual website, just that it’s not operational. Some of the advantages are:

2. Easy Graphical user interface

3. Customized buttons, navigations and labels are available

4. Drag and drop makes it a simpler one and a choice of website designers

5. Available for every kind of interface be it of desktop or mobile platforms

6. Installation type is next to negligible

7.Availability of different connectors

Disadvantages

Many of the features are still not available like big HD images option is not available and it is not operational, sometimes button adjustments take time and hence become a time taking process. I do not find any such flaws that we can name it as disadvantage and hence this website is an appropriate website designing tool.

Conclusion

While working on this report I got to understand the concepts of data modeling and design. Implementation will be smoother if the designing is clear. Therefore in every project or website implementation we first need to design a prototype or some blueprints in order to successfully implement the website. I have gone through several resources and internet links to understand the data modeling concept. I have used the E_draw standard tool for creating diagrams like use case, context and Data flow diagram and pencil tool is used for mockups of website design. The task with which I am not acquainted was CRUD diagram and hence I have to understand what it is, but later I got the idea and I have successfully implemented it along with other tasks. This project really helped me to improve my website design and modeling skills.

References

YouTube. (2016). How to Create CRUD Chart from Business Process Diagram. [online] Available at: https://www.youtube.com/watch?v=q7gasyzfyXU [Accessed 6 Oct. 2016].

→, V. (2015). Use Case Diagram Tutorial ( Guide with Examples ) - Creately Blog. [online] Creately Blog. Available at: http://creately.com/blog/diagrams/use-case-diagram-tutorial/ [Accessed 6 Oct. 2016].

Treehouse Blog. (2014). How I Rapidly Prototype Websites - Treehouse Blog. [online] Available at: http://blog.teamtreehouse.com/rapidly-prototype-websites [Accessed 6 Oct. 2016].

YouTube. (2016). Wireframing using pencil. [online] Available at: https://www.youtube.com/watch?v=WBzjz92TYBI [Accessed 6 Oct. 2016].

Quora.com. (2016). What are the advantages and disadvantages of only using a Wacom tablet pen for drawing shapes and outlines using the pen tool in Illustrator? - Quora. [online] Available at: https://www.quora.com/What-are-the-advantages-and-disadvantages-of-only-using-a-Wacom-tablet-pen-for-drawing-shapes-and-outlines-using-the-pen-tool-in-Illustrator [Accessed 6 Oct. 2016].