2022-08-16

Java Spring bootで簡単なCRMアプリを作成してみました！

こんにちは！keitaです。

お盆の連休中にJava Spring bootを書籍読みながら学習したりして、その集大成として
簡単なCRMを作成してみました。
本記事ではその紹介をしていこうと思います。

コード量は莫大なため、記載しません。。
ご了承を～

それではまとめていきます。

まずはSpring Bootについてをまとめます！

Spring Bootについて

Spring bootとはJavaのフレームワークです。
広範囲のフレームワークのSpring Frameworkから開発に必要な機能の恩恵を受け、自動設定や少ないコードで実行可能なアプリケーションを開発することができます！

特徴としてDIという「依存性の注入」というクラス間の依存関係を実行時に外部から呼び出す手法を採用されています。

どの言語のフレームワークの構成として、MVCが主流だと思います。
Spring では「@」でDIコンテナとして認識されます。

Model(モデル)

アプリケーションの動的なデータ構造がModelの役割をしています。
POJOといわれるごく普通のJavaオブジェクトや「@Entity」等が該当します。
※データベースを使用する際には「Repository」のクラス作成をする必要があります。

View(ビュー)

thymeleafというテンプレートエンジンをしようしたHTMLのテンプレートファイルが画面のUIにあたるViewの役割をしています。

Controller(コントローラ)

画面遷移の制御や処理の実行を管理している「@service」を読みだしたりするクラスがControllerの役割をしています。
「@Controller」でコントローラのクラスに付与されます。

上記以外にもいろいろな＠があるので調べてみると楽しいかもです。
次にCRMって何ぞやについて簡単にまとめます！

CRMとは？

顧客関係管理を略称化されたものです。
顧客と良好な関係を築くためのマネージメント手法です。
顧客情報や顧客のアクション情報を貯蓄と分析をし、マーケティングを効率的に行えるというものです。

今回作成するものは分析したり、マーケティングしたりという機能は想定せず、
情報を貯蓄(登録、更新、削除)することに焦点を当てていきます。

では作成についてまとめていきます！

作成するものについて

下記を管理できるようにしてあります。
・従業員データ
・取引企業
・取引先相手
・案件

下記書籍で作成したサンプルを基盤に作成していきました。
「Spring Boot 2 入門: 基礎から実演まで」
※この書籍から、UIの基盤、セキュリティ（ログイン/ログアウト）、従業員一覧を参考にしました！

作成したもの

下記がログイン画面です。
この新規登録リンク押下後から、ユーザ登録を行えます。
作成したユーザのユーザ名とパスワードを入力してログインすることができます。
※ここはがっつり書籍を参考にしたところです～

下記がログイン後の画面です。
登録されている社員を表示できるようになっています。
サイドメニューバーには、ログインされている従業員も表示させるようになっています。
※ここも書籍を参考にしています

下記は取引先企業一覧画面です。
会社単位で取引先を登録できるようになっています。
登録や編集、削除のアクションができるようになっています。
※ここからは自分で組み込んだ機能です。

下記は取引先様一覧画面です。
ユーザ単位で取引先を登録できるようになっています。
先ほど登録した取引先企業とリレーションでつながっています。なので、取引先様を登録する前には取引先企業を登録しておく必要があります！
こちらの画面でも登録、編集や削除ができるようなっています。

下記は案件一覧画面です。
抱えている案件を管理できるようになっています。
案件は編集や削除をできないようにしておきました。
※本当はほかの取引先のデータも削除できない方がいいと思いますが、機能の勉強としてできるようにさせておきます。

登録時は進捗は未完了の状態で登録されます！

進捗を完了にするボタンを押下すると進捗が完了となります。

とこんな感じで作成してみました！

以前取得した資格の
MB-910(Microsoft Dynamics 365 Fundamentals (CRM))でCRMに少し興味を持ったので、今回触ってみてよかったなと思いました。

ただ、すごい難しいと思いました。。
データベースの設計が特に複雑でなかなか苦労しました。
ここにデータの分析やマーケティングのアプローチ機能を追加されるとなると大手のシステムはさすがだなと感じました。。

