土木のおいさんWeb

はじめに

今回は少しハードルの高いことに挑戦しようと思います。土木系の仕事に携わっていると、良く点検やパトロール結果をスマートフォン等を用いてその場で入力しているのを見聞きします。いつもそのことを知るたびに格好いいなと憧れるばかりですが、実はその仕組みは作れるのではないかと思った次第であります。
ということで、道路パトロールの点検内容をWeb上で管理できるソフトを作成して行こうと思います。

Step1

ログイン画面の作成

それでは、ログイン画面の作成を行っていきます。
「Visual Studio Code」を起動し、「新しいテキストファイル」を選択します。

「htdocs」フォルダの下層に新しく「road」というフォルダを作成し、その中に、「login.php」というファイル名で保存します。

保存が完了したら、「!」を押し、その後「tab」ボタンを押します。

そうすると、「html」のベースのコードが表示されます。とっても便利です。

まず、画像のとおりタイトルをログインに変更します。
次に、このページの書式を指定していきます。今回は、cssファイルを作成せずに直接htmlファイルに書式を指定します。
htmlファイルにcss文を直接書くにはいくつかの方法がありますが、今回は、<style type="text/css">タグを使用します。
この中に、書式指定の内容を書いていきますが、「Day2」の内容と重複しますので中身の説明については割愛させていただきます。 (cssでググれば理解出来ると思います)
この内容が難しいと感じる方は、とにかく<head> タグ内で書式を指定できる。かつ、指定方法はcss文と覚えていただければ良いのではないかと思います。

Web画面に表示したい内容は<body>タグ内に書きます。
まずはタイトルを表示させます。
ここで先程指定したcssを反映させたいので、<div>タグを追加し、そこに「class」を「main」とすることでcssの内容と一致させます。
なので、タイトルは、このタグ内に書かないと反映できないので、この中にタイトルを書きます。

次に、パスワードを入力できる機能を追加します。
入力には、<form>タグを使用します。使い方については大変申し訳ないですが、ググってください。
ここで大事なのは「form」タグ直下の行と最後の行になります。
直下の行では特に、「method="post" action="login.php"」が大事になります。「method」で送る形式を指定しており、今回は「post」形式で送ることにしています。また、「action」は送り先を指定でき、今回は「login.php」、つまりこのページに送ることにしています。つまり、入力したパスワードはこのページに飛んでくることになります。
最後の行は送信ボタン機能になります。ここで大事なのは、「name="login"」になります。送信する際に、名前をつけて送信します。その名前の指定がこれに当たります。つまり、今回は「login」という名前で入力したパスワードが再度このページに飛ばされます。

ここからは送られたパスワードが合っているか判断する機能を追加します。つまり制御を必要とするのでPHP文が必要になります。
画面上部に移動し。画像のとおりPHP文が入力できるようにします。

