Category: HTML, CSS & JS

POMIRISHI.RS – Laravel-Based Warehouse and Stock Management System with External API Integration

Introduction:

In this blog post, I am thrilled to showcase a Laravel-based warehouse and stock management system that I developed, which utilizes external API integration. This project is developed for my client Pomirishi.rs This project required expertise in PHP, Laravel, and API integration, and how I can create robust and efficient solutions for businesses. Let’s dive into the details!

Project Overview:

For this project, I set out to build a comprehensive warehouse and stock management system using Laravel, a powerful PHP framework known for its elegant syntax and extensive feature set. The goal was to create a solution that would enable businesses to streamline their inventory management processes and synchronize data in real-time with external APIs.

Key Features:

1. User-friendly Interface: The system boasts an intuitive and user-friendly interface that allows users to navigate through the application effortlessly. It provides a seamless experience for managing products, tracking orders, and monitoring stock levels.

2. Inventory Management: The system offers robust inventory management capabilities, allowing users to add, edit, and delete products. It also supports categorization, enabling efficient organization and retrieval of product information.

3. Order Processing: Users can process orders efficiently, ensuring accurate order fulfillment and timely delivery. The system provides features for order tracking, status updates, and generating invoices.

4. Real-time Stock Updates: By integrating external APIs, the system keeps stock levels synchronized in real-time. This ensures accurate inventory tracking and prevents overselling or stockouts.

5. Reporting and Analytics: The system includes comprehensive reporting and analytics features that empower users to gain insights into sales trends, product performance, and inventory turnover. This data helps businesses make informed decisions and optimize their operations.

API Integration:

To enhance the functionality of the warehouse and stock management system, I integrated external APIs for seamless data synchronization. These APIs include popular inventory management systems, order tracking providers, and stock update services. By leveraging these APIs, the system achieves real-time data exchange, ensuring accurate and up-to-date information across platforms.

Challenges and Solutions:

During the development process, I encountered several challenges, such as handling API authentication, managing data inconsistencies, and ensuring system reliability. To overcome these challenges, I implemented robust error handling mechanisms, data validation techniques, and implemented a thorough testing process to ensure the system’s stability and performance.

jQuery/JavaScript – Handling browser back button with cross-browser support

How to do something when browser Back Button is triggered?

In general, you can find many Stack Overflow discussions for this.

So, why I’m writing this post?

Problem is that there is no single answer with solution which will work in both Chrome and Firefox ( IE? IE is not a browser 🙂 ), and core of the problem is that both of them constantly changing their logic for Back/Forward buttons.

For example, “performance.navigation.type” which was common solution for this is deprecated, or better to say, non-usable anymore.

In this example we will do action that will apply on page that is loaded after Back Button is triggered.

    if ($.browser.mozilla || navigator.userAgent.toLowerCase().indexOf('firefox') > -1){

         $(window).bind("pageshow", function(event) {
            if (event.originalEvent.persisted) {
              console.log("Loaded from history.")
            }
        });

    }else{

        if (window.history && window.history.pushState) {

          window.history.replaceState('forward', null, './');

          $(window).on('popstate', function() {
            console.log("Loaded from history.")
          });

        }      
    }

In short terms, for Firefox we use the pageshow event, and for other browsers we use the popstate event.

Important part in FF solution is checking if “event.originalEvent.persisted” is true. On initial page load it is set to false, and on Browser Button events is true.

CSS – How to fix the issue with fixed background on scroll in iOS

Your client want to have a fixed background when user scroll down? First thought – piece of cake, and really it is if you disregard the fact that users with iPhone or iPad like to scroll also.

This piece of code will work for every device except ones that have iOS (iPhone, iPad)

body {
    background-image: url("PATH-TO-YOUR-IMAGE");
    overflow-x: hidden;
    background-attachment: fixed;
    position: relative;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 100%;
}

Why is that the case here? Per my understanding, Apple disabled position: fixed or background-attachment: fixed style for body element.

So what to do?

1. Open and close div inside of body element

<body>
<div class="ios-fixed-bg"></div>
....
</body>

2. Apply the following style to class ios-fixed-bg

.ios-fixed-bg {
	background-image: url("PATH-TO-YOUR-IMAGE");
	height: 100%;
	width: 100%;
	position: fixed;
	background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
	z-index: -1;
}