Shop Documentation Release 0.0.1
Total Page:16
File Type:pdf, Size:1020Kb
Shop Documentation Release 0.0.1 Fabian Affolter 04.07.2014 Inhaltsverzeichnis 1 Basics 3 1.1 Products.................................................3 1.2 Personas.................................................4 1.3 Use cases.................................................4 1.4 Design principles.............................................5 2 Web shop Design 7 2.1 General..................................................7 2.2 Layout..................................................7 2.3 Sitemap..................................................8 2.4 Main page................................................9 3 Style and design 11 3.1 Cascading Style Sheets.......................................... 11 3.2 Pages................................................... 11 4 Dynamics 13 4.1 Setup................................................... 13 4.2 Current year............................................... 13 4.3 Navigation Menu............................................. 13 4.4 List of Products.............................................. 14 4.5 Company details............................................. 15 5 External files 17 5.1 Navigation Menu............................................. 17 5.2 Header.................................................. 17 5.3 Footer................................................... 18 6 Input processing 19 6.1 “Buy Now” links............................................. 19 6.2 Select options............................................... 20 7 Javascript 21 7.1 Simple use case.............................................. 21 8 Cookies and Sessions 23 8.1 Cookies.................................................. 23 8.2 Hit counter................................................ 23 8.3 Language selection............................................ 24 i 8.4 User Accounts.............................................. 24 9 Database 25 9.1 Tables................................................... 25 9.2 PHP.................................................... 25 10 Web service 27 10.1 Map.................................................... 27 10.2 Weather.................................................. 27 11 Data export 29 11.1 PDF.................................................... 29 11.2 JSON................................................... 29 12 Messaging 31 12.1 MQTT.................................................. 31 12.2 Email................................................... 32 13 Localisation (L10n) 33 14 Templates 35 14.1 Template................................................. 35 14.2 Content.................................................. 35 15 Development 37 15.1 Web server................................................ 37 15.2 Database server.............................................. 37 15.3 Versions................................................. 37 15.4 Setup infrastructure........................................... 38 15.5 Git respository.............................................. 38 15.6 Documentation.............................................. 39 16 Indices and tables 41 ii Shop Documentation, Release 0.0.1 This is the documentation of the genesi of a web shop. It describes the taken steps and the features. The code is not production-ready but shows at various locations different way to do things. Contents: Inhaltsverzeichnis 1 Shop Documentation, Release 0.0.1 2 Inhaltsverzeichnis KAPITEL 1 Basics 1.1 Products The Web shop will be for selling pencils in various types. Categories: • Standard pencils • Mechnical pencils • Special pencils Variants or options: • Color (red, yellow, black, white, etc.) • Hardness (standard: HB; hard: F, H, 2H; soft: B, 2B) • Additional function (Eraser at the end, Protection cap, handle) 1.1.1 Product overview (The product names are in German because the main language of the shop will not be English) 3 Shop Documentation, Release 0.0.1 Type Variant Color Hardness Price CHF Bleistift keine rot HB 1 Bleistift keine rot B 1 Bleistift keine rot 2B 1 Bleistift keine gelb F 1.20 Bleistift keine gelb H 1.20 Bleistift keine gelb 2H 1.20 Bleistift Gummi rot HB 1.10 Schreiner-Bleistift keine rot HB 1.80 Schreiner-Bleistift keine rot B 1.80 Bleistift keine rot HB 0.5 Bleistift Gummi rot HB 0.6 Künstler-Bleistift Griff gelb 2B 2 Künstler-Bleistift Griff rot 2B 2 Künstler-Bleistift Griff schwarz 2B 2 Minien-Bleistift keine weiss 4 Minien-Bleistift keine blau 4 Minien-Bleistift keine gelb 4 Minien-Bleistift keine rot 4 Minien-Bleistift keine silber 9 Minien-Bleistift keine schwarz 9 1.2 Personas The following personas are defined to interact with the web shop. 1.2.1 Major customer Eva is responsible for the ordering of office supplies in her joinery. She is ordering twice a month a large amount of various product for different users (management, back office, and production). Eva has a fix budget for the orders and she knows her way around web shops. 1.2.2 End user Hugo is an architect and middle aged. He is drawing sketches and technical drawings but also artistically demanding pieces by hand. Thanks to the work with CAD he decovers the web and its advantages. Before he bought all his tools in a local stationery, nowadays he is ordering stuff online. 1.3 Use cases The shop will be stripped-down to two use cases. With those use cases are all major use cases with only little modifi- cations covered. The use cases for the shop adimistration will be considered out of scope. 1.3.1 Major customer • Ordering of a large amount of one single products or several products • Volume discount 4 Kapitel 1. Basics Shop Documentation, Release 0.0.1 • Splitting of oders (ev. delivery to different locations) 1.3.2 End user • Ordering of single products • Small quantities 1.4 Design principles The below listed points are the fundation for the implementation of the design and the layout to the shop. • Products should be in the spot light • Reduced to the essentials (typography, colors, fonts, etc.) • meaningful use of whitespaces Instead of reinventing the wheel it should be considered to use a matured front-end framework like bootstrap for the layout, especially regarding responsive design. 1.4. Design principles 5 Shop Documentation, Release 0.0.1 6 Kapitel 1. Basics KAPITEL 2 Web shop Design 2.1 General The used company and all data are notional. There is no exisiting connection to any existing company with the same or similar name. 2.1.1 Company name The company name is: Pencil AG 2.1.2 Address The complete address of the company is Pencil AG Musterstrasse 1 3000 Bern Schweiz 2.1.3 Logo The logo used in this project is borrowed from the Tango project icon set. The file is out of the categories section, the file name of the origin file is applications-office.svg and is licensed under Public Domain. 2.2 Layout The layout is splitted in different sections. The content of the elements, especially of the main section (content), will be definied by the later usage of the page. 7 Shop Documentation, Release 0.0.1 2.3 Sitemap The sitemap shows the clustering of the shop at the beginning of the project. This doesn’t mean that everything will be done. Static pages are easy to make and to maintain. 8 Kapitel 2. Web shop Design Shop Documentation, Release 0.0.1 2.4 Main page The first draft of the main page is based on the prototype shown in section Layout, without any format- und style informationen. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Webshop Pencil AG für Bleistifte"> <meta name="author" content="Fabian Affolter"> <title>Webshop Pencil AG | Home</title> </head> <body> <!-- Header container--> <div> <div> <!-- Logo and company name --> <img src="logo/logo.png"> <h2>Webshop Pencil AG</h2> <!-- Navigation --> <ul> <li><a href="#">Home</a></li> <li><a href="#">Produkte</a></li> <li><a href="#">Über uns</a></li> </ul> <!-- Breadcrumb --> <ol> <li><a href="#">Ebene 1</a></li> <li><a href="#">Ebene 2</a></li> <li><a href="#">Ebene 3</a></li> </ol> </div> </div> <!-- Header container--> <!-- Action container --> <div> <h1>Wochen-Aktion</h1> <p>Dies ist eine super Aktion. 10 Bleistifte für CHF 8.</p> </div> <!-- Action container --> <!-- Selected products --> <div> <p>Hier hat es zufällige Produkte...</p> </div> <!-- Selected products --> <!-- Footer --> <div> <p>© Pencil AG 2013</p> <!-- Footer --> </div> </body> </html> 2.4. Main page 9 Shop Documentation, Release 0.0.1 Loaded in a browser the initial draft of the main page looks like in the following screenshot. 10 Kapitel 2. Web shop Design KAPITEL 3 Style and design 3.1 Cascading Style Sheets The design of the shop will be nothing fancy. The approach which was choosen will reflect the points mentioned in the Design principles section and makes heavy use of the bootstrap framework cascading style sheet. Various changes to this CSS file ensure that it matche the needs of this project. 3.2 Pages The product page show the elements mentioned in the Product overview section. 11 Shop Documentation, Release 0.0.1 12 Kapitel 3. Style and design KAPITEL 4 Dynamics The webshop will be a PHP application at the end. Those first steps are only covering the very basic stuff of PHP as an introduction. 4.1 Setup The setup.yml playbook puts a simple PHP file in the root directory of the web server with the name phpinfo.php. This file displays PHP details. Achtung: Remove this file before makeing the shop accessible by a public audience. 4.2 Current year The first PHP element in the webshop is showing the current year