Project

Concepts need to be implemented in real life to ensure that learning is complete. This module helps students to demonstrate their HTML, JavaScript, and XML programming skills.

In this project, you will learn to: Implement the required functionality in an application Design user-friendly interfaces

Objectives

NIIT Project 1.3

LeadTheRoad, Inc. is a leading tour operator in the US. The company is headquartered in Chicago. It provides affordable package tours to Thailand, Malaysia, Hong Kong, China, Maldives, Mauritius, New Zealand, and Singapore. In addition, the company offers customized tours, incentive travel packages, online hotel reservations, business travels, and study tours. The company has tie ups with all leading airlines and chains of hotels in order to provide better services to tourists.

With the growth of the tourism industry, many new tour operators have emerged across the US giving tough competition to LeadTheRoad, Inc. The management of the company is concerned about the growing competition and has asked Peter Iglesias, the Marketing Manager of the company, to work on new strategies to increase the customer base.

Recently, the company has been appointed as the official tour operator for the upcoming World Skiing Championship scheduled for the coming month in Switzerland. The company wants to use this opportunity to build its credibility in the market.

The company plans to create a website to give it a cutting-edge corporate appeal and to provide various online services to its customers.

Peter believes that a website extends the geographic reach of any business. In addition, a quality website helps businesses to communicate with customers effectively, thus building strong relationships with them. Peter wants the company website to include the following information:

Vision and growth International operations International and domestic ticketing Visa processing Travel tips Company and branch offices’ contact numbers

Case Study 1: LeadTheRoad, Inc.

Background of the Company

Current System

Envisioned System

1.4 Project NIIT

With the World Skiing Championship scheduled for the coming month in Switzerland, Peter also wants event-related information to be added to the website. As one of the steps towards enhancing the appeal of the website, Peter wants to provide customers with a virtual tour of the host city.

According to Peter, an organization’s success is a measure of its customer satisfaction. To enable customers to give the company their valuable suggestions and queries, Peter wants the company website to include a customer feedback form. This will help the company analyze customer satisfaction and improve on the services provided by the company.

The following specifications have been laid down for the development team to create the company’s website:

All the Web pages need to be consistent in terms of layout, navigation, and design.

A special section on virtual tours needs to be included on the home page. For providing the virtual tour, a Web page containing three images of the host city needs to be created. Each image will provide a hyperlink to a new page that provides the details of the host city. A Web page providing information on latest packages offered by the company needs to be included. The information would include the tourist location, package cost, and duration of the trip. The package information needs to be stored in an XML file, which can be retrieved at run time using JavaScript. In addition, an animated strip on latest packages needs to be included in the status bar. A registration form needs to be added to the website that will enable visitors to book airline and hotel tickets online. A feedback form also needs to be added to the website that will help visitors give their suggestions and queries. The data entered by the user in the registration form and feedback form should be validated by using JavaScript. A special section needs to be included on the website to publish FAQs related to the event.

NIIT Project 1.5

MyRoadShow is a pioneer entertainment and event management company in the US. The company is equipped with advanced laser and lighting technologies that are instrumental for the success of any show or event.

MyRoadShow is completing its fifth anniversary in the coming month. On this occasion, the company is planning to organize a music concert at GoodPlay Stadium, California. The event is to be organized under the leadership of company’s event manager, Philip Jackson.

To ensure the success of the event, Philip decides to invite a celebrity artist from the music industry. In addition, the marketing department of the company has hired an advertising agency to prepare a comprehensive advertising strategy that would inform the public about the date, venue, and celebrity guests of the show. The commercial will be aired on Channel T, with a message: Choose your favorite celebrities online at the MyRoadShow website. The four choices include:

Garry Richards, the rock star Elton Adams, the pop star Gloria Aniston, the pop diva The Band of Guys, the famous pop band

Based on public demand, the celebrity will be invited to perform a live show.

The existing website of the company contains the following information:

About the company Success stories Upcoming events Corporate events Television events Contact details

The current setup of the website provides the required information in a tabular and concise manner, and is not interactive. It does not reflect the brand image of the company. The company requires a flashy, visually rich, and interactive Web presence, which the existing website lacks.

