SlideShare a Scribd company logo
Case Study:
B2B eCommerce with PHP
John Valance
Division 1 Systems
johnv@div1sys.com
© 2018 Division 1 Systems
<div1>
www.div1sys.com
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
•Introduction / Overview
•Project Goals/Requirements
•Demo of System
 Live / Screen Shots
•Project Management
 Team
 Methodology
•Tooling
•ERP System Integration
What We Will Cover
About the Project
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
•http://www.polarbev.com/
Company – Polar Beverages
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
PolarLink Project
Requirements / Goals
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
WebLink sample pages
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
• 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
Demo of Ordering Workflow
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
Case Study: B2B eCommerce with PHP
Case Study: B2B eCommerce with PHP
Case Study: B2B eCommerce with PHP
Case Study: B2B eCommerce with PHP
Case Study: B2B eCommerce with PHP
Case Study: B2B eCommerce with PHP
Case Study: B2B eCommerce with PHP
Case Study: B2B eCommerce with PHP
Case Study: B2B eCommerce with PHP
Case Study: B2B eCommerce with PHP
Case Study: B2B eCommerce with PHP
Case Study: B2B eCommerce with PHP
Order Print
PDF Sample
Emailed Order
Confirmation Sample
Project Management,
Methodology, and Tooling
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):
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
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):
Web Application Development
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
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
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
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
Methodology
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
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)
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
http://172.25.0.1:10086
Tooling
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
https://balsamiq.com/
Quick demo of Balsamiq
Case Study: B2B eCommerce with PHP
44
Balsamiq Pricing (as of Mar 2018)
45
•Translate Mockups to Fully Styled Screen Designs
UI Design Tool - Photoshop
PhotoShop
46
Snagit - by TechSmith
•Screen Capture and Annotation
 https://www.techsmith.com/screen-capture.html
Programming Specs Tool – Snagit!
47
Snagit - by TechSmith
•https://www.techsmith.com/screen-capture.html
Snagit Pricing (as of Mar 2018)
48
•Cloud-based hosting of Git, for source code version control.
•Private repositories requires paid account - $7/month
GitHub (github.com)
49
• Zend Studio (me)
 Eclipse-based; Zend product
 Kind of old-school
 Free 1 year subscription to IBM i
customers
• PHP Storm (developers)
 https://www.jetbrains.com/phpstorm
 JetBrains product
 More popular IDE currently
 Complex pricing model, with
bundled product options
IDEs – Zend Studio and PHP Storm
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
51
GitHub Issues
52
• Twitter Bootstrap https://getbootstrap.com/
 CSS framework – simplify, standardize UI
 Built-in responsiveness for mobile devices
• Font awesome https://fontawesome.com/
 SVG icons (scalable vector graphics)
 Looks sharp at any magnification (any screen size)
UI Standards
53
•jQuery - https://jquery.com/
 JavaScript library / framework
 Makes programming the browser very simple
• HTML document traversal, Event handling, Animation, Ajax
 https://www.w3schools.com/jquery/default.asp
•jQueryUI – https://jqueryui.com/
 Built on top of jQuery
 Provides powerful UI interactions,
effects, widgets, and themes.
 http://jqueryui.com/demos/
UI / UX Tool – jQuery & jQueryUI
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
55
HTML:
<p>Date: <input type="text" id="datefield"></p>
JavaScript:
$( "#datefield" ).datepicker();
jQuery UI example – Date Picker
Click in the input field
56
•Java OpenDocument Reports
http://jodreports.sourceforge.net/
• 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
57
JOD Reports – sample
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
ERP System Integration
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
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
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)
63
•Database Authentication
 MD5 encrypted passwords
•SQL injection – Stored procedures
•SSL setup
•Password rules
Security
Thanks for Attending!
65
Contact Information
John Valance
johnv@div1sys.com
802-355-4024
Division 1 Systems
www.div1sys.com

More Related Content

Recently uploaded

03. Ruby Variables & Regex - Ruby Core Teaching
03. Ruby Variables & Regex - Ruby Core Teaching03. Ruby Variables & Regex - Ruby Core Teaching
03. Ruby Variables & Regex - Ruby Core Teaching
quanhoangd129
 
08. Ruby Enumerable - Ruby Core Teaching
08. Ruby Enumerable - Ruby Core Teaching08. Ruby Enumerable - Ruby Core Teaching
08. Ruby Enumerable - Ruby Core Teaching
quanhoangd129
 
Authentication Review-June -2024 AP & TS.pptx
Authentication Review-June -2024 AP & TS.pptxAuthentication Review-June -2024 AP & TS.pptx
Authentication Review-June -2024 AP & TS.pptx
DEMONDUOS
 
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdfAI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
Daniel Zivkovic
 
Old Tools, New Tricks: Unleashing the Power of Time-Tested Testing Tools
Old Tools, New Tricks: Unleashing the Power of Time-Tested Testing ToolsOld Tools, New Tricks: Unleashing the Power of Time-Tested Testing Tools
Old Tools, New Tricks: Unleashing the Power of Time-Tested Testing Tools
Benjamin Bischoff
 
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
3610stuck
 
