Question

The purpose of this assignment is to read and understand the difference between front end and back end design of a database application.

Steps:
Search for articles describing front end and back end design of any application (example, a website). Summarize the concepts and elements for each one.
Does the database that holds all the data exist at the front end or the back end? Include the answer in your report.

Answer 1

Application with Front End and Back End

Example:

Amazon is an Online Shopping application.

Front-end: It's front-end contains many web-pages.

Home page provided with many options to login and sign up, to buy products, amazon pay feature, sell offer.

User can make request  to view profile, edit profile, place order, track order, cancel order and many more.

So basically, front- end consists of everything what users perceive and directly act upon.

Back-end: All the requests made by user goes to back-end of the website which has server to process requests.

Back-end of the application contains server which has logic for processing all the client(user) requests.

Database stores user details which includes name,email-id, phone and many more,  product details which includes product ID, price and many more.

So basically, back -end consists of everything that listens to user requests and act upon.

***************************************************************************************************************************************

Front End

The front-end includes everything that user experiences directly and interact with on browser. It is “client-side“ development. Front end developers are responsible for appealing look and interactive elements of the front-end product.

Some front-end languages:

HTML, CSS, JavaScript/jQuery

Some of the front-end elements includes:

1. Input Controls
2. Navigational Components
3. Informational Components
4. Containers

Input Controls

Checkbox: allow the user to select one or more options from a set.

Text field: allow users to enter text.

Radio Buttons: allow users to select one item at a time.

Button: allows an action upon touch.

Toggle button: allows the user to change a setting between two states.

Dropdown button: consists of a button that when clicked displays a drop-down list.

Dropdown lists: allow users to select one item at a time and allows to save space.

List boxes: allow users to select a multiple item at a time and allows to save space.

Date picker: allows users to select a date and/or time.

Information Components

Notification: is an update message that announces something new.

Message box: provides information using small window and requires users to take an action.

Modal window: requires users to interact before they can move to the system.

Tooltip: gives hints when user hover over an item.

Progress bar: indicates a series of steps in a process.

Navigational Components

Pagination: allows to divide content up between pages and allows users to skip between pages or go in order with the content.

Breadcrumbs: allow users to identify their current location.

Slider: allows users to set or adjust a value.

Icon: serves as an intuitive symbol that helps user to navigate the system.  

Search box: allows users to enter a keyword or query and submit and searches and displays most relevant results.

Image carousels: allow users to browse through a set of items and make selection of one or none.

Tags: allow users to find content in the same category.

Back End

The back end is everything that communicates between the database and front-end. It is "server-side" development which receives requests from the clients(front-end), and it has the code running on the server that is responsible for sending the relevant data back to the client.

Back end usually consists of three parts:

1. Server
2. Application
3. Database

Some back end languages:

C++, java, Python, PHP, .NET

Back end Elements

Server : This is responsible for receiving requests.

Application: This runs on the server that listens for requests from clients, has code to retrieve information from the database, and sends a response back .

Database: are used to organise and persistently store all the data for the application.

Difference:

Front end	Back end
is a client-side technology.	is a server-side technology.
all about the visual aspects that a user can see and experience	all about what happens on the background.
Users get to see.	Users cannot see.
developers are concerned about appealing look, responsiveness and user-friendly look of the product.	most focused on efficient product, it’s throughput and speed.
Languages: HTML, CSS, JavaScript/jQuery	Languages C++, java, Python, PHP, .NET

Database

The database that holds all the data exist at the back end.

Database is single repository responsible for creating, managing, retrieving and manipulating data relevant to application. It has the strategy to store, update, delete data on server. Back- end handles the user requests and fetch, efficiently retrieve most relevant data from database using query languages like SQL.

Example :

Many widely used relational database, Oracle, MySQL, SQL Server, PostgreSQL, and Oracle. NoSQL document-based database MongoDB, Orient DB, Mark Logic, BaseX.