본문 바로가기
웹개발

자바스크립트로 간단하게 재고관리프로그램 만들기

by Rami12 2024. 7. 11.
반응형

오늘은 간단하게 재고관리프로그램을 만들어보았습니다

js코드는 총 3가지로

  • shop.js
  • stock.js
  • stockmanager.js

이렇게 3개의 코드를 만들었습니다

 

아래에는 코드와 코드들의 설명입니다

class Stock {
    constructor(stno, stname, stamt, stindate, strgdate, shno){
        this.stno = stno;
        this.stname = stname;
        this.stamt = stamt;
        this.stindate = stindate;
        this.strgdate = strgdate;
        this.shno = shno;
    }
};

Stock 클래스는 재고 객체를 생성하기 위해 사용됩니다. 이 클래스는 생성자 함수를 통해 각 재고 항목의 속성을 초기화합니다.

속성 설명

  • stno: 재고 번호 (재고의 고유 식별자)
  • stname: 재고 이름 (재고의 이름이나 설명)
  • stamt: 재고 수량 (해당 재고의 수량)
  • stindate: 입고 날짜 (재고가 입고된 날짜)
  • strgdate: 등록 날짜 (재고가 시스템에 등록된 날짜와 시간)
  • shno: 매장 번호 (해당 재고가 속한 매장의 고유 식별자)

역할

Stock 클래스는 매장에 속한 각 재고 항목을 객체로 표현하며, 각 재고 항목의 속성을 관리합니다. 새로운 재고를 추가할 때 Stock 클래스의 인스턴스를 생성하고, 로컬 스토리지에 저장된 재고 목록에 추가합니다. 이 클래스는 재고 관리 시스템에서 재고 항목을 생성하고 관리하는 데 필수적인 역할을 합니다.

이와 같은 클래스를 사용하면 재고 정보를 체계적으로 관리할 수 있으며, 객체 지향 프로그래밍의 장점을 활용하여 코드의 재사용성과 유지보수성을 높일 수 있습니다.

class Shop {
    constructor(shno, shname, shtotst){
        this.shno = shno;
        this.shname = shname;
        this.shtotst = shtotst;
    }
}

Shop 클래스는 매장 객체를 생성하기 위해 사용됩니다. 이 클래스는 생성자 함수를 통해 각 매장의 속성을 초기화합니다. 다음은 Shop 클래스와 그 역할에 대한 설명입니다.

속성 설명

  • shno: 매장 번호 (매장의 고유 식별자)
  • shname: 매장 이름 (매장의 이름)
  • shtotst: 총 재고 수량 (해당 매장의 총 재고 수량)

역할

Shop 클래스는 각 매장을 객체로 표현하며, 각 매장의 속성을 관리합니다. 새로운 매장을 추가할 때 Shop 클래스의 인스턴스를 생성하고, 로컬 스토리지에 저장된 매장 목록에 추가합니다. 이 클래스는 매장 관리 시스템에서 매장 항목을 생성하고 관리하는 데 필수적인 역할을 합니다.

이와 같은 클래스를 사용하면 매장 정보를 체계적으로 관리할 수 있으며, 객체 지향 프로그래밍의 장점을 활용하여 코드의 재사용성과 유지보수성을 높일 수 있습니다.

$(() => {
    // localStorage 초기화
    initLocalStorage();

    $('#shwriteBtn').on('click', () => {
        writeShop();
        showStoreList();
    });

    $('#stwriteBtn').on('click', () => {
        writeStock();
        showStockList(currentShopId);
    });

    // 초기 목록 표시
    showStoreList();
    showStockList(null);

});

const initLocalStorage = () => {
    if (localStorage) {
        if (!localStorage.getItem('shopSeq')) {
            localStorage.setItem('shopSeq', '0');
        }
        if (!localStorage.getItem('stockSeq')) {
            localStorage.setItem('stockSeq', '0');
        }
        if (!localStorage.getItem('shopList')) {
            localStorage.setItem('shopList', '[]');
        }
        if (!localStorage.getItem('stockList')) {
            localStorage.setItem('stockList', '[]');
        }
    }
};

let currentShopId = null;

// 매장 등록
const writeShop = () => {
    const shopArr = JSON.parse(localStorage.getItem('shopList'));
    shopArr.push(new Shop(getNextShopSeq(), $('#shname').val(), 0));
    localStorage.setItem('shopList', JSON.stringify(shopArr)); 
    $('#shname').val('');
};