まず、エラー用に変数「$error_message」を用意しておきます。中身は空にしておきます。
次にif文を使用します。もしPOST形式でデータが送られていたらif文以下を実行するようにします。「isset」は存在確認のコードになります。
ちなみに。変数「$_POST」は辞書形式の変数なので、キーと内容が対の配列形式でデータが格納されています。 (例 "password":1111,"id":"aaa","mail":"####@""".co.jp")
続いて、データのうちパスワードが「1111」であったら「topPage.php」というファイルに遷移するようにしています。(まだこのファイルは作成していません)
パスワードが「1111」で無ければ変数「$error_message」にコメントを格納するようにしています。

画像はログイン済みかどうかの確認コードになります。おいさんも良くわかりませんがこういうコードになるようです。

エラーメッセージを表示するコードを追加します。画像のとおりPHPコードを「body」タグ内に書くことで制御された内容を表示することができます。
これでこのファイルの作業は完了になります。なので出来上がりを確認しよう思います。

「MAMP」を起動し、現れたブラウザのURLに「login.php」が格納されている場所までのパスを入力します。 (わからない人は「Day1」を参照してください)

無事ログイン画面が表示されています。

Step2

トップページの作成その１

トップページのファイルを作成します。
「Visual Studio Code」を起動し、「新しいテキストファイル」を選択します。

今度は「topPage.php」というファイル名で保存します。

保存が完了したら、「!」を押し、その後「tab」ボタンを押します。
先程と同じく「html」のベースのコードを表示させます。

まずは、ログインできているかの確認する機能を実装します。コードは画像のとおりになります。
また、「ini_set('display_errors',"On");」はプログラムコードにエラーがあった場合に表示してくれるコマンドになります。なので、直接機能には関係ないです。

次に、タイトルを変更します。
また、ログインファイルでは直接css文をhtmlファイルに書いていましたが、今回は別ファイル(topPage_style.css)を作成してそれを読み込む形とします。
なので、トップページのスタイル等はすべてこのcssファイル内で指定していくことになります。
cssファイルの中身についてですが、かなりのボリュウームがあるので割愛します。ダウウンロードできるようにしておきますので直接確認してくさださい。

続いて、地図の実装になります。方法はいろいろあるようでしたが、今回はオープンソースWeb地図ライブラリの「Leaflet」を利用したいと思います。
これはオープンソースということで無料である上に、いろんな方が使い方をWeb上にアップしているので、おいさんでも何とか使えそうなので選びました。
「Leaflet」には、2つのファイルが用意されており、ひとつがcssファイル、もう一つがjsファイルになります。このjsファイルはJavascript言語で書かれているのでおいさんは詳しくはわかりません。
cssファイルは、先ほど作成した「topPage_style.css」ファイル内に中身をコピペしました。
jsファイルは結局、画像のとおりリンクを追加することにより取り込むことにしました。
ちなみに、Javascriptをhtmlファイルに実装するには、「script」タグで囲めば良いようです。これで「Leaflet」の機能が使えるようになりました。

では、地図を表示させる作業に移っていきます。
この作業は残念ながらJavascript言語による制御になります。なのであまりおいさんも理解しておりません。見よう見まねで作成していきます。
まずは、関数を作成していきます。Javascript言語を書いていきますので、「script」タグを作成し、その中で作業をしていきます。
といってもわからないので、わかるところだけ説明したいと思います。一つは、緯度・経度を入力するところがありましたので、東京タワーの緯度・経度にしています。
もう一つは「function」というコードですがこれが関数作成のコマンドのようです。また、使用する地図は国土地理院の地図にしています。

地図表示条件の関数ができたので、Webに表示させるコードを追加します。
よくわかりませんが、画像のコードを追加したら良いようです。

実際に出来上がりを見てみたいと思います。画像のとおり無事表示ができています。

地図表示ができたので、この地図に異常個所(支障木、ポットフォール等)を登録できる機能を追加していきたいと思います。
画像はcssの関係でタグを多く追加していますが、結局は、「<p class="btn"><a href="./anomalyCreate.php">異常箇所登録</a></p>」を追加しただけの内容になります。

これで、画像のとおりボタンが追加できています。次からはこのボタンが押されたときに開くページ「anomalyCreate.php」を作成していきます。

Step3

異常個所登録ページの作成その１

「新しいテキストファイル」を選択します。

「anomalyCreate.php」というファイル名で保存します。

まずは、ログイン確認のコードを追加します。
このコードはトップページを作成したときと同様のコードになります。

次にhtmlのベースコードを追加します。

cssでスタイル設定をします。今回は直接htmlファイルにcssコードを書き込み指定するようにします。

cssの続きになります。

cssコードの最後になります。

スタイルの設定が終わりましたので、いよいよ異常個所の内容を入力できるコードを追記していきます。
入力は「form」タグと「input」タグを使用すればできるようになります。
まず、「form」タグで入力内容の送り先を指定します。ここでは「createProcessing.php(まだ作成していません)」に入力された内容は送られるようになります。送る方法は「POST」形式で指定しています。
次に個々の内容を「input」タグで入力できるようにします。その際、入力形式を指定することができ、文字どおり「type」で指定できます。
1つ目の「type」は、「"hidden"」にしています。このタイプは画面に表示しないタイプになります。まさに隠すというこになります。
そのあとに「"name"」とありますが、「POST」形式は辞書形式で値を送りますので、そのあとの「"value"」の値、つまり「"astate”:"1"」の対で入力内容を送ることになります。
2つ目の「type」は「text」とありますが、これが自由に内容を入力できるタイプになります。ここでは「"registrant":入力内容」の対で入力内容が送られることになります。
最後の「"submit"」は単純に送信ボタンになります。

ここまでで一度画面を確認してみます。画像のとおりの見た目になります。

もう少し、入力内容を追加します。
追加項目は、「発見日」と「発見時間」と「緯度」と「経度」になります。画像のとおり日付や時刻を入力できるタイプも用意されています。
また、位置情報が必要になりますので、緯度・経度の情報を入力できるようにします。ただし都度それを調べて入力するのは大変なので後でその機能を持ったページを作成していきます。

追加した項目をまた画面で確認してみます。「発見日」と「発見時間」のスタイルが異なっていることがわかると思います。

さらに項目を追加します。今度は「分類」と「異常内容」になります。
入力スタイルはラジオボタンというタイプになります。これはある選択肢から一つを選ぶ際に有用になります。
コードは画像のとおりになります。

これも一度画面を確認してみます。画面のほうがイメージが湧きやすいと思います。

まだ項目を追加します。これで最後になります。今度は「緊急度」と「詳細」になります。
詳細欄は自由に入力できるように、「textarea」というスタイルを採用しました。
コードは画像のとおりになります。

これも一度画面を確認してみます。これで入力項目は完了になります。

次に残しておいた緯度・経度を入力するページを作成していきます。
なのでそのページに遷移するボタンを作成します。
コードは画像のとおりになります。

ボタンを追加した画面は画像のとおりになります。

最後にトップページに戻るボタンも作成しておきます。

Step4

緯度・経度入力用ページの作成

緯度経度入力のための画面を作成していきます。
「新しいテキストファイル」を選択します。

「positionReg.php」というファイル名で保存します。

一度「Visual Studio Code」を離れて、イメージファイルを集めます。
必要なイメージファイルは、画像のとおりになります。
「road」内にさらに「marker」フォルダを作成しその中に格納しています。
このイメージファイルの「crosshairs.png」をまず使用ます。

「Visual Studio Code」に戻ります。
まず、ログイン確認のコードを追加します。

htmlファイルのベースコードを追加します。

cssコードを追加して表示スタイルを指定します。
今回は、直接htmlファイルに書き込むことにしています。

続きになります。

次に、画面に地図を表示する作業をしていきます。これはトップページで行った作業と同様になります。まず、「leaflet」用のcssとJavascriptを読み込みます。
ただし、htmlファイル上でcssの設定を行いましたので、「leaflet」のcssのみ格納したファイルを作成し、それをリンクする形式としています。
このファイルは後にダウンロードできるようにしておきます。

これも前回と同様になります。画面に地図を表示するコードになります。

ここから、コードの中身がJavascriptになるのでおいさんもよくわかりません。
とにかく、まず上述の「crosshairs.png」を地図に表示するコードになります。
ただし、このままだと地図の「crosshairs.png」が連動してしまいます。

地図が動いても「crosshairs.png」は常に真ん中に来るように設定します。
画像が、そのコードになります。

「crosshairs.png」のある個所の緯度・経度を読み込むコードを追加します。

読み込んだ緯度・経度を画面に表示させるためhtmlコードを追加します。
これで、簡単に経度・緯度を取得できるようになります。
さらに、読み込んだ緯度・経度の値を「POST」形式で「anomalyCreate.php」ファイルに送るようにします。
これでこのページの作業はすべて完了になります。

最後に画面を確認したいと思います。
画像が完成した画面になります。

Step5

異常個所登録ページの作成その２

「positionReg.php」から「POST」形式で送られた緯度・経度データを受け取ります。
まず、変数「$datas」に送られてきたデータを格納します。
データは辞書形式なので、欲しいデータの「キー」を指定して、緯度・経度ぞれぞれの変数に格納します。

htmlファイル上の画面の緯度・経度に受けとったデータを表示させます。
コードは「echo」コマンドを使って表示させます。

Step6

データベースの作成その１

異常個所入力画面が完成しましたので、ここからはそのデータをデータベースに保存する作業を行っていきます。
まずは保存先のレンタルサーバーにデータベースを作成する必要がありますが、いきなりだと怖いので、まずは「MAMP」が用意しているデータベースを利用し動きの確認をしていこうと思います。
ということで、「MAMP」を起動し、「TOOLS」を押します。

「PHPMYADMIN」を選びます。

「Databases」を選びます。

ここで、新たにデータベースを作成します。
「Creat databases」のところにデータベース名を入力します。
データベース名は何でも良いので、今回は「road_db」としました。
使用する文字はデフォルトのままにしています。
入力が完了したら「Create」ボタンを押します。

画面が遷移すると思います。
その左側に、今回登録したデータベースが新たに追加されていると思います。
次に、このデータベースの権限をもつユーザの登録を行います。
画像の、「New」を押します。

「road_db」の行の「Check privileges」を選択します。

「Add user account」を選択します。

ここで、まず、「User name:」(任意)と「Host name:」(今回は自分のパソコンを仮サーバとするのでlocalhostにします)と「Password:」(任意)を入力します。
入力した内容は後で使用しますので、忘れないようにメモ等をしておきます。

次に権限範囲を決めます。
今回は画像のとおりにしました。
すべての入力が完了したら「Go」ボタンを押します。これでユーザ登録は完了になります。

ここからは、実際にデータベースに入れる内容と形式を決めていきます。
トップ画面に戻り、「road_db」を選択します。

まず、新たに表を準備する必要があります。なのでテーブル名(表)と行数を決めないといけないです。
テーブル名？となりますが、何でもいいので名前(任意)を決めます。
次に、行数ですが、データの種類分だけ必要になります。
今回は、異常個所の項目分の11になります。
入力が完了したら「Go」ボタンを押します。

ここでは、表に入れる項目の細かい設定を行っていきます。
まず、名前ですが、特に指定はありません。好きな名前にして良いようです。ただしおいさんは混乱するので「anomalyCreate.php」の「name」と同じにしています。次に、「Type」です。「id」はもちろん整数なので「INT」にしました。「発見者」等はそこまで文字数を必要としないことから「VARCHAR」としています。ただし、横に最大文字数を入力しないといけないです。
その他は画像のとおりに設定しています。
最後に、「id]では「IndexとA_I」に画像のとおりにしています。これで番号を自動で振ってもらえるようになります。
すべての入力が完了したら「Save」ボタンを押します。これでデータベース関連の一連の作業が完了になります。

