A WEB APPLICATION DEVELOPMENT FOR BISHAN SINGH BEDI. A Thesis. Presented to the. Faculty of. San Diego State University. In Partial Fulfillment

Transcription

1 A WEB APPLICATION DEVELOPMENT FOR BISHAN SINGH BEDI A Thesis Presented to the Faculty of San Diego State University In Partial Fulfillment of the Requirements for the Degree Master of Science in Computer Science by Pooja V. Khambhayata Fall 2011

2

3 iii Copyright 2011 by Pooja V. Khambhayata All Rights Reserved

4 iv DEDICATION I would like to dedicate this project to my family and friends who have always been my moral support and source of inspiration.

5 v ABSTRACT OF THE THESIS A Web Application Development for Bishan Singh Bedi by Pooja V. Khambhayata Master of Science in Computer Science San Diego State University, 2011 This project is about creating a web application about a former Indian cricketer named Bishan Singh Bedi. The website has integrated many features like discussion forums, shopping cart, slide shows and RSS feeds, introductory videos, photo gallery, blog-forums, lectures and training sessions, registrations, event scheduling and calendar events. This website lets fans of Bishan Singh Bedi and cricket learn and share more information about him, other cricketers and cricket, lets them shop for products like cricket accessories, books about cricket, and purchase tickets for events like seminars, workshops and training sessions. The project provides all of the mentioned features into one integrated package with the idea of creating an optimized, user friendly and easy to access solution.

6 vi TABLE OF CONTENTS PAGE ABSTRACT...v LIST OF TABLES... viii LIST OF FIGURES... ix ACKNOWLEDGMENTS... xi CHAPTER 1 INTRODUCTION Purpose of the Project Project Scope Project Significance: Cricket and Bishan Singh Bedi Project Limitations Definition of Terms TECHNOLOGIES USED Mark-up Languages Style Sheet Languages Client Side Scripting Server Side Scripting: Advantages and Security Concerns Database Tools Used Editors Subversion Repository PhpMyAdmin Servers and Hosting WAMP Bundle Godaddy Server ARCHITECTURE AND DESIGN Architecture and Framework...13

7 3.2 Database Design Research Topics IMPLEMENTATION Shopping Module Project Requirements Browsing Categories View Product List View Product Details Add to Cart Process Shopping Cart Process Checkout Process Payment Processing through Paypal Administrator Panel Category Product Order Shop Configuration Users Members Event Registration Module Members Module Customer Support FUTURE ENHANCEMENTS CONCLUSION...51 REFERENCES...52 APPENDIX PAYPAL PAYMENT PROCESSING AND DATABASE OPERATIONS SCRIPTS...53 vii

8 viii LIST OF TABLES PAGE Table 1.1. Definition of Terms...4

9 ix LIST OF FIGURES PAGE Figure 1.1. Accessory of cricket wicket...3 Figure 2.1. The eclipse platform....8 Figure 2.2. Screen shot of SVN subclipse plug-in....9 Figure 2.3. Screen shot of online repository Figure 2.4. Screen shot of the database via PhpMyAdmin Figure 3.1. Representation of 3-tiers in the project Figure 3.2. Software development model Figure 3.3. Entity relationship model for BBCCT web site Figure 3.4. Distribution of contents in template home page Figure 4.1. Distribution of shop contents on template page Figure 4.2. Data flow 1 for the shopping process Figure 4.3. Data flow 2 for the shopping process Figure 4.4. Folder and file listing of the shopping module Figure 4.5. Screen shot of category list...29 Figure 4.6. Screen shot of products list...30 Figure 4.7. Screen shot of product detail Figure 4.8. Screen shot of add to cart process Figure 4.9. Screen shot of the cart Figure Screen shot of login form while purchasing a regular product item Figure Screen shot of login form while purchasing a seminar tickets Figure Screen shot of admin login Figure Screen shot of admin home page Figure Folder organization in admin module Figure Process flow for category module Figure Process flow for product module Figure Process flow for order module Figure Screen shot of dynamic event entries....43

10 x Figure Screen shot of registration screen Figure Process flow for verification...45 Figure Screen shot of login screen Figure Screen shot of forgot password screen....47

11 xi ACKNOWLEDGMENTS I would like to express my sincere appreciation to Dr. Eckberg and Dr. Singh for giving me this opportunity to work on this project and providing me with great support and motivation. I would also like to thank Mr. Alan Riggins for joining my thesis committee and guiding me through strong technical details.

