PHPとmySQLを使って、SNS風のメッセージ掲示板を作成しました。

今回作成にあたり苦労した機能の実装方法をアップします。

【実装機能】

メッセージエリアに入力した「改行あり」の文字列をmySQLでDBから取得し、メッセージボードに出力する際に、改行の場所を維持したまま出力するという機能。

完成画像にあるように、メッセージ文がしっかりと改行されている事が分かると思います。

【完成画像】

私と同じように、未経験からエンジニア転職を目指しWEBサービスを作成している方にむけて、参考になれば嬉しいです。

【今回の実装した機能の流れ】

・textareaに「改行あり」のメッセージを入力
・POST送信でDBへメッセージを格納
・格納したメッセージをSELECT文で取得
・改行の位置はそのままに画面へ表示

※今回の記事ではPOST送信やSQLのSELECT文は問題ない前提です。

【コード】


function sanitize_br($str){
  
    return nl2br(htmlspecialchars($str, ENT_QUOTES, 'UTF-8'));

}

上記コードで、SQLから取得した文字列を、改行の位置はそのままに表示出来るように入力文字列を変換しています。

今回のように、ユーザーがtextareaに入力した文字を一度DBへ格納した後、画面へ入力文字を出力する場合、入力文字にHTMLダグやスクリプト言語を含めた不正なデータを入力される恐れがあります。

そのような不正入力を防止するため、textareaに入力される文字のうち、HTMLタグやスクリプト言語をコードではなくそのまま文字列として認識し出力してあげる必要があります（サニタイズ）。

そこで今回はサニタイズの機能に

①HTMLタグ「　< , > 」や「　"　」「　'　」「｀」は文字列として表示

②改行（\r , \n ,\r\n )を<br />に置換

以上の2つの機能を持つサニタイズを検討したところ、PHPで準備されている標準関数で解決が出来ました。

※記事投稿後にご指摘いただき「標準関数」へコード修正しました。

今回の標準関数により、不正入力によるページ遷移は不正画面の表示を防止した上で、
タグを挿入したことにより、改行位置はそのままに出力する事が可能です。

【本コードによるサニタイズ効果】

通常、<br>タグは、サニタイズしていなければHTMLタグと判断され、<br>が記入された場所で改行されます。
<div>もタグと判断され、本来はメッセージ画面には表示されません。
しかし今回の機能で、HTMLタグは全て文字列として扱われているため全て画面に表示されています。

逆に改行の文字コードである「　\r , \n ,\r\n 」はHTML上で入力されても画面表示の際に改行されないため<br>タグに変換しています。
そうする事で今回実現したかった「改行位置はそのまま文字列を画面に表示する」という機能を実現出来ました。

ちなみに何度も使う可能性があったため関数にしています。

是非、同じように改行ありのメッセージ連絡画面を実装したいと思っている方は是非参考にしていただければと思います。

もし、もっといい方法がある！という方は、是非教えていただけると嬉しいです！！

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