Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Case Study: B2B eCommerce with PHP


Published on

This session will describe a project to create an online wholesale ordering system for a beverage manufacturing and distribution company with a BPCS/LX backend. The requirement was to create a browser-based order entry system for wholesale customers that do not have EDI capability. The system needed to have a simple, modern, intuitive interface, usable on desktop and tablet browsers. The order submission procees needed to feed into an LX database on the backend. The system was written using PHP.

This will be a high-level, project management focused presentation, highlighting the technologies and methodologies employed, and challenges faced and how they were resolved. Some of the topics to be covered include: requirements gathering, wireframing, HTML design, use of offshore resources, controlling database access with stored procedures, integration with ERP system, PDF form generation, e-mail acknowledgements, SSL setup, and security.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Case Study: B2B eCommerce with PHP

  1. 1. Case Study: B2B eCommerce with PHP John Valance Division 1 Systems © 2018 Division 1 Systems <div1>
  2. 2. 2 • 30+ years IBM midrange experience (S/38 thru IBM i) • 17+ years of web development experience • Independent consultant since early 2000 • Community Involvement  COMMON Board of Directors  Presenter at IBM i groups nationwide • Founder and CTO of Division 1 Systems  Web / Mobile applications for IBMi  Full SDLC - design, project management, coding, training, consulting  Extended team - Can scale up/down to meet client needs • Relationship with Zend / RogueWave  Teacher, Reseller, Zend Certified Engineer About John Valance
  3. 3. 3 •Introduction / Overview •Project Goals/Requirements •Demo of System  Live / Screen Shots •Project Management  Team  Methodology •Tooling •ERP System Integration What We Will Cover
  4. 4. About the Project
  5. 5. 5 •Largest independent soft-drink bottler in US •Headquarters: Worcester, MA •Fourth-generation, family-owned business •Roots back to 1882. •Manufacturer and distributor of Polar brand and numerous other soft drink brands •Uses LX (formerly known as BPCS) on IBM i for MRP • Company – Polar Beverages
  6. 6. 6 •E-Commerce application •Allows non-EDI distributors, wholesale, and co-pack customers to place orders manually on the web, via browser UI. •Upon submit, orders are fed automatically into LX order files. PolarLink
  7. 7. PolarLink Project Requirements / Goals
  8. 8. 8 • Replace old Java-based WebLink system  Antiquated User interface  Limited functionality  Security issues – e.g. Apache Basic Authentication; IBMi users/pswds • Built over BPCS database  New system must work with LX files/tables • Not real-time  Captured order information, but did not submit an order • CS rep had to pull orders into BPCS  Item information refreshed nightly  No pricing information available to customers  All validations performed at point of order submit Replace Previous System - “WebLink”
  9. 9. 9 WebLink sample pages
  10. 10. 10 • Interface with new LX system database • Improve code base for maintainability  Replace Java with PHP • Modernize User Interface – provide rich UI capabilities • Provide real time item information, especially Pricing and Authorization • More Automation of work flow – less CSR actions  Automatic order entry into LX on submit  Emails to CSR only if special instructions  Customer self-service features • Provide user access to PolarLink Order History • Provide all business capabilities of WebLink, with numerous other new features PolarLink Goals
  11. 11. 11 • Date-driven Announcements (from Polar CSR to Customers) • Save incomplete (Pending) orders for later edit/submission • 3 user types, with different access levels  Normal user (external customer)  Admin user (external customer)  CSR user (internal Polar) • System settings and defaults  Multiple levels • User Preferences – Email addresses – Default ship-to / delivery • Customer Preferences – Default ship to & ship method – Email notifications Other New Features • 3 levels of Customer –  Cust Group, Customer Acct, Ship-To  Users belong to Customer Group.  Multiple users for Cust Grp • Order Attachments  upload POs, other files related to the order • Order Confirmation Page • Print Order feature (PDF) • CSR can work on customer orders on behalf of customer • CSR maintenance of PolarLink customers, users and announcements • Stand-alone Item Inquiry  without entering an order
  12. 12. Demo of Ordering Workflow
  13. 13. 13 • Select Ship-To and Delivery Method  LX Order # is assigned • Enter Order Header information  PO#, Requested delivery date/time, Order notes/instructions • Search for Items to order  Search by Brand, Size, Brand & Size, Description or Item#  User enters Quantity for desired items in search results • Select Substitute Items  Because item availability is not provided by the system  Only distributor and co-pack customers (not wholesale) • Review order and Submit • Receive Email Confirmation • Can view history for orders submitted via PolarLink PolarLink Order Entry Process CSR (Cust Svc Rep) Can enter orders for any customer CSR 1st Step = Select Customer
  14. 14. Order Print PDF Sample
  15. 15. Emailed Order Confirmation Sample
  16. 16. Project Management, Methodology, and Tooling
  17. 17. 29 • Customer Service (Project Owner): 3 main users, involved in full SDLC:  Define business requirements.  Review/Approve mockups and HTML designs.  Integration Test all code releases.  Populate databases. Coordinate with external customers  Responsible for approval to promote into production • IT Director  Defined important business requirements  Coordinated with users – define IT requirements  Provided database field names  Identified RPG programs that could be refactored to deliver complex business algorithms  Coordinated with IT staff as needed Business Team - Internal (Polar Beverages):
  18. 18. 30 • Project Manager – John Valance  Requirements Gathering – meetings with client’s users and IT director  Time/Cost Estimation, with assistance of developers.  Translate business requirements into annotated Wireframes/Mockups.  Designed/built Database tables needed to support functional design.  Created SQL stored procedures to provide database APIs for the programming team. • No direct database access from application code. All done via SP calls.  Developed detailed Programming Specifications for programming team.  Assist programmers with IBM i considerations  Testing/QA of all application code.  Status reports to client, etc. Development Team - Division 1 Systems
  19. 19. 31 • Partner Subcontractors (Octal Info Systems, Arte Digital MX)  Design Team: • Translate mockups into PhotoShop designs (.jpeg) • Upon approval, Build HTML and CSS to emulate the design. – Hand-off to developers  Developer Team: • Using mockups, programming specifications, and HTML files, build out the application pages with PHP and JavaScript. • Unit testing • Product Integration – Hand to project manager for Q/A – Make any changes identified by PM – When approved, promote to user testing Development Team – Web Developers (Div1Sys):
  20. 20. Web Application Development
  21. 21. 33 • Client Side (browser)  HTML – Document Structure  CSS – Visual Styling / Layout of Content  JavaScript – Event handling, Workflow control • Server Side  Web Server – Apache config  PHP code base / Application logic  Database - SQL  3rd party / Legacy applications • (RPG, ISV products) Components of a Web Application  UI Designer  UI Designer  Web Programmer  Web Programmer  Web Programmer  Database Programmer  Database Programmer
  22. 22. 34 • Design = Product LOOK and FEEL • UI = User Interface  UI Designer concerned with how the product LOOKS  Interface = What you see (appearance)  LOOKS COUNT! But they’re not everything… Behavior is even more important than good looks . • UX – User Experience  UX Designer is concerned with how the product FEELS  How intuitive is the product.  How did you feel about completing the task?  Experience is everything, and it includes the UI UX Design Done First . Design: UI vs UX
  23. 23. 35 • Concerned with how the product FEELS • Designs the product workflow  Logical and easy to follow progression from one step to the next  Product must be intuitive for the user • Clear cues on options • Many possible solutions to achieve a workflow design • Deliverables: Wireframes of screens, storyboards, sitemap, flowcharts & diagrams, product prototypes, UX standards guide • Tools of the trade:  Wireframing: Balsamiq Mockups, UXPin  Flowcharts/Diagrams: Visio  Interface design: Sketch, InVision UX Designers
  24. 24. 36 • Concerned with how the product LOOKS • Designs Styling and Layout of the page  Visual elements • Colors, Fonts, Borders, Sizes, Backgrounds, Images • Positioning of elements on page • Point in time appearance • Create a Style Guide  Ensure consistency of appearance across site  Develop a visual language for communicating with the user Sometimes roles are blurred • UI and UX design often handled by same person UI Designer
  25. 25. Methodology
  26. 26. 38 1. Requirements Gathering with Client (users, managers, IT) • Meetings, and more meetings 2. User Experience Design  Create page mockups, representing workflow  Identify application standards  Review UX design with users; Obtain user approval on mockups 3. User Interface Design  Hand off mockups to UI Designer  UI Designer designs visual appearance of pages in Photoshop  Obtain approval of UI designs  Develop HTML for each page  Hand off HTML to programmer Methodology – Development Process Overview
  27. 27. 39 4. Design / Build Database 5. Create Stored Procedures for DB access  Simplifies DB Access, especially for legacy DB tables  Test them in SQL Client 6. Create Programming Specifications  Annotated Screenshots, Input validations, DB access details, etc. 7. Developer (PHP, JavaScript) Codes the Application  Unit testing 8. Promote to user testing environment  QA by Project Manager  Developer fix any bugs, Commit to GitHub 9. User Acceptance 10.Promote to Production Methodology (continued)
  28. 28. 40 •Separate Apache Instances for Each Environment  Production Environment  User Testing  Development (may be multiple dev environments) •Each Apache instance points to separate application folders  Document root specified in httpd.conf (in /www/zendsvr6/conf) Environments / Server Instances
  29. 29. Tooling
  30. 30. 42 • Balsamiq Mockups  Wireframing tool  Allows web application functionality and user experience elements to be identified and laid out in a rough, sketch-like form  UI Design elements should NOT be identified at this point (no colors, fonts, images, -- NO aesthetic UI elements)  Encourages focus on functionality and usability  Uses drag-n-drop of common design elements (forms, containers, UX controls) UX Wireframing Tool - Balsamiq Quick demo of Balsamiq
  31. 31. 44 Balsamiq Pricing (as of Mar 2018)
  32. 32. 45 •Translate Mockups to Fully Styled Screen Designs UI Design Tool - Photoshop PhotoShop
  33. 33. 46 Snagit - by TechSmith •Screen Capture and Annotation  Programming Specs Tool – Snagit!
  34. 34. 47 Snagit - by TechSmith • Snagit Pricing (as of Mar 2018)
  35. 35. 48 •Cloud-based hosting of Git, for source code version control. •Private repositories requires paid account - $7/month GitHub (
  36. 36. 49 • Zend Studio (me)  Eclipse-based; Zend product  Kind of old-school  Free 1 year subscription to IBM i customers • PHP Storm (developers)   JetBrains product  More popular IDE currently  Complex pricing model, with bundled product options IDEs – Zend Studio and PHP Storm
  37. 37. 50 •For tracking & collaborating on tasks  Specs, images, documents  Track status, assign resources •Tried several tools  Word documents on cloud (Google Drive, MS One Drive)  Pivotal Tracker  Asana •Finally settled on GitHub (Issues feature)  Simple  Easy Integration with GitHub repository Project Management / Task Tracking
  38. 38. 51 GitHub Issues
  39. 39. 52 • Twitter Bootstrap  CSS framework – simplify, standardize UI  Built-in responsiveness for mobile devices • Font awesome  SVG icons (scalable vector graphics)  Looks sharp at any magnification (any screen size) UI Standards
  40. 40. 53 •jQuery -  JavaScript library / framework  Makes programming the browser very simple • HTML document traversal, Event handling, Animation, Ajax  •jQueryUI –  Built on top of jQuery  Provides powerful UI interactions, effects, widgets, and themes.  UI / UX Tool – jQuery & jQueryUI
  41. 41. 54 • Input forms: Prompt for unsaved changes • Modal pop-ups • Result sets in scrolling table • Order progress bar: allows backward-only navigation  Ordering steps must be completed in sequence before next one can be accessed • Responsiveness  Landscape tablet is smallest device • Mouse Click or Finger Tap  no right-click, no double-click • Search and Select  2 steps: Click and highlight selection, then Click Select Button  Filter box at top (one input searches multiple fields) UX Standards
  42. 42. 55 HTML: <p>Date: <input type="text" id="datefield"></p> JavaScript: $( "#datefield" ).datepicker(); jQuery UI example – Date Picker Click in the input field
  43. 43. 56 •Java OpenDocument Reports • PDF form generation “on the fly” • Allows reports & documents to be designed in word processor • Database content is merged into the template • Uses an XML-based web service to communicate between database server and JODReports server. JOD Reports
  44. 44. 57 JOD Reports – sample
  45. 45. 58 Name Usage Zend Framework v2.5 Base framework for all PHP code Jquery v1.11.1 Date pop-ups; Ajax calls; DOM Manipulation JavaScript Cookie v2.1.4 API for handling cookies on browser Jquery number Format numbers for display use. bootbox.js v4.4.0 Create programmatic dialog boxes using Bootstrap modals jQuery UI - v1.11.4 UI interactions, effects and widgets Font Awesome v4.3.0 Vector icons Bootstrap v3.3.5 Base CSS Framework 3rd Party / FOSS components
  46. 46. ERP System Integration
  47. 47. 60 • PolarLink system work files  Library = PLINKPRD  PolarLink-only files • PolarLink Customers, Users, Announcements  Copy of LX Order tables • Order header, line items, comments, etc. • Extended with custom fields for PolarLink Database Design PolarLink library LX ERP library Submit Order • LX = live ERP and MRP system  Library = LXPRDF  Master files • customer, items, etc.  Live order files • Order header, line items, comments, etc. Submit Order - Copies order info from PolarLink library into LX library for fulfillment
  48. 48. 61 •Simplify Access to DB for PHP coders •No direct access to DB from PHP code  No SQL strings or objects embedded in PHP code •Stand-alone SQL code base  Syntax highlited editing  Test outside application  Reusable Use of SQL Stored Procedures
  49. 49. 62 • RPG calls, from:  Stored Procedures • From SQL proc = very simple – just: CALL OR9999(parm1, parm2) • Or wrap RPG or CL as an external stored procedure and call from PHP  Zend Toolkit for IBM i • Examples:  Real-time Pricing in Item Search/Entry • Performance issue on pricing, solved by dummy Ajax call  Request date lead-time calculations  Retrieve next order number  Add Pallets to order  Order submit – credit check Integration with LX (ERP/MRP system)
  50. 50. 63 •Database Authentication  MD5 encrypted passwords •SQL injection – Stored procedures •SSL setup •Password rules Security
  51. 51. Thanks for Attending!
  52. 52. 65 Contact Information John Valance 802-355-4024 Division 1 Systems