12 1 CHAPTER 1 INTRODUCTION This project is about creating a web portal about Bishan Singh Bedi, a former Indian cricketer. Through this website, visitors can access information about Bishan Bedi and cricket. The site has introductory videos, photo gallery, blogs and forums, RSS feeds, lectures and training sessions, calendar events, shopping cart, registrations and login, and event registration. This project is developed in tandem with my project partner Darshita Shah. I implemented the modules named shopping cart, login and registrations, seminars bookings, administrator panel and customer support. 1.1 PURPOSE OF THE PROJECT The project is created with the intention of using new features of PHP, which is the most dominating language used, by web developers thus making a secure and easy to use application. The project takes advantage of open source technologies like PHP, MySQL, and uses most of their features to create an integrated web application. The main purpose of the project is to make use of the latest open source technologies, and integrate them to give rise to a new application. Applications created through such open source technologies without basic knowledge sometimes turn out to be less secure and vulnerable. The idea of this project is to create as strongly coupled and secure an application as possible. The project uses objectoriented concepts introduced by latest versions of PHP. Basic object-oriented programming functionality was added in PHP 3 and improved in PHP 4 and object handling was completely rewritten for PHP 5, expanding the feature set and enhancing performance [1]. The aim of the project is to create an application while using the new features offered by latest releases of PHP. 1.2 PROJECT SCOPE The project will generate a web application that will serve as a source of information to the users of the website. It will render content pertaining to cricket and information about the cricketers. The complexity of the web application gives rise to the user friendliness and

13 2 flexibility with which users can surf the content on the site. The content displayed on the website is dynamic, and can be changed by the administrator. The web application provides a user features like blogs, shopping site, gallery, pictures, RSS feeds, events, workshops integrated into one packet. The project has made the best use of the features, which open source technologies offer to create our own customized solutions. The project will serve as a good example for creating complex web applications that combine more than one open source features with optimization, maintaining quality and good speed at the same time. 1.3 PROJECT SIGNIFICANCE: CRICKET AND BISHAN SINGH BEDI Cricket is a major and most interesting sport played by major countries like Australia, England, New Zealand, South Africa, West Indies, Zimbabwe, Sri Lanka, Pakistan and Bangladesh. Cricket is a team sport involving two teams of eleven players each that can last anything from an afternoon to several days [2]. Although the game play and rules are very different, the basic concept of cricket is similar to that of baseball. Teams bat in successive innings and attempt to score runs, while the opposing team fields and attempts to bring an end to the batting team's innings [2]. After each team has batted an equal number of innings (either one or two, depending on conditions chosen before the game), the team with the most runs wins [2]. The equipment used to play cricket is a cricket ball which is hard, cork and covered with leather, a cricket bat which is flat on one side and humped on the other for strength, wickets made up of stumps and bails as shown in Figure 1.1 [3]. A cricketer requires wearing protective gear consisting of pads, gloves or helmet which may prevent a batsman from injury, shoes usually with spiked soles for grip in the grass. A cricket field is a roughly elliptical field of flat grass, ranging in size from about 90 to 150 metres ( yards) across, bounded by an obvious fence or other marker [2]. There is no fixed size or shape for the field, although large deviations from a low-eccentricity ellipse are discouraged [2]. In the center of the field, and usually aligned along the long axis of the ellipse, is the pitch, a carefully prepared rectangle of closely mown and rolled grass over hard packed earth [2]. It is marked with white lines, called creases [1]. European merchant sailors in the 18th-century introduced cricket to India and the first cricket club in India was established in Calcutta in 1792, India's national cricket team did not play their first Test match until 25 June 1932 at Lord s [1]. They became the sixth team to be

14 3 Figure 1.1. Accessory of cricket wicket. granted Test cricket status. In their first fifty years of international cricket, India proved weaker than Australia and England, winning only 35 of the 196 test matches [1]. The team, however, gained strength near the end of the 1970s with the emergence of players such as Sunil Gavaskar, Kapil Dev and the Indian spin quartet- Erapalli Prasanna and Srinivas Venkataraghavan (both of spinners), Bhagwat Chandrasekhar (a leg spinner), and Bishan Singh Bedi (a left-arm spinner). Traditionally much stronger at home than abroad, the Indian team has improved its overseas form since the start of the 21st century. It won the Cricket World Cup in 1983 under Kapil Dev, was runners-up in 2003 under Sourav Ganguly, and won the World Cup a second time in 2011 under MS Dhoni [1]. India has also been the Runners-up in 2000 ICC Champions Trophy and the Joint Champions along with Sri Lanka in 2002ICC Champions Trophy led by Sourav Ganguly in both the instances. India also won the inaugural WorldTwenty20 under MS Dhoni in 2007 [1]. The current team contains many of the world's leading players, including Sachin Tendulkar, Rahul Dravid and Virender Sehwag who hold numerous cricketing world records [1]. Bishan Singh Bedi is an Indian former cricketer, primarily a slow left-arm orthodox bowler who played Test cricket for India from 1966 to 1979 and formed part of the famous Indian spin quartet and also captained the national side in 22 Test matches [1]. The purity and perfection of Bedi's art was a connoisseur's dream [4]. He was stealthy, silent and deadly, a master of deception who conjured variations in flight, loop, spin, pace without any perceptible change in action, bowled with a big heart too, challenging the batsman to hit over the top by giving the ball plenty of air, and was a consistent wicket-taker for most of his career [4]. He was forthright and outspoken throughout his playing career, a generous man

