Web Application and Development (WAD)

INTERNATIONAL HIGHER DIPLOMA IN COMPUTING

Assignment STUDENT NAME

: B.IDAYACHELVAN

EDHAT REGISTRATION NO.

: AL100132

PROGRAMME

:

International Higher Diploma in Management

SUBJECT CODE & TITLE

:

SDC 0401 / Web Application and Development

ASSIGNMENT TITLE

:

Understanding and experiencing the web application development

Summary of the Learning Outcomes covered:

1. 2. 3. 4.

Understand the Basics of Web Application and Development Understand the Server side interactions in web application Understand the Client side interactions in web application Analyze the Web services in web applications

ASSIGNMENT TYPE

: Individual Assignment

ISSUED DATE

: 10 / 06/ 2013

DUE DATE

: 28/ 07/ 2013

DATE SUBMITTED

: 18/08/2013

ASSESSOR

: MR.SHANKAR

INTERNAL VERIFIER

:

PLAGIARISM: While research and discussion are an essential part of an assignment, the deliberate copying of someone else’s work or unacknowledged copying from printed or electronic sources is NOT permitted. You may be subject to disciplinary procedure if you do this. You should sign this sheet to show that you comply with these regulations.

Student’s Signature:

Date: _18__/__08_/ __2013_____

International Higher Diploma in Computing /Semester4 Understanding and experiencing the web application development /Individual Assignment

1|P a g e

Mark Range 0 - 29 30 - 39 40 - 49 50 - 54 55 - 59 60 - 64 65 - 69 70 - 74 75 - 79 80 and above

Task 01 – Marks

Grade Point 0.0 1.0 1.7 2.0 2.3 2.7 3.0 3.3 3.7 4.0

Task 02 – Marks

Task 03 – Marks

TOTAL SCORE (Average of the above/Overall Grading)

Grading Representation E D CC BB B+ AA A+

Task 04 – Marks

Grade Point

Total Marks

Final Grading

Assessor Comments:

Assessor:

Signature:

Date:_____/_____/ ___________

Signature:

Date:_____/_____/ ___________

Internal Verifier’s Comments:

Internal Verifier:

International Higher Diploma in Computing /Semester4 Understanding and experiencing the web application development /Individual Assignment

2|P a g e

Outcomes/Criteria for Pass

Possible evidence

Page No.

Feedback

SDC 0401.1 – Understand the Basics of Web Application and Development SDC 0401.1.1 Demonstrate the web application and development environment SDC0401.1.2

Analyse the compatibility of various web browsers against operating systems SDC0401.2- Understand the Server side interactions in web application

SDC0401.2.1

Demonstrate the usage of PHP with MySQL SDC0401.2.2

Develop the ability to create web applications using PHP & MySQL SDC0401.2.3

Demonstrate the usage of advanced PHP tricks, MVC and DOM SDC0401.3- Understand the Client side interactions in web application

SDC0401.3.1

Demonstrate an understanding of the client side development SDC0401.3.2

Demonstrate the ability to use HTML, CSS and JavaScript SDC0401.3.3

Develop the knowledge in XMX, AJAX and relevant frameworks SDC0401.4- Analyse the Web services in web applications SDC0401.4.1

Analyse and handle the web services in web applications knowledge

International Higher Diploma in Computing /Semester4 Understanding and experiencing the web application development /Individual Assignment

3|P a g e

Outcomes/Criteria for the B+ /A- grading (Merit) Use of different theories, strategies to apply the suitable solution/s

Possible evidence

Page No

Feedback

Possible evidence

Page No

Feedback

Use of various sources & or resources

Presenting the completed work & or concluded findings The use of critical self evaluation & justification

Outcomes/Criteria for the A / A+ grading (Distinction) The use of clear definitions & explanations proper organizing & managing the assessment work Topic relevancy proper concentration on creative , innovative thinking

International Higher Diploma in Computing /Semester4 Understanding and experiencing the web application development /Individual Assignment

4|P a g e

