Creating an Online Shopping Website for Chinguun-Tulga Office Supply Store


Published on

Bilguun Ginjbaatar | Creating an Online Shopping Website for Chinguun-Tulga Office Supply Store | Thesis Project completed in December 2007. Edinboro University of Pennsylvania

Published in: Technology, Business
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Creating an Online Shopping Website for Chinguun-Tulga Office Supply Store

  1. 1. Page | i Creating an Online Shopping Portal Website for Chinguun-Tulga Office Supply Store Created by Bilguun Ginjbaatar Thesis Committee: Professor Ellen Zimmer Professor John Onderko Professor David Tucker
  2. 2. Page | ii Abstract In today‟s competitive Mongolian office supplies‟ market, it is vital for retailers to have a website where products can be sold online. For this master‟s project, an e-commerce website has been created for Chinguun-Tulga, a company which operates in Ulaanbaatar, Mongolia. The main requirement of this project is to create the website in the least expensive yet in a professional way – thus, an open-source solution known as OSCommerce is utilized to develop the e-commerce system. The final version of the website has a front-end site for public viewers and a back-end site for the store owner so that she could maintain the website. In addition, this website is accompanied by documents which cover topics such as intended website audience, design decision, competitive analysis, website contents, website structure, database elements, security aspects, payment methods, marketing approaches, website maintenance guide, management and user requirements, costs and benefits analysis, alternative development strategies, and project schedule.
  3. 3. Page | iii Table of Contents Foreword ................................................................................................................1 Project Summary Steps taken to complete the project SWOT analysis of Chinguun-Tulga Internet users of Mongolia Tools used Web hosting provider Evaluation of project Conclusion Bibliography..........................................................................................................16 Design Document..................................................................................................18 I. Introduction ......................................................................................................................... 19 II. Website Goals...................................................................................................................... 20 III. User Experience .................................................................................................................. 20 IV. Competitive Analysis........................................................................................................... 23 V. Site Content ......................................................................................................................... 29 VI. Payment Methods............................................................................................................... 40 VII. Marketing Approaches....................................................................................................... 41 VIII. Security.............................................................................................................................. 46 Site Maintenance Document ................................................................................62 1. Configuration........................................................................................................................ 63 2. Catalog.................................................................................................................................. 67 3. Modules................................................................................................................................ 71 4. Customers ........................................................................................................................... 72 5. Locations/Taxes.................................................................................................................... 74 6. Localization........................................................................................................................... 75 7. Reports................................................................................................................................. 76 8. Tools..................................................................................................................................... 77 9. Cascading Style Sheet (CSS) ................................................................................................. 80 Systems Requirements Document ........................................................................85 Executive Summary.................................................................................................................. 86 I. Information Systems Background......................................................................................... 87
  4. 4. Page | iv II. Functional Requirements..................................................................................................... 88 III. Environmental Requirements ........................................................................................... 102 IV. Alternatives....................................................................................................................... 103 V. Recommendation............................................................................................................... 107 VI. Project Schedule ............................................................................................................... 108 Appendix A ......................................................................................................... 109 Website Architecture Appendix B.......................................................................................................... 114 ERD and Database Tables
  5. 5. Page | 1 Foreword My name is Bilguun Ginjbaatar. For my master‟s thesis project, an e-commerce website has been created for Chinguun-Tulga, a company which operates in Ulaanbaatar, Mongolia. This project took about six months to complete. Currently available open-source solutions were researched for two months and a software called OSCommerce is utilized to develop Chinguun- Tulga‟s e-commerce system. OSCommerce is an online store management software program that can be used on any web server that has PHP and MySQL installed, and it is available as a free software under GNU General Public License. For the remainder of the six months, the website is designed and documentations are produced. The website for Chinguun-Tulga is created to help increase its sales as well as to acquire more customers in the Mongolian office supplies market. The website has a front-end for public users and a back-end for the administrator(s). In the front- end, all inventories are displayed in a categorized order, and customers can search products by name, keywords, product codes, and prices. Customers are asked to create an account in order to be able to checkout at the front-end. The back-end provides a configuration panel that is used to input products, remove products, put products on special sale, setup payment gateways, manage customers‟ accounts, manage orders; and access to it requires a username and password. The back-end site is going to be a very useful tool because the administrator can maintain the front- end site without having troubles editing complex PHP, HTML, and Java script files. Also, this website is accompanied by documents which cover topics such as intended website audience, design decision, competitive analysis, website contents, website structure, database elements, security aspects, payment methods, marketing approaches, website maintenance guide, management and user requirements, costs and benefits analysis, alternative development strategies, and project schedule.
  6. 6. Page | 2 Project Summary This project started under the guidance of Professor Ellen Zimmer at the end of the spring 2007 semester. The goal of this project is to create an e-commerce system for Chinguun-Tulga, where Mongolian customers would use the Internet to make their purchases. The deliverables of this project are: - Front-end website ( - Back-end website ( - Design Document - Website Maintenance Document - Systems Requirements Document In the Design Document, the elements related to the website design are discussed. In the introduction, Chinguun-Tulga Company‟s background and mission are stated. The goal of the website is to provide customers a dynamic e-commerce website displaying the inventory at Chinguun-Tulga office supplies store. User experience, the third section, basically talks about the audience definition and shows numerous scenarios why customers would visit Chinguun-Tulga‟s website. The fourth section, competitive analysis compares and contrasts four independent websites that sell office supplies. These included websites are,,, and Following this, the design decision, front-end site content, back-end site content, database elements, entity relationship diagram, and available payment options are discussed. A section on security aspects as well as the methods used to measure the website traffic is also addressed. Google Analytics is used to measure the traffic of the website as well as visitor‟s behavior. The Website Maintenance Document basically describes the functions of the back-end site and is intended for the store owner. It gives the store owner instructions on maintaining the website, adding new products, and what to do when an online transaction takes place. The back- end site updates the front-end contents by inputting data into the database, which the front-end site retrieves from the database. There are nine things to know about the maintenance, and these are: configuration, catalog, modules, customers, locations/taxes, localization, reports, tools, and cascading style sheet (CSS). The configuration section will setup the entire basic configuration such as assigning administrators, product listing options, customer details, e-mail options etc.
  7. 7. Page | 3 The catalog section is very important and it inputs all products, category folders, and product attributes to the store front. Here, step-by-step instructions on adding new products (ex: copying a new product, moving a category folder to a different location, etc.) are specified. In the modules section, the payment modules and options for shipping rates are described. In the customers section, descriptive guides such as how customers can be edited, deleted, and e-mailed as well as how reports for invoices can be generated are given. Both the invoice and the packing slip are created in this section. Also, the tax rates can be set up in the locations/taxes section. In the localization section, the currencies, languages, and orders status can be viewed. Mongolian language files are created here by copying the files from the English language folder to a new folder named Mongol. The reports section displays the products that were most viewed, products that have been purchased the most, and the total orders from all customers. A tools section allows database backup (or restore), define language, file manager, newsletter e-mail manager, and “who is online” features. Last but not least is the cascading style sheet (CSS). There are over 50 different styles, and most of the colors, text fonts, text sizes, tables, cell attributes that are used in the front-end website can be changed in the style sheet definition page in the catalog/stylesheet.css file. The cascading style sheet can be accessed by going to ToolsFile Manager links. The Website Maintenance Document should also be written in Mongolian language because the store owner does not know English fluently. Because of the given time constraint, this document is written only in English, and in the near future the Mongolian version will be written, so that the store owner can run the website without any further assistance from me. In the Systems Requirement Document (SRD), the management and user requirements, costs and benefits, and the alternative development strategies for Chinguun-Tulga‟s website are discussed. There are four options that can be chosen for Chinguun-Tulga‟s new e-commerce information system. The first scenario is “Ready-To-Use: 1&1 eShops”, the second is “Ready- To-Use: Network Solution”, the third is “E-commerce software: VP-ASP”, and the last is “Open- source solution: OS Commerce.” The first three scenarios involve high initial and maintenance costs, thus considering the cost as the main factor the OSCommerce solution is implemented. In the SRD, Chinguun-Tulga‟s business background and the types of products currently sold at Chinguun-Tulga‟ retail store are addressed. By creating data flow diagrams such as context
  8. 8. Page | 4 diagram and diagram zero, one, two, and three the functional requirements of this project are explained. Context diagram is a very general diagram, requiring it to be further decomposed into the diagram zero. In the diagram zero, there are three sub-processes, and they are: Process Order, Generate Report, and Backup/Restore. Diagram zero is further decomposed to illustrate these three processes and each is named “Diagram 1: Process Order”, “Diagram 2: Process Generate Report”, and “Diagram 3: Process Backup/Restore.” All entities, data, and flows are described in the Data Dictionary. Also, in the Data Store Design section, the simplest level of the entity relationship diagram (ERD) along with the un-normalized database schema is provided. (Further decomposed ERD and normalized database along with its tables are in the Appendix B.) Furthermore, the environmental requirement is discussed, and in order for Chinguun-Tulga to implement this e-commerce system, it needs a purchase of a desktop computer (or laptop), Internet connection, domain name, and a reliable web server to host the website. In the last page of SRD, a Gantt chart of the project schedule is provided. Steps taken to complete the project The knowledge from the Project Management class helped me construct a step-by-step approach for this project. The project is divided into four steps: planning, analysis, design, and implementation. Planning: In the planning stage, research was done for e-commerce solutions for Chinguun- Tulga. There were many different solutions available from various vendors. Once a decision to utilize OSCommerce was made, the other solutions were no longer in the plan. A work schedule was also created and it describes the work break down structure by each month, starting in May and ending in December of 2007. In the planning, it is important to create a Systems Requirement Document, design a detailed work plan (Gantt chart), and prepare an analysis on feasibility. Analysis: Mrs. Chuluunbaatar was interviewed over the phone, and she gave information about her company‟s operations. After examining Chinguun-Tulga‟s current system, I proposed my e-commerce website project to her. A work flow process diagrams such as DFDs and alternative options were studied in the Systems Requirements Document. After explaining the possibility of selling her products online, she agreed to be the project sponsor. The work on the project is continued by searching for different web
  9. 9. Page | 5 hosting providers. After analyzing several solutions, 1and1 Internet Inc., is chosen ( as the web hosting provider because they provided high quality service for a reasonable monthly fee. Design: Chinguun-Tulga‟s e-commerce website is designed based on the OSCommerce model. Designing the front-end website was quite demanding and required a lot of time in different combinations regarding the site design and color matching. The last version of the website has a white background and is positioned in the center; and its elements are integrated in a table with a border that equals zero. While designing the front-end, the designing of the back-end was also started based on the OSCommerce model. In addition, the front-end has a dual language feature: English and Mongolian. It allows Mongolian visitors to view the website in their native language, and my thesis committee can view the site in English. Implementation: After completing the design stage, the website is put into production phase. Several tests were implemented to see if the transactions were working as they were supposed to. If there was anything that needed to be debugged, it was fixed in this stage. The documentations such as Design Document and Website Maintenance Documents were revised and finalized in this stage, too. The final step in this stage is to present the system to the thesis committee. SWOT analysis of Chinguun-Tulga It was quite interesting to see Chinguun-Tulga‟s long-term strategic planning, rather than its day-to-day business operations. Strategic planning is the process of identifying long-term goals, strategies, and resources. To map out the strategic planning, firms create series of questions which are in combination called a SWOT analysis. SWOT analysis examines company‟s strengths (S), weaknesses (W), opportunities (O), and threats (T). The related questions were: - What are Chinguun-Tulga‟s major strengths, and how can it maximize them in the future? - What are Chinguun-Tulga‟s major weaknesses, and how can it overcome them?
  10. 10. Page | 6 - What are Chinguun-Tulga‟s major opportunities, and how can it take full advantage of them? What IT plans does it have to support business opportunities? - What major threats does Chinguun-Tulga face and what can it do about them? By creating this SWOT analysis, I aimed to contribute to the strategic planning process for Chinguun-Tulga. The main possible strengths are loyal customers who repeatedly purchase from Chinguun-Tulga, sales associates with great people skills, best store location, ability to order custom-products from the suppliers at a customer‟s request, and an IT graduate who has web development knowledge. The possible weaknesses are use of legacy systems, incomplete or old-fashioned financial statements, and limited budgets on marketing. On the possible threat side, three major risks are identified. First, there are many other competing firms who specialize in selling office supplies, and this number is increasing. This tough competition will eventually result in a “price war”, and if that happens, it will have a negative impact on Chinguun-Tulga‟s revenue. Also, some firms (ex: that do not even have a physical store are starting to sell products exclusively online. Lastly, there is a possibility that Chinguun-Tulga may not secure another 5-year-contract on its building lease. However, there are some possible opportunities. First, Chinguun-Tulga is well-positioned for expansion. The store is run by a very experienced person who knows what sells well and POSSIBLE STRENGTHS -Repeat and loyal customers -Excellent customer-focused sales associates -Great retail store location -Ability to order custom products from suppliers per customers' request -IT Graduate who has web development, and marketing skills POSSIBLE WEAKNESSES -Still using several legacy systems -Some documentation need updating -Limited or budget on marketing POSSIBLE OPPORTUNITIES -Well-positioned for expansion -Can be the first Ulaanbaatar's office supplies store with both e-commerce system and retail store -High Potential for B2B (business-to-business) growth POSSIBLE THREATS -The number of competing stores are growing -New competeition via web (ex: -Possibility of not securing another 5-year- contract on the building's lease Chinguun-Tulga SWOT Analysis
  11. 11. Page | 7 what does not. Moreover, there is a high potential for B2B (business-to-business) growth, meaning that Chinguun-Tulga could sell products in bulk to other businesses. The most important opportunity that was discovered for Chinguun-Tulga is an e-commerce system that allows customers to buy online. After their new e-commerce system is in operation, Chinguun- Tulga will gain a competitive advantage to offer services in both retail and online environment in the Mongolian office supply market. Internet users of Mongolia As I started working on this project, it was important to find out how many people really use the Internet in Mongolia. The complete internet users‟ data was not readily available from the Mongolian National Statistical Office. The Mongolian National Statistics Office, International Telecommunication Union, UNDP, the World Bank, and the Central Intelligence Agency of U.S. websites were mainly used to gather the data. Estimated data for 1998, 1999, 2000, 2001, 2002, 2003, 2004, and 2005 were collected, but 2006 and 2007 data were unavailable at the moment. The data is tabulated in the following chart: Year Number of Internet Users Percentage of population Sources 1998 3,400 0.13% NSO 1 1999 4,200 0.16% NSO 2 2000 30,000 1.10% The World Bank 3 2001 35,000 1.35% Report on E-Readiness 4 2002 140,000 5.18% UNDP 5 2003 157,027 5.81% The World Bank 2004 220,000 8.00% The World Factbook 6 2005 268,300 10.30% C.I.A. 7 1 Statistical Yearbook of 1998. Accessed on Nov 27, 2007. <> 2 Statistical Yearbook of 1999. Accessed on Nov 27, 2007. <> 3 Results: Ongoing Progress in Mongolia. Accessed on Nov 27, 2007. <> 4 E-Readiness Assessment Report of Mongolia for the Networked World. p.22 < > 5 National Report. Accessed on Nov 27, 2007. <> 6 Mongolia Facts. Accessed on Dec 1, 2007. <> 7 Mongolia Profile. Accessed on Nov 27, 2007. < factbook/geos/mg.html>
  12. 12. Page | 8 It is remarkable to notice that Mongolian Internet users have been increasing fast in the last eight years. In 1998, there were only about 3,400 Internet users, but eight years later this number reached 268,300, an increase by 78 times. It means that 10.3 (or more) in every 100 people are using the Internet now a days. Internet services were first introduced in early 1996 by Datacom, a data communication systems company. At present, there are seven ISPs in Mongolia; five of the ISPs are private companies, with an additional two subsidized and established by direct involvement of the Mongolian government. There are more than 70 Internet cafes and 10 Public Internet centers operating in Ulaanbaatar. The Internet cafes offer shared access to the Internet, fax over IP and Internet phone services to the public. In the Systems Requirements Document, estimation is made based on the fact that ten percent of Mongolians use the Internet in their daily lives. (This number was used only to calculate the quantity of benefits in the costs-and-benefits analysis.) Thus, the online sales are estimated to bring an additional five to ten percent increase to Chinguun-Tulga‟s revenue. It means that through its e-commerce online system, Chinguun-Tulga will earn at least $1,000 (5 percent of $20,000 in revenue) a year, or perhaps even more. This may not happen right away but again the number was used to derive the amount of benefits so that the comparisons among different scenarios become possible. Tools used The following applications are used for this project: Dream Weaver MX, Photoshop CS3, PhotoFiltre Studio, Adobe Kuler, and EmFTP. Created by Macromedia, DreamWeaver MX is a powerful WYSIWYG (What You See Is What You Get) tool that helps edit HTML, PHP, CSS, and Java Script files. It has great functionalities, such that while you work on the source code window, it allows you to view the site directly in the design window. DreamWeaver has been practiced for over two years, and I feel very comfortable using it. A great feature of DreamWeaver MX is the file transferring/synchronizing tool. Once you provide DreamWeaver MX with your web server‟s username and password, the file transferring feature will start working. For example, if I need to put (or receive) a file from my system to the web server, I would open the desired file and click
  13. 13. Page | 9 on PUT (or GET) from the site menu on the top. DreamWeaver MX is also used to gather the color names with its six digit hexadecimal names for the website. Photoshop CS3 is also used in this project. The product images were received in a digital format via e-mail from Mrs. Chuluunbaatar. There were a lot of problems with the product images, and most of the photos needed to be edited and cropped. All the product photos were taken by an amateur Mongolian photographer and they did not meet my expectations. Ideally, each image should have been taken on a clear white background with lights shining directly onto it. Since the images were on blue or dark backgrounds, the Photoshop CS3 was used for editing. Photoshop CS3 was also used to create the logo of Chinguun-Tulga. Also, an application called PhotoFiltre Studio is used, and it is quite similar to Photoshop CS3. PhotoFiltre Studio is utilized to create a 16 x 16 pixels icon image. This icon appears on the left side of Chinguun-Tulga‟s URL address in the web browser. Compared to Photoshop CS3, the PhotoFiltre Studio uses less memory and resources, and it loads to the computer quicker than Photoshop CS3. Adobe Kuler is used to choose the colors in the website. Deciding what combination of colors to use for Chinguun-Tulga‟s website was a challenging task in this project. To come up with appealing colors, I researched on the Internet and found out about many useful color matching tools. One of the best freely available color matching tools was Adobe Kuler (available at from Adobe. It allows webmasters to visualize what colors would go well with others; in fact, one can create a color-based theme from a combination of five web safe colors that match the best. For the purpose of this project, I set the base colors as light blue and light green. The other three colors are automatically selected by Adobe Kuler, and those were white beige, white, and oceanic blue. EmFTP is utilized to facilitate file transferring between the local machine and the web server. Although DreamWeaver MX took care of most of the file transferring, there were image files that needed to be transferred using the EmFTP. Not only EmFTP transfers files, but it also can change file permissions to read, write, and execute.
  14. 14. Page | 10 Web hosting provider The 1and1 Internet, Inc. ( is chosen as Chinguun-Tulga‟s web hosting provider. 1and1 Internet is located in Chesterbrook, PA in the United States. I did not choose a Mongolian web hosting provider because of the high webhosting costs. 1and1 Internet is considered as a better choice because of the additional services it provides. If you sign up on the six-month-contract with 1and1 Internet, they will give you a free domain name, and you can choose from .com, .net, .us, .org top level domains. The web space is 10GB, and the monthly transfer volume must be within 300GB. Not only they offer one free domain name, but give ten MySQL databases and a user friendly control panel for configuring domain, sub-domain, webmail, and FTP access. The best of all, their monthly fee for web hosting is very reasonable - $3.99 a month. There are reasons for not choosing a Mongolian host at the moment. First, it costs at least $50 to register a domain name8 , and the web hosting fees range from $8 to $20 per month9 ; and the given web space is very limited compared to what 1and1 Internet offers. If Chinguun-Tulga‟s website was hosted in Mongolia, it will cost about three times more than that of 1and1 Internet‟s. Considering the cost as the main factor for this project, Mongolian hosts were not selected. Another reason why a Mongolian host was not preferred is because of frequent power failure incidents in Ulaanbaatar; thus Mongolian web hosting providers will not guarantee a 100 percent up-time for Chinguun-Tulga‟s website. In the future, as hosting fees and the domain name service fees go down with Mongolian web hosting providers, Chinguun-Tulga‟s website should be moved to a Mongolian web hosting provider for efficiency purposes. But for now, going with 1and1 Internet is the ideal solution. While working on this project, I realized that it is impossible to use GoDaddy‟s 256-bit Turbo SSL certificate on 1and1‟s web server., in the present SSL market (as of September 2007), offers the least expensive SSL certificate, such as Turbo SSL, for only $19.99/year. This Turbo SSL certificate verifies the domain control and secures your site; and GoDaddy also issues a seal that can go on your website. Unfortunately, GoDaddy‟s certificate could not be installed on 1and1‟s server due to 1and1‟s policy. In order for the GoDaddy‟s 8 The current largest .mn domain name registrar charges $49.95/year for a single .mn domain. 9 MagicNet, the ISP company in Mongolia currently charges $8 per month for 30 mb webspace. <>
  15. 15. Page | 11 Standard SSL to work, I needed to obtain a Certificate Signing Request (CSR) from 1and1, and when contacted 1and1‟s Technical Support Department, they refused to sign the request. Instead, they offered 1and1‟s SSL certificate that is originated by GeoTrust for $49/year. As a result, my costs-and-benefits analysis in the Systems Requirements Document needed to be revised. Using GoDaddy‟s Turbo SSL certificate (available for $20), I originally came up with $477 for the total initial cost, and $428 for the annual maintenance cost. Since GoDaddy‟s SSL certificate was no longer an option, the costs-and-benefits analysis had to be re-calculated using 1and1‟s SSL offer. By choosing 1and1‟s SSL certificate (available for $49), the total initial cost came to $506, and $457 for the annual maintenance cost. The Systems Requirement Document has been updated with this new information.
  16. 16. Page | 12 Evaluation of Project When the project began, I used the materials from the classes I took in my master‟s program courses. After completing research on creating an e-commerce website using open- source technology, the following is the final outline: Design Document: Introduction Website Goals User Experience  Audience Definition  Scenarios Competitive Analysis Online Shopping Site Content  Front-End/Public Viewers‟ Site Contents  Back-End/Database Administrator‟s Contents Database Elements (Database tables are located in Appendix B) Payment Methods Marketing Approaches  Keywords  Tell-A-Friend Feature  Affiliate Program  Measuring the Traffic Security  Types of Security Threats  Securing  Payment Gateway Security  SSL for Chinguun-Tulga  Hosting Server Security  Database Security  Risk Analysis  Business Continuity Plan Website Maintenance Document: Configuration Catalog Modules Customers Locations/Taxes
  17. 17. Page | 13 Localization Reports Tools Cascading Style Sheets (CSS) Systems Requirements Document: Executive Summary Information Systems Background Functional Requirements  Dataflow Diagrams  Process Descriptions  Data Dictionary  Flows  Data Store Design  Database Schema  Form Environmental Requirements Alternatives  Scenario 1: Ready-To-Use Package: 1&1 eShops  Scenario 2: Ready-To-Use Package: Network Solutions  Scenario 3: E-commerce software: VP-ASP Shopping Cart  Scenario 4: Open-Source Solution: OS Commerce Recommendation Project Schedule (Gantt chart) As mentioned before, this e-commerce website is created for a Mongolian company and the target audiences are Mongolian customers. I believe the e-commerce system that I created for Chinguun-Tulga will generate more revenues. The best way to market this website is to ask other Mongolian websites to list Chinguun-Tulga‟s URL on their websites. Also, Chinguun-Tulga‟s website has been submitted to Google, the largest search engine in the world. The necessary changes were made in the material based on Professor Zimmer‟s suggestions. Professor Zimmer teaches both undergraduate and graduate level web system design and development courses at Edinboro University of Pennsylvania. During the course of my thesis project, she constantly gave feedbacks on the work that I have done. Professor Zimmer and I tested Chinguun-Tulga‟s e-commerce system both from the perspective of a store owner and a customer.
  18. 18. Page | 14 Given the time constraint, a few things I wish I could have done for this project are:  At  Flash or dynamic banners which display products randomly so that it attracts customers  At, below the header section:  Testimonial information from customers who actually purchased from Chinguun- Tulga‟s e-commerce system  Mongolian version of the Website Maintenance Document  Paper catalog of products  Improve product images by re-taking all pictures on a white background  Exchange links with Mongolian websites that attract large volumes of Mongolian visitors
  19. 19. Page | 15 Conclusion After completing the entire website, my understanding is that creating an e-commerce system for a retail company may be a complex project for one person to develop, but it can be done if more time is invested and further research is done. OSCommerce is one of the freely available technologies for online store management system. OSCommerce does not profess to be the “ultimate” e-commerce solution. Rather than attempt to be all things to all people, it provides a basic set of functionality that meets the common needs of almost all online businesses. In its website, it has community-supplied add-ons meaning that it can be customized to meet the specific needs of any business. Visual aesthetic is very important in a web development project, thus an advanced knowledge of Photoshop CS3 or PhotoFiltre Studio application can help create better graphic images. Also, choosing colors is imperative because colors give the general look and feel for any type of website. Systems analysis, information technology, web system development and design, electronic security, and documentation are very important components of a web development project of any size. Knowing the principles of project management will help with the planning of a project and outlining of the necessary steps. To produce a good and successful e-commerce website, one should integrate all the knowledge acquired from the courses mentioned above and dedicate oneself by investing an adequate amount of time in the project.
  20. 20. Page | 16 Bibliography 1. Adobe Kuler. 10 October 2007 <>. 2. Day, Kevin. Inside the Security Mind: Making the Tough Decisions. Upper Saddle River: Prentice Hall, 2003. 3. Dowla, Rafi. "Web System Deisgn and Development Using Open Source Technology." Technical Report 06-03. 2006. 4. "Network Security." FitzGerald, Jerry and Alan Dennis. Business Data Communications and Networking. 8th. Danvers: FitzGerald & Associates, 2005. 356-406. 5. ITU. International Telecommunication Union. <>. 6. Leon, Harold Ponce. Welcome to osCommerce. May 2007 <>. 7. Mongolian National Statistical Office. September 2007 <>. 8. Mookhey, K. K. Common Security Vulnerabilities in e-commerce Systems. 26 April 2004. 25 October 2007 <>. 9. Morochove, Richard. "Measure Your E-Commerce Site's Performance." PC World 15 October 2007. 10. osCommerce. "osCommerce 2.2 Milestone 2 Update 051112 Documentation." 11. OSCommerce. Security and Privacy Proposal. 7 April 2005. < ns/4>. 12. Pfleeger, Charles P and Shari Lawrence Pfleeger. Security in Computing. 3rd. Upper Saddle River: Prentice-Hall, 2003. 13. "The Risk Register." Schwalbe, Kathy. Information Technology Project Management. 4th. Thomson Course Technology, n.d.
  21. 21. Page | 17 14. Shelly, B Gary, Thomas J Cashman and J Harry Rosenblatt. "Strategic Planning Overview." Systems Analysis and Design. 6th edition. Thomson Course Technology, n.d. 15. Sklar, David. Learning PHP 5. 1st edition. O'Reilly Media, July 2004. 16. The World Factbook: Mongolia. 18 October 2007. <>. 17. Turban, Efraim. Electronic Commerce: A Managerial Perspective. Upper Saddle River: Prentice Hall, 2006. 18. UNICEF. At a glance: Mongolia. September 2007 <>. 19. W3C. W3C main page. <>. 20. W3Schools, free web development information. <>. 21. Welling, Luke and Laura Thompson. PHP and MySQL Web Development. 3rd edition. Sams, 2004. 22. Wikipedia, Community managed encyclopedia. <>. 23. World Bank. <>. 24. Zimmer, Ellen. Professor Zimmer's Home Page. September 2007 <>.
  22. 22. Page | 18 Design Document This document describes the project goal and scope, Chinguun-Tulga Company’s background and mission, intended website audience, design decision, front-end site content, back-end site content, database elements, security, payment options, and the methods that used to measure the website traffic. In the appendix section, the website maintenance document and the systems requirements document are included.
  23. 23. Page | 19 I. Introduction Chinguun-Tulga, established in 1999, is a small B2C (business-to-customers) company that sells office supplies through its retail store. Most products are imported from China, and once a month, new inventories are shipped from Beijing. The retail store is conveniently located in a busy district at the heart of Ulaanbaatar. The store operates Monday through Friday from 9:00 am to 8:00 pm, and from 9:00 am to 6:00 pm on Saturdays. It is closed on Sundays and during the major holidays such as Independence Day and Mongolian Lunar New Years days. The owner of Chinguun-Tulga, Mrs. Sarangerel Chuluunbaatar, hired three sales people who assist customers at the store with the checkout process. Mission Statement Chinguun-Tulga‟s mission is to provide high quality service to all its customers with a professional, kind, and supportive manner. Chinguun-Tulga is committed to being the best in all areas of its business. Chinguun-Tulga‟s vision is to: Treat every supplier, employee, and customer with honesty, dignity and respect. Impress our customers, current and prospective, to encourage future business. Improve all aspects of service delivery to our customers, our employees and our community. Provide a safe and convenient environment to shop. Statistics: - Chinguun-Tulga carries about 150 different types of office products in categories such as binders/ document organizers, punchers/staplers, pens and pencils, papers and note cards, paper clips and pins, calculators, rulers, erasers, document shredders, and desk accessories. - Average weekly sales range from ₮500,000 – ₮1,500,000 Mongolian Tugriks ($500 - $1,500 in U.S. Dollars) Goals and Deliverables of the Project The goal of this project is to increase sales by creating an e-commerce website for Chinguun-Tulga, where customers will be using the Internet to make their purchases. The deliverables of this project will be: - Front-end website ( - Back-end website ( - Design Document - Website Maintenance Document - Systems Requirements Document
  24. 24. Page | 20 II. Website Goals Chinguun-Tulga Office Supply Store will provide product information and service for customers through their online store, at Customers will be able to access information through the website for services such as product listings, product pricing, product descriptions, upcoming products, best selling products, and special product discounts. After browsing, customers can conveniently purchase the products using the online shopping cart. If customers have any questions or concerns, they may fill out a form on “contact us” page on the website. The secondary goal of the website is to increase sales by attracting more customers. On their website, Chinguun-Tulga will provide up-to-date information both to the customers and the employees. New visitors will be able to see the new products, while the employees can keep track of inventory by logging on to the back-end of the website. III. User Experience Audience Definition I spoke with Mrs. Sarangerel Chuluunbaatar, Director of Chinguun-Tulga Office Supply Store, on June 7, 2007 to discuss the development and structure of the website. One of the key questions addressed was the intended audience. Below is a list of the intended audience that was discussed in the conversation along with definitions for further clarity. New Customers – customers that are considering buying at www.chinguun-, and want to inquire about products offered. Current Customers – established customers who have already purchased from the retail store and want to find out about additional services online. Referred Customers – friends or someone who knows the current customers that are considering buying office products, and want to learn about the products and services being offered. Chinguun-Tulga Staff – employees who work for Chinguun-Tulga, who may need to keep track of inventory, arrangements for shipping, and want to check for accuracy of product description and price. Chinguun-Tulga Director – Mrs. Chuluunbaatar will be adding new products on the website, and will review products that were sold, orders that are pending, processed orders, and the status of payments.
  25. 25. Page | 21 Scenarios Scenario 1 Character: New Customer Jojo works as an administrative assistant at a prestigious cosmetics company in Ulaanbaatar and loves shopping online. Her supervisor told her to buy a document shredder, three boxes of A4 format paper, and some desk accessories for the company. Jojo usually goes to a nearby office supply store, but this time, she really wants to shop online and explore more online stores in the Ulaanbaatar city area. So, Jojo finds out about Chinguun-Tulga‟s online store, and she needs to know if Chinguun-Tulga offers what she is looking for. Purpose: Jojo visits Chinguun-Tulga‟s website and searches for a document shredder, papers, and desk accessories. She looks at the category list on the left side of the website, and clicks on the corresponding categories. To make her search even easier, she could simply use the “search by keyword” tool located on the top area of the website. She may also want to find out about the available payment methods. To find out about it, she clicks on the “conditions of use” link and reads all about payments. Once she finds the answers, she feels happy to be shopping online! Scenario 2 Character: Current Customer Enn is a 23 year old recent college graduate that that shops at Chinguun-Tulga Office Supply Store on a frequent basis. This time he wants to purchase school supplies that are on special sale. Purpose: Enn visits Chinguun-Tulga‟s website and sees some of the special products on the very first page. To find out about more he clicks on the specials link. This page displays all items that are currently on sale. From here, Enn adds the items he wants on his shopping cart, and when he is ready to checkout, he simply clicks on the checkout link. Scenario 3 Character: Customer Who Wishes to Contact Chinguun-Tulga Phil is an Art teacher who works at an elementary school in Ulaanbaatar. Phil is looking for water colors for his third grade students and wants to know if Chinguun-Tulga carries what he is looking for. He finds that the website offers water colors from three different vendors. He needs to contact Chinguun-Tulga to find out if there is any more water colors they carry.
  26. 26. Page | 22 Purpose: He goes to Chinguun-Tulga‟s website and locates the link to the contact us page. The contact us page has a form that allows visitors to send e-mail message conveniently. Phil fills out the form and submits his message to Chinguun-Tulga, and he receives a reply in an hour! Scenario 4 Character: Store Owner Mrs. Chuluunbaatar wishes to do the following: -To keep track of her online customers and the receipt of their orders. She needs this information as soon as it becomes available. -She also wants add new products on the website and put some products on special discount or clearance. There are two ways for her to know whether she sold goods online or not. The first way is receiving an individual e-mail after each successful online transaction. After the payment has been processed, the system will automatically generate an e-mail and send it to with the transaction details. The other way to know about online sales will be to login to the administrative side of the website. To do that, Mrs. Chuluunbaatar will use her administrator‟s username and password. The first upcoming page will display all completed and pending orders with the date and time. Mrs. Chuluunbaatar will use the administrator‟s website to add new products. As stated earlier, each month the store receives inventories from Beijing, and new products that are not listed on the website need to be added. Also, Mrs. Sarangerel needs to be able to add products, reduce inventories, or offer special discounts without any difficulty.
  27. 27. Page | 23 IV. Competitive Analysis The competitive analysis is divided into two sections. One section will be devoted to analyzing stores in Ulaanbaatar: (Store that sells electronic and office supplies online) (Store specializing in hand-delivering gifts and greetings in the Ulaanbaatar area) The second section will be devoted to analyzing big office supply stores in the United States: (Store specializing in office products and electronic appliances) (Office supply and furniture store) These websites were compared based on the following features: - Site Design (10 points) - Site Navigation (10 points) - Overall Look and Feel (10 points) - Consistency throughout the Website (10 points) - Up-to-Date Information (10 points) - Security (10 points) - Payment Options (10 points) Each website is thoroughly reviewed, and the comments and ratings are given for each website on the following pages. The highest possible score for a website is 70 points, and each feature as listed above are measured on a scale from zero to ten, ten being the highest, and zero being the lowest.
  28. 28. Page | 24 Store 1: General Site Features Score Comments Site Design 10 Centered and has a repeating gray photo in the background. Used only primary colors such as red, black, and white. Products are displayed in three columns. Has dual language feature. Site Navigation 10 Excellent navigation. All menus are visible on each page and located mainly on the top and the left side. Products are divided in technology, furniture, electronics, and office supplies categories. Overall Look and Feel 10 Professional and very clean. Has a welcoming feel, but it would be nicer if they had a dynamic ad that displays savings, discounts, and weekly ads etc. Also, the name seems to be borrowed from a U.S. based store. Consistency throughout the Website 8 About us page seems to be using 100% table width. The links to company introduction, logistics, and investment are dead. Up-to-Date Information 8 The website has a copyright logo and year. The date is not up-to-date. Security 5 SSL seems to be unknown. does not allow customers to create an account, thus the checkout process was impossible for new shoppers. Payment Options 10 Bank transfer; Zoos, Capitron, Khas bank credit cards; Visa, Master Card, Total: 61
  29. 29. Page | 25 Store 2: General Site Features Score Comments Site Design 7 Centered design, flash banner on top; Choice of only few colors, looks busy, hard to focus, and not enough empty space. Site Navigation 9 Global navigation should have more than two links. The left side has categories: menu and special gifts. There is no search feature. Overall Look and Feel 8 The choice of text font is not good. Images of the products are nice, however, buttons such as "Add to Cart" and "Checkout" are too big. Consistency throughout the Website 10 All pages stay consistent with one another. Up-to-Date Information 5 There are no weekly specials or sales announced on a regular basis. No category such as NEW PRODUCTS Security 10 Connection encrypted with AES-256 bit high grade encryption. SSL certificate issued by expires on 5/25/2008. Payment Options 10 Visa, Master Card, Paypal, Pay-by-phone, Money Transfer: Money Gram and Western Union Total: 59
  30. 30. Page | 26 Store 3: General Site Features Score Comments Site Design 9 Entire website is aligned to the left. The background color is combination of green and light green, and the main body is on a white background. Too many colors are used. Site Navigation 10 Excellent navigation. All office products are listed under OFFICE SUPPLIES menu. Product pages display product details, and also show a considerable product in a blue box. If more information is needed, the links are provided within the same page. Shoppers do not have to click on the back button. Overall Look and Feel 9 Overall look is professional, but it could have been improved if fewer colors were used. The dynamic ad is not professional enough. Consistency throughout the Website 10 All information is provided in the section that is aligned to the left. Everything stays consistent. Up-to-Date Information 10 Just like OfficeDepot, they have weekly specials, and offer great savings on a regular basis. Security 10 Connection encrypted with AES-256 bit high grade encryption. SSL certificate issued by RSA Data Security, Inc, expires on 10/17/2007. Payment Options 10 American Express, Discover Network, Master Card, Visa, Office Depot Credit Card Total: 68
  31. 31. Page | 27 Store 4: General Site Features Score Comments Site Design 10 Clean, crystal, and the centered style gives a focused and professional look to the website. Bright red color distinguishes the horizontal menu from other sub menus on the bottom. Site Navigation 10 Excellent navigation. All office products are listed under OFFICE SUPPLIES menu. Product pages display product details, and other related products. If more information is needed, the links are provided within the same page. Shoppers do not have to click on the back button. Overall Look and Feel 10 Well organized! Not busy and has a welcoming feel. The dynamic ad on top is very informative. Consistency throughout the Website 10 Menu on the left side stays consistent with the entire website. Up-to-Date Information 10 Weekly specials are announced frequently. Security 10 Connection encrypted with AES-256 bit high grade encryption. SSL certificate issued by RSA Data Security, Inc, expires on 10/21/2008. Payment Options 10 American Express, Discover Network, Master Card, Visa, Office Depot Credit Card Total: 70
  32. 32. Page | 28 After reviewing each website based on the criteria, I found that the best website for online shopping was OfficeDepot, with a total score of 70. OfficeDepot‟s website breaks down the various office products into many categories, making the navigation to desirable information much easier. OfficeDepot has a global horizontal menu that makes navigation less time consuming, and provided an abundant information about their products and services in a format that is very easy to read. The content was well structured with great product images. For instance, if binders and accessories was selected from the horizontal “office supplies” menu, a shopper would see images of binders with the corresponding prices as well as exclusive brand products and the best selling products in the category. The search of products can also be narrowed down by keywords, item numbers, brand, and price. Staples‟s website is very well organized and provides the products‟ information in three main categories: office products, technology, and furniture. The site design is good, but everything is aligned to the left, making the website look busy and hard to read. Although the overall look and feel is very welcoming, there seems to be many different mismatching colors. For instance, the yellow frame on each product box does not match with the other main colors such as red and green. Moreover, their dynamic ad on the index page should be created in a more professional way. Accordingly, based on the information above, I gave them a total score of 68. The next best website was, and this one earned a total score of 59. is one of the most visited sites in Mongolia, and it provides information in the areas of computer programming, website listings, Mongolian songs, entertainment, and dictionary etc. They recently launched their gift delivering services in Ulaanbaatar, and most orders come from people who are living and working outside of Mongolia. In terms of site design, there seems to be too much empty space and usage of large font size to fill it. No information is provided regarding terms of use, payment methods, and security. In fact, to find out about their SSL and payment options, I had to create a testing account and went through the entire checkout process. Information regarding security and payments should be readily available in a Condition of Use section. Even though the navigation was easy, they could add more things such as testimonials, special discounts, and weekly ads. In the Ulaanbaatar city, would be my choice. Their office products were listed in a very professional and easily readable way. Plus, the design is very comprehensive and the entire site has a welcoming feel to it. Not only the site navigation was easy, but the site also provides a lot of information for shoppers interested in buying from them. In reference to consistency, some links were dead, and in the About Us page, the organization chart caused the website to display disproportionally. Another issue with this site is the difficulty to checkout. To purchase from them, a shopper must be a previous customer or must send a request to be their customer to This feature might give a wrong impression to customers by not allowing them to instantly create an account and to checkout. Thus, based on this information, I gave them a total score of 61.
  33. 33. Page | 29 V. Site Content The website of Chinguun-Tulga Office Supply Store has two sides: front-end website for public viewers and a back-end website for the administrator(s). Please refer to Appendix A to view the site architecture. Front-End/ Public Viewers’ Site Content A. The front-end homepage will contain information about the products that are offered at Chinguun-Tulga in different categories, an option to select products by manufacturers, new products that were recently added, shopping cart contents of the customer, best selling products, and special items that are on sale. There are also links to such information as - shipping and returns, privacy notice, conditions of use, contact us, - as well as a search tool. B. The front-end site connects directly to the MySQL database to retrieve data from the database. The basic data exchanging scheme is described as follows: C. The navigation tabs are located on the top and left side of each page and have links to the following main sections: 1) My Account (Allows customers to see an overview of their account) 2) Cart (Cart displays items currently in the shopping cart) 3) Checkout (Checkout allows shopper to complete their online purchase) 4) Categories i. Binders ii. Staplers iii. Hole Punchers iv. Tapes 1. Tape holders 2. Tapes v. Paper Clips and Pins vi. Notepads vii. Document Organizers viii. Calculators ix. Document Shredders
  34. 34. Page | 30 x. Desk Accessories 1. Correction Tapes and Pens 2. Desktop Document Holder 3. Glue Sticks 4. Rulers 5. Pencil Basket 6. Waste Basket xi. Markers xii. Magnifying Glasses xiii. Erasers and Lead Refills 1. Erasers 2. Pencil Lead Refills 3. Pen Refills xiv. Pens and Pencils 1. Pens 2. Pencils 5) Manufacturers (It is a drop down menu of Manufacturers) 6) What‟s New (A box that randomly shows new products with each new click) 7) Quick Find (A search box that allows shoppers to search for products) 8) Information Box i. Shipping and Returns ii. Privacy Notice iii. Conditions of Use iv. Contact Us 9) Order History (If a customer is logged in, his/her order history will be shown) 10) Bestsellers (A box that shows a list of five best selling products) 11) Specials (A box that displays an item that is currently on sale) 12) Languages (Language box allows shoppers to select their preferred language: either English or Mongolian) Functional Requirements 1. The main goal of the website is to provide an up-to-date, complete list of the products carried by Chinguun-Tulga Office Supply Store in a professional manner. 2. When a user visits the site, they should be able to locate the information they seek in a timely fashion. 3. It is also important for the website‟s default language to be set in Mongolian. The English version of the website is created for the thesis committee members. 4. The website must be easily updatable and user-friendly to Mrs.Chuluunbaatar and the employees of Chinguun-Tulga.
  35. 35. Page | 31 Front-End Site Design Each page on Chinguun-Tulga‟s website has three basic components: header, body, and footer; and the pages are based on the following design: Header Menu1 | Menu 2 | Menu 3 | Search box Body Breadcrumb Column Left Categories Category 1 Category 2 Category 3 … Manufacturers What’s New Quick Find Information Shipping & Returns Privacy Notice Condition of Use Contact Us Personalized Greeting New Products Product A price Product B price Product C price Product D price Product E price Product F price Product G price Product H price … Column Right Shopping Cart n items Order History Bestsellers Specials Languages [Current Date] Number of Request Since [Date Created] Footer Payment Option Logos Copyright Date Store Name Site Creator’s Name 950 pixels
  36. 36. Page | 32 Designing the front-end website was quite demanding and required a lot of time on different combinations regarding the site design and color matching. The last version of the website has a white background and is positioned in the center; and its elements are included in a table with a border that equals zero. There is no specific value assigned to the height in the tables because when different quantities of products are displayed, it will stretch the website in the vertical aspect. Therefore, limiting the height will display the website improperly. On the other hand, the widths of tables are no greater than 950 pixels. 950 pixels was a great choice because most computers at present have screen resolutions of 1024 x 960, 1280 x 960, 1280 x 1024 and higher. As mentioned earlier, in each page, there are three main parts: header, body, and footer. The header section is positioned at the absolute top of each page. The table that houses the header codes has a border that equals zero, making the table look invisible to viewers. Also, it is divided into two sub-columns. Dividing the table into two columns was necessary because I wanted to position the logo of Chinguun-Tulga to the left and the navigation menu links along with the search feature to the right. The body lies right below the header and starts with breadcrumbs. Breadcrumb navigation provided at the top of the page indicates the route and location of the current page. Below the breadcrumbs, there is a table that has three sub-columns. The first column is named Column Right, the left column is Column Left, and the column in between contains the product information, new products for each current month, etc. In the Column Left the following items are included in a box style: Categories – a box containing all available categories: binders, staplers, etc. The number of products in each category is shown in brackets. For example: Binders (4), Staplers (5) – it means there are 4 items in binders, and 5 items in staplers category. Manufacturers – a drop down menu that allows a shopper to select products by manufacturers What’s New? – a box that displays a new single item along with the price on the bottom Quick Find – This box has a form field that allows a shopper to search items by keywords, for example: pen OR eraser. (OR operator is allowed). Beneath the form field, there is a link to the Advanced Search option. A shopper will be able to search products by specifying more fields such as categories (a dropdown menu), manufacturers (a dropdown menu), minimum price, maximum price, date from (mm/dd/yyyy), and date to (mm/dd/yyyy). Information – This box contains links to shipping and returns, privacy notice, conditions of use, and contacts us pages. If a shopper clicked on each link, the corresponding information will be displayed in the column between Column Left and Column Right. On the opposite side, in the Column Left section, the following information is available: Shopping Cart - a box that displays what and how many items currently in the cart. Visitor‟s cart items are transferred to a customer‟s cart once the visitor creates an account at Chinguun-Tulga‟s website.
  37. 37. Page | 33 Bestsellers – a box that displays a list of five best selling items. Specials – a box that displays products that currently have reduced prices. Product‟s image, old price, and the new price are shown in this box. Languages – this box simply shows a flag of England and Mongolia. If a shopper wants to view the website in English, the English flag should be clicked, and for Mongolian, the Mongolian flag should be clicked. The footer follows the body column. The footer starts with a table consisting of two sub- columns with a border that equals zero, making the table invisible to viewers. The sub-column in the left contains the current date in the following format: Wednesday, 10 October, 2007. On the right side sub-column, the number of hits is shown along with the date that site was created. It will display something like this: 4825 requests since Monday 03 September, 2007. Below these, there is another table that has two sub columns with a border that equals zero. Here, the left sub-column has an image of available payment options. The visual aspect is a great way to let customers know of what payments are available in order to purchase from Chinguun-Tulga‟s website. The right sub-column displays some texts such as the copyright date, copyright logo, the name of the store, and the creator of the site. Colors Used The most utilized five colors in the front-end website are: light green (#99cc00) used in the box header, lighter green (#99cc33) used in the logo, light blue (#ccccff) used as cell background, white (#ffffff) used as general background, black (#000000) used for text color. Macromedia DreamWeaver MX is the main software that was used to complete this project. DreamWeaver MX has a feature that displays all the colors used in the website. The figure on the left shows the various colors used within all the elements throughout the whole site such as - the text, table border, table background color, and images. Deciding what combination of colors to use for Chinguun- Tulga‟s website was another challenging task in this project. To come up with appealing colors, I researched on the Internet and found out about many useful color matching tools. One of the best freely available color matching tools was Adobe Kuler (available at: from Adobe. It allows webmasters to visualize what colors would go well with other; in fact, one can create a color-based theme from a combination of five independent colors that match the best. For the purpose of this project, I set the base colors as light blue (#ccccff) and light green (#99cc00). The other three colors are automatically selected and those were: white beige (#fff4e6), white (#ffffff), and oceanic blue (#6ae8c7). The figure on the next page displays the exact choice of colors that were input.
  38. 38. Page | 34 It should also be noted that the colors used for the main text, titles, table background, and cell background can be modified by making changes in the cascading style sheet in the catalog folder. To find out more about what each class in the style sheet is responsible for, please refer to the CSS section in the Site Maintenance Document.
  39. 39. Page | 35 Back-End/ Administrator’s Site Content A. The main goal of the back-end site is to allow store owner to update the front-end website without having troubles editing the source codes of the web pages. Rather, she will use the back-end site to easily alter any information that she feels necessary - at anytime from anywhere! B. The access to the back-end requires a username and password, and the administrator(s) should always keep this information in a secure place. C. The back-end homepage will contain important information regarding updating the front- end contents and other configurable contents such as: the administrator‟s configurations, products in the catalog, payment and shipping options, customers‟ list, reports, and tools to configure database backup/restoration, etc. D. The navigation tabs are located on the left side of each page and have links to the following main sections: 1) Administration (index page of back-end) 2) Online Catalog (a link to the store page) 3) Configuration i. Administrators ii. My Store iii. Minimum Values iv. Maximum Values v. Images vi. Customer Details vii. Shipping and Packaging viii. Product Listing ix. Stock x. Logging xi. Cache xii. E-mail Options xiii. Sessions 4) Catalog i. Categories/Products ii. Products Attributes iii. Manufacturers iv. Reviews v. Specials vi. Products Expected 5) Modules i. Payment ii. Shipping iii. Order Total 6) Customers i. Customers
  40. 40. Page | 36 ii. Orders 7) Locations Taxes i. Countries ii. Zones iii. Tax Zones iv. Tax Classes v. Tax Rates 8) Localization i. Currencies ii. Languages iii. Orders Status 9) Reports i. Products Viewed ii. Products Purchased iii. Customer Orders Total 10) Tools i. Database Backup ii. Banner Manager iii. Cache Control iv. Define Languages v. File Manager vi. Send E-mail vii. Newsletter Manager viii. Server Info ix. Who‟s Online Functional Requirements 1. The main goal of the back-end website is to provide a list of complete configuration management files to Mrs. Chuluunbaatar. 2. When Mrs. Chuluunbaatar logs in to the back-end site, she should be able to locate the links to the pages that alter front-end information. 3. The navigation in the back-end should be easy.
  41. 41. Page | 37 Back-End Site Design Each page on the back-end site has three basic components: header, body, and footer; and the pages are based on the following design: Header Body Link to Index | Link to Online Catalog Column Left Body Navigation Configuration Catalog Modules Customers Locations/Taxes Localization Reports Tools Content Footer Store Name Copyright Date Site Creator’s Name 100 %
  42. 42. Page | 38 The back-end website has a white background and is positioned in the center; and its elements are included in a table with a border that equals zero. There is no specific value assigned to the height in the tables because when new category or new products are added, it will stretch the website in the vertical aspect. Therefore, limiting the height will display the website improperly. On the other hand, the widths of tables are specified to have 100 percent. By doing so the back-end site displays the entire site in full-screen in the horizontal aspect. Similar to the front-end design, each page in the back-end contains three main parts: header, body, and footer. The header section is positioned at the absolute top of each page. The table that houses the header codes has a border that equals zero, making the table look invisible to viewers. A logo that reflects the Chinguun-Tulga‟s Administrator Area was created and resides to the very left side in this table. The body section lies right below the header and contains two sub-columns. The first column is named Column Left, and the adjacent column is called Body. The left sub-column contains the main navigation that includes links to: configuration, catalog, modules, customers, taxes, localization, reports, and tools. On the adjacent sub-column, the contents of configuration, catalog, modules, customers, taxes, localization, reports, and tools will be available. Also in this sub-column, there will be action buttons such as EDIT, DELETE, INSERT, MOVE, UPDATE, NEW PRODUCTS, and NEW CATEGORY. For example, if the administrator wants to add new product in the Desk Accessories category, she would go to the Catalog page, then to the Desk Accessories page, and click on the NEW PRODUCT button. (For more information about adding new products to the website, please refer to the Site Maintenance Document.) The footer section follows the body. Unlike the front-end site, the footer in the back-end consists of only three rows. The top row displays the name of the store, copyright date, and the link to the front-end website. The middle row serves as a separation line between the top row and the bottom row, and it is colored in green. The bottom row contains the name of the site creator and a link to his website. It should also be mentioned that if the administrator‟s page is left idle for more than ten minutes, then the session will end, making the administrator log-off automatically. Thus, the back-end site has a self protecting tool from potential danger, and the administrator must keep in mind that once the necessary changes are made - always remember to logoff!
  43. 43. Page | 39 Database Elements The database plays an important role in this project. As mentioned earlier, information entered in the database will be retrieved both to the back-end and the front-end of the website. Chinguun-Tulga‟s database is hosted at, and ten MySQL databases came along with the domain name and hosting plan package through The current database is stored behind a firewall to protect the website data, and the database is only accessible exclusively through the server. It means that direct access to this MySQL database using a home PC (external ODBC connection) cannot be established. The following are the important information regarding the database server: Database Name: db216012793 User Name: dbo216012793 Password: xxxxxxxxxxxx Host Name: Description: Chinguun-Tulga E-commerce Website Database Version: MySQL 4.0 Used Storage Space: 0.12 mb Max. Storage Space: 100 mb Status: Ready (Please refer to Appendix B to view the normalized database tables and ERD)
  44. 44. Page | 40 VI. Payment Methods Before a shopper buys an item, we always tell him/her to make sure that our payment method works for him/her. Also, at, we will not store any credit card data. Credit card transactions are processed at third party websites such as and There are four payment methods available to purchase from Chinguun-Tulga, and they are: - Cash on Delivery - Check/Money Order - - Payment Method How It Works Cash on Delivery Buyer has to make the payment in cash on delivery of the item at the address mentioned by him/her. Buyer may inspect the item prior to making payment. Check/Money Order Buyer makes the payment in check or money order form. There is a risk that the check may be bounced. In that case, bounced checks can be traced by their banks and the penalty fees will be applied to the customer. processes Visa, Master Card transactions in an encrypted secure socket layer protocol. Facts: -The cost of initial setup is $49 USD. No monthly fees. -Each transaction that goes through this option will have 5.5% discount rate -Fee per transaction: $0.45 Example: If the total amount of the sale was $100, we will receive $94.05 from the processes Visa, Master Card, Discover, AMEX cards and if the shopper already has an account, he/she can submit the payment by logging into personal account. Paypal uses secure AES 256-bit encryption, and its certificate is issued by VeriSign. Facts: -The cost of initial setup is zero. No monthly fees. -Each transaction that goes through this option will have 2.9% discount rate. -Fee per transaction: $0.30 Example: If the total amount of the sale was $100, we will receive $96.80 from
  45. 45. Page | 41 VII. Marketing Approaches A. Keywords Chinguun-Tulga‟s website contains a meta tag for keywords, and it is inserted between the <body> and </body> tags. Keywords that identify Chinguun-Tulga‟s website are: <meta name="Keywords" content="Chinguun-Tulga, Chinguun-Tulga Office Store, e-shop in Ulaanbaatar, e-commerce Store in Mongolia, Online Shopping in Mongolia, Online Store in Ulaanbaatar, Mongolian Office Supply Store, Office Store in Ulaanbaatar, Office Store in Mongolia, Office Supplies, Papers, Binders, Staplers, Hole Punchers, Tapes, Paper Clips, Pins, Sticky notes, Document Holders, Calculators, Document Shredders"> Keywords are very useful tool because on the web keywords are the references to the content of the website. Search engine crawlers read the keywords of the website first, and then give index to the website in search ranking. B. Tell-a-Friend Feature Chinguun-Tulga‟s website has a Tell-a-Friend feature that allows customers to send information about a specific product to their friends or someone they know. Tell-a-Friend feature appears on the right side of each product, and one simply has to enter a friend‟s e- mail address to send information. For example, Rick was visiting Chinguun-Tulga‟s website and found out that they offer “Steel 0.5 mm Pencil” that Bilguun was looking for. So, Rick uses the Tell-a-Friend feature to let Bilguun know about the pencil. Bilguun would receive an e-mail in the following format: From: Rick Date: Monday, October 22, 2007 To: Bilguun Subject: Your friend Rick has recommended this great product from Chinguun-Tulga Office Supply Store Hi Bilguun! Your friend, Rick, thought that you would be interested in Steel 0.5mm Pencil from Chinguun-Tulga Office Supply Store. I found the pencil that you were looking for. To view the product click on the link below or copy and paste the link into your web browser: Regards, Chinguun-Tulga Office Supply Store
  46. 46. Page | 42 C. Affiliate Program Chinguun-Tulga could use affiliate program to increase traffic to its website. Affiliate program is an e-commerce program under which owners of one website send users to another website to purchase related items. Banner exchange is a type of affiliate program and it does not cost anything. For instance, Chinguun-Tulga can put the links of other Mongolian e- commerce websites on its own home page. In return, the other websites will have to put Chinguun-Tulga‟s link on their homepages. According to, there are several Mongolian websites that attract large numbers of visitors. The top three are: On average, this website attracts over 3,800 visitors a day from all around the world. They claim to be the largest entertainment portal website of Mongolia. 1,800 visitors are attracted to this website on a daily basis. provides information mostly to people who are living and studying outside of Mongolia. On average, over 1,400 people visit this website daily. They seem to target younger audience who usually seek new information, movies, songs, classified ads, and news. It is highly recommendable that Chinguun-Tulga to initiate a banner exchange program with the sites that mentioned above. It will be a win-win situation for the both parties because the goals of all websites are to attract more visitors through an increased traffic. D. Measuring the Traffic There are two ways to measure the traffic to Chinguun-Tulga‟s website: Logs and Google Analytics. Logs basically shows the amount of data exchange in terms of kilobytes and megabytes, while Google Analytics displays the website traffic in more useful way such as traffic sources overview, visitors overview, map overlay etc. Logs The first method for traffic measuring is the Logs. To see data, the administrator must login to the following page: Address: Username: u46281644 Password: BEck1982 This method shows the analysis of monthly data transfer in separate protocols such as HTTP, FTP, and e-mail. A summary is shown in the first two columns, and the number of megabytes in each category indicates how many megabytes were actually consumed by the specified number of requests. For example, in September 2007, there were 44,079 total
  47. 47. Page | 43 requests and 255.5 megabytes of data exchange. Out of that, 37,488 requests and 222.3 megabytes of data exchanges were related to HTTP, and 6,591 requests and 33.1 megabytes of data exchanges were related FTP. The breakdown of monthly data transfer is shown below. Analysis for September 2007:
  48. 48. Page | 44 Google Analytics Google Analytics is the other method that is used for traffic analysis. A code that collects data is inserted in the catalog/index.php page. The following code is provided when you sign up with Google Analytics, and it is inserted just before the </body> tag. <script src="" type="text/javascript" </script> <script type="text/javascript"> _uacct = "UA-1423455-4"; urchinTracker();</script> Google Analytics displays the following statistics: - Site Usage (Number of visits, page views, bounce rate, average time on site) - Visitors Overview (Number of visitors, visitor segmentation, technical profile) - Map Overlay (Map of countries, states, cities where the visits come from) - Traffic Source (Direct or referring websites, top traffic sources list, keywords) - Content Overview (Most visited pages, navigation analysis, click patterns)
  49. 49. Page | 45 For this project, Google Analytics is mainly used to measure the number of page visits by segments. Google analytics also allows the store owner to see which key words were used exclusively to bring customers to the website.
  50. 50. Page | 46 VIII. Security In today‟s world, the Internet is being used by almost all businesses, and the number of sales done over the Internet is greater than before. The increase in online transactions has been accompanied by an equal rise in the number and types of attacks against the security of online payment systems. If the business owner utilizes the Internet as the main channel to reach customers and a way of doing business, there may be vulnerabilities such as SQL injections, cross-site scripting, information disclosure, path disclosure, price manipulation, and buffer overflows. Successful exploitation of these vulnerabilities can lead to a wide range of results. Information and path disclosure vulnerabilities will typically act as initial stages leading to further exploitation. SQL injection or price manipulation attacks could cripple the website, compromise confidentiality, and in worst cases, cause the e-commerce business to shut down completely. Types of Security Threats Recent numbers from the U.S. Department of Commerce show that online retail is continuing its rapid growth. However, malicious phishing schemes and fear of inadequate online security cause online retailers to lose out on business as potential customers draw back at doing business online, worrying that sensitive data will be abused or compromised. The truth is that there can be numerous threats to e-commerce sites and many of the threats result from poor design by the web masters; because the entire website was not developed with its database security in mind. The following are the common vulnerabilities discovered in shopping cart and e-commerce online payment systems: SQL injections, price manipulation, buffer overflows, cross-site scripting, remote command execution, and weak authentication and authorization. SQL Injection SQL injection refers to the insertion of SQL meta-characters in user input, such that the attacker's queries are executed by the back-end database. Typically, attackers will first determine whether a site is vulnerable to such an attack by sending in a single-quote (') character. The outcomes from an SQL injection attack on a vulnerable site may range from a detailed error message, which discloses the back-end technology being used, to allowing the attacker to access restricted areas of the site because he manipulated the query to an always-true Boolean value, or it may even allow the execution of operating system commands. Price Manipulation This is a vulnerability that is almost completely unique to online shopping carts and payment gateways. This is how it works: in the most common occurrence of this vulnerability, the total payable price of the purchased goods is stored in a hidden HTML field of a dynamically generated web page. An attacker can simply modify the amount that is payable, and this information flows from the user's browser to the web server. The final payable price can be manipulated by the attacker to a value of his choice. This information is eventually sent to the payment gateway with whom the online merchant has partnered. Some websites that utilize PayPal, a payment processing service for online vendors, can become a victim of this type of vulnerability. If the volume of transactions is very high, the
  51. 51. Page | 47 price manipulation may go completely unnoticed, or may be discovered too late. Repeated attacks of this nature could potentially cripple the viability of the online merchant. An example of this type of attack will be addressed later in detail for Chinguun-Tulga‟s website. Buffer Overflows Buffer overflow vulnerabilities are not very common in shopping cart or other web applications using Perl, PHP, and ASP. However, sending in a large number of bytes to web applications that are not geared to deal with them can have unexpected consequences. It is possible to disclose the path of the PHP functions by sending in a very large value in the input fields. For example, when 6,000 or more bytes were fed into a particular field, the back-end PHP script may show it was unable to process and may display the following error message: “Fatal Error: Maximum execution time of 30 seconds exceeded in /www/html/func/admin/functions.php on line 163” “Fatal Error: Maximum execution time of 30 seconds exceeded in /www/html/func/admin/add_cart.php on line 100” Using this error information, the attacker may be able to get access to the restricted admin folder. According to, multiple buffer overflows were discovered in the PDGSoft Shopping Cart, which potentially allowed the attacker to execute code of his choice by overwriting the saved return address. As we can see, the error pages can serve as a valuable source for critical information. These errors can be induced in web applications that do not follow strict input validation principles. For instance, the application may expect numeric values and would fail when alphabets or punctuation characters are supplied to it. Cross-Site Scripting The cross-site scripting (XSS) attack is primarily targeted against the end user and leverages two factors: 1. The lack of input and output validation being done by the web application. 2. The trust placed by the end-user in a URL that carries the vulnerable web site's name. The XSS attack requires a web form that takes in user input, processes it, and prints out the results on a web page, which also contains the user's original input. It is most commonly found in search features, where the search logic will print out the results along with a line such as 'Results for <user_supplied_input>'. In this case, if the user input is printed out without being parsed, then an attacker can embed JavaScript by supplying it as a part of the input. By crafting a URL, which contains JavaScript, a victim can be social engineered10 into clicking on it, and the script executes on the victim's system. A typical XSS attack URL would look like this: 10 Social engineering is a collection of techniques used to manipulate people into performing actions or divulging confidential information.
  52. 52. Page | 48;script>ale rt("OK")&lt;script>. In this case, when the victim clicks on this link, a message box with the text "OK" will open up on his system. In most cases, the attacker would craft the URL in order to try and steal the user's cookie, which would probably contain the session ID and other sensitive information. The JavaScript could also be coded to redirect the user to the attacker's website where malicious code could be launched using ActiveX controls or by utilizing browser vulnerabilities, such as those in Internet Explorer or Mozilla Firefox. Remote Command Execution The most devastating web application vulnerabilities can occur when the CGI script allows an attacker to execute operating system commands due to inadequate input validation. This is most common with the use of the “system call” in PHP scripts. Using a command separator and other shell meta-characters, it is possible for an attacker to execute commands with the privileges of the web server. Weak Authentication and Authorization Authentication mechanisms that do not prohibit multiple failed logins can be attacked using tools such as Brutus11 . Similarly, if the web site uses HTTP Basic Authentication or does not pass session IDs over SSL, an attacker can sniff the traffic to discover the user's authentication and authorization credentials. Since HTTP is a stateless protocol, web applications commonly maintain state using session IDs or transaction IDs stored in a cookie on the user's system. Thus, this session ID becomes the only way that the web application can determine the online identity of the user. If the session ID is stolen (say through XSS), or it can be predicted, then the attacker can take over a valid user's online identity in relation to the vulnerable web site. Where the algorithm used to generate the session ID is weak, it is insignificant to write a PHP script to enumerate through the possible session ID space and break the application's authentication and authorization schemes. 11 Brutus can be downloaded from
  53. 53. Page | 49 Securing At Chinguun-Tulga‟s website, the following is protected: the back-end website, all data that is pertinent to customers‟ orders, database, connections to database, and usernames and passwords used to enter „Administrator Only‟ areas. The logical structure of Chinguun-Tulga‟s website is shown in the following diagram:  – the root of the website sits on a secure web server that is hosted by  /catalog/ - all PHP files of the front-end site is located in the catalog directory  /catalog/admin/ - all configuration files of the back-end reside in the admin directory; it authenticates the user using session-based access.  /logs/ - logs directory contains the traffic.html file that displays the volume of the traffic created between clients and server; it authenticates the user using .htaccess.  The database server is not in the same machine as the web server, and it is hosted on a separate server at Administrator’s Area (Back-end) The back-end site,, is the heart of the project and it includes vital configuration files. The back-end is used by the store owner to add new products, remove old products, put products on sale, keep track of orders, and to create reports such as packing slips and customer order invoices. If the back-end of the web site is compromised by an attacker, he could not only steal data, but delete products and other important files and directories. Authenticating the user and using sessions A very common method of authenticating users is checking a database and using session. To use this authentication, we must have a database and tables for administrators, passwords, and sessions. Session is a unique number assigned to a client (visitor). This unique number is also used as a filename in the session table in the database. Because the client has the number on his
  54. 54. Page | 50 cookie the server can keep track of what he/she is doing by writing data to the session file. Sometimes, when starting the session the following error might show up: Warning: session_start(): Cannot send session cache limiter – headers already sent (output started at ..admin login.php:1) in ..admin login.php on line 3 PHP will display this error message if the script executing session_start() already sent something. If there is even a single space before the <?php, this error will appear. The error shows the line number so it is not too difficult to locate the problem. As the administrator logs in to the back-end, the PHP script checks the username and password against a hard coded pair. Using a SELECT statement, the database is queried to test if these two exist in the database. If a match is found, the session variable is set and the administrator moves to the main page. If someone is logged in, it means that eventually they will need to be logged off, therefore login script is not complete without the logout script. The process of logging out a user depends on the status of the user, whether they are logged in or out. The server checks the status and can log out the user if the user is still logged in, if logged out, then the server doesn‟t have to. In this case, we check whether $_SESSION[„db_is_logged_in‟] is being set or not and whether its value is true. Using this information, the logout script is built either to simply unset this session or set the session value to false. The script below uses “unset” method to log the user out. <?php> session_start (); if (isset ($_SESSION [‟db_is_logged_in‟])) { unset($_SESSION [„db_is_logged_in‟]); } header („location: login.php‟); ?> For security purposes, if the administrator is logged in and the session continues to stay idle for at least 15 minutes, the server logs off the administrator automatically. Also, the administrators have passwords that are at least eight characters long, and for an attacker to break the password, it will take at least 528 trials. These passwords are stored in the administrator‟s table in an encrypted form such as e59b526f0fb87305678856d2186ce4b7:49. Using .htaccess To prevent unauthorized access, the logs directory uses .htaccess method. .htaccess file provides a way to make configuration changes on a per-directory basis. A file, containing one or more configuration directives, is placed in a particular directory to apply those directives to the directory. If a directive is permitted in the .htaccess file, the value must be in AllowOverride in order for that directive to be permitted. Here, I am going to discuss the .htaccess file and the power it has to improve a website. The most popular uses of .htaccess file are custom 404 error pages and the basic password protection. .htaccess is easy to implement and consists of a few simple instructions in text file. It can accomplish a huge range of things including: password protecting folders, redirecting users
  55. 55. Page | 51 automatically, custom error pages, changing file extensions, restricting IP addresses, only allowing users with certain IP addresses, stopping directory listings and using a different file as the index file. One of the most important uses of .htaccess is adding password protection to a directory. If a directory is password protected by an .htaccess file, then everything below this directory will be password protected as well. The following is an example of an .htaccess file that will implement password protection: AuthName “Section Name” AuthType Basic AuthUserFile /full/path/to/.htpasswd Require valid-user “Section Name” is the area that is being protected using .htaccess. The “Section Name” should be replaced with an appropriate name. The “full/path/to/.htpasswd” should be changed to reflect the full server path to the .htpasswd file. Creating the password protection is a little bit more difficult than using the components of .htaccess. To setup .htaccess to password protect a directory, we need to create another file that contains the usernames and encrypted passwords. These should be placed in a file named .htpasswd. The file can be placed anywhere within your website but it is advisable to store it outside the web root, so that it is impossible to be accessed from the Internet. .htpasswd can be created using standard text editor, and the username and password should be entered in the following format: username: password To provide access to multiple users, additional lines of entry should be made for each user. When someone tries to access the site, the browser will pop up a standard username/dialog box. In addition, a web application such as DynamicDrive ( provides a tool that easily creates both .htapsswd and .htaccess files. Customers’ Data (Front-end) At, customers are required to create an account in order to complete their purchase. The following data are collected from customers: - Personal Information: Gender, First Name, Last Name, Date of Birth, E-mail address - Company Information: Company Name - Address: Street Address, Suburb, Post Code, City, State, Country - Contact Information: Telephone number, Fax number Customers also provide shipping and billing addresses upon checking out, and this information is used to create an invoice and packing slip for the order. To let customers know about the privacy policy, Chinguun-Tulga created a Privacy Notice page and it addresses the following issues: security and safety, personal information usage, how cookies are used, electronic communication, and protection of information. The goal is to inform the customers.
  56. 56. Page | 52 Security and Safety Chinguun-Tulga notifies its customers that it does not keep the customer‟s credit card data on its web server. Rather, customer‟s credit card data is kept secure with the credit card processing agents, such as PayPal and 2CheckOut.Com. Having this statement relieves a lot of pressure for customers, and they feel secure and comfortable shopping at Chinguun-Tulga‟s website. Personal Information Chinguun-Tulga also states that it gathers customer‟s personal information, such as address and phone numbers, only to process and deliver orders. To provide an enhanced and more personalized shopping experience, Chinguun-Tulga may call the customers to verify their orders and provide post-purchase-services, such as future discounts and special pricing on selected items. Cookies Cookies are parcels of text sent by a server to a web browser and then sent back unchanged by the browser each time it accesses that server. HTTP cookies are used for authenticating, tracking, and maintaining specific information about users, such as site preferences and the contents of their electronic shopping carts. Chinguun-Tulga uses cookies for two reasons. First, it checks to see whether the visitor is a registered customer. If he/she is not a registered customer, then Chinguun-Tulga asks to create an account. Second, Chinguun-Tulga uses cookies to identify the customer. There is no other way to know who is who if there was no readable cookie on the client‟s browser. Registered users will be greeted by their first name, just like how greets users by their names. Most web browsers allow you to instruct the browser to prevent the use of cookies. However, if you disable this feature, some features of Chinguun-Tulga web site may not function properly. Protection of Information As stated before, Chinguun-Tulga uses personal information to establish an e- communication, to provide a secure and prompt service, to process orders, and to inform about new product offers and discounts. Customers‟ information is the most important asset of Chinguun-Tulga‟s business, and it does not share or sell customers‟ information to third parties under any circumstances. However, Chinguun-Tulga reserves the right to disclose information provided by customers as required by law, in response to legal process and law enforcement requests and as necessary or appropriate.