15 4 possessing infinite wisdom, his zest and passion for the game still remains undiminished, although his outburst against various aspects of the modern game sometimes make him seem prone to the incurable malaise of bitterness [4]. 1.4 PROJECT LIMITATIONS The project built is a prototype version and does not offer complex functions involved in multi tier systems. This can be gradually taken as a future enhancement and be improved. The system does not support the multiple hierarchy categories. It offers two level hierarchies for categories only. The Web Application does not support dynamic multilingual currencies and displays. 1.5 DEFINITION OF TERMS Table 1.1 defines many acronyms and terms that are used throughout the paper. Table 1.1. Definition of Terms Acronym Definition RSS Really Simple Syndication DoS Denial of Service SEO Search Engine Optimization SQL Standard Query Language PHP Hypertext Preprocessor HTML Hyper Text Markup Language CSS Cascading Style Sheets AJAX Asynchronous JavaScript and XML XML Extensible Markup Language IDS Integrated Development Service WTP Web Tools Platform SVN Subversion WAMP Windows Apache MySQL PHP FTP File Transfer Protocol MB Mega Bytes IPN Instant Payment Notification API Application Programming Interface

16 5 CHAPTER 2 TECHNOLOGIES USED The web application is created using a client server model supporting 3-tier architecture (see Chapter 4). The technology used for creating this web application involves both client and server side scripting languages and a powerful database at the back end. The project involves use of the pre-defined languages like HTML and CSS as well as open source technologies like PHP, eclipse and MySQL. Sections below describe a brief overview of such technologies. 2.1 MARK-UP LANGUAGES HTML stands for Hyper Text Markup Language. HTML is not a programming language, instead is a universal markup language built of a set of markup tags used to describe web pages [3]. The purpose of a web browser is to read HTML documents and compose them into visual or audible web pages [1]. An HTML element forms the building block of all websites, as they are a means of creating structured web documents by denoting structural semantics for text like heading and paragraphs. Moreover, it supports embedding of images and objects to create interactive forms [1]. HTML can also embed client side scripts and style sheet languages (see Section 2.2) which affects the behavior of the web pages. 2.2 STYLE SHEET LANGUAGES CSS stands for Cascading Style Sheets. It allows HTML and web browser to define the layout and style of multiple web pages all at once [3]. By using CSS, we can isolate the page content from the styling features of the webpage thus not messing up the real code and giving the structure a modular and robust form. CSS can be declared within a document or can also be declared outside of a document and embedded into a document. The project uses external CSS style sheets, which are created outside and are embedded into the content document.

17 6 2.3 CLIENT SIDE SCRIPTING JavaScript is the most popular scripting language on the Internet and works on all major browsers such as Internet explorer, Firefox, Chrome, and Opera [3]. The project uses Javascript to validate the forms submitted by the user, read and write HTML elements, react to the events, puts dynamic text onto webpage, creates cookies, communicates with the web server and many other purposes. It is used in the project as it is a lightweight programming language, saves full-page reloads and can be embedded directly into web pages [3]. AJAX is Asynchronous JavaScript and XML, a new way to use existing standards of javascript [3]. The project uses AJAX to exchange data with the server and update parts of a webpage without reloading the whole page thus saving a lot of time in repeated invalid form submissions. AJAX makes the form validation instant and unobtrusive. It saves time taken by web page loading by fetching data from the server. AJAX uses less server bandwidth, as the pages do not have to completely reloaded [5]. AJAX is not only smooth and sleek but neat and precise too thus making website more professional and enticing to users [5]. 2.4 SERVER SIDE SCRIPTING: ADVANTAGES AND SECURITY CONCERNS PHP: PHP stands for Hypertext Preprocessor. PHP is a widely used general-purpose server-side scripting language, especially suited for web development and can be embedded into HTML [1]. It is widely used to connect web pages to MySQL databases thus creating dynamic web sites. This project uses PHP to write dynamically generated WebPages for Blogs, forums, shopping cart, event calendars quickly. PHP is an open source and therefore free. PHP can also be used from command line interface or in standalone graphical applications. PHP can be deployed almost on any servers and operating systems hence is very robust. Much of PHP s syntax is borrowed from C, JAVA and Perl with a couple of PHP specific features thrown in [6]. When a user visits a PHP a web page, web server processes the PHP code, then sees which part it needs to show to the visitors (pictures and content) and hide other things (like file processing, calculations) then translates your PHP into HTML thus sending the webpage to your visitor s web browser [6]. It is used to create dynamic web pages that interact with the user offering customized information. PHP uses a modular system of extensions to interface with a variety of libraries such as graphics, xml, encryption, etc. [7]. The main repository of PHP is loaded with modules and interfaces that

18 7 users have written and contributed [7]. A huge advantage that PHP offers is its community that is willing to share new functions and modules since PHP is open source. PHP source code is compiled on the fly internally [1]. PHP offers many levels of security to prevent malicious software attacks that can be adjusted in the.ini file [7]. PHP can cause some vulnerability which can be exploited remotely by not following best programming rules: like they allow attackers to steal or destroy data from data sources linked to the webserver e.g. MySQL database, send spam or contribute to DoS(Denial of Service) attacks using malware, which itself can be installed on vulnerable servers [1]. There are advanced protection patches such as Suhosin and Hardening-Patch, especially designed for web hosting environments [1]. PHPIDS adds security to any PHP application to defend against intrusions by detecting cross-site scripting, SQL injection, header injection, directory traversal, remote file execution, Local file inclusion, and denial of service [1]. 2.5 DATABASE MySQL known as Structured Query Language is the most widely used relational database management system, which is a standard interactive programming language for getting information from and updating a database. Thus it is very good at organizing and managing large amounts of information. This language allow you to make queries about the information in the database data selection, insertion, updating and locating [8]. The project uses MySQL as it is most popular open source database used for building web applications and also available for free. Moreover, it also comes as a packaged tool with the Wamp Server (see Section 2.7). This Project is built on Windows Server that supports MySQL so it was chosen as a fit database for Project development. 2.6 TOOLS USED A variety of development tools are used in this project, and these are described individually in the following sub-sections.