Step7

データベース接続ファイルの作成

「Visual Studio Code」にもどり、「新しいテキストファイル」を選択します。

「dbc.php」という名前で保存します。

中身のコードになりますが、他のファイルで使用しやすいようにクラスを定義します。今回クラス名は「Dbc」としました。
次にメソッドを定義します。これにより別ファイルで使用する場合、クラス「Dbc」内のメソッド名を指定することでその中身の内容を実行できるようなります。
メソッド名は「dbConnect」としています。
定義自体は嵌まりにくいと思いますが、「dbConnect」でデータベースと繋がるとの理解だけしてもらえば良いように思えます。

「dbConnect」の中身のコードになります。接続するコードは決まったコードになりますのでこんなもんだと理解してもらえば良いと思います。
また、ポート指定「port=8889」をしていますがおいさんのパソコンではこれをしないとエラーがでるのでしていますが、普通はいらないようです。

Step8

データベース操作ファイルの作成その１

前回まででデータベースに接続するコードを作成してきました。ここからは、接続した後にどのようにデータをデータベースに保存するかを操作するコードを作成していきます。
操作方法を指定する命令文を「SQL文」というようで、その内容に従って今からコードを作成していきます。
それでは、「新しいテキストファイル」を選択します。

「sqlEngine.php」という名前で保存します。