Case Study 2: MyRoadShow

Background of the Company

Current System

1.6 Project NIIT

Philip has decided to hire a team of Web developers to create a new website for the company. The site needs to be interactive in order to attract visitors. For this, animation and multimedia effects need to be added to the website.

The following specifications have been provided to the development team for the creation of the website:

All the Web pages need to be consistent in layout, navigation, and design. The website should provide information about the company’s vision, achievements, clients, and contact details in separate pages in a structured manner. The information about the clients and contact details should be stored in an XML file, which can be retrieved at run time. The website should have a viewers’ input form that will help viewers to choose their favourite celebrity. The new website should allow visitors to book their tickets for the concert, online. JavaScript should be used to validate user input. A celebrity section should be added to provide information about celebrities. Links that would point to the required information need to be created on the images of the celebrities. The upcoming events of the company should be displayed in the status bar of the home page. The information about the upcoming events should be stored in an XML file, which can be retrieved at run time. A special section needs to be included on the website to publish FAQs related to the event.

Envisioned System

NIIT Project 1.7

Turnshop Corp. is a leading publishing house in the US. The company’s headquarter is in Atlanta. It has been publishing books, articles, journals, novels, magazines, and encyclopedias for the past fifteen years. The customers of the company include students, IT professionals, and research scholars. The company enjoys a dominant position in the publishing business with 15 retail outlets in all major cities in the US.

At present, the company sells books only through its retail store, which limits the company’s consumer base. The company depends on the print and electronic media to advertise its products. The company does not have any website for this purpose. All the competitors of the company already have websites and many of them are also selling books online. The company is losing its customers to competitors because an increasing number of people prefer to buy books online, without having to visit a retail outlet.

The company decides to develop a catalog website that will showcase all titles available with it. The company wants to check the response to the website through customer feedback before venturing into an e-commerce initiative. In addition, to expand its business operations and reach out to people globally, the company plans to venture into e-learning with a mission to develop easy-to-understand online tutorials.

The management of the company feels that a website will provide more public exposure, thereby helping the company to increase its revenue.

The following specifications have been laid down to design the company’s website. The design, layout, and navigation of the website need to be consistent across all Web pages. The website should contain information on the company’s profile, its mission, and its contact details. All the books, journals, magazines, and novels should be displayed according to their categories, along with their prices. Selecting any book should display review comments and a summary of the book to provide a quick insight to the book’s content to customers. The information about the books, their categories, their price, review comments, and summary should be stored in an XML file, which can be retrieved at run time.

Case Study 3: Turnshop Corp.

Background of the Company

Current System

Envisioned System

1.8 Project NIIT

A customer order form needs to be provided to help customers place their orders online. After the order is placed, a bill needs to be generated in a new window. The data provided by the user must be validated by using JavaScript.

A list of online tutorials needs to be provided for students, professionals, and scholars. A feedback form should be included through which customers can give their suggestions.

The visitors should be allowed to customize the color settings of their Web pages. When the visitor revisits the website, the same display settings should be applied. To store user preferences, cookies may be used. A special section needs to be included on the website to publish FAQs related to searching books, using online tutorials, and placing orders online.

NIIT Project 1.9

Allen Communications is a leading telecom provider in the US. The company is headquartered in California. It provides a range of fixed and mobile phone services and Internet services in the US. The company is the market leader in the fixed telephony market with 38% of the total customer base. It has started major investments in mobile and internet services. The vision of the company is to provide reliable and affordable communication anytime, anywhere.

With the growth of telecom industry, the company has been facing stiff competition in its domestic fixed-telephony market. The primary aim of the company is to maintain its leading position in the fixed-telephony market. The company is also working to reinforce its position as a leading mobile operator and Internet service provider through various joint ventures.

The company has opened a chain of retail outlets in all major cities. The outlets fulfill various customer service needs including information about products and services and handling queries and complaints.

Retail outlets of the company are not proving to be sufficient due to the large customer base. To fulfill the requirements of every customer, the company plans to create a website to provide various online services.

To provide an excellent online experience to all its existing and prospective customers, the management of the company has planned to launch a new website. The website should include the following features:

