Professional Documents
Culture Documents
Bachelor of Technology
August, 2015
ABSTRACT
TABLE OF CONTENTS
1.
2.
3.
4.
5.
Assignment
Explanation
Assignment
Explanation
References
1
of Assignment 1
2
of Assignment 2
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)
Branch (select)
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 :
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
Result
Below are some screenshots for the work.
Final Result
Directory Structure
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.
3.
Figure 16: Screenshot showing the table structure of the created 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.
Clicking the Edit Form button, we open the form on with some
editing options:
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.
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.
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
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