先程作成した「dbc.php」ファイルを一度だけ読み込みます。読み込み命令文は「require_once」になります。

「Sqe」というクラスを作成します。これを作成しておくことにより、別ファイルでこの中で作成したメソッド(機能？)を呼び出し使用できるようになります。
また、「extends Dbc」とすることで、先程作成した「dbc.php」ファイル内の「Dbc」クラスを継承する、すなわち「Dbc」クラスもこのファイルに存在するみたいな感じになります。(すみません。うまく伝えられないです。)

それでは、この中にメソッドを追記していきます。
欲しいのは異常箇所の内容をデータベースに保存する機能です。
なので、メソッド名(関数名)として「dataCreate」とします。また引数としてひとまず「$datas」としておきます。

まず、SQL文を作成します。新規保存の場合のSQL文は「INSERT INTO」になります。その後にテーブル名を指定し、その後保存したい項目を指定します。今回はデータベースで作成した項目になります。
次に、「dbConnect」メソッドでデータベースに接続する機能を変数「$dbh」に格納します。
このとき、「this」とありますがこれはこのファイルにある「dbConnect」メソッドを使用しますという指定になります。実際は他のファイルにあるのですが、継承しているのでこの形になります。

まず、保存に失敗したときに備えて、try文を使用します。
次に変数「$stmt」に「$dbh->prepare($sql)」というコードで新規保存をする準備機能を格納します。
その下の行から実際入力したデータを保存していきます。まだ、「$datas」の中身に値を格納していませんが後に格納する作業をしていきます。
データの指定が終わりましたら「$stmt->execute();」で新規保存を実行します。ただし、あくまでもこのコードは「dataCreate」というメソッド(関数)なのでこの段階でデータベースに値は保存されていません。