19 2.6.1 Editors Eclipse PHP was used as a development tool due to its instant features like quick editing, debugging, and support for server. Eclipse PHP is an integrated development environment, an open source project under Eclipse tool project (see Figure 2.1) [9]. It encompasses all the development components necessary to develop PHP based web applications and facilitates extensibility, leverages the existing web tools project in providing developers with PHP capabilities [9]. The project uses Eclipse for the reasons that it provides a Language model and infrastructure, Code Builder, Doc support, User model, source code formatter, also PHP projects build on eclipse framework can be launched on any webserver [9]. 8 Figure 2.1. The eclipse platform. The PHP IDE project is built using several Eclipse Web Tools Platform (WTP) project components. The WTP provide generic, extensible and standards-based tools for Web-centric application development, which provides editors for various Web centric languages such as: HTML, CSS, JavaScript, WSDL, etc. In addition, WTP provides facilities for configuring and connecting to Web Servers. The PHP IDE uses the WTP Server facilities to manage and configure Web Servers. PHP IDE project will benefit from the client web development support, already available in the WTP (HTML, CSS, etc) and adds the server

20 9 side web development support (PHP). The integration between the PHP IDE and WTP provides the PHP IDE users with a comprehensive solution for WEB development [9] Subversion Subclipse from tigris.org is an Eclipse Team Provider plug-in providing support for subversion within the Eclipse IDE. The plugin can be installed through eclipse Install New Software option from the Help toolbar. This plugin lets eclipse interact with the repositories. Due to the nature of the project as a group project, there is a strong need for subversion and repository to keep the files updated and synchronized. Figure 2.2 shows the project contents and options by SVN in eclipse IDE. Figure 2.2. Screen shot of SVN subclipse plug-in. The Subclipse subversion shows the files modified and lets you sync with the head version. The programmer can checkout the resource from the repository and make edits. She can upload the changes back to the repository by executing the commit command. She can commit only the resources she wishes to while performing commit. Subclipse has made it a very simple interactive process instead of manual submissions to online repository. The programmer can anytime update to the head to get synchronized with the changes done by

21 10 another programmer. All the branches of the modified versions can also be seen for debugging. The programmer can anytime disconnect from the subversion by clicking on Disconnect. The user can also switch to SVN Repository environment and add, delete or modify the repository names from the eclipse IDE itself. This saves the need for the user to go to online repositories and perform such tasks Repository The project uses an online repository called Unfuddle. It is a secure safe online software management tool that provides a repository that can be accessed through SVN. It is also a great issue tracker tool. Such repositories are used to have a safe back up in case the local machine or server crashes. The project uses Unfuddle as a repository as the project involves team development and codes of the real working project have to be synchronized. Figure 2.3. shows the screen shot of Unfuddle. The page shows a Dashboard with all committed revisions. The team members can set milestones, issue tickets, track status of ticket and many more functions. Any number of people can be invited and removed as needed. The administrators can be changed, the tasks can be assigned to specific people. Whenever an event happens, other team members are notified via . Figure 2.3. Screen shot of online repository PhpMyAdmin PhpMyAdmin is a third party tool that interfaces with the MySQL database for WAMP Server (see Section 2.7.1) and Godaddy Server (see Section 2.7.2). The screen shot

22 in Figure 2.4 explains the features provided by PhpMyAdmin. It lets the programmer import and export databases and tables. The Designer feature comes disabled with the original package. It allows the relationship model view called Designer mode of the Database tables. This feature is enabled by making changes into config.inc file in phpmyadmin folder. The settings below should be added to the config.inc file. $cfg['servers'][$i]['pmadb'] = 'phpmyadmin'; $cfg['servers'][$i]['bookmarktable'] = 'pma_bookmark'; $cfg['servers'][$i]['relation'] = 'pma_relation'; $cfg['servers'][$i]['table_info'] = 'pma_table_info'; $cfg['servers'][$i]['table_coords'] = 'pma_table_coords'; $cfg['servers'][$i]['pdf_pages'] = 'pma_pdf_pages'; $cfg['servers'][$i]['column_info'] = 'pma_column_info'; $cfg['servers'][$i]['history'] = 'pma_history'; $cfg['servers'][$i]['designer_coords'] = 'pma_designer_coords'; After adding above settings, mysql_create_tables script is run to enable designer mode. As shown in Figure 2.4, the collation and storage engine can be changed when required by simple Graphical User Interface. 11 Figure 2.4. Screen shot of the database via PhpMyAdmin. 2.7 SERVERS AND HOSTING Both the WAMP bundle and Godaddy server are used for hosting the application.