というところで、とりあえず動くシステムが完成できてよかったと思います。
課題点がところどころありますが、完成です！

Summarize in English

It take me about a week to make this CRM application.
I had a hard time.
I think framework is the most diffcult environment construction.
Therefore, I feel that it is important to check the procedure firmly in the official imformation learning books etc.

Thank you for reading this far!!

2022-08-08

Vue.jsでTodoアプリを作成してみました

こんばんわ！Keitaです♪

今回は、「Vue.js」というJavascriptのフレームワークを使用してTodoアプリを作成しましたのでまとめていきたいと思います。

フレームワークと聞くと、サーバーサイドの言語が主流かなと主観的に感じていて、最初Javascriptにもフレームワークがあることに少し驚きましたｗ

今回はそんな機能に触れてみたよ！という紹介をしていきたいです！！

※今回のアプリは書籍を参考にして作成しましたので、ソースコードは記載しません。
紹介のみとさせていただきます。。

では、まとめていきます！

Vue.jsとは

簡単に「Vue.js」とは何なのか記載させてください！

前記でも軽く書きましたが、ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他のモノリシック(ガチガチにまとめられた)フレームワークとは違い、少しずつ適用できるように設計されています。

既存の機能と統合することも容易で、洗練されたシングルページのアプリケーションの開発が可能になるよ！というものらしいです。

結構人気な機能らしいので、使いこなせると需要がありそうです！