It should provide information about the company, its vision, and its mission. It should provide information about the products and services provided by the company. It should provide the contact details of the company’s branch offices and retail outlets. It should provide features to handle the queries and complaints of customers.

Case Study 4: Allen Communications

Background of the Company

Envisioned System

Current System

1.10 Project NIIT

The website will help existing customers to use the online services of the company. It will also provide information to potential customers. A customer can register complaints or place a query about various products and services of the company. This helps the company to analyze the quality of service and improve the customer-satisfaction level.

The following specifications have been laid down for the development team to create the company’s website:

All the Web pages need to be consistent in layout, navigation, and design. The Products and Services section should provide the following information:

Tariff plans for fixed phone, mobile phone, and Internet services Fixed and mobile phone instruments offered by the company The procedure to apply for a new connection

The New Connection section should provide an application form to the user. The data provided by user in the application form must be validated using JavaScript. The Contact Details section should provide addresses and contact numbers of different branch offices of the company. It should also provide statewise and citywise list of retail outlets. The information about the retail outlets should be stored in an XML file, which can be reterived at run time. The Feedback section should allow users to register their commplaints and queries. A special section needs to be included on the website to publish FAQs related to the company’s products and services.

NIIT Project 1.11

Carrier Search, Inc. is a leading provider of job recruitment and related services in the US. It has established a network of more than 150 offices throughout the country. The company is specialized in the areas of accounting, finance, sales, marketing, information technology, and engineering. It has tie ups with the best employers of all functional areas. The company provides services for full time, part time, temporary, and contract employment.

Carrier Search, Inc. provides recruitment services to meet the requirements of business organizations. The company is planning to expand its business to new geographical areas such as Europe, Middle East, and South East Asia. The company plans to create a website to provide recruitment services to its domestic and global customers.

The management of the company has decided to provide a Web-based recruitment service where job seekers can host their resumes and companies can advertise their requirements.

Job seekers can search for positions based on criteria such as industry, functional area, job location, and experience required. Similarly, companies can also search for candidates based on criteria such as functional area, age, educational qualification, and experience level.

To enhance the usability, the website must contain the following sections:

About Us: This section should contain the company profile and its contact details. Company Profiles: This section should contain profiles of the top five companies that have recruited maximum employees using this website.

Walk-in: This section should contain information about walk-in interviews scheduled by various companies in the coming week. Top Jobs: This section should contain top job openings in different functional areas such as, finance, marketing, and information technology. Search Profiles: This section allows employers to search profiles of job seekers based on one or more criteria.

Search Jobs: This section allows job seekers to search a job based on various criteria.

Case Study 5: Carrier Search, Inc.

Background of the Company

Current System

Envisioned System

1.12 Project NIIT

The following specifications have been laid down for the development team to create the company’s website:

All the Web pages need to be consistent in layout, navigation, and design. The profile information of job seekers should be stored in an XML file. This information should include name, age, qualification, functional area, experience level and contact information. The Search Profile section should provide an interface to employers to search candidates based on one or more criteria. The search should be done in the XML file containing the profile information by using JavaScript. The search result should include information of all the job seekers who fulfill the search criteria. The job information of a company should be stored in an XML file. This information should include company name, industry, functional area, job location, and experience required.

The Search Job section should provide an interface to the job seekers to search jobs based on one or more criteria. The search should be done in the XML file containing the job information by using JavaScript. The search result should include information of the jobs that fulfill the search criteria. A special section needs to be included on the website to publish FAQs related to searching jobs and profiles.

NIIT Project 1.13

This book contains six case studies. One case study will be allocated to each student.

The project will be carried out in the following phases: Requirements Analysis: In the requirements analysis phase, an in-depth study of requirements is conducted to understand the proposed functionality of the system. The analysis phase is the most crucial phase in a project because it helps developers to identify the processes in the system and the functioning of each process. The project teams will analyze their respective case studies before moving on to the design phase. Design: In the requirements analysis phase, an in-depth study of requirements is conducted to understand the proposed functionality of the system. The analysis phase is the most crucial phase in a project because it helps developers to identify the processes in the system and the functioning of each process. The project teams will analyze their respective case studies before moving on to the design phase. Development: In the development phase, the project is developed based on specifications. Testing and debugging: In the testing and debugging phase, the developed code is tested to ensure that it works correctly. This also involves making changes to the code, if it is not working correctly. Documentation: Documentation is one of the most important aspects of software development. The project documentation should be submitted to the coordinator in the formats given in this book, before the project walkthrough. The blank report following the case studies is to be filled up, detached from the book, and submitted on the given date.