07. Ruby String Slides - Ruby Core Teaching
07. Ruby String Slides - Ruby Core Teaching07. Ruby String Slides - Ruby Core Teaching
07. Ruby String Slides - Ruby Core Teaching
quanhoangd129
 
Predicting Test Results without Execution (FSE 2024)
Predicting Test Results without Execution (FSE 2024)Predicting Test Results without Execution (FSE 2024)
Predicting Test Results without Execution (FSE 2024)
andrehoraa
 
01. Ruby Introduction - Ruby Core Teaching
01. Ruby Introduction - Ruby Core Teaching01. Ruby Introduction - Ruby Core Teaching
01. Ruby Introduction - Ruby Core Teaching
quanhoangd129
 
Busty Girls Call Mumbai 9930245274 Unlimited Short Providing Girls Service Av...
Busty Girls Call Mumbai 9930245274 Unlimited Short Providing Girls Service Av...Busty Girls Call Mumbai 9930245274 Unlimited Short Providing Girls Service Av...
Busty Girls Call Mumbai 9930245274 Unlimited Short Providing Girls Service Av...
revolutionary575
 
06. Ruby Array & Hash - Ruby Core Teaching
06. Ruby Array & Hash - Ruby Core Teaching06. Ruby Array & Hash - Ruby Core Teaching
06. Ruby Array & Hash - Ruby Core Teaching
quanhoangd129
 
SAP implementation steps PDF - Zyple Software
SAP implementation steps PDF - Zyple SoftwareSAP implementation steps PDF - Zyple Software
SAP implementation steps PDF - Zyple Software
Zyple Software
 
Fantastic Design Patterns and Where to use them No Notes.pdf
Fantastic Design Patterns and Where to use them No Notes.pdfFantastic Design Patterns and Where to use them No Notes.pdf
Fantastic Design Patterns and Where to use them No Notes.pdf
6m9p7qnjj8
 
05. Ruby Control Structures - Ruby Core Teaching
05. Ruby Control Structures - Ruby Core Teaching05. Ruby Control Structures - Ruby Core Teaching
05. Ruby Control Structures - Ruby Core Teaching
quanhoangd129
 
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
bhumivarma35300
 
How To Fill Timesheet in TaskSprint: Quick Guide 2024
How To Fill Timesheet in TaskSprint: Quick Guide 2024How To Fill Timesheet in TaskSprint: Quick Guide 2024
How To Fill Timesheet in TaskSprint: Quick Guide 2024
TaskSprint | Employee Efficiency Software
 
GT degree offer diploma Transcript
GT degree offer diploma TranscriptGT degree offer diploma Transcript
GT degree offer diploma Transcript
attueb
 
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
singhlata50dh
 
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
simran hot girls
 
當測試開始左移
當測試開始左移當測試開始左移
當測試開始左移
Jersey (CHE-PING) Su
 

Recently uploaded (20)

03. Ruby Variables & Regex - Ruby Core Teaching
03. Ruby Variables & Regex - Ruby Core Teaching03. Ruby Variables & Regex - Ruby Core Teaching
03. Ruby Variables & Regex - Ruby Core Teaching
 
08. Ruby Enumerable - Ruby Core Teaching
08. Ruby Enumerable - Ruby Core Teaching08. Ruby Enumerable - Ruby Core Teaching
08. Ruby Enumerable - Ruby Core Teaching
 
Authentication Review-June -2024 AP & TS.pptx
Authentication Review-June -2024 AP & TS.pptxAuthentication Review-June -2024 AP & TS.pptx
Authentication Review-June -2024 AP & TS.pptx
 
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdfAI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
 
Old Tools, New Tricks: Unleashing the Power of Time-Tested Testing Tools
Old Tools, New Tricks: Unleashing the Power of Time-Tested Testing ToolsOld Tools, New Tricks: Unleashing the Power of Time-Tested Testing Tools
Old Tools, New Tricks: Unleashing the Power of Time-Tested Testing Tools
 
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
 
07. Ruby String Slides - Ruby Core Teaching
07. Ruby String Slides - Ruby Core Teaching07. Ruby String Slides - Ruby Core Teaching
07. Ruby String Slides - Ruby Core Teaching
 
Predicting Test Results without Execution (FSE 2024)
Predicting Test Results without Execution (FSE 2024)Predicting Test Results without Execution (FSE 2024)
Predicting Test Results without Execution (FSE 2024)
 
01. Ruby Introduction - Ruby Core Teaching
01. Ruby Introduction - Ruby Core Teaching01. Ruby Introduction - Ruby Core Teaching
01. Ruby Introduction - Ruby Core Teaching
 
Busty Girls Call Mumbai 9930245274 Unlimited Short Providing Girls Service Av...
Busty Girls Call Mumbai 9930245274 Unlimited Short Providing Girls Service Av...Busty Girls Call Mumbai 9930245274 Unlimited Short Providing Girls Service Av...
Busty Girls Call Mumbai 9930245274 Unlimited Short Providing Girls Service Av...
 