23 2.7.1 WAMP Bundle For the offline development of the project on Windows machine, WAMP bundle is used. WAMP is a package that stands for Windows/Apache/MySQL/PHP. After research on available sources, the WAMP bundle was chosen for development due to its capabilities to offer Apache server, MySQL database and PHP all together as an integrated package. WAMP server uses PhpMyAdmin, a third party tool to interface with the MySQL database which is also supported on Godaddy Server that the project uses to launch and host the application (see Section 2.7.2).WAMP bundle just behaves as a fake web interface allowing a user to test her applications before launching them. WAMP bundle used in the project supports Apache version , PHP version and MySQL version It also offers tools like phpmyinfo which shows the configuration settings and PhpMyAdmin (see Section 2.6.4), a third party tool provides Graphical Interfaces with the MySQL database Godaddy Server Godaddy offers platforms like windows and Linux. Godaddy Windows Server has been used for hosting the web application. It is a paid service that offers MB of disk space and unlimited bandwidth. It also lets you map a real domain name with the ip address assigned. It has features like FTP File manager, accounts, databases like MySQL and many more features integrated into it hence making it easy to use. For database manipulations Godaddy Server provides PhpMyAdmin (see Section 2.6.4), which is a popular PHP driven web interface that allows managing MySQL database content hence avoiding the use of command line. It is open source and available with Godaddy Server. Godaddy offers PHP version 5 and MySQL database support. Hence it was considered an ideal server for deployment. The offline development of the web application was done using Windows Server WAMP (see Section 2.7.1) hence Godaddy Windows Server was chosen for deployment for compatibility reasons. 12

24 13 CHAPTER 3 ARCHITECTURE AND DESIGN This chapter describes all aspects of the architecture and database design, as well as research topics explored in this project. 3.1 ARCHITECTURE AND FRAMEWORK The project implements a client-server model with 3-tier architecture and follows a prototype sofware development model (Figure 3.1). Tiers in this project are located logically on different machines. As this project is a simple web application and does not involve complex transaction processing and finer granularity, a 3-tier architecture is the most suited. Such approach separates business logic layer from display and data [10], and is described below. Figure 3.1. Representation of 3-tiers in the project.

25 1st Tier : The client tier is a web browser which interacts with the user through a graphical user interface [10]. The content served at the user interface referred to as the front-end is rendered by means of a browser. The browser initiates a request through the user, receives and displays content in dynamic HTML, CSS and PHP, Javascript and Ajax. The 1st tier, also called as a presentation tier displays the contents of shopping cart, categories, product details, purchasing information etc.it communicates with other tiers by outputting results to clients/browser [10]. 2nd Tier: The middle tier provides functions related to content processing by using server side technologies like PHP and AJAX. Apache server takes care of handling all the content processing functions. The 2nd tier, also called the business logic tier, controls an application s functionality by performing detailed processing. In the shopping cart module, it calculates the total price, shipping cost and tax according to the cart contents, completes credit card authorization. To accomplish this, it uses web services, stored procedures, PHP and AJAX functions. The business tier performs encapsulation as it allows the application to communicate with the data tier or the business logic tier in a way that is intelligible to all the nodes [10]. Such an integration tier liberates the network from just one vendor thus allowing it to be vendor independent [10]. 3rd Tier: The last tier comprises of the MySQL database, flat files and image files. MySQL database server manages all the data handling functions. The project uses a prototype model that is a software management model in which a prototype of an application is built, tested and then reworked as necessary until an acceptable prototype is finally achieved from which the complete application can be developed [11]. As more and more features can be integrated into this project in the future, the prototype model was considered as a perfect fit for this project. The project uses such a model with the purpose that the user can experiment with the system to improve the requirements. The pictorial view of such an approach is shown in Figure Figure 3.2. Software development model.

26 3.2 DATABASE DESIGN The database for the shopping cart has been inherited from the opensource technology named plaincart software which is available for free from phpwebcommerce.com. The database is modified to serve the current project requirements. The storage engine used by the database is MyISAM storage engine as the database is smaller with less tables. Moreover, it is good at indexing smaller tables and fetching data faster. The database also supports internationalization by using collation as utf8 encoding thus making it easy for the website to be displayed in multiple languages. The database has been redesigned and normalized to meet the requirements of the project. Instead of making separate tables for events such as seminars and workshops, their characteristics are mapped to the product item table as their most fields were the same except that the events have time and location which products do not have. Thus, the database is presented in a normalized way. According to the project requirement, a seminar purchaser should pass through a concrete login procedure (to be approved by the admininstrator) while items purchaser should be allowed liberal checkout procedure. Hence the user_type field in the tbl_user table is kept to determine the status of the purchaser.the database contains a total of ten tables as shown in Figure 3.3. These tables are detailed below: 1. tbl_member stores all the user personal information for a registered user. The fields are explained as below a. member_id is a unique identifier of each member of bbcct. b. user_id is a foreign key inherited from users table that maps the login information like username and password. c. first_name, middle_name, last_name, address1, address2, date_of_birth, country,city,state,postal code, fields stores the personal information of the user who registers for the website. These fields can be modified and updated by the respective user after he/she logs into the website. 2. tbl_user stores the login information and status of the user. The administrators and users share this table s information. Only some fields like user_type, user_status can be modified by the administrator from the administrator s control panel. The fields like user_name and user_password can be modified by the registered members after they login into the website. a. user_id is an auto generated unique identifier also a primary key for a user table. b. user_name stores unique address that serves as a username. 15