You need to plan the activities that will be performed in each session. You need to also mention the details and dates of the activities in the Individual Project Schedule format provided in the book. After every session, the instructor is required to validate each activity and approve it. The project will be evaluated on the following parameters:

Quality: Refers to the following requirements: – 30 Marks

The solution maps to the requirements specified along with the case study. All exceptional conditions are effectively handled.

Timeliness: Refers to timely implementation of the project. – 15 Marks

Project Execution

Phases in Project Execution

Project Evaluation Guidelines

1.14 Project NIIT

Quality of documentation: Refers to the following requirements: – 25 Marks Completion of all formats Accuracy of design Adherence to standards and processes

Query handling: Refers to the handling of queries during project walkthrough. – 30 Marks

You need to adhere to the following standards and guidelines when creating the project: Consistent and proper variable naming conventions need to be followed across the project. The user interface of the application needs to be user friendly. All variable and function names need to be meaningful and they need to convey their use. For example, a variable to store balance amount can be named iBalanceAmount.

The first letter of the variable name needs to be in small letters and has to specify the data type of the variable. The rest of the name needs to imply the functionality of the variable. Comments need to be placed before the definition of each class and function to explain the functionality of the class/function.

Appropriate comments need to be placed within the code where some complex logic/algorithm is being used. The code needs to be properly indented to provide clarity.

You will get 12 hours to complete the project. During project development, you need to work individually on the project allocated to you. The following are the tasks that provide a suggested break-up of activities that you should perform in the project:

1. Analyze the case study. 2. Design the website. 3. Create the Web pages.

4. Create JavaScript forms and perform validations. 5. Add content, meta keywords, and description to Web pages. 6. Document the project by using the formats given in the later section. 7. Submit the documentation to the faculty. 8. Present the project to the faculty.

Project Standards and Guidelines

Project Activities

NIIT Project 1.15

Tasks listed in the following table should be completed within the specified time.

Session # Task to be Performed Time

1. Analyze the case study

Design the website 2 hours

2. Create Web pages 3 hours

3. Create JavaScript forms and perform validations

3 hours

4. Add content, meta keywords and description to Web pages

2 hour

5. Document the project by using the formats given in the later section.

2 hour

Total 12 hours

Tasks to be Performed

Project Timelines

1.16 Project NIIT

PayLessGainMore is a leading computer store in New Jersey, USA. The store sells all types of computer hardware, software, and electronic components. The store is known for its quality products and services among its customers. The store caters to retail customers as well as dealers, who purchase in bulk and are allowed credit facilities and price discounts based on the quantity purchased.

In an attempt to reach out to a global market and increase its customer base, the company needs to advertise its products to customers outside New Jersey. In the current system, the store spends considerably on advertisements and promotional campaigns. This includes advertising on television, newspapers, and promotional campaigns in prominent market places and exhibitions. The cost incurred in all such promotional activities is enormous and to improve profitability, the organization needs to drastically reduce its advertising costs.

In addition, because customers visit the company outlets for purchases, the store experiences a heavy rush of customers on weekends. As a result, the existing sales personnel cannot attend to customers efficiently.

To counter this problem, the management decides to provide its customers with the facility of placing orders over the telephone. However, this solution does not prove to be effective because the telephonic conversations do not have any physical records. This leads to frequent errors in delivery of products.

In order to reduce its advertising costs, sell its products and services online, and manage customers effectively, the store plans to launch a new website. By using this website, customers can purchase goods from anywhere across the world. The following specifications have been laid down for the creation of the website:

When the user visits the website for the first time, he or she should be asked to provide his or her name on the registration page. The user is then taken to the company’s home page, which displays the following message: Welcome: <username> When the same user visits the website subsequently, he or she should be taken directly to the company’s home page and greeted with the welcome message.

