ENTITY RELATIONSHIP + CRUD

MBFS

UX DESIGN

UI DESIGN

ABSTRACT

It can be an extremely difficult and time-consuming task to manage certain aspects of a server's database entries. To make things easier would be to create an agent facing CRUD and an interactive entity-relationship diagram that allows database admins to quickly change the database entries with a simple and intuitive user interface. A way for this user interface to grow along with the dynamics of the database was also essential.

/Finished Composition

THE PROBLEM

Database administrators for notifications and preferences needed a better way of managing database nodes and entries. It was a daunting task to log in, find the correct node, and do the code to make the changes. The changes happened too fast and there needed to be a better, more appropriate way, of migrating to and manipulating the commands in the system. A way to accomplish simplifying this was by creating a CRUD system for database validations, settings, and changes. They wanted a simple user interface that showed all the database tables and manipulative entries. They also needed a way to make the changes with a nice fall back notification that the updates were handled correctly. All we were given to start was a complex entity relationship diagram - the only tool available for the database administrator. 

/raw database diagram

"I want to be able to manipulate the server from a web UI "

THE PROCESS

1. Envisioning the Database

The user interface needs to be a quick and easy clickable resource that's easy to navigate. For the purpose of envisioning the development the database architecture housing nodes, tables, and fields illustrated by the entity-relationship diagram were collected and organized in an excel data sheet with all relations intact.

/database schema in excel sheet

2. Sketching Up the UI

The user interface needs to be a quick and easy clickable resource that's easy to navigate. For the purpose of envisioning the development the database architecture housing nodes, tables, and fields illustrated by the entity-relationship diagram were collected and organized in an excel data sheet with all relations intact.

/UI Prototype in Sketch App

THE SOLUTION

1. Functions With Angular

At this point, we are instantiating the functionality component of the application. This is done in Angular and the code pulls easily from a simple configured API to create, read, update, and delete entries from database tables and allow the editing of fields. The only step that could follow this is the wrapping of the bootstrap 4 template which leads us to the great looking final composition.

/angular compilation of database schema