Step9

異常箇所データの新規保存実行

新規保存のメソッドの用意ができたので、保存実行するファイルを作成します。
「新しいテキストファイル」を選択します。

ファイル名ですが、「anomalyCreate.php」ですでにファイル名を指定していますので、その名前を採用します。
画像は、すでに入力している「anomalyCreate.php」ファイルのコードを一部を表示しています。

「createProcessing.php」というファイル名で保存します。

次に、データベースにデータを保存するので、「sqlEngine.php」ファイルを1度読み込みます。
その後に、「anomalyCreate.php」から「POST」形式で送られてきた異常箇所の内容の入ったデータを受け取り、変数「$datas」に格納します。この変数はすでに「sqlEngine.php」内のメソッド「 public function dataCreate($datas)」内で使用しているものと同じになります。
これで、入力された情報がデータベースの保存まで繋がりました。後は保存を実行するまでです。

「dataCreate」メソッドを使用しデータを保存する前に、バリデーションと呼ばれる者をします。
これは、入力条件(整数)や制限(必須項目、文字数)と異なる内容の値が入力された場合にデータベースに保存しない措置を講じることをいうそうです。
なので、まず配列「$errMsgs=array();」を宣言して、その中にエラー内容を追加していく形になります。
バリデーションの内容はコードのとおりになります。

バリデーションのつづきになります。

バリデーションが完了したので、いよいよ「dataCreate」メソッドの実行になります。まず、「Sqe」クラスをインスタンスします。
次に、変数「$errMsgs」が0、つまりバリデーションに引っかからなかったら、「dataCreate」メソッドの実行をします。
これで初めて、データベースに異常箇所の内容が登録できます。

ここからはバリデーションに引っかかった場合の処理をします。
まずは、「!」→「TAB」キーでhtmlのベースコードを追加します。ついでにタイトルも変更します。

css文を追加し、スタイルを決定します。

「foreach」文で繰り返しエラーメッセージを表示するようにします。

戻るボタンも追加しておきます。これでこのファイルのコードの入力は完了になります。

新規保存が完了したので、一度実行して実際に値を入れてみます。

新規保存後のデータベースの画面です。表示が小さいですが無事値が保存されています。

Step10

トップページの作成その２

「topPage.php」のコードに戻ります。
ここでは、先程データベースに登録した位置情報を地図にマーキングし、そのマークを選択するとポップアップが出るようにしていきます。
まずボタンを作成します。コードは画像のとおりになります。この中に「allShow()」という関数を設定しています。
なので、ボタンが押されると関数「allShow()」を実行する形になります。

ここからはjavascript言語になりますのでおいさんはあまり理解できていません。
とりあえず、変数を宣言します。
各変数は、
「Layer_10」:マーキング用のレイアー
「Markers_shape」:マーカーの形式を格納するための変数
「Markers_shape_pos」:マーカーの表示位置(緯度・経度)を格納する変数
「Markers_shape_lnk」:ポップアップをクリックした場合の遷移先のパスを格納する変数
「Markers_shape_icn」:マーカーのアイコン画像を格納する変数
になります。

画像はjavascript言語とphp言語の合わせ技のコードになります。とっても面倒です。
マーキングはデータ数分だけ表示する必要がありますので、繰り返し文「foreach」を使用します。
ただし、「$fdatas」にはまだ何もデータが入っていない状況になります。この作業は後ほど行います。