Sample Case Study: PayLessGainMore

Background of the Company

Current System

Envisioned System

NIIT Project 1.17

The home page should contain links for hardware, software, and electronic goods categories. Individual goods listed in each category should have their detailed description and prices mentioned. The customer should be able to view the prices of the products in US dollars. Description of the goods should be stored in an XML file, which can be retrieved at run time. A product order form should be included in the website. When the customer places an order after specifying the required quantity, an address form should be displayed, which allows the users to provide their billing and shipping address. When user submits the address form, a bill needs to be generated in a new window, displaying the order detail, total amount of purchase, and the address details. The data entered by the user in the product order form must be validated using JavaScript.

The home page of the website should include images and graphics to increase the visual appeal of the website.

You have been hired as a Web designer to design the website of the company. Design the website as per the preceding specifications.

1.18 Project NIIT

PROJECT ON

PayLessGainMore

Developed by

Name: Michael John Reg. No.: 6709-50-386

Sample Project Documentation: PayLessGainMore

NIIT Project 1.19

PAYELESSGAINMORE

Batch Code : B010101

Start Date : Dec 1, 2007 End Date: Jan 10, 2008

Name of the Coordinator : Alex Norton

Names of the Developer : Michael John

Date of Submission : Jan 18, 2008

1.20 Project NIIT

CERTIFICATE

This is to certify that this report titled, PayLessGainMore, embodies the original work done by Michael John in partial fulfillment of his course requirement at NIIT.

Coordinator:

Alex Norton

NIIT Project 1.21

ACKNOWLEDGEMENT

We have benefited a lot from the feedback and suggestions given to us by Mr. Alex Norton and other faculty members.

1.22 Project NIIT

INTRODUCTION

PayLessGainMore, is a leading computer store in New Jersey, USA. The store sells all types of computer hardware, software, and electronic components. The store caters to retail customers as well as dealers, who purchase in bulk and are allowed credit facilities and price discounts based on the quantity purchased.

The company decides to develop a website that will showcase all the available products. The company wants to check the response to the website through customer feedback before venturing into e-commerce.

NIIT Project 1.23

ACTIVITIES LIST

The following tasks need to be performed to meet the specifications of the project:

Create a registration page as index.html. This page accepts the user name from the visitor. When the user clicks on the Submit button, the home page of the website is displayed. Create a home page as home.html. This page displays the message Welcome <username>. This page contains hyperlinks to all the other Web pages on the website. Create a Hardware section page. This page displays a list of hardware products offered by PayLessGainMore. The hardware items sold along with their item code, description, and price are displayed in a table. Create a hardware.xml file to store these details, which are retrieved at run time. Create a Software section page. This page displays the content of software products offered by PayLessGainMore. The software products sold along with their item code, description, and price are displayed in a table. Create a software.xml file to store these details, which are retrieved at run time.Create an Electronic Goods section page. This page displays the content of electronic goods offered by PayLessGainMore. The electronic goods sold along with their item code, description, and price are displayed in a table. Create a electronicgoods.xml file to store these details, which are retrieved at run time.Create a Product Order form. This page allows user to submit order details. When users click on the Submit button, an Address form should be displayed. This page allows a user to submit billing and shipping address. Perform the necessary validations using JavaScript on both the pages. Create a Thanks page, confirming the order given by the user.Create an About Us page to describe the company profile of PayLessGainMore.Create a Contact Us page to provide the contact details of PayLessGainMore.Create an external style sheet to format all the Web pages on the PayLessGainMore website.

1.24 Project NIIT

HTML PAGES

The following figure displays the registration page, index.html.

NIIT Project 1.25

The following figure displays the Home page, home.html.

1.26 Project NIIT

The following figure displays the Hardware products page, hardware.html.

NIIT Project 1.27

The following figure displays the Software products page, software.html.

1.28 Project NIIT

The following figure displays the Electronic Goods page, electronicgoods.html.

NIIT Project 1.29

The following figure displays the Product Order page, orderform.html.

1.30 Project NIIT

The following figure displays the Address page, addressform.html.