You are required to build a website featuring the technologies taught in the lectures. The topic of your site can be any of your choosing. Pick something you have an active interest in, a hobby, a sport you play, a group or club you belong to, or any similar topic. Once you have selected your topic YOU MUST CONFIRM THIS WITH YOUR TUTOR. You will not be allowed to proceed with your topic of choice without tutor agreement. You may not change your topic without further consultation with your tutor. (Total marks 100) Features to be implemented You are required to build a “dynamic” website where users can: - Search for and read existing articles/messages. - Post new articles/messages and amend existing ones. Examples of such websites include news websites, blogs and wikis. Articles/messages should be stored in a database. Your website should be coded using an Object Oriented approach, and based on an appropriate architectural pattern, such as MVC or the example learnt in class and featured on the Wiki. Furthermore, the following “web 2.0” functionalities should be implemented: - RSS: Your website should produce an RSS feed and consume an existing RSS feed produced by another website. - API: Your website should use an API (e.g. Amazon, Google, Face book…) in order to provide useful functionalities. - Ajax: The user experience should be improved by appropriate use of Ajax technology. Finally a mobile version of your website should be displayed when your site is accessed from a mobile phone. All the principles and technologies above will be covered in the lectures.

END OF ASSIGNMENT

International Higher Diploma in Computing /Semester4 Understanding and experiencing the web application development /Individual Assignment

5|P a g e

ACKNOLEDGEMENT I take this opportunity to thank Almighty God for assisting me throughout my assignment and my parents and family members and friends for who kept me in high sprit by giving me encouragement. I would be indebted if I did not thank my Web applications and Development lecturer; helping me throughout the class hours and teaching me the Module successfully. He inspired me greatly to work in this project. His willingness to motivate me contributed tremendously to my project. I thank him wholeheartedly for giving me advice when needed so the assignment will turn out to be success. Besides, I would like to thank the IDM city campus # 3 for providing me with a good environment and facilities to complete this project. Also, I would like to take this opportunity to Edhat International for offering this subject; Web applications and Development lecturer without helps of the particular that mentioned above, I would have faced many difficulties while doing this project.

Thank you

International Higher Diploma in Computing /Semester4 Understanding and experiencing the web application development /Individual Assignment

6|P a g e

Table of Contents ACKNOLEDGEMENT ................................................................................................................................................ 6 Introduction ............................................................................................................................................................ 8 Aims of the System ................................................................................................................................................. 8 Purpose of the System ............................................................................................................................................ 8 Function of the system ........................................................................................................................................... 8 Benefit of the system .............................................................................................................................................. 9 Technologies ......................................................................................................................................................... 10 ERD ........................................................................................................................................................................ 13 Database Veiw ...................................................................................................................................................... 13 Security ................................................................................................................................................................. 18 Backend................................................................................................................................................................. 18 Physical design ...................................................................................................................................................... 18 Marketing.............................................................................................................................................................. 24

International Higher Diploma in Computing /Semester4 Understanding and experiencing the web application development /Individual Assignment

7|P a g e

Introduction In Sri Lanka there are no any sites which have all details about textile and costume for the customers at the same if any customers at the same time if any customers want to search and get details they have to check different sites which are available in Sri Lanka. For that we have decided to create the onestyle.com as the solution Aims of the System Customers Client satisfaction. Keeping the records customers and client details Creates the reports with advanced features Perform the Calculation in better way Develop the system in user friendly Increasing the perform their business Purpose of the System User Friendly We are planning to target all types of customers Reach the business market Make our site popular Getting more adds and earns more money through publishing ads. Link all Sri Lankan textiles with our sites. Introducing latest New Design and costumes to our country