「foreach」文内のコードを追記していきます。
変数「Markers_shape_pos」に緯度経度の値を格納します。

変数「Markers_shape_lnk」に遷移(リンク)先のパスを格納します。
非常に見づらいのですが、aタグにより「upLoad.php」へ画面遷移するようになっています。
「upLoad.php」はまだこの段階では作成していませんが、後ほど作成します。

次はマーカーの形式を変数に格納していくのですが、その前にマーカーのファイル名を確認していきます。
今回使用するマーカーのアイコンは画像のとおりになります。
異常箇所の対応状況により色を変えようと思います。

画像はマーカーのアイコンを指定するコードになります。コードの中身はあまり理解できていませんが、とにかく変数「astate」に格納されている数字によりマーカーの種類が変わるように設定しています。
変数「astate」は、ファイル「upLoad.php」作成時に併せて設定していきます。

マーカーの設定が終わりましたので、地図に表示させる命令文を作成します。
そのコードは画像のとおりになります。
あとは、値が格納されていない変数「$fdatas」の処理が終わればマーカー表示が可能になります。

ファイル上部に移動し、sqlEngine.phpファイルから変数「fdatas」にデータを受け取る仕組みだけ先に作成しておきます。
そのメソッドとして、「getAll()」という名前を先に設定しておきます。
これで、ひとまずこのファイルでの作業は一旦終了になります。

Step11

データベース操作ファイルの作成その２

sqlEngine.phpファイルにメソッド「getAll()」を作成していきます。
今回はデータベースにあるすべてのデータを取得するメソッドになります。
まずは、メソッド名を指定するコードを書きます。

すべてのデータを取り出すコードは画像のとおりになります。
こういうものだと覚えるしかないように思えます。

情報がデータベースから取り出せるようになったので、一度動きを確認してみます。
具体的には「すべて表示」ボタンを押し、マークが表示されるかの確認になります。
画像はその実行結果で、無事マーキングされていることが確認できます。

次に、ポップアップが表示されるかの確認になります。
マーカーをクリックするとポップアップが無事表示されました。
ただし、この遷移先のファイルは作成していないので、次からこのファイルの作成をしていきます。

Step12

データ更新ファイルの作成その１

今回のソフトの目的は、道路管理用になりますので、修繕が完了した等の状況の変化に対して、情報も更新する必要があります。
ここから作成するファイルは情報更新用になります。
それでは、「新しいテキストファイル」を選択します。

名前を付けて保存します。ファイル名は、「topPage.php」で事前に指定していた「upLoad.php」になります。

いつものログイン処理を行います。

ここで、新たな関数を設定します。それは、htmlspecialchars関数になります。
これは、PHP上でコードをテキストとして表示させる時に使うメソッドということなんですが、ようはセキュリティ対策のようです。
使い方としては、出力文字にこの機能を噛ませば良いようです。

「topPage.php」ファイルから送られてきた「id」を「GET」形式で受け取ります。

「!」→「TAB」キーでhtmlのベースコードを追加します。ついでにタイトルも変更します。

css文を追加し、スタイルを決定します。
今回は少し長めのコードになります。

続きになります。

これでやっと終わりになります。

「body」タグ内を入力していきます。
まずは、新規登録した内容を追加していきます。
画像は、発見者、発見日および発見時間になります。
また、ここでの入力内容の送り先は「upLoadProcessing.php」になります。これもまだ作成していない状況になります。

新規登録した内容を追加の続きになります。

新規登録した内容を追加の続きになります。
これで最後になります。

ここからは、更新時に新しく追加する項目になります。
まずは、状態の項目になります。新規登録時は1つまり未処置を指定していることになっています。
ここで、状態の指定を変更すると、マーカーの色が変わります。
次に、現場状況がわかるように写真を保存できる機能を加えます。
コードは画像のとおりで、「name="MAX_FILE_SIZE" value="4194304"」とすることで、写真のサイズを4MB以下とする条件にしています。
また、「img」タグで登録した写真を表示するようにしています。
最後に、写真のコードで「accept="image/*"」としていますので、写真格納用のフォルダ「images」を作成しておきます。

一度コード入力を離れて、上述のフォルダを作成しておきます。