NIIT Project 1.31

The following figure displays the About Us page, aboutus.html.

1.32 Project NIIT

The following figure displays the Contact Us page, contactus.html.

NIIT Project 1.33

JAVASCRIPT VALIDATIONS

The registration page uses JavaScript to validate and create the cookie for the user name specified by the user. After the user clicks the Register button on the registration page, the user is taken to the home page, home.html. When the user clicks the Change User link on the home page, the cookie is deleted and the user is taken back to the registration page.

The Product Order form and the Address form use JavaScript to validate the information entered by the users.

1.34 Project NIIT

SYSTEM CONFIGURATION

Hardware : P IV – 3.0 GHz 865/915 Chipset 800 MHz FSB

: 512 MB RAM (2 * 256 MB)

: 80 GB 7200 RPM Hard Drive

: CD ROM Drive

: 10/100 NIC

: Optical Wheel Mouse

: Keyboard

: 17” Color Monitor

Operating system : Microsoft Windows XP with SP 2

Software : Microsoft Internet Explorer 5.0 or later

NIIT Project 1.35

PROJECT FILE DETAILS

S.No File Name Description

1 index.html Contains the code to create the welcome page/registration page of the PayLessGainMore website. The code also provides a registration form to generate and retrieve cookie information.

2 home.html Contains the code for displaying information about the company on the home page of the website. This page also contains hyperlinks to all the other Web pages of PayLessGainMore website.

3 hardware.html Contains the code for displaying hardware products offered by the PayLessGainMore website.

4. hardware.xml Contains the details of hardware products.

5 software.html Contains the code for displaying software products offered by the PayLessGainMore website.

6 software.xml Contains the details of software products.

7 electronicgoods.html

Contains the code for displaying electronic products offered by the PayLessGainMore website.

8 electronicgoods.xml

Contains the details of electronic goods.

9 orderform.html Contains the code for displaying the product order form to enable customers to place their orders online.

10 addressform.html Contains the code for displaying the address form to enable customers to provide their billing and shipping address.

11 thanks.html Contains the code for displaying the confirmation page, once customers have successfully placed their order.

12 aboutus.html Contains code for displaying information about PayLessGainMore, Inc.

13 contactus.htm Contains code for displaying contact information about PayLessGainMore.

14 plgm.css Contains the code for formatting information of the PayLessGainMore website.

1.36 Project NIIT

INDIVIDUAL PROJECT SCHEDULE

S. No.

Activity Description Planned Date ofCompletion

Actual Date Responsibility Remarks

1 Analyze the case study. 1st Dec 07 1st Dec 07 John

2 Design the website. 1st Dec 07 1st Dec 07 John

3 Create Web pages. 2nd Dec 07 3rd Dec 07 John

4 Create JavaScript forms and perform validations.

3rd Dec 07 4th Dec 07 John

5 Add content, meta keywords, and description to the Web pages.

5th Jan 08 5th Jan 08 John

6. Document the project by using the formats given in the later section.

10th Jan 08 10th Jan 08 John

NIIT Project 1.37

PROJECT ON

Developed by

Name: Reg. No.:

Blank Project Documentation

1.38 Project NIIT

PROJECT TITLE

Batch Code :

Start Date : End Date:

Name of the Coordinator :

Names of the Developer :

Date of Submission :

NIIT Project 1.39

CERTIFICATE

This is to certify that this report titled, ___________, embodies the original work done by __________ in partial fulfillment of his/her course requirement at NIIT.

Coordinator:

1.40 Project NIIT

ACKNOWLEDGEMENT

NIIT Project 1.41

INTRODUCTION

1.42 Project NIIT

ACTIVITIES LIST

NIIT Project 1.43

HTML PAGES

1.44 Project NIIT

JAVASCRIPT VALIDATIONS

NIIT Project 1.45

SYSTEM CONFIGURATION

1.46 Project NIIT

PROJECT FILE DETAILS

S.No File Name Description

NIIT Project 1.47

INDIVIDUAL PROJECT SCHEDULE

S. No. Activity Description Planned Date of Completion

Actual Date of completion

Responsibility Remarks

1.48 Project NIIT