// 매장 번호 시퀀스
const getNextShopSeq = () => {
    const nextShopSeq = Number(localStorage.getItem('shopSeq')) + 1;
    localStorage.setItem('shopSeq', nextShopSeq);
    return nextShopSeq;
};

// 매장 목록 표시
const showStoreList = () => {
    const shopArr = JSON.parse(localStorage.getItem('shopList'));
    const tbody = $('#shoplist tbody');
    tbody.empty();
    shopArr.forEach((shop, index) => {
        tbody.append(`
            <tr onclick="showStockList(${shop.shno})">
                <td>${index + 1}</td>
                <td>${shop.shname}</td>
                <td>${shop.shtotst}</td>
                <td><button onclick="editShop(${shop.shno})">수정</button></td>
                <td><button onclick="deleteShopList(${shop.shno})">삭제</button></td>
            </tr>
        `);
    });
};

// 매장 삭제
const deleteShopList = (shno) => {
    let shopArr = JSON.parse(localStorage.getItem('shopList'));
    shopArr = shopArr.filter((shop) => shop.shno !== shno);
    localStorage.setItem('shopList', JSON.stringify(shopArr));
    showStoreList();
};

// 재고 등록
const writeStock = () => {
    if (currentShopId === null) {
        alert('먼저 매장을 선택하세요.');
        return;
    }
    const stockArr = JSON.parse(localStorage.getItem('stockList'));
    const stock = new Stock(
        getNextStockSeq(),
        $('#stname').val(),
        $('#stamt').val(),
        $('#stindate').val(),
        formatDateTime(new Date()),
        currentShopId
    );
    stockArr.push(stock);
    localStorage.setItem('stockList', JSON.stringify(stockArr));
    $('#stname').val('');
    $('#stamt').val('');
    $('#stindate').val('');
    showStockList(currentShopId);
};

// 재고 번호 시퀀스
const getNextStockSeq = () => {
    const nextStockSeq = Number(localStorage.getItem('stockSeq')) + 1;
    localStorage.setItem('stockSeq', nextStockSeq);
    return nextStockSeq;
};

// 날짜 및 시간 형식 지정
const formatDateTime = (date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    return `${year}년 ${month}월 ${day}일 ${hours}:${minutes}:${seconds}`;
};

// 재고목록의 합
const sTotal = stocks => {
    return stocks.reduce((acc,stock) => acc + stock.stamt, 0);
};

// 재고 목록 표시
const showStockList = (shno) => {
    currentShopId = shno;
    const stockArr = JSON.parse(localStorage.getItem('stockList'));
    const filteredStockArr = shno ? stockArr.filter(stock => stock.shno === shno) : stockArr;
    const tbody2 = $('#stocklist tbody');
    tbody2.empty();
    filteredStockArr.forEach((stock, index) => {
        tbody2.append(`
        <tr>
        <td>${index + 1}</td>
        <td>${stock.stname}</td>
        <td>${stock.stamt}</td>
        <td>${stock.stindate}</td>
        <td>${stock.strgdate}</td>
        <td><button onclick="editStock(${stock.stno})">수정</button></td>
        <td><button onclick="deleteStockList(${stock.stno})">삭제</button></td>
        </tr>
        `);
    });
};

// 재고 삭제
const deleteStockList = (stno) => {
    let stockArr = JSON.parse(localStorage.getItem('stockList'));
    stockArr = stockArr.filter((stock) => stock.stno !== stno);
    localStorage.setItem('stockList', JSON.stringify(stockArr));
    showStockList(currentShopId);
};

이 코드는 로컬 스토리지를 이용한 간단한 매장 및 재고 관리 시스템입니다. 매장과 재고를 추가하고, 목록을 보여주며, 수정 및 삭제할 수 있는 기능을 제공합니다. 다음은 주요 기능과 동작 방식에 대한 설명입니다.

1. 초기 설정

  • initLocalStorage 함수: 로컬 스토리지에 필요한 초기 데이터를 설정합니다. shopSeq, stockSeq, shopList, stockList가 존재하지 않으면 초기값을 설정합니다.

2. 매장 관리

  • writeShop 함수: 새로운 매장을 추가합니다. 입력된 매장 이름과 함께 새로운 매장 객체를 생성하고 shopList에 추가합니다.
  • getNextShopSeq 함수: 매장 번호 시퀀스를 증가시키고 반환합니다.
  • showStoreList 함수: shopList에 저장된 매장 목록을 테이블에 표시합니다.
  • deleteShopList 함수: 특정 매장을 삭제하고 목록을 업데이트합니다.