さらに作業(工事)依頼業者、作業(工事)完了日、完了時の写真(作業後)およびコメントの入力鋼網を追加します。
最後に「submit」ボタンを追加して追加の入力項目は完了になります。
ただし、この状態では、新規登録した内容が反映されていません。
また、今回新たに追加した項目もデータベース内に保存できる状態にない状況です。
なので、次からはそれらの作業をしていきます。

Step13

データベースの作成その２

更新で新たに追加して項目をデータベースにも追加していきます。
「MAMP」の「phpMyAdmin」を起動し、「road_db」→「road_table」を選択します。

「Structuer」を選択します。

足りない項目は7つになりますので、Addを7にし「GO」ボタンを押します。

追加項目の名前と種別は画像のとおりとしています。項目すべての入力が完了したら「Save」ボタンを押して保存します。

Step14

データベース操作ファイルの作成その３

sqlEngine.phpファイルにメソッド「getById()」を作成していきます。
今回は要求されたIDに該当する情報をデータベースから取り出すメソッドを作成していきます。
まずは、画像のとおりメソッド名の指定から行います。また、ID番号が必要ですので、引数に変数「$id」を指定しています。

次に、変数「$id」に番号が格納されてない場合の処理をします。
番号が格納されていれば次の処理に進みデータベースへの接続準備をしていきます。
画像では変数に「dbh」にデータベース接続の機能を格納するまで入力しています。

次にSQL文の準備と実行を行います。1案件分のデータをデータベースから取り出すには「SELECT*FROM」を使用することによって実行できるようです。

実行が完了しましたので、その結果を変数「$result」に格納して、メソッドとしては、その結果のデータを返して完了になります。

Step15

データ更新ファイルの作成その２

先程作ったメソッドを早速使用してみます。
「upLoad.php」のコードに戻り、「getById」メソッドを呼び出し変数「$result」に結果を格納します。

取り出した情報をそれぞれ変数に格納していきます。

現在、更新用のページの各項目は空白状態になっています。
なので、以前入力した情報を反映させる必要があります。
現段階で、以前の情報は各変数に格納されている状態なのでこれを各項目で表示させるようにします。
表示方法は簡単で、PHP文を差し込んで行けばよいだけになります。

ラジオボタンによる選択は、あらかじめどのボタンにチェックを入れておくかが問題になります。
なのでif文を用いて変数に格納されている番号によりチェックをすることにしています。

同様の作業を行います。

これで最後になります。

Step16

更新データの保存実行ファイルの作成その１

新規保存のメソッドの用意ができたので、保存実行するファイルを作成します。
「新しいテキストファイル」を選択します。

保存するファイル名は、「upLoad.php」ファイルで指定している「upLoadProcessing.php」とします。

上記のファイル名で保存します。

いつものログイン処理とエラーメッセージを表示させる処理をします。

これまで、POST形式で送られたデータは「$datas=$_POST;」などのように「$_POST」で受け取っていましたが、今回は、「upLoad.php」ファイルで「enctype="multipart/form-data"」としています。
この場合は「$_POST」で受け取らず別の形式で受け取ることになります。

一つ目の受け取り方は、「$_FILES[]」になります。
これは画像等ファイルを所得する場合の方法になります。
ここでは最終的に変数「$filePath1」にパスとファイル名を格納することを目的としています。
2行目の「basename()」は、セキュリティー上の対策のため必要とのことです。なのでファイル名を取得する際はかましておきましょう。
3行目の「$file1['tmp_name']」ですが、所得したファイルはtmpファイルとしてどこかに一時保存されるようです。ここではそのファイル名を変数に格納する作業になります。
7行目の「date('YmdHis')」ですが、新しく保存するファイル名が他のファイル名と同じにならないように保存する時間をファイル名に追加することにしています。

残りの変数「$filePath*」も同様の作業をします。

もう一つの受け取り方は、「filter_input()」になります。
( )内のコードはこういうもんだとおいさんは理解し気にしていません。残りの項目を所得していきます。

残りの項目になります。

すべての項目を所得しましたので、ここからはバリデーションを行っていきます。
まずは、バリデーションではじかれた場合は、エラーメッセージを表示したいので、配列「$errMsgs」を宣言します。
次に、必須項目に入力がないか値がゼロの時に対処するコードを追記し、「true」の場合は、エラーメッセージを配列「$errMsgs」に格納するようにします。

