Client-Side Interactive Web Application: Recipe Project

This project details the development of a client-side interactive recipe web application, emphasizing responsive design and the use of HTML5, CSS, and AngularJS. The assignment outlines the project's scope, including the development of a recipe management system where users can add, edit, and delete recipes. The project involves database design considerations, specifically the use of normalized forms and primary keys, alongside JavaScript implementation with validation. The project also covers server-side deployment using Tomcat and addresses potential server-related issues. The project's aim is to provide a practical learning experience for web development, focusing on interactive web applications, responsive design, and the understanding of HTTP methods. The project's phases include initiation, design, development, testing, and deployment, with a Gantt chart illustrating the project timeline. The project also mentions the use of web services and the importance of thorough testing to identify and resolve bugs. The project's goal is to demonstrate a functional and user-friendly web application for managing recipes, integrating front-end technologies with back-end functionalities.

Background
I am choosing client-side interactive web application as this is more important in modern world. As we
know now days all the web application is moving to mobile application. We are developing responsive
design for web application. Responsive web design makes our web page looks good on all the devices
like desktop, laptop and tabs and even mobile. For this purpose we are using HTML5 and CSS
technologies.
Online recipe system is an example for client-side interactive web application where we can displays the
list of all the recipes. We will handle below option for my online recipe system.
 Filter recipe based on recipe ID from the list of recipe
 Add the new recipe
 Edit the existing recipe
 Delete the recipe from the system
Problem
Here we need to take care of recipeID as we will do all the operation based on this key like adding,
editing or deleting any recipe.
Database design should be in normalised form and every table should have primary key. JavaScript code
should be well written with validation as this is backbone for any client side web application. We may
face issue in integration of the application with database connectivity to MySQL. Once our application is
completed we need to host into tomcat server so that user can use this remotely. Sometime we will face
server issue as it is unable to host and give 500 http codes so we need to troubleshoot this issue to run the
web application properly without any pain.
Aims
My aim to learn HTML5, CSS and AngularJS technologies as this is most demanding in interactive web
application development. In this development, I will design responsive web page so that it will run on any
devices with automatically resize. In this way anyone can see the recipe with steps and ingredients to
prepare food from any device as per availability. The recipe can be added, edited and deleted online. We
will learn different type of HTTP method concept like Get, Post, Put and Delete.

Hardware and Software Requirements
List of Hardware:
1. Window operating system
2. Internet
List of Software:
1. MySQL
2. AngularJS
3. HTML5
4. CSS
5. Java
6. Rest Web service
7. Tomcat server
Plan
Followings are the main tasks/phases of the project:
Initiate the project
In this phase we discuss with the stakeholder, define the scope of the project, define the project
requirement, and analyse the project.
Project design
In this phase we design the database, design the software etc.
Project development
In this phase we actually develop the system, followings are some development example for this project:
1. Create main.html
2. Page to display a recipe display.html
3. Add a recipe add.html
4. Edit a recipe edit.html
5. Create java script file ingredinet.js,recipe.js

6. Server setup for deployment
Testing
In this phase we perform the system testing, logged bugs and also fix the bug.
Gantt chart
Followings Gantt chart shows the project phases/task and their associated timescale:

References
[1]. Software requirements specification. (2018). Retrieved Oct 25, 2018, from
https://en.wikipedia.org/wiki/Software_requirements_specification.
[2]. WHAT IS A GANTT CHART? .(2018). Retrieved Oct 25, 2018, from
https://www.teamgantt.com/what-is-a-gantt-chart.