You are on page 1of 24

FormBuilder

A Summer Training Report Submitted


in Partial Fulfillment of the Requirements
for the Degree of

Bachelor of Technology

ABES Engineering College, Ghaziabad


UTTAR PRADESH TECHNICAL UNIVERSITY
LUCKNOW

August, 2015

ABSTRACT

FormBuilder is a web application that helps people to build form of their


choice with ease, by simply dragging and dropping the controls they need
on the form.
The form later can be used for sharing to fill in the information need. For
example, in colleges and schools, many times it is needed for the student
to fill out some required information. The College staff usually create
google forms, for this reason this application was built to make it easy for
the management to carry this process of collecting information from the
students, or any other staff.

TABLE OF CONTENTS

1.
2.
3.
4.
5.

Assignment
Explanation
Assignment
Explanation
References

1
of Assignment 1
2
of Assignment 2

Assignment 1( The Basics )


Task
To Create a responsive Sign-Up page that accepts user information and
submits it to the server. The information will then be stored in a Database
table. All the stored user records in the DB should be displayed on a
separate page in two formats : tabular and grid.

Sign Up Page
1. The page will be divided into three parts : header, body and footer.
The header would contain an appropriate heading. Body would
contain the sign-up form and the footer should contain a dummy
copyright statement and a link to a public url.
2. The sign-up form should contain the following fields:

User ID (alphanumeric)

Password (password)

Name (text)

E-mail ID (email)

Gender (radio)

Image (file - jpg, png or gif)

Branch (select)

Accept terms and conditions (checkbox)

3. The form should be properly validated at client side as well as server


side. It should contain the following validations:

User ID should contain both alphabets and numbers; having a


length of 10

Password should be a mix of alphabets, numbers and special