27 16 Figure 3.3. Entity relationship model for BBCCT web site. c. user_password will hold password. d. user_type determines type of the user as members and administrators access the same table e. user_status determines whether the status of user is pending or approved f. user_regdate stores the date when the user was registered. g. user_last_login stores the last login time when user logged in. 3. tbl_category stores the information of category and subcategory of the product if exists. The information in the below fields can be modified only by the administrator from the control panel. The fields of category are as below: a. cat_id is a primary key stores a unique category identifier number. b. cat_parent_id stores id of parent if required. c. cat_name stores the name of the category. d. cat_description stores the description of the category. e. cat_image stores the image of the category. 4. tbl_product stores the information for a product that falls under a category or subcategory. The tables tbl_category and tbl_product are linked with cat_id. This

28 table is shared by the products, which are merchandise, books, and also by Events such as seminars and workshops. This information can be modified only by the administrator from the control panel. a. pd_id stores the unique identifier of a product. Each product is uniquely identified by this number. It is a primary key also. b. cat_id is a foreign key from category table that maps a product to its category. c. pd_name stores the name of the product. d. pd_description stores the description of the product. e. pd_price stores the price information of the product which can be modified by the administrator. Also the price is displayed according to the currency set by the administrator. The field stores ticket price in case if the product type is events. f. pd_qty stores the quantity of the product left in the ware house. This number gets decremented everytime a product is purchased. When no products are left the message appears as Out of stock. This field corresponds to the number of seats when product type is seminar/workshops. g. pd_type stores the type of the product whether it is a product, seminar, workshop, events. Different forms and tables are displayed when the type is product at the users and administrator panel. h. pd_time stores null values in case if the product type is a product but displays time of the event in case if the product type is an event. i. pd_location stores null values in case of product but stores the location of the event in case of events. j. pd_image stores the image which is displayed on the shopping cart page besides product is displayed. This applies for all product types. k. pd_thumbnail stores the thumbnail image when a product is selected. This applies for all product types. l. pd_date stores the date when the product was first uploaded. This applies for all product types. m. pd_last_update stores the date when the product was last updated by the administrator and it applies for all product types. 5. tbl_order stores the information of all the processed orders which includes all products and events too. The administrator can view the information in this table. The administrator can know the status of the order from the administrator panel. a. od_id is a primary key and stores the order id which is unique for each other. This is the main field needed to track the order. b. od_date stores the date and time the order was placed. c. od_last_update stores the last date and time in case if order was updated. 17

29 d. od_status stores the status of the order whether it is new, paid, shipped, completed or cancelled. These fields can be changed by the administrator only. e. od_shipping_first_name, od_shipping_last_name, od_shipping_address1, od_shipping_address2, od_shipping_phone, od_shipping_city, od_shipping_state, od_shipping_postal_code stores the shipping information for an order. f. od_payment_first_name, od_ payment _last_name, od_ payment _address1, od_ payment _address2, od_ payment _phone, od_ payment _city, od_ payment _state, od_ payment _postal_code stores the payment information for an order. 6. tbl_order_item stores the information for a particular item in an order. The fields of this table are as described below: a. od_id is a foreign key that links tbl_order and tbl_order_item table b. pd_id is a foreign key that links tbl_order_item and tbl_product table. c. od_qty stores the quantity of a particular item in an order. 7. tbl_cart stores the entries put into the cart for a particular session_id. This table is linked to tbl_order, tbl_order_item, and tbl_product. The fields of this table collect and process the information from above three tables and are described as below. a. ct_id stores the category id. b. pd_id which is a foreign key inherited from product table. c. ct_qty is the quantity of the products in the cart. d. ct_session_id holds the session id of the user. e. ct_date holds the date of the transaction. 8. tbl_currency stores the currency information that should be displayed while surfing the shopping cart. The administrator can access the information on this table and modify the currency whenever needed. This table is not linked to any other tables but the information is used to populate the fields of the tbl_order and tbl_cart tables. The fields of this table are described as below. a. cy_id is a primary key and stores the unique identifier for a particular currency b. cy_code is a standard code for a particular currency. c. cy_symbol is a symbol that appears on the shopping cart to the users. 9. tbl_shop_config stores the configuration of the shop. This table is accessed by the administrator. An administrator can change all the fields as per required through the control panel. a. sc_name stores the name of the shop. This can be changed in future if the administrator wishes to have a different name for the shop 18

