Getting Started

Synopsis

This is a learning application that recieves user input, stores this input within a database compatible with the Laravel framework in Php, then outputs the contents of the database to a dynamic Javascript user interface.

Structure

There are two active components within this application:

ToDoList

This component handles the output of each individual item within the database into a proper format.

It has one parameter passed into it: the list of objects returned from the database. It then loops through these objects and outputs them in a formatted list.

ToDoItem

This component handles the input from the user and manages the ToDoList Component.

This component does not have any parameters passed into it from its function call.

However, it does make a call to the server-side API to retrieve the data from the database, which is returned as an array of objects. It then passes this array to the ToDoList component and re-renders the user interface.

At the construction of this component, a timed interval is assigned to the refreshing of the list of 'to do' items, which requires a call for the database's contents every two seconds. This then assigns the returned list of objects to the state list within the component, passes this list to the ToDoList component, and re-renders the user interface.

This component also has change listeners assigned to each of the input fields in order to catch the changes and input made by the user. With each change captured, the state variable assigned to the specified input field is updated and the user interface if re-rendered.

When the user submits the input from the fields in the form, the ToDoItem component sends an ajax signal with the user input to the server-side API, which then uses the Laravel/Eloquent Migration Model to create a new object/row within the database and stores the user-inputted information there. This new item is then viewable by the user when the visible list is updated with the client-side array within the next refresh-interval.

This component is also equipped with the ability to remove an item from the list. This process is performed when the user enters the id of the item he wishes to remove (the id is listed with the item's title in the ToDoList output). This id is then sent through an ajax message to the server-side API, which uses the Laravel/Eloquent migration model to select and remove the object from the database.

To Install

• Install with npm: npm install todoapplication
• Download the latest release
• Clone the repo: git clone https://[email protected]/psiconsultants/blythe-to-do.git

More information

This application was written as a training tool to learn the usage and composition of the Libraries:

• Apache - Apache*
• Babel - Babel*
  • Presets:
    • es2015
    • react
    • stage-0
• Bootstrap - Bootstrap
• Gulp - Gulp
  • Plugins
    • Webpack
• jQuery - jQuery
• Laravel - Laravel*
• React - React*
• ReactDOM - ReactDOM*
• Webpack - Webpack*

*required

Repository

https://[email protected]/psiconsultants/blythe-to-do.git

License

ISC

Contributors:

• Blythe Brown