管理ダッシュボードの構造

Ant Designコンポーネントを活用したReactベースの管理インターフェース実装例：

<script type="text/babel">
const { Layout, Menu, Table, Modal, Form, Button } = antd;

function StorageManager() {
  const [collapsed, setCollapsed] = React.useState(false);
  const [showAddModal, setShowAddModal] = React.useState(false);
  const [showEditModal, setShowEditModal] = React.useState(false);
  const [currentRecord, setCurrentRecord] = React.useState(null);
  const [storageList, setStorageList] = React.useState([]);
  
  React.useEffect(() => {
    fetch('/getStorageFacilities')
      .then(res => res.json())
      .then(data => setStorageList(data));
  }, []);

  const handleAddSubmit = (values) => {
    fetch('/addStorage', {
      method: 'POST',
      body: new URLSearchParams(values)
    })
    .then(() => {
      fetchStorageData();
      setShowAddModal(false);
    });
  };

  const handleEditSubmit = (values) => {
    fetch(`/updateStorage?id=${currentRecord.id}`, {
      method: 'PUT',
      body: new URLSearchParams(values)
    })
    .then(() => {
      fetchStorageData();
      setShowEditModal(false);
    });
  };

  const removeStorage = (id) => {
    fetch(`/deleteStorage?id=${id}`, { method: 'DELETE' })
    .then(() => fetchStorageData());
  };

  const fetchStorageData = () => {
    fetch('/getStorageFacilities')
      .then(res => res.json())
      .then(data => setStorageList(data));
  };

  const tableColumns = [
    { title: 'ID', dataIndex: 'id', key: 'id' },
    { title: 'コード', dataIndex: 'code', key: 'code' },
    { title: '名称', dataIndex: 'name', key: 'name' },
    { title: '場所', dataIndex: 'location', key: 'location' },
    { 
      title: '操作', 
      render: (_, record) => (
        <>
          <Button onClick={() => { setCurrentRecord(record); setShowEditModal(true); }}>編集</Button>
          <Button danger onClick={() => removeStorage(record.id)}>削除</Button>
        </>
      )
    }
  ];

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Layout.Sider collapsible collapsed={collapsed} onCollapse={() => setCollapsed(!collapsed)}>
        <Menu theme="dark" defaultSelectedKeys={['1']}>
          <Menu.Item key="1">ダッシュボード</Menu.Item>
          <Menu.Item key="2">倉庫管理</Menu.Item>
        </Menu>
      </Layout.Sider>
      <Layout.Content>
        <Button type="primary" onClick={() => setShowAddModal(true)}>新規追加</Button>
        <Table dataSource={storageList} columns={tableColumns} />
        
        <Modal title="新規倉庫登録" visible={showAddModal} onCancel={() => setShowAddModal(false)}>
          <Form onFinish={handleAddSubmit}>
            <Form.Item label="倉庫コード" name="code" rules={[{ required: true }]}>
              <Input />
            </Form.Item>
            <Form.Item label="倉庫名" name="name" rules={[{ required: true }]}>
              <Input />
            </Form.Item>
            <Form.Item label="所在地" name="location" rules={[{ required: true }]}>
              <Input />
            </Form.Item>
            <Button htmlType="submit">保存</Button>
          </Form>
        </Modal>
        
        <Modal title="倉庫情報編集" visible={showEditModal} onCancel={() => setShowEditModal(false)}>
          <Form initialValues={currentRecord} onFinish={handleEditSubmit}>
            <Form.Item label="倉庫コード" name="code">
              <Input disabled />
            </Form.Item>
            <Form.Item label="倉庫名" name="name">
              <Input />
            </Form.Item>
            <Form.Item label="所在地" name="location">
              <Input />
            </Form.Item>
            <Button htmlType="submit">更新</Button>
          </Form>
        </Modal>
      </Layout.Content>
    </Layout>
  );
}
</script>

バックエンド処理の実装

Java Servletを使用したデータ操作処理：

@WebServlet("/updateStorage")
public class StorageUpdateController extends HttpServlet {
  private StorageDAO storageDAO = new StorageDAO();

  protected void doPut(HttpServletRequest req, HttpServletResponse res) throws IOException {
    String id = req.getParameter("id");
    String code = req.getParameter("code");
    String name = req.getParameter("name");
    String location = req.getParameter("location");
    
    if (id != null) {
      Storage facility = new Storage(code, name, location);
      facility.setId(Integer.parseInt(id));
      
      boolean success = storageDAO.update(facility);
      res.getWriter().write(success ? "更新成功" : "更新失敗");
    }
  }
}

データアクセス層

SQL操作をカプセル化したDAOパターンの実装例：

public class StorageDAO {
  public boolean insert(Storage facility) {
    String sql = "INSERT INTO storage_facilities (code, facility_name, location) VALUES (?, ?, ?)";
    try (Connection conn = DatabaseConnector.getConnection();
         PreparedStatement stmt = conn.prepareStatement(sql)) {
      stmt.setString(1, facility.getCode());
      stmt.setString(2, facility.getName());
      stmt.setString(3, facility.getLocation());
      return stmt.executeUpdate() > 0;
    } catch (SQLException e) {
      e.printStackTrace();
      return false;
    }
  }

  public List<Storage> getAll() {
    List<Storage> list = new ArrayList<>();
    String query = "SELECT * FROM storage_facilities";
    try (Connection conn = DatabaseConnector.getConnection();
         Statement stmt = conn.createStatement();
         ResultSet rs = stmt.executeQuery(query)) {
      while (rs.next()) {
        Storage item = new Storage(
          rs.getString("code"),
          rs.getString("facility_name"),
          rs.getString("location")
        );
        item.setId(rs.getInt("id"));
        list.add(item);
      }
    } catch (SQLException e) {
      e.printStackTrace();
    }
    return list;
  }
}