文字数の項目を設けているところがありますので、その時もエラーメッセージが出るようにしておきます。

ここでは、写真画像の容量が4MBを超えた場合にエラーメッセージが出るようにします。

取得したファイルが画像形式であるか確認します。
今回は「in_array」関数を使用します。この関数は、配列の中に指定した値(今回の場合は拡張子)が存在するかを調べるためのものになります。
また、「strtolower」関数を使用していますが、これは、アルファベット（英字）部分の大文字を小文字に変換する関数になります。
これは取り込むファイルが必ずしも小文字の拡張子ではないかもしれないので、その対策をしています。
これで、バリデーションは完了になります。

バリデーションまで完了しましたので、いよいよデータベースに保存する作業をしていきます。
なので、まずは「Sqe」クラスをインスタンスしておきます。
また、エラーがある場合は保存を中止するようにしますので、if文でエラーメッセージがない場合のみ実行するようにしておきます。

まだ作成していませんが、「dataUpdate()」を更新用のメソッド名とし、そこに各項目の値を引数として実行するようにしておきます。
ただし、画像に関しては別メソッドで保存するようにしますので、引数からは除外します。

Step17

データベース操作ファイルの作成その４

sqlEngine.phpファイルにメソッド「dataUpdate()」を作成していきます。
今回は指定されたIDに該当する情報をデータベースに上書きするメソッドを作成していきます。
上書きを実施するSQL文は「UPDATE」で、以後のコードは画像のとおりになります。

残りの内容は、新規保存の時と同様の書き方になりますので、説明は割愛します。

上書きのメソッドは完了しましたが、ファイルを行ったり来たりするのが面倒なので、画像を保存するメソッドも作成しておきます。
画像は、「$filePath1」用のコードになります。
見てもらうとわかると思いますが、コードの内容が「dataUpdate()」と何ら変わりません。
なぜ分ける必要があったかというと画像に関しては前のファイルが存在している可能性があるため、それを消去する作業を考慮して別のメソッドを設けるようにしました。

残り3つの「$filePath*」についてもメソッドを作成します。
これで、このファイルでの作業は完了になります。

Step18

更新データの保存実行ファイルの作成その２

「upLoadProcessing.php」ファイルに戻ります。
まず「is_uploaded_file()」関数でtmpファイルがあるか？すなわち新たに画像ファイルを保存する必要があるかの確認をします。
次に、id番号を元にデータベースから再度データを所得し、画像パスのデータがあればそのパスをもとに画像ファイルを削除します。
削除は、「unlink()」関数で実行できるようです。
その次に一時的に保存されているtmpファイルを正式な画像ファイルとする作業を行います。そのパスを「move_uploaded_file」関数で格納します。
最後に、データベースに保存するメソッドを使用しパスをデータベースに保存します。

残り3つの「$filePath*」についても同様のコードを追記します。
これで、このファイルでのPHPの作業は完了になります。

htmlのベースコードを追加します。
ついでにタイトルも変更しておきます。

スタイル用のcss文を追加します。

エラーメッセージがあれば「foreach」を用いてすべて表示するようにします。
また、保存後に前の画面に戻れるように「a」タグのボタンも配置しておきます。

これまでで、情報の更新機能が完了しているはずなので、ここで実際の動きを確認したいと思います。まず、「topPage.php」画面になります。アイコンを押して「更新」が表示されますのでこれをクリックします。

「upLoad.php」ファイルに遷移しています。
表示画面の上部は新規入力時のデータになりますので、下部の画面に移動しデータを追加したいと思います。

画像が今から入力していく画面になります。

テストなので適当に入力してみます。これで更新ボタンを押してみます。

画像は、データベースに保存し、そのデータを読み込んだ「upLoad.php」の表示画面になります。写真も無事表示されていますし、その他の情報も更新できていました。

状態を「処置完了」としたのでマーカの色も変化します。
画像のとおり黒色に変化していることがわかると思います。これで、主な一連の機能は完成しましたが、案件を消すや案件の一覧表示や実際にレンタルサーバーへの移動なのどまだまだやることは残っていますが、あまりに長くなるのでここで一旦この回は終了にします。
続きは、「Day5」で行います。