characters(!, $, @, #). Minimum length should be 8 characters
and maximum 30.

Name should not contain any numbers or special


characters(except dot . , space , hyphen -)

E-mail ID should have a valid email id.

Gender at least one radio button should be selected.

Branch at least one should be selected

Terms & conditions : the submit button should be disabled until


this is checked.

Form Submission
1. Submit the sign-up form to a separate PHP page. The data should be
stored in the designated table in the Database after it passes all the
validations (at client as well as server side); else an appropriate
error message should be displayed.
2. Image has to be stored in a directory at the server and the image
name should be saved in Database.
3. Database Table structure is as follows :

4. After successful entry of records in the database display a success


message and present the user with two options :

View records in tabular format

View records in grid format

View Page
1. Tabular Format: It is a responsive table containing records for
individual user in separate rows. The following columns should be
present in the table:

Name

User ID

Email ID

Gender

Branch

2. Grid Format: It is a view of user records displayed as thumbnails.


Each user thumbnail should have the following structure:

The user image on top

Name, Branch and Email below the image

Result
Below are some screenshots for the work.

Figure 1: Registration Form

Figure 2: Validation on Fields

Figure 3: Showing Records in Tabular Form

Final Result

Figure 4: Showing Records in Grid Form

Directory Structure

Figure 5: Directory Structure Used

Technologies Used in Assignment 1

HTML, CSS, jQuery


Bootstrap3 Css Framework
PhP (Hypertext Preprocessor)

Assignment 2 (Resume Builder )

Task
To create a web application that helps create forms with simple drag
and drop capability and then after clicking on the save form button
the form that was designed must be save in a separate file and also
provide the capability to use that form to accept input from the user
and save it in the database.
Resume Builder Page
The page is divided into three parts: controls box, work area and the
right panel for showing the panels and the controls added to the
work area.
1. Control Box
The control box will contain the controls that can be
added to work area.
The controls must have the capability to be dragged and
can be dropped in the work area.
The controls can only be dropped inside a panel.
Following are the controls required to be used.
1. Heading(H1-H6)
2. Input Field
3. Paragraph
4. Table
5. List (unordered, ordered)
6. Image
7. Panel
2. Work Area
Any number of panels can be added to work area.
Panels must be sortable.
Panels must have the capability to drop a control inside of
it.
Panels can also have subpanels.
Subpanels are resizable.
The Controls inside any panel must be sortable.
3. Right Panel

This panel show up the panels and the controls added to the work
area.
It should be dynamically be updated if any control is added to work
area.
On click of any panel it should show the controls inside that panel.

TASK 1 : Save Form


When Save button is clicked the following event occurs:

Create a JSON of the structure that user creates.


Send the JSON structure to the server.
On Server Side, parse the JSON and create a file for the form just created
by the user in a separate file and store it on the server.
After Creation of separate file for the form, create a table for the same
form where the structure of the table would be like.
1. The columns will be the id of the controls.
2. The id of controls will be of format
panel_(id)_(controlname)_(controlid).
3. One column will store the userid.
Create another table for mapping the form table and the form file that
reside on server.
Table structure will be like.

Figure 6: Form_File table structure

Screenshots Showing Basic Steps for Creating a Form

1. Basic form builder home screen.

Figure 7: Resume Builder Home Page

2. Dragging and Dropping Controls

Figure 8: Dragging Control to Panel

3.

After Adding Controls to our Form

Figure 9: After Adding Controls to Panel

4. Editing the Controls added to Form

Figure 10: Editing Controls inside Panel

5. Controls after Editing

Figure 11: Controls After Editing

6. Controls During Sorting i.e.,(changing the order of controls


inside panel)

Figure 12: Sorting Controls inside panel

7. After Sorting of Controls inside the panel.

Figure 13: After Sorint controls inside panel

8. Saving the form

Figure 14: clicking Save Button

9. After Saving Form.


After the Save button is clicked , the json of the form so created is send to
the server with help of AJAX, where on the server we decode and parse the
json to save the form details in the database like, the following information
is saved:
Name of the form
The controls inside the form
Text or html stored inside the parent controls.
Control id
After saving all these details, user is informed through pop up that the
form is created successfully.
On Server side, the table corressponding to any form has the following
structure:

Figure 15: Form Created Successfully

Figure 16: Screenshot showing the table structure of the created form

TASK 2: Editing the form

After clicking on edit button, a list of already created form is show, and
we are given options to select one of the form to edit it.

Figure 17: After Clicking on Edit button

On clicking the form we want to edit, we are give a preview of


the form we just selected:

Figure 18: Screen on clicking on any form name

Clicking the Edit Form button, we open the form on with some
editing options:

Figure 19: Clicking on Edit Form Button

Now notice that we have some editing options with every


control, if we wanted to add some data to the table in the form,
we clicked the plus icon and we are prompt for the data, the
following sequence of screenshots show this operation:

Figure 20: Enter data to Admission No Field

Figure 21: Entering data to Name Field

Figure 22: Entering data to Semester Field

Figure 23: Entering data to section Field

Figure 24: Creating of new data row

Now on Clicking the Save Button, we made the final changes that we have done
here, the changes are saved in the table corresponding to this form.

Figure 25: On clicking Save Button

Figure 26: Showing the changes made to form table

Some Shortcoming or bugs in our Application:

We face some problem, when we want to sort the panel or we can say
when we try to change the order of the subpanels, and while doing that,
the multiple copies of the subpanel are created automatically, so we didnt
implement this feature.
Another Bug that we came across is that, when we have two subpanels
with only one control and we dragged the control from one panel and
dropped it to another subpanel, the subpanel that is empty didnt have
any method to either get dropped automatically or provide an option for
user to drop that subpanel
Also when the two panels are dropped, we lost the option to drop the
parent panel that contains the two subpanels.
For that we have to add another control to the subpanel or the main panel
to drop that panel.
At present every form have the same theme, or same formatting style.

Scope of FormBuilder Application:


This application have a great scope of improvement and a wide range of features
that can be added later. Some features that may be added are:

We can provide the feature to create form based on the source code, like
for advanced user who knows basic html, can create form using source
code rather than dragging and dropping, it will provide extensibility to our
application.
Various formatting features can be added for the controls like
1. Size of font
2. Color of control (background, foreground)
3. Size of control
We can also provide user with the feature to edit the CSS of any control
For Example: On clicking on any control, we can show a tab with all the
properties and attributes that are available for that particular control
Taking an example of input field we have the following common
attributes to edit:
1.
2.
3.
4.
5.
6.

type
name
placeholder
class
id
length

Similarly for every control we can provide this option.

Also after creating a form, we can share this to anyone with the link to
the form, so that anyone can use this form just like we use google forms.

Technology Used:
1.
2.
3.
4.
5.
6.
7.

HTML
CSS Bootstrap
jQuery
JSON
jQuery Plugins (draggable.js, droppable.js, sortable.js, resizable.js)
PhP
eZSQL (PHP class to deal with every kind of databases).

References:
1.
2.
3.
4.

http://www.jquery.com
http://www.jqueryui.com
http://www.getbootstrap.com
https://github.com/ezSQL/ezSQL

You might also like