06. Ruby Array & Hash - Ruby Core Teaching
06. Ruby Array & Hash - Ruby Core Teaching06. Ruby Array & Hash - Ruby Core Teaching
06. Ruby Array & Hash - Ruby Core Teaching
 
SAP implementation steps PDF - Zyple Software
SAP implementation steps PDF - Zyple SoftwareSAP implementation steps PDF - Zyple Software
SAP implementation steps PDF - Zyple Software
 
Fantastic Design Patterns and Where to use them No Notes.pdf
Fantastic Design Patterns and Where to use them No Notes.pdfFantastic Design Patterns and Where to use them No Notes.pdf
Fantastic Design Patterns and Where to use them No Notes.pdf
 
05. Ruby Control Structures - Ruby Core Teaching
05. Ruby Control Structures - Ruby Core Teaching05. Ruby Control Structures - Ruby Core Teaching
05. Ruby Control Structures - Ruby Core Teaching
 
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
 
How To Fill Timesheet in TaskSprint: Quick Guide 2024
How To Fill Timesheet in TaskSprint: Quick Guide 2024How To Fill Timesheet in TaskSprint: Quick Guide 2024
How To Fill Timesheet in TaskSprint: Quick Guide 2024
 
GT degree offer diploma Transcript
GT degree offer diploma TranscriptGT degree offer diploma Transcript
GT degree offer diploma Transcript
 
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
 
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
 
當測試開始左移
當測試開始左移當測試開始左移
當測試開始左移
 

Featured

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
Christy Abraham Joy
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
Vit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
MindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
GetSmarter
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
Alireza Esmikhani
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
Project for Public Spaces & National Center for Biking and Walking
 

Featured (20)

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 

Case Study: B2B eCommerce with PHP

  • 1. Case Study: B2B eCommerce with PHP John Valance Division 1 Systems johnv@div1sys.com © 2018 Division 1 Systems <div1> www.div1sys.com
  • 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 •Introduction / Overview •Project Goals/Requirements •Demo of System  Live / Screen Shots •Project Management  Team  Methodology •Tooling •ERP System Integration What We Will Cover
  • 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 •http://www.polarbev.com/ Company – Polar Beverages
  • 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
  • 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”
  • 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 • 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. Demo of Ordering Workflow
  • 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
  • 29. 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):
  • 30. 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
  • 31. 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):
  • 33. 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
  • 34. 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
  • 35. 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
  • 36. 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
  • 38. 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
  • 39. 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)
  • 40. 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 http://172.25.0.1:10086
  • 42. 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 https://balsamiq.com/ Quick demo of Balsamiq
  • 44. 44 Balsamiq Pricing (as of Mar 2018)
  • 45. 45 •Translate Mockups to Fully Styled Screen Designs UI Design Tool - Photoshop PhotoShop
  • 46. 46 Snagit - by TechSmith •Screen Capture and Annotation  https://www.techsmith.com/screen-capture.html Programming Specs Tool – Snagit!
  • 47. 47 Snagit - by TechSmith •https://www.techsmith.com/screen-capture.html Snagit Pricing (as of Mar 2018)
  • 48. 48 •Cloud-based hosting of Git, for source code version control. •Private repositories requires paid account - $7/month GitHub (github.com)
  • 49. 49 • Zend Studio (me)  Eclipse-based; Zend product  Kind of old-school  Free 1 year subscription to IBM i customers • PHP Storm (developers)  https://www.jetbrains.com/phpstorm  JetBrains product  More popular IDE currently  Complex pricing model, with bundled product options IDEs – Zend Studio and PHP Storm
  • 50. 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
  • 52. 52 • Twitter Bootstrap https://getbootstrap.com/  CSS framework – simplify, standardize UI  Built-in responsiveness for mobile devices • Font awesome https://fontawesome.com/  SVG icons (scalable vector graphics)  Looks sharp at any magnification (any screen size) UI Standards
  • 53. 53 •jQuery - https://jquery.com/  JavaScript library / framework  Makes programming the browser very simple • HTML document traversal, Event handling, Animation, Ajax  https://www.w3schools.com/jquery/default.asp •jQueryUI – https://jqueryui.com/  Built on top of jQuery  Provides powerful UI interactions, effects, widgets, and themes.  http://jqueryui.com/demos/ UI / UX Tool – jQuery & jQueryUI
  • 54. 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
  • 55. 55 HTML: <p>Date: <input type="text" id="datefield"></p> JavaScript: $( "#datefield" ).datepicker(); jQuery UI example – Date Picker Click in the input field
  • 56. 56 •Java OpenDocument Reports http://jodreports.sourceforge.net/ • 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
  • 58. 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
  • 60. 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
  • 61. 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
  • 62. 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)
  • 63. 63 •Database Authentication  MD5 encrypted passwords •SQL injection – Stored procedures •SSL setup •Password rules Security