30 19 b. sc_address stores the address for the shop. c. sc_phone stores the contact information d. sc_ stores the address that be used as a contact e. sc_shipping_cost stores the shipping cost which is displayed on pages. f. sc_currency stores the currency. g. sc_order_ stores the to be contacted with for orders. 3.3 RESEARCH TOPICS The idea of the project is to provide the latest and most popular features provided by open source technologies homogenously into one application in a modular and robust way. To create web applications several traditional approaches like frames have been used in the past, which was not a good design for large and heavy applications. The project adapts an approach that gives optimized speed, cross browser compatibility and maintains compatibility with most of the operating systems and screen sizes. Instead of using frames, the project uses a modular approach of creating tables and assigning variables to the contents of the table thus keeping the structure intact and robust. The contents of the page like header, footer, sidebar and menu bar have been distributed into the cells of the table. The design of the project uses object-oriented concepts like inheritance, polymorphism and encapsulation. Figure 3.4 shows the internal page structure of the homepage template and its components distributed into table cells. The menu items in the home page call different modules, the contents of which are assigned to the $content variable shown in Figure 3.4. The contents of the $content are reassigned every time a new feature is called. In addition to this, every module s page assigns a title to the $pagetitle variable. $content and $pagetitle are passed as values every time in the template page. Hence the only thing that changes in the page is the page title and the content in the cell. This is more clearly shown by the code below. <?php error_reporting(0); $view = (isset($_get['view']) && $_GET['view']!= '')? $_GET['view'] : ''; switch ($view) { case 'about' : $content = 'about.html'; $pagetitle = 'Welcome to Bishan Bedi Online Shop'; break; case 'contact' :

31 20 Figure 3.4. Distribution of contents in template home page. $content= 'ContactForm/index.php'; $pagetitle='welcome to Bishan Bedi Online Shop'; break; case 'gallery' : $content= 'PHP/temp.php'; $pagetitle='welcome to Bishan Bedi Online Shop'; default : $content = 'home.html'; $pagetitle = 'Welcome to Bishan Bedi Online Shop'; } require_once 'template.php';?> In the template.php file the variable content is used as below. <table> <?php include("header.php");?> <tbody> <tr> <td id="content"><?php require_once $content;?> </td>... ; The project supports a modular approach by using the Object Oriented Approach as explained below. Encapsulation: the internal details of an object are hidden from the external view. The main page just calls the name of the file through a variable; the details of such files are not visible in the main page. Inheritance: the template structure is declared once only. All the child classes reuse the template class by assigning their contents to content variable and calling template class at the end. Thus, the code is written only once and called multiple times.

32 Polymorphism: the project implements polymorphism by message passing through the variable content. All child classes use the common interface defined by the parent class called template by passing their values to the variable content. 21

33 22 CHAPTER 4 IMPLEMENTATION This chapter discusses aspects of the project implementation. 4.1 SHOPPING MODULE The home page of the website displays an option of online shopping which hosts merchandise like cricket bats, balls, wickets, clothes, stumps, bails etc, books about Bishan Singh Bedi and other cricketers, and registration of events related to Bishan Singh Bedi. The shop is created using an open source tool called plaincart from phpwebcommerce shopping tutorial [12] and has been modified to satisfy current project requirements. The shopping cart is displayed in the content area of the home page and is distributed into the cells as shown in Figure 4.1. Content Figure 4.1. Distribution of shop contents on template page. The headers, footer, menu items, and side bar are inherited from the home page. In the content area of the home page, shopping cart is displayed into 3 columns of the cell of

34 content column. The first column Category Browser populates the list of categories, subcategories and products from the database. The click event on any of these items displays the respective content in the Main shopping content area. If any of the items have to be put into the cart, The Minicart on the right side displays the contents in the cart, their quantity and price. Every time a link is clicked, template.php page loads with different values in $content variable. Figure 4.2 and Figure 4.3 (p. 25) explain the shopping process pictorially. The flow of the shopping process is as follows: 1. A Customer visits the site s shopping module and sees a list of all categories. She chooses a category of her interest. 2. She starts by browsing categories and narrows down to products and then fine tunes to product item details if interested. If she wishes to buy the product, she adds the product to the cart. 3. After adding an item, she can also update and delete the quantity if she wishes to. 4. If the customer confirms to buy it and wishes to checkout, the login process interrupts the checkout process for security reasons. According to the project requirements, a visitor should not be allowed to purchase if not approved in case of events like seminars, workshops and training sessions. This is explained in detail in section If the user is already registered then she can login and the payment fields will populate from the database for her and if the user is new to the site then she needs to go through the registration process. In case of purchasing items other than booking seats, she also is allowed to guest checkout. After following the registration process, the user can switch back to the login and continue to checkout. If the item is events then the user has to wait for the approval process from the administrator else the user can continue with the checkout process. 6. In case of correct login, after correctly entering all the payment and shipping information, the customer clicks on confirm order and gets directed to PayPal payment module. If the customer does not hold account with PayPal, she will be asked to register or else she can continue paying for the item. The basic characteristics of the shopping module are as follows: 1. Payment options are kept simple. They include flat shipping rate, which can be changed by the administrator and cash on delivery. The online payment is supported through PayPal IPN. 2. The images displayed on the shopping area for categories and products are all configurable by the user. The sizes can be adjusted through config.php file in the library. 3. The checkout process is customized for the events and other shopping items and integrated considering the security concerns. 4. The cart older than one day is deleted from the database. 23