Function of the system Customers For and users they can visit to our site they can get the details what they related costumes and design. If a customer would like to purchase something than they have to create to account to register (name, address, email, telno, credit cards hey have to agree with our legacy policy. Clients We are purpose the clients to add their advertisement in our website Request to publish advertisement They will get their own account to check the status of the site.

International Higher Diploma in Computing /Semester4 Understanding and experiencing the web application development /Individual Assignment

8|P a g e

Company Monitor the site as a website Allow to user to create account and maintain the accounts detail secure Updating the site day to day Benefit of the system Customers Customers they can find whatever the details They need about costumes Make business transaction easily Save their time When the customers need to search and find the latest design of the costumes they can find as follows in our website

Clients They do not need to monitor their ads separately Whatever the latest designs and costumes they also can find our site Because that our work Every business transaction they can handle trough the online

International Higher Diploma in Computing /Semester4 Understanding and experiencing the web application development /Individual Assignment

9|P a g e

Company Getting profit through advertisement. Technologies Limited pages On load less time Attractive Platform compatibility Mobile application Software and hardware compatibility High security plugging Latest backing up technology like cloud computing Latest technology such as Jquery, Ajax

CSS Cascading style sheets (CSS) is a language like HTML, and gives web designers powerful tools for controlling the visual presentation of documents on the Web. The Web is a powerfully visual environment and most people including most people with disabilities interact with it visually. The disabilities affected by this aspect include low vision, cognitive disabilities such as dyslexia, Attention Deficit Disorder (ADD), and Traumatic Brain Injury (TBI). CSS helps to separate content and structure from presentation and layout, which also helps web designers to create documents that load faster and are easier to maintain and update. Content can be changed independently of formatting because presentation and layout are handled in CSS. This means you can also change presentation and layout on hundreds or even thousands of pages at once by changing the external style sheet to which those pages are linked. The important benefits for accessibility include offering users a choice of styles without having to modify the source document, and the ability to easily verify that the source documents work with assistive technologies before applying any styles at all.7

Ajax AJAX is rapidly becoming an integral part of several websites, several well established brands online now use AJAX to handle their web applications because it provides better interactivity to their users, this is due to the fact that implementing AJAX on a website, does not require a page to be reloaded for dynamic content on web pages. While there are numerous reasons to switch to AJAX there are quite a few matters that would make you reconsider using this combination of technologies as well. Below are some of the advantages and disadvantages of using AJAX.

International Higher Diploma in Computing /Semester4 Understanding and experiencing the web application development /Individual Assignment

10 | P a g e

Better interactivity This is pretty much the most striking benefit behind why several developers and webmasters are switching to AJAX for their websites. AJAX allows easier and quicker interaction between user and website as pages are not reloaded for content to be displayed.

Easier navigation AJAX applications on websites can be built to allow easier navigation to users in comparison to using the traditional back and forward button on a browser. Compact With AJAX, several multipurpose applications and features can be handled using a single web page, avoiding the need for clutter with several web pages. For our use of AJAX on goedkopezomervakantie.com, it took just a few lines of code! Backed by reputed brands Another assuring reason to use AJAX on your websites is the fact that several complex web applications are handled using AJAX, Google Maps is the most impressive and obvious example, other powerful, popular scripts such as the bulletin forum software has also incorporated AJAX into their latest version. jQuery JQuery is a new kind of JavaScript library that makes it easier for designers to control HTML events, animations, and other interactions on a web page by adding and removing style sheet handlers. These handlers are either HTML classes or IDs; the handlers are specified in a style sheet, which then tells the browser how to position and style HTML elements. With jQuery, web designers can quickly and easily write these handlers to the document on specified events, such as a mouse click or a hover, and when we do so, it will change the style and/or position of that element. JQuery also simplifies AJAX the client-side web development techniques for creating interactive web applications. AJAX applications can retrieve data from the server quietly in the background without interfering with how a web page displays or behaves. AJAX uses HTML and CSS (cascading style sheets) to change style and layout via user interaction and input

International Higher Diploma in Computing /Semester4 Understanding and experiencing the web application development /Individual Assignment

11 | P a g e

MVC Architecture The Controller is essentially the traffic cop of the application, directing traffic to where it needs to go, figuring out which view it needs to load up, and interacting with the appropriate models. For example, when you go to login to your email on a website, the controller is going to tell the application that it needs to load the login form view. Upon attempting to login, the controller will load the model that handles logins, which will check if the username and password match what exists within the system. If successful, the controller will then pass you off to the first page you enter when logging in, such as your inbox. Once there, the inbox controller will further handle that request.

In a web-based application, the view is exactly what it sounds like: the visible interface that the user interacts with, displaying buttons, forms, and information. Generally speaking, the controller calls up the view after interacting with the model, which is what gathers the information to display in the particular view.

The Model is where data from the controller and sometimes the view is actually passed into, out of, and manipulated. Keeping in mind our last example of logging into your web-based email, the model will take the username and password given to it from the controller, check that data against the stored information in the database, and then render the view accordingly.

International Higher Diploma in Computing /Semester4 Understanding and experiencing the web application development /Individual Assignment

12 | P a g e

ERD username

password

custname

type

emailid

custno telno customers

approve

Users

address will

discription

create manage

Category Order

have

Have

Product

buy

Client

Database Veiw

International Higher Diploma in Computing /Semester4 Understanding and experiencing the web application development /Individual Assignment

13 | P a g e

Create tables

Table view Category table

Category management table

International Higher Diploma in Computing /Semester4 Understanding and experiencing the web application development /Individual Assignment

14 | P a g e

Client table

Customer Table

International Higher Diploma in Computing /Semester4 Understanding and experiencing the web application development /Individual Assignment

15 | P a g e

Order table

Product table

International Higher Diploma in Computing /Semester4 Understanding and experiencing the web application development /Individual Assignment

16 | P a g e

Users table

Database Schema

International Higher Diploma in Computing /Semester4 Understanding and experiencing the web application development /Individual Assignment

17 | P a g e

Security Able to get backup monthly Restrict user accounts(One person do not Have more than 1 account) Store the backup Backend We should able to upload our own news and galleries We should able to maintain the customers and clients details through online Maintain the email accounts for the users with our domain Server maintenance

Physical design Index page

International Higher Diploma in Computing /Semester4 Understanding and experiencing the web application development /Individual Assignment

18 | P a g e

Home page

About Us page

International Higher Diploma in Computing /Semester4 Understanding and experiencing the web application development /Individual Assignment

19 | P a g e

Style page Latest page

Old page

International Higher Diploma in Computing /Semester4 Understanding and experiencing the web application development /Individual Assignment

20 | P a g e

Collection page Men collection page

Contact Us page

International Higher Diploma in Computing /Semester4 Understanding and experiencing the web application development /Individual Assignment

21 | P a g e

In this web site the following file are included to develop the back and the front end CSS fotorama.css style.css style_menu.css fotorama.js jquery.s PHP Database db_conn.php functions.php php_funtions.php Backend index.php style_form.php style_manage.php

Database connection (db_conn.php)

Php functions (php_functions.php)

International Higher Diploma in Computing /Semester4 Understanding and experiencing the web application development /Individual Assignment

22 | P a g e

Functions (functions.php)

Main Style creation form (style_manage.php)

International Higher Diploma in Computing /Semester4 Understanding and experiencing the web application development /Individual Assignment

23 | P a g e

Menu selects the Category

The other selection controls are same as the above

Marketing Giving promotions to the customers Paper advertisements Social media marketing Email with customers

References https://www.google.lk/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&sqi=2&ved=0CDMQtwIwAQ&url=http %3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D0AxVMiRjgmQ&ei=qmkQUtGpOquhiAfGkIHICw&usg=AFQj CNF_o29PJaWfM4oU-BxFS6jYTNv8EQ&sig2=hWTCSTGn6H70LE5uX7bNEw&bvm=bv.50768961,d.aGc&cad=rja https://www.google.lk/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&sqi=2&ved=0CCgQFjAA&url=http%3A %2F%2Fanswers.vt.edu%2Fkb%2Fentry%2F612%2F&ei=qmkQUtGpOquhiAfGkIHICw&usg=AFQjCNGWytgz_6P r9ZkB3iAiSd33WIhVhA&sig2=h2V2NgYBnZnZihxA5dQXkQ&bvm=bv.50768961,d.aGc&cad=rja http://en.wikipedia.org/wiki/Web_application_development https://www.google.lk/webhp?source=search_app&gws_rd=cr#bav=on.2,or.r_cp.r_qf.&fp=2150b8c75267ec7 &q=web+application+and+development+environment

International Higher Diploma in Computing /Semester4 Understanding and experiencing the web application development /Individual Assignment

24 | P a g e