3. 재고 관리

  • writeStock 함수: 현재 선택된 매장에 새로운 재고를 추가합니다. 재고 이름, 수량, 입고 날짜 등을 입력받아 stockList에 추가합니다.
  • getNextStockSeq 함수: 재고 번호 시퀀스를 증가시키고 반환합니다.
  • showStockList 함수: 특정 매장의 재고 목록을 테이블에 표시합니다. 매장이 선택되지 않으면 모든 재고를 표시합니다.
  • deleteStockList 함수: 특정 재고를 삭제하고 목록을 업데이트합니다.

4. 기타 함수

  • formatDateTime 함수: 날짜와 시간을 지정된 형식으로 변환합니다.
  • sTotal 함수: 주어진 재고 배열에서 총수량을 계산합니다.

이벤트 핸들러

  • #shwriteBtn 클릭 이벤트: 매장을 추가하고 매장 목록을 갱신합니다.
  • #stwriteBtn 클릭 이벤트: 재고를 추가하고 현재 매장의 재고 목록을 갱신합니다.

초기화 및 목록 표시

  • 초기 목록 표시: 페이지 로드 시 showStoreList와 showStockList를 호출하여 초기 목록을 표시합니다.

이 코드는 HTML 요소와 결합하여 매장과 재고를 관리할 수 있는 간단한 시스템을 제공합니다. 로컬 스토리지를 이용하여 데이터가 유지되며, 사용자가 페이지를 새로 고침해도 데이터가 손실되지 않습니다.

 

다음은 HTML과 css코드입니다

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>재고관리프로그램 v0.1</title>
    <link rel="stylesheet" href="/stockmanager/css/stockmanager.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="/stockmanager/js/stockmanager.js"></script>
    <script src="/stockmanager/js/Shop.js"></script>
    <script src="/stockmanager/js/Stock.js"></script>

</head>
<body>
    <div id="wrapper">
        <div id="title">
            <h1>재고관리프로그램 v1.0</h1>
        </div>
        <div id="shoplist" class="list">
            <h2>매장목록</h2>
            <p>
                <input id="shname" type="text" placeholder="매장명" />&nbsp;
                <input id="shwriteBtn" type="button" value="등록" />
            </p>
            <table>
                <thead>
                    <tr>
                        <th>NO</th>
                        <th>매장명</th>
                        <th>수량</th>
                        <th>수정</th>
                        <th>삭제</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="stocklist" class="list">
            <h2>재고목록</h2>
            <p>
                <input id="stname" type="text" placeholder="재고제품명" />&nbsp;
                <input id="stamt" type="number" placeholder="재고수량" />&nbsp;
                <input id="stindate" type="date" placeholder="입고일시" />&nbsp;
                <input id="stwriteBtn" type="button" value="등록" />
            </p>
            <table>
                <thead>
                    <tr>
                        <th>NO</th>
                        <th>재고제품명</th>
                        <th>수량</th>
                        <th>입고일시</th>
                        <th>등록일시</th>
                        <th>수정</th>
                        <th>삭제</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>            
        </div>
    </div>
</body>
</html>
* {
    margin: 0;
    padding: 0;
}

div {
    border: 1px solid #333;
}

h1, h2 {
    text-align: center;
}

input[type='text'], input[type='number'], input[type='date'] {
    height: 25px;
}
input[type='button'] {
    height: 25px;
    padding: 0 10px;
}

#wrapper {
    width: 820px;
    height: 600px;
}

#title {
    color: white;
    background-color: black;
    padding: 10px 0;
}

.list {
    float: left;
    margin: 10px;
    height: 510px;    
}
.list h2 {
    padding: 10px 0;
    color: white;
    background-color: gray;    
}
.list table, .list table th, .list table td {
    border: 1px solid #999;
    border-collapse: collapse;
}

#shoplist {
    width: 278px;
}
#shoplist table {
    width: 278px;
}

#stocklist {
    width: 493px;
}
#stocklist table {
    width: 493px;
}

#shoplist p, #stocklist p {
    padding: 10px;
}

#shname {
    width: 190px;
}

#stname {
    width: 190px;
}

#stamt {
    width: 70px;
}

 

결과도 잘 나오는 모습입니다 입력을 할 때마다 값이 올라가고 로컬스토리지에 저장됩니다

이렇게 간단하게 재고관리프로그램을 만들어보았습니다

 

감사합니다

반응형
저작자표시 비영리 변경금지 (새창열림)

티스토리툴바