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.

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

Case Study 1: LeadTheRoad, Inc.

Background of the Company
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.

Current System
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.

Envisioned System
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

NIIT

Project 1.3

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 organizations 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 companys 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.

1.4 Project

NIIT

Case Study 2: MyRoadShow

Background of the Company
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 companys 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.

Current System
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.
NIIT Project 1.5

Envisioned System
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 companys 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.

1.6 Project

NIIT

Case Study 3: Turnshop Corp.

Background of the Company
Turnshop Corp. is a leading publishing house in the US. The companys 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.

Current System
At present, the company sells books only through its retail store, which limits the companys 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.

Envisioned System
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 companys website. The design, layout, and navigation of the website need to be consistent across all Web pages. The website should contain information on the companys 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 books 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.
NIIT Project 1.7

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.

1.8 Project

NIIT

Case Study 4: Allen Communications

Background of the Company
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.

Current System
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.

Envisioned System
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 companys branch offices and retail outlets. It should provide features to handle the queries and complaints of customers.

NIIT

Project 1.9

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 companys 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 companys products and services.

1.10 Project

NIIT

Case Study 5: Carrier Search, Inc.

Background of the Company
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.

Current System
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.

Envisioned System
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.
NIIT Project 1.11

The following specifications have been laid down for the development team to create the companys 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.

1.12 Project

NIIT

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

Phases in Project Execution

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.

Project Evaluation Guidelines

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

NIIT

Project 1.13

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

Project Standards and Guidelines

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.

Project Activities
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.

1.14 Project

NIIT

Project Timelines
Tasks listed in the following table should be completed within the specified time.
Session # 1. 2. 3. 4. 5. Task to be Performed Analyze the case study Design the website Create Web pages Create JavaScript forms and perform validations Add content, meta keywords and description to Web pages Document the project by using the formats given in the later section. Total Tasks to be Performed Time 2 hours 3 hours 3 hours 2 hour 2 hour 12 hours

NIIT

Project 1.15

Sample Case Study: PayLessGainMore

Background of the Company
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.

Current System
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.

Envisioned System
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 companys 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 companys home page and greeted with the welcome message.

1.16 Project

NIIT

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.

NIIT

Project 1.17

Sample Project Documentation: PayLessGainMore

PROJECT ON
PayLessGainMore

Developed by

Name:

Michael John

Reg. No.: 6709-50-386

1.18 Project

NIIT

PAYELESSGAINMORE
Batch Code Start Date Name of the Coordinator Names of the Developer : B010101 : Dec 1, 2007 End Date: Jan 10, 2008 : Alex Norton : Michael John

Date of Submission

: Jan 18, 2008

NIIT

Project 1.19

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

1.20 Project

NIIT

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

NIIT

Project 1.21

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.

1.22 Project

NIIT

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.

NIIT

Project 1.23

HTML PAGES

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

1.24 Project

NIIT

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

NIIT

Project 1.25

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

1.26 Project

NIIT

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

NIIT

Project 1.27

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

1.28 Project

NIIT

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

NIIT

Project 1.29

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

1.30 Project

NIIT

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

NIIT

Project 1.31

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

1.32 Project

NIIT

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.

NIIT

Project 1.33

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 Software : Microsoft Windows XP with SP 2 : Microsoft Internet Explorer 5.0 or later

1.34 Project

NIIT

PROJECT FILE DETAILS

S.No 1 File Name index.html Description 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. 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. Contains the code for displaying hardware products offered by the PayLessGainMore website. Contains the details of hardware products. Contains the code for displaying software products offered by the PayLessGainMore website. Contains the details of software products. Contains the code for displaying electronic products offered by the PayLessGainMore website. Contains the details of electronic goods. Contains the code for displaying the product order form to enable customers to place their orders online. Contains the code for displaying the address form to enable customers to provide their billing and shipping address. Contains the code for displaying the confirmation page, once customers have successfully placed their order. Contains code for displaying information about PayLessGainMore, Inc. Contains code for displaying contact information about PayLessGainMore. Contains the code for formatting information of the PayLessGainMore website.

home.html

3 4. 5 6 7 8 9 10 11 12 13 14

hardware.html hardware.xml software.html software.xml electronicgoods.h tml electronicgoods.x ml orderform.html addressform.html thanks.html aboutus.html contactus.htm plgm.css

NIIT

Project 1.35

INDIVIDUAL PROJECT SCHEDULE

S. No. 1 2 3 4 5 Activity Description Planned Date of Completion 1st Dec 07 1st Dec 07 2nd Dec 07 3rd Dec 07 5th Jan 08 Actual Date Responsibility Remarks

Analyze the case study. Design the website. Create Web pages. Create JavaScript forms and perform validations. Add content, meta keywords, and description to the Web pages. Document the project by using the formats given in the later section.

1st Dec 07 1st Dec 07 3rd Dec 07 4th Dec 07 5th Jan 08

John John John John John

6.

10th Jan 08

10th Jan 08

John

1.36 Project

NIIT

Blank Project Documentation

PROJECT ON Developed by

Name:

Reg. No.:

NIIT

Project 1.37

PROJECT TITLE
Batch Code Start Date Name of the Coordinator Names of the Developer : : : : End Date:

Date of Submission

1.38 Project

NIIT

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:

NIIT

Project 1.39

ACKNOWLEDGEMENT

1.40 Project

NIIT

INTRODUCTION

NIIT

Project 1.41

ACTIVITIES LIST

1.42 Project

NIIT

HTML PAGES

NIIT

Project 1.43

JAVASCRIPT VALIDATIONS

1.44 Project

NIIT

SYSTEM CONFIGURATION

NIIT

Project 1.45

PROJECT FILE DETAILS

S.No File Name Description

1.46 Project

NIIT

INDIVIDUAL PROJECT SCHEDULE

S. No. Activity Description Planned Date of Completion Actual Date of completion Responsibility Remarks

NIIT

Project 1.47

1.48 Project

NIIT