パッケージ共通/カスタマイズしよう！/項目を追加しよう！/テキストエリア形式

テキストフィールド形式 †

このSTEPでは、テキストフィールドを持った項目を追加します。
これは「給与」のような項目の事です。

今回は例として、求人情報の項目に「求める人物像」という入力必須項目を追加します。
テキストフィールド形式の項目の追加は以下のような手順で行います。

※この項目が入力されていないと情報を登録できない事とする

テキストフィールド形式

↑

デザインテンプレートを開く †

まず、項目を追加したいページのテンプレートを開きます。
今回は、求人情報の登録項目を追加しますので、下記のテンプレートを開きます。

jobsystem/template/pc/job/Regist.html

上記のテンプレートは、企業がログインした状態で以下のURLから表示されるページの物です。

設置先のURL/regist.php?type=job

↑

デザイン上に項目を追加する †

まず、デザイン上に項目を追加しましょう。

通常のソースコードの例

<tr>
<th>求める人物像</th>
<td colspan="3"><textarea name="character" cols="50" rows="3"></textarea></td>
</tr>

フォームパーツを含むHTMLソースは大抵このような感じで書くと思いますが、
これを、当システムのフォームパーツの書き方に変更して下さい。

以下のように、テキストエリアを出力するコマンドコメントを記述します。

<!--# form textarea character 50 3 #-->

このコマンドコメントは以下のような意味を持つ物です。

フォームパーツを出力しなさい
テキストエリア形式で出力しなさい
フィールド名はcharacterにしなさい
テキストエリアのcolsは50にしなさい
テキストエリアのrowsは3にしなさい

この変更を保存してFTPでアップロードし、一度表示を確認してみましょう。

コマンドコメントで書いたコードがテキストエリア形式で表示されていますか？

それでは、ここに入力されたデータを実際にデータベースに登録できるようにしましょう。

↑

データを格納するフィールドを設定する †

まずはフィールドの設定を行います。

以下のファイルを開いてください。

jobsystem/lst/job.csv

エクセルで開いた場合、上の画像のようになります。

以下は、このファイルのA列からF列までのデータの説明です。

A列	B列	C列	D列	E列	F列
フィールド名	データ型	文字列の長さ	登録時必須チェック	編集時必須チェック	入力内容チェック

※より詳しい説明・入力例は項目定義ファイルを確認してください。

今回は、登録時と編集時に必須チェックを行いますのでA列とB列、D列とE列の4つを入力します。

A列にフィールド名「character」を
B列にはデータ型「string」を、
C列は文字列の制限ですので空白のまま、
D列に登録時に必須チェックを行う事を意味する「Null」を
E列に編集時に必須チェックを行う事を意味する「Null」を、それぞれ入力して下さい。

※今回の例では、必ず一番最後の行に追加して下さい。

これを保存し、FTPで以下の場所に上書きアップロードします。

設置先URL/lst/job.csv

アップロードが終わったら、tool.phpにアクセスしパスワードを入力し認証を行って下さい。
初期パスワードはreadme.txtを確認してください。

このままjobのインポートをクリックすると、データが初期化(又は前回のエクスポート時点にロールバック)されてしまいます。
今回は現時点のデータを維持したまま、フィールドをセットし直したいだけなので、以下の手順で行います。

jobのエクスポートをクリックし、SQLデータベースの内容をサーバー上でデータを書き出します
その後、jobのインポートをクリックし、もう一度SQLデータベースにデータを流し込みます

※項目を最後に追記する形を取っていない場合は、エクスポート後にCSVをダウンロードし、編集する必要があります
※既存データの位置に変更が入らない場合のみ、上記の手順を行う事ができます
※この手順を行った場合は、作業後にFTPからtdb以下のjob.csvを削除しましょう。もしくはアクセス制限を掛けておく
※既に運営中のサイトで作業を行う場合は、細心の注意が必要です。

↑

必須入力エラーを設定する †

項目に何も入力されていない場合、エラーを出力するようにします。

上の画像は入力エラー時に表示される画面の例です。

入力エラー時には背景の色が変わる
入力エラー時には「～が入力されていません」等の文言が表示される

この二つをそれぞれ設定する必要があります。

以下のファイルを開いてください。
登録ページと併せて編集ページの作業も行うと効率が良いでしょう。

jobsystem/template/pc/job/Regist.html　※求人情報の登録ページ
jobsystem/template/pc/job/Edit.html　※求人情報の編集ページ

それでは、エラー時の背景色とエラー時の文言にわけて説明していきます。
2つの修正が終わったらFTPでアップロードし、動作を確認してください。

↑

エラー時の背景色を変える †

エラー時に背景色を変える為に、そのフィールドでエラーが出た時にvalidateという文字列のデータを受け取ります。

<td class="(!--# syscode is_validate character #--)">
<!--# form textarea character 50 3 #-->
</td>

このソースコードが、エラー表示時には以下のようになります。

<td class="validate">省略</td>

このように、tdにCSS(カスケーディングスタイルシート)のクラスを渡して実装していますので、
エラー時の背景色を変えたい場合は、CSSの該当箇所を修正します。

↑

エラー時の文言を挿入 †

エラー時に文言を挿入する為に、そのフィールドでエラーが出た時に指定のテンプレートを呼び出します。

下記のようにエラーを挿入したい位置にコードを記述します。

<td class="(!--# syscode is_validate character #--)">
<!--# form textarea character 50 3 #-->
<!--# syscode validate character #-->
</td>

呼び出される文言の設定は以下のファイルで行います。
これはエラー時の文言を集めたテンプレートです。

jobsystem/template/pc/job/RegistFaled.html

このファイルに以下のような形式で記述します。

<!--# readhead character #-->
求める人材像が入力されていません。<br />
<!--# readend #-->

※characterの箇所は適切なフィールド名を入力します。

↑

データを表示する †

これまでの手順で、データを登録する事が出来るようになりました。
それでは、登録したデータを表示させる為に登録したデータに関連するテンプレートを修正しましょう。

まず、登録内容の確認ページでデータを表示させる必要があります。
登録内容の確認ページのテンプレートは以下のファイルです

jobsystem/template/pc/job/RegistCheck.html

入力されたデータを表示する為のコマンドコメントは次のように記述します。

<!--# value character #-->

登録確認ページの他にも最低限、下記のファイルを修正しデータが表示されるようにして下さい。
※そのデータを表示する必要があるページの修正を行って下さい。

jobsystem/template/pc/job/EditCheck.html　※求人情報の編集内容の確認ページ
jobsystem/template/pc/job/Info.html　※未ログイン時に見た求人情報の詳細ページ
jobsystem/template/pc/job/InfoAdmin.html　※管理者から見た求人情報の詳細ページ
jobsystem/template/pc/job/InfoLogin.html　※求職者がログイン後に見る求人情報の詳細ページ
jobsystem/template/pc/job/InfoMy.html　※求人企業がログイン後に自分の求人情報を見たときのページ
jobsystem/template/pc/job/DeleteCheck.html　※求人情報の削除確認ページ

最後に、追加した項目の登録や編集を行い動作の確認を行って下さい。

登録や編集、データの表示は上手くいきましたか？

カスタマイズしよう！の表紙に戻る