35 24 Main Page Click Shop Link Shopping Page Click on Categories Display Categories Click on Products Display Products Click on Details Yes Display Details Click on Details If qty<1 Delete Quantity Show Cart Update Quantity Update No Proceed to Checkout Continue Shopping 2 Figure 4.2. Data flow 1 for the shopping process Project Requirements The website displays events such as workshops, seminars and training sessions. A visitor can view details of such events and buy tickets. The buying process at a later stage merges with the shopping cart process. Hence, events can also be viewed via clicking on the

36 25 1 seminar product Product type? No Yes Yes member? member? No Registration Loginform Registration Guest checkout seminar product Product type? No User status? Yes payment information End Successful? No Yes Autofilled payment information Confirm Order Submit Thank You Message Figure 4.3. Data flow 2 for the shopping process. Paypal processing

37 registrations and accessed through the shopping cart too. Thus, the shopping cart displays such events in addition to the product items like merchandise and books. As the seats of the seminar are limited, there is a need to avoid invalid numerous amount of seat booking through website. Hence, when a visitor wishes to purchase tickets for an event, she has to register or follow the login process. She is not allowed to make a purchase unless the administrator approves her to make the ticket purchase. On the other hand such a constraint does not apply in case a visitor trying to purchase books or other merchandise. Figure 4.4 shows the folder and file structure involved in the shopping module. The main page of the module is home.php which parses the request and assigns pages to variable $content, which is then fed to template.php page. Every page of the shopping cart loads the config.php file that initializes all the settings for the display and database functions. Header of the index.php is as shown in below code. The category-functions.php calls functions like formatcategories() that is used by the category browser cell to produce the list of categories and products. GetCategoriesList() gets all the first level categories, getchildcategories() gets all the child categories, fetchcategories() calls all the level of the categories like parent and child categories: <?php require_once 'library/config.php'; require_once 'library/category-functions.php'; require_once 'library/product-functions.php'; require_once 'library/cart-functions.php'; $_SESSION['shop_return_url'] = $_SERVER['REQUEST_URI']; $catid = (isset($_get['c']) && $_GET['c']!= '1')? $_GET ['c']: 0; $pdid = (isset ($_GET['p']) && $_GET['p']!= '')? $_GET ['p'] : 0; 26 Figure 4.4. Folder and file listing of the shopping module.

38 The session variable for the current page is then set, so that when the user wishes to continue shopping, she is directed back to the index page. The category id and product id are stored as c and p respectively. They decide the nature of the contents to be displayed on the shopping area. The code snippet below shows the organization of the shopping cart page: Continued code <?php require_once 'include/leftnav.php';?> </td> <td> <?php if ($pdid) { require_once 'include/productdetail.php'; } else if ($catid) { require_once 'include/productlist.php'; } else { require_once 'include/categorylist.php'; }?> </td> <td width="130" align="center"><?php require_once 'include/minicart.php';?></td> </tr> </table> Continued code If none of the c and p exists in the query, categorylist.php is called which displays the entire set of categories and products. If only category id exits then we show all the products in that category by calling productlist.php. If the product ID also exists then we show all the information of that product which belongs to the requested category ID. The home page of the shopping module is the main page where the control transfers, when the user enters the shopping cart module. It fetches the view variable and acts accordingly, calling the template page of the main module at the end. If the view does not exist in the query string then, it switches to the default view. Every time it assigns a different page to the $content variable, it also assigns $pagetitle variable different values. These two variables are passed on to the template page and displayed there accordingly. This concept is used for Search Engine Optimization (SEO) as most of the search engine puts heavy emphasis on the page title. This project changes the page title for every page. For example, by default the page title is set to Bishan Singh Bedi Shop but if a product id is detected in 27

39 the query string, the database is searched to find the name of the product and the product s name is used as a page title thus making job of the search engines easier. If the product id does not exist in the query string, then category id is searched for. If it is found then category name for respective id is fetched from the database and used as a page title. The database contains the image field where in it stores the name of the image for the respective item. The snippet below shows how it works; categories and products in the database can be added, deleted, modified as required by the administrator: if (isset($_get['p']) && (int)$_get['p'] > 0) { $pdid = (int)$_get['p']; $sql = "SELECT pd_name FROM tbl_product WHERE pd_id = $pdid"; $result = dbquery($sql); $row = dbfetchassoc($result); $pagetitle = $row['pd_name']; } else if (isset($_get['c']) && (int)$_get['c'] > 0) { $catid = (int)$_get['c']; $sql = "SELECT cat_name FROM tbl_category WHERE cat_id = $catid"; $result = dbquery($sql); $row = dbfetchassoc($result); $pagetitle = $row['cat_name']; } Browsing Categories The leftnav.php file called in the Category Browser cell calls fetchcategories() and formatcategories() function to display the categories in the left navigation panel. Figure 4.5 shows the category list. The code only handles up to two levels of categories. The categories are printed in an unordered list <ul>, which displays as: =>Parent1 =>Parent2 =>Child1 =>Child2 By default, all the categories are displayed when the shopping module home page loads for the first time. As shown in Figure 4.5, the left side corresponds to the Category Browser, middle column is Shopping Content Area, and right side shows MiniCart. The content in the 28