公式サイトを参考にさせてもらいました。
(参考：https://jp.vuejs.org/v2/guide/)

作成したもの

では、作成したものを紹介していきたいと思います。
下記がメインの機能となるTodoのTOP画面です！
※事前に何件か登録してあります。

ではタスクを追加してみます。
下記が追加の工程です！しっかり追加したタスクが表示させています。

次は編集をしてみます。
先ほど追加したタスクを「テスト5」に編集します！

次は削除してみます。
使用していたタスクを削除しましょう！

はい！これらが基本機能です。

後、タスクが完了したときに☑を付けると【完了】の文字がつく、アクションボタンを非表示にする機能も付けました。

こんな機能を作成しました。
データはローカルストレージで管理をさせています！

入門書を読みながら作成したので、自作とは言えませんが、
デザインを我流にしたり、タスクの完了機能に処理を付け加えたりし、
又しっかり機能は理解したのでご勘弁いただければと・・

最後に「Vue.js」の書き方を記載しておきます。

「Vue.js」の書き方

npmからインストールする方法でプロジェクトを開始しました。

インストールしたプロジェクト内に「APP.vue」があり、それが基盤となるファイルです！このファイルを色々いじるだけで簡単なシングルページのアプリケーションを作ることもできるかと思います。
※色々なアプローチ方法があるので、興味があったら調べてみてください！

Vueファイルは下記のような構成になっており、
HTML、CSS、JSを一つにまとめることができます！

---------------------------
<script setup>
Javascript記載箇所
</script>
 
<template>
HTML記載箇所
</template>
 
<style scoped>
CSS記載箇所
</style>
---------------------------
 
 
書き方に少し癖がある箇所もあるので、調べながらやると幸せになれるかもしれません。。

結構色々なところで活躍しそうな機能なので、今後も注目していこうと思います♪
ここまで読んでいただきありがとうございました！

2022-07-24

slick.jsで画像をスライドさせるサイトを表現してみる！

こんにちは！keitaです♪

今回は、「slick.js」というjavascriptの機能を使ってみたいと思います。

「slick.js」は複数の画像をスライド方式で表示させることができる機能です！
画像をたくさん載せたいんだけど、載せすぎると見栄えが～とお悩みの方なんかには便利な機能となるのではないかと思います。

では始めていきます！

作るもの

今回は簡単に春夏秋冬の画像を切り替えていくサイトを作っていきます！
画像はpixabayさんのものを使用させていただきます！

事前準備

公式から必要なものをダウンロードします！
下記のファイルをダウンロードして、プロジェクトフォルダに格納しておきます！

ーーーーーーーーーーーーーーーーー
・fontsフォルダー
・slick-theme.css
・slick.css
・ajax-loader.gif
・slick.min.js

ーーーーーーーーーーーーーーーーー

これで環境はOKです(`･ω･´)b
では作っていきます！！

作成していこう

と思うのですが、ファイルの参照箇所等々が多く複雑になってしまうため、ソースの記載は控えさせていただきます。
こちらにソースがありますので、参照にしてみてください♪
完成形は下記になります( ^^) _U~~

はい！
こんな感じです！
使えるとサイトで表現できる幅が広がって楽しくなるかもしれません。

引っかかった点

画像が真ん中に配置されず、結構な時間を使いました。
調べた結果、「slick-theme.css」内で画像に要素がかかってしまい、真ん中へ配置する「text-align:center」が効かなくなってしまっていたみたいです。。
解決策としてcssの画像要素に「margin:0 auto」を入れてあげれば、真ん中に配置できるようになりました！

ほんとに困ったので、書いておきます～

ここまで読んでいただきありがとうございました！！

2022-07-18

chart.jsを使ってグラフを使ったWebサイトを作ってみる！

こんにちは！keitaです♪

今回は、「chart.js」というjavascriptの機能を使ってみたいと思います。

「chart.js」はWeb上にグラフを作成してくれる機能です。
データ情報を載せるサイトなんかですととても重宝されている機能なのではないでしょうか。。

では始めていきます！

作るもの

簡単に「chart.js」を使ったWebサイトを作っていきます！
下記の様にしておきます。

ーーーーーーーーーーーーーーーーー

【サイトタイトル】keita analysis
【内容】
グラフを４つ表示
　→曜日ごとのテンション
　　→棒グラフ
　→月ごとのテンション
　　→折れ線グラフ
　→一日の平均スケジュール
　　→円グラフ
　→診断情報（無料診断サイトの診断結果）
　　→レーダーチャート
【ページ数】1ページ
【使用ツール】
エディター：VScode

ーーーーーーーーーーーーーーーーー

こんなところでしょうか。

では作成していきましょう。

事前準備

下記のコードをHTMLのBody内に記載しておく必要があります！
書いておきましょう

ーーーーーーーーーーーーーーーーー
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

ーーーーーーーーーーーーーーーーー

これで「chart.js」を使うことができる環境を作ることができました。
では、自分のサイトを構築していきます。

作成していこう

では、作成していきます！
ただ、コードが結構長くなってしまうため、必要最低限のもののみを記載という形にさせてもらいます！興味のある方は、最後にコードのURLを貼るので参照してみてください！！

HTMLのBody内に自分で作成していくjavascriptファイルの読み込みとグラフを表示させる定義を行います。

ーーーーーーーーーーーーーーーーー
<div class="bar">
　<canvas id="bar" width="100px" height="100px"></canvas>
</div>

グラフのjavascript処理を書いていきます。

下記は棒グラフを参考に書いていきますが、これのtype等の値を書き換えるだけでグラフの種類を変えたり、編集できるので調整してみてください！
詳しくは公式サイトで～

私はこんな感じで作成しました！！

ーーーーーーーーーーーーーーーーー

//HTML側の要素を取得する
const bar = document.getElementById('bar').getContext('2d');

//グラフ
const barchart = new Chart(bar, {
　　type: 'bar',
　　data: {
　　　labels: ['Monday','Tuesday','Wendnesday',
　　　　　　　　'Thursday','Friday','Saturday','Sunday'],
　　　datasets: [{
　　　　　　label: "値",
　　　　　　data: [1, 3, 7, 5, 9, 10,4],
　　　　　　backgroundColor: [
　　　　　　　　'rgba(255, 206, 86, 0.2)',
　　　　　　],
　　　　　　borderColor: [
　　　　　　　　'rgba(255, 206, 86, 1)',
　　　　　　],
　　　　　　borderWidth: 1
　　　}]
    },　　
　　options: {
　　　scales: {
　　　　y: {
　　　　　　beginAtZero: true
　　　　}
　　　},
　　　plugins: {
　　　　title: {
　　　　　　display: true,
　　　　　　position:'top',
　　　　　　text: '曜日ごとテンションゲージ' 
　　　　},
　　　}
    }
});

ーーーーーーーーーーーーーーーーー

するとこんな感じで表示されているはずです↓
※サイズはCSS等で調整しました。。

はい。表示されました！
お～なんかいいですね！色々なところで活用できそうな機能だと思います！

さて、こんな要領で、ちゃちゃっと作成していきます！

動作確認

以下の画面が作成したものとなります！

はい！しっかりできています！
デザイン関係があまり得意でないので、得意な人がやったらもっと映えそうですねｗ
まあ、こんな感じでご勘弁を～

こちらでソースコードを確認できますのでよかったら見てみてください!(^^)!

ここまで読んでいただきありがとうございました

2022-07-15

javascriptのOnePageScrollを使って、サイトを作ってみる！

こんにちは！keitaです♪

これまでPHPをメインにブログを書いてきたのですが、
最近クライアントサイドのプログラム言語についても触れるようになってきましたので、そちらの方もブログで取り扱っていきたいと思います！

となると、欠かせなくなっていくのがjavascriptですね。。
正直、javascriptは機能が多すぎて、必要最低限以外なところは見て見ぬふりをしていたのですが、とうとう向き合うときが来たというところですかね（笑）

今回触れていくのは、「One Page Scrool」という機能です。
この機能はjavascriptのライブラリである「jQuery」というもののプラグインの一つで、１ページごとのコンテンツをスクロールしながら入れ替えていくことのできるものとなっています。

言葉だけだと難しいので早速作成していきましょう！

作るもの

Webサイトを作る前にとっても大事なことである作るものを定義していきましょう。
今回は、「One Page Scrool」という機能を試していくという目的なので、簡単なものにしていこうと思います。

下記のように設定します。

ーーーーーーーーーーーーーーーーー

【サイトタイトル】私が好きな国ランキング
【内容】
１位：台湾
➡ジブリの千と千尋の神隠しの街並みとしているといわれているところに行ってみたい
２位：イギリス
➡街並みが好き
３位：イタリア
➡ベネチアの水の都に興味がある
【ページ数】４ページ
【使用ツール】
エディター：VScode
画像:Pixabay ※いつもお世話になってます！！

ーーーーーーーーーーーーーーーーー

こんなところでしょうか。
本来なら、画面のイメージ図とかも作成した方がいいのかもしれませんが、今回は省略します。

ではさっそく作っていきましょう！

必要なものをそろえる

「One Page Scrool」を使うには、下記２つのファイルが必要となります！
・jquery.onepage-scroll.min.js
・onepage-scroll.css

これは、こちらからダウンロードして使わせていただきましょう！

あと、jQueryの読み込みも必要になってきます！すでに使い方を知っている方は各々の読み込み方で問題ないのですが、「は？なにを言っているの？」という方は下記コードをHTMLのBody内に書く必要があることを覚えておいてください！

ーーーーーーーーーーーーーーーーー

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

ーーーーーーーーーーーーーーーーー

と必要なものはこんな感じです。
それでは書いていきます！

作成していこう

では作成していきます。
まずはHTMＬからです。下記のようになります！

ーーーーーーーーーーーーーーーーー
【index.html】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
<link rel="stylesheet" href="index.css"><link rel="stylesheet" href="onepage-scroll.css">
</head>

<body>
<div class="main">
　<section class="inner1">
　　<div class="content">
　　　<div class="font">
　　　　<h1>keitaの行きたい国ランキング</h1>
　　　　　<p class="txt">
　　　　　私が行きたいな～と思っている国をランキング形式で紹介します♪
　　　　　</p>
　　　 </div>
　　</div>
　</section>
　<section class="inner2">
　　<div class="content">
　　　<div class="font">
　　　　<h1>１位台湾</h1>
　　　　　<p class="txt">ジブリファンの私が行きたくないはずがない！!
<br>千神風の建物が多いとのことなのでぜひ行ってみたい！！</p>
</div>
　　</div>
　</section>
　<section class="inner3">
　　<div class="content">
　　　<div class="font">
　　　　<h1>２位イギリス</h1>
　　　　　<p class="txt">すごい街並みがおしゃれ！！
<br>こんな街なら散歩が楽しそう♪</p>
　　　</div>
　　</div>
　</section>
　<section class="inner4">
　　<div class="content">
　　　<div class="font">
　　　　<h1>３位イタリア</h1>
　　　　　<p class="txt">イタリアといえばベネチアが有名！！
　　　　　<br>水の都で幻想的な日々を過ごしてみたいものです～</p>
　　　</div>
　　</div>
　</section>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="jquery.onepage-scroll.min.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</body>
</html>

ーーーーーーーーーーーーーーーーー

こんな感じです！
では、javascriptを書いていきます！

ーーーーーーーーーーーーーーーーー
【main.js】
$(function () {
$(".main").onepage_scroll(
{
sectionContainer:"section",
loop:false,
}
);
});

ーーーーーーーーーーーーーーーーー

となります。
処理は、「main内で「One Page Scrool」を発生させ、sectionごとに区切ります！
ループをしませんよ」という感じです。

本来なら、自作したindex.cssも記載した方がいいかもしれませんが、長くなってしまうので、割愛させていただきます。
興味のある方は最後にソースコードのＵＲＬを貼るので参照にしてみてください！

とコードが完成です！
次は、動作確認をしてみましょう！

動作確認

一画面ずつ表示させていきます。
下記のようになっています！

【一画面目】

【２画面目】

【３画面目】

【４画面目】

はい！しっかりできています！
これはなかなか楽しいですね♪

色々と活用できそうな機能だと思うので、今後活用していこうと思います！

こちらでソースコードを確認できますのでよかったら見てみてください!(^^)!

ここまで読んでいただきありがとうございました

2022-07-12

PHPでCSVを使って商品管理システムを作成しよう④

こんにちは！keitaです♪
CSVでデモの商品管理アプリを作成してみようということで、続きを行っていきます！

この記事では、CSVのデータ情報を削除する機能についてまとめていきます。

前回の続きからはじめていきます！

テンプレートエンジンに編集ボタンを追加

各データのアクション列に、削除ボタンを追加していきます！
編集ボタンの隣に配置しておきましょう！
前回書いたテンプレートエンジンのtable内を下記コードに置きかえします！

ーーーーーーーーーーーーーーーーー
【index.html.twig】

<table border="1">
<tr>
<th>商品ID</th>
<th>商品名</th>
<th>金額</th>
<th>在庫数</th>
<th>アクション</th>
</tr>

{% for data in csvArray %}
<tr>
<td>{{ data.商品ID }}</td>
<td>{{ data.商品名 }}</td>
<td>{{ data.金額 }}</td>
<td>{{ data.在庫 }}</td>
<td>
<input type="button" onclick="location.href='edit.php?id={{ data.商品ID }}'"value="編集">
<input type="button" onclick="location.href='delete.php?id={{ data.商品ID }}'"value="削除">
</tr>
{% endfor %}
</table>

ーーーーーーーーーーーーーーーーー

はい！これでOKです。
商品管理画面に削除ボタンが表示されたはずです。

見てみましょう！

出来てます！
では、削除の機能を作ってきましょう！

削除機能を作成

ラストの削除を作っていきます。
これは、CSVから対象のデータ行を消すという処理になります！

では、ＰＨＰ処理を書いていきます。
まずはCSVの処理クラスに削除メソッドを書いていきます！
ーーーーーーーーーーーーーーーーー
【class/csv.php】

public function delete($del_id){

$file = file($this->file);
unset($file[$del_id]);

file_put_contents($this->file,$file);
}

ーーーーーーーーーーーーーーーーー

こんな感じです。
では、呼び出す側の処理も書いていきましょう！
ーーーーーーーーーーーーーーーーー
【delete.php】
<?php
session_start();

$id =$_GET['id'];
unset($_GET['id']);

// CSVを取得
// ファイルを読み込む
require_once('class/csv.php');
// インスタンス化
$csvread_obj = newcsv("csv/item.csv","r");
//配列調整

$del_id = $id - 1; 
$csvread_obj -> delete($del_id);

header('Location:index.php');
exit;

?>

ーーーーーーーーーーーーーーーーー

はい！これで完了です♪
では動作確認です！

OKです！
しっかり削除されてますね(#^.^#)

これでＣＳＶデータを表示、追加、編集、削除の機能を実装できました！
完成です！

ここまでお付き合いいただきありがとうございました！！

最後に

これまで長く色々書いてきましたが、多分分かりにくい点が多々あったかと思います。
それはすいませんでした。
こちらにソースコードを載せているので、よかったら参考にしてみてください！
それではここまで読んでいただきありがとうございました！

begginerkun.hatenablog.com

2022-07-08

PHPでCSVを使って商品管理システムを作成しよう③

こんにちは！keitaです♪
CSVでデモの商品管理アプリを作成してみようということで、続きを行っていきます！

この記事では、CSVのデータ情報を編集する機能についてまとめていきます。

前回の続きからはじめていきます！

テンプレートエンジンに編集ボタンを追加

各データの列にアクション列を追加し、編集ボタンを追加していきます！前回書いたテンプレートエンジンで下記のコードを追加します！
table内を下記に変更します！

ーーーーーーーーーーーーーーーーー
【index.html.twig】

<table border="1">
<tr>
<th>商品ID</th>
<th>商品名</th>
<th>金額</th>
<th>在庫数</th>
<th>アクション</th>
</tr>

ーーーーーーーーーーーーーーーーー

テンプレートエンジンで編集ページを作成

編集画面もテンプレートエンジンで作成しておきましょう。
下記のように作成ます。

ーーーーーーーーーーーーーーーーー
【edit.twig.php】

<!DOCTYPE html>
<html lang="ja">
<head>
<title>{{ title }}</title>
</head>
<body>
<h1>{{ message }}</h1>

</body>
</html>
ーーーーーーーーーーーーーーーーー

これでOＫです！
データを保持した状態でフォーム形式に表示するようになっています。
では、ここにデータを渡したりするＰＨＰの処理を書いていきます。

編集機能を作成

まず、CSVのクラスに下記の機能を追加していきます。

ーーーーーーーーーーーーーーーーー
【class/csv.php】

private $serch = 0;

public function selectdata($result,int $num){
　　　　// echo $this->data_count;
　　　　for( $i=0; $i < $this->data_count; $i++){
　　　　　　if($result[$i]['商品ID'] === $result[$num-1]['商品ID']){
　　　　　　　　$this->serch = $i;
　　　　　　　　for($j=0; $j < $this->num; $j++){
　　　　　　　　　　$this->selectArray[$j] = $result[$i][$this->keys[$j]];
　　　　　　　　}
　　　　　　}
　　　　}
　　　return $this->selectArray;
}
ーーーーーーーーーーーーーーーーー

 
では、編集画面にデータを渡すＰＨＰ処理を書いていきましょう！

ーーーーーーーーーーーーーーーーー
【edit.php】
<?php
session_start();

$csvArray = array();
$selectArray = array();

$id =$_GET['id'];
$_SESSION['before_id'] = $id;

unset($_GET['id']);

// CSVを取得
// ファイルを読み込む
require_once('class/csv.php');
// インスタンス化
$csvread_obj = new csv("csv/item.csv","r");

$csvArray = $csvread_obj->getalldata();

$selectArray = $csvread_obj ->selectdata($csvArray,$id);

// テンプレートエンジンクラス
require_once('class/templete.php');

// インスタンス化
$templete_file = new templete('edit.html.twig');

// htmlに渡すデータ
$data = array(
    'title' => 'csv商品管理',
    'message'  => '商品編集',
    'csvArray' => $selectArray
);
$templete_file->dataset($data)
$templete_file->display();
?>

ーーーーーーーーーーーーーーーーー

はい！ここまでで、商品の一覧画面の編集ボタンを
押下したらこの商品の情報が保持された編集画面が表示されるようになっているはずです。

では動作確認です。。


出来ました！
しっかリ予定通りの動きになってますね！

次は編集の機能を作っていきます。
編集機能を作成またになりますが、クラスに機能を追加していきます。
これは、データをクラス側に与える処理と
編集(データの置き換え)の処理を書いていきます。

ーーーーーーーーーーーーーーーーー
【class/csv.php】

private $id;
private $name;
private $price;
private $stock;

publicfunction setid($id){
　　$this->id = $id;
}
public function setname($name){
　　$this->name = $name;
}
public function setprice($price){
　　$this->price = $price;
}
public function setstock($stock){
　　$this->stock = $stock;
}
public function edit($edit_id){
　　$file = file($this->file);
　　$after_text = $this->id . ',' . $this->name
　　　　　　　　　.','. $this->price .','. $this->stock."\n";　　
　　$file = str_replace($file[$edit_id],htmlspecialchars($after_text),$file);
　　file_put_contents($this->file,$file);
}

ーーーーーーーーーーーーーーーーー

次は、これを呼び出すＰＨＰ処理を書いていきます。

ーーーーーーーーーーーーーーーーー

【edit_comp.php】
<?php
session_start();

$id = $_GET['id'];
$name = $_GET['name'];
$price = $_GET['price'];
$stock = $_GET['stock'];

$before_id = $_SESSION['before_id'];

if ( empty( $id ) || empty( $name ) || empty( $price ) || empty( $stock )) {

　　$_SESSION['error_message'] = '入力されていない項目があります';
　　header('Location:edit.php');
 exit;
}else{
unset( $_SESSION['id'] );
unset( $_SESSION['name'] );
unset( $_SESSION['price'] );
unset( $_SESSION['stock'] );
unset( $_SESSION['before_id'] );
 
 // CSVを取得
 // ファイルを読み込む
 require_once('class/csv.php');
 // インスタンス化
 $csvread_obj = new csv("csv/item.csv","r+");

$csvread_obj ->setid($id);
$csvread_obj ->setname($name);
$csvread_obj ->setprice($price);
$csvread_obj ->setstock($stock);

$edit_id = $id -1;
$csvread_obj ->edit($edit_id);

header('Location:index.php');
 exit;
}
?>

ーーーーーーーーーーーーーーーーー

はい！これで編集の機能が完成しました。
動作を見てみましょう。


問題ないですね！
これで編集の機能は完成です！

次は削除の機能を作成していきます。
ここまで見てくださりありがとうございました！


前の記事
begginerkun.hatenablog.com
次の記事


 

ketyiaの作ってみた

このサイトでは作ってみたことを記事にまとめていきます！

Java Spring bootで簡単なCRMアプリを作成してみました！

Spring Bootについて

Model(モデル)

View(ビュー)

Controller(コントローラ)

CRMとは？

作成するものについて

作成したもの

Summarize in English

Vue.jsでTodoアプリを作成してみました

Vue.jsとは

作成したもの

「Vue.js」の書き方

slick.jsで画像をスライドさせるサイトを表現してみる！

作るもの

事前準備

作成していこう

引っかかった点

chart.jsを使ってグラフを使ったWebサイトを作ってみる！

作るもの

事前準備

作成していこう

動作確認

javascriptのOnePageScrollを使って、サイトを作ってみる！

作るもの

必要なものをそろえる

作成していこう

動作確認

PHPでCSVを使って商品管理システムを作成しよう④

テンプレートエンジンに編集ボタンを追加

削除機能を作成

最後に

PHPでCSVを使って商品管理システムを作成しよう③

テンプレートエンジンに編集ボタンを追加

テンプレートエンジンで編集ページを作成

編集機能を作成

編集機能を作成