2021/12/15 よりサイトリニューアルしました

CMSを自作してオリジナル動的ホームページをフルスクラッチ開発してみよう!③CMSの記事投稿画面(HTMLエディタ)の作成

htmlエディタ画面

前回、CMSのカテゴリ追加画面を作成しました。↓

 

今回は、記事投稿画面(HTMLエディタ)~データベースに登録までを作成したいと思います。

cms構成記事投稿

星マークがすでに作成済みのファイルになります。雲マークのファイルを、今回作成していきます。

※他に、javascriptファイルと、cssファイルも作成します。

HTMLエディタを自作して、それを投稿画面に利用するのですが、先に概要だけさらっと説明しておきます。

まず、作成するHTMLエディタ(edit_single.php)の画面はこんな感じです。↓

htmlエディタ画面

使い方としては、まず、画像を挿入したい場合、上部のファイル選択ボタンから任意のimgファイルを選択し、アップロードを押します。imgファイルは、settingディレクトリ配下にimgディレクトリを作成し、その中に保存するようにします。

続いてカテゴリを選択。

<h1>タグに囲まれている部分にタイトルを入力すると、右側のタイトルに入力した見出しが反映されます。

サムネイルを挿入したい場合は、imgファイル検索から、アップロードした画像(imgディレクト内にあるもの)が選択できるので、そこから「ファイル名」をコピーし、サムネイルのテキストボックスに貼り付け、OKをクリックします。右のサムネイルに画僧が反映されます。

本文については、上部にあるタグをクリックすれば、選択したタグがテキストボックス内に反映される仕組みになっています。したがって、基本はタグを選択して、そのなかに文章を入れていく感じになります。

画像も、先ほどと同じくファイル名をコピーし、img srcタグに埋め込めば、右側の本文に反映される仕組みです。

見切れていますが、下部にOKボタンがあるので、それをクリックすれば、次ページでプレビューが見れるようにしています。

このように、テキストボックスに入力した内容が、リアルタイムで他の要素に反映される仕組みは、後述しますがkey upイベントによるjavascriptによって実現しています。Ajaxなどを使えば、もっとスマートなものが出来たと思いますが、とりあえずこのような仕様のエディタを作成します。

では、初めに投稿記事を保存するためのテーブルと、imgファイル名を保存するテーブルを作成します。

 

テーブルの作成

blog(投稿記事を保存するためのテーブル)

投稿記事テーブル

データベース「test」に「blog」のテーブルを作成します。カラムは6とし、下記のように設定します。

名前データ型その他
codeintAI
categoryvarchar 値20
titlevarchar 値100
imgvarchar 値100
honbunvarchar 値5000
timedata

 

img(imgファイル名を保存するためのテーブル)

imgテーブル画像

データベース「test」に「img」のテーブルを作成します。カラムは6とし、下記のように設定します。

名前データ型その他
codeintAI
namevarchar 値100

投稿記事作成画面

edit_single.php

今回はcmsディレクトリ内にedit_single.phpを作成します。(settingディレクトリ配下に置くと、設計上の都合で後ほど作成する公開ページにイメージファイルが反映されない為です。)

このページは投稿記事作成画面(htmlエディタ)になります。

予め、settingディレクトリ配下に、img名のディレクトリを作成しておいてくださ。

formタグのmultipleで複数の画像をアップロード出来るようにしています。

今回のエディタでは、画像を先にアップロードさせておき、記事内に埋め込むにはアップロードした画像の名前をりようして、埋め込む形になっています。

ですので、submitボタンを押せば、upload.phpに遷移し、そこでimgディレクトリへの画像ファイルのアップロード、およびデータベースへの保存を行っています。

続くもう1つのformタグでは、タイトル、サムネイル、本文、の入力欄を作成しています。

ここで入力した内容がリアルタイムで右側のdiv boxに反映されるようにします。

これはjavascriptで操作するので、各入力欄にはidを振っておきます。また、post送信で値を次ページに送り、最終的にデータベースに登録出来るように、nameも付けています。

サムネイルの画像の欄には、アップロードした画像の名前を入力し、ボタンを押せばjavascriptのクリックイベントで右側のBOXに画像が表示されるようにしています。

h1やpタグのボタンは、これもjavascriptのクリックイベントで本文のエディタ欄に任意のタグが反映されるようにしています。

ファイル名検索のURLは、飛んだ先のページ(img.php)でアップロードした画像の一覧と名前が表示されるようにしています。つまり、そこで画像の名前をコピーして、サムネイルや本文中の任意の箇所に埋め組むことで、画像が表示される仕組みです。

CSS

settingディレクトリ配下にstyle2.cssを作成します。

エディタを使いやすくするためにスタイリングしているだけです。

この段階で、冒頭のエディタ画面になっているはずです。

javascript

settingディレクトリ配下にmain2.jsを作成します。

初めの定数には、画像が名前だけで表示されるように下準備しています。<img src..のhtmlタグですね。

続くクリックイベントは、サムネイルのテキストBOXの文字列を、ボタンが押された場合、nの変数に格納してます。

そして、定数のiとxの間にnを挟んでいます。つまり、<img src=”img/画像名”>が作成されます。

しかしこのままでは文字列として扱われるので、innerhtmlでその値を渡す事でhtmlタグと解釈され、右側のサムネイル画面に画像が表示されるようになっています。

後は同じようなものです。kye up関数は、キーボードのキーが上がった瞬間、つまり押された時に左側のtextareaの文字列が、innerhtmlで右側のBoxにリアルタイムで反映されるようになっています。

.valueによって、入力した文字列が消える事なく、キー入力した文字が連なり、そのたびに合計の文字列が右側に反映されています。

htmlのタグ挿入も、同じ要領ですね。

imgアップロード画面

upload.php

settingディレクトリ配下にupload.phpを作成します。

このページでは、記事に埋め込みたい画像ファイルをsetting/imgディレクトリにアップロードし、データベースに登録しています。

$_FILES[“image_data”]で、複数のimgデータを受け取っています。

count($img[“name”])で画像データの数をカウントし、foreachで受け取った画像データのtmp_nameとnameをそれぞれ変数に格納。forでカウント分ループさせて、tmp_nameとnameの配列を作っています。

続いてのfor文で、配列の内容をすべてimgディレクトリにアップロードさせています。

あとはデータベースに接続し、カウント分forでループさせて、nameの配列をテーブルに登録しています。

それでは、適当に画像ファイルをいくつかアップロードしてみます。imgディレクトリとデータベースに反映していればOKです。

img upload
imgテーブル反映

imgファイル名選択画面

img.php

settingディレクトリ配下にimg.phpを作成します。

このページでは、データベースを参照し、imgディレクトリにアップロードされている画像ファイルの一覧を名前つきで一覧表示させるページです。

記事に埋め込みたい画像ファイルは、このページから任意の画像名をコピーし、エディタのimg srcタグに埋め込みます。

プログラムについてはデータベースに接続して、テーブルの内容を表示させてるだけです。

img選択

ここまで出来れば、適当に記事を作成してみます。下のような感じになるはずです。↓

投稿記事チェック画面

single_check.php

cmsディレクトリ内にsingle_check.phpを作成します。(こちらもsettingディレクトリ配下に置くと、設計上の都合で後ほど作成する公開ページにイメージファイルが反映されない為です。)

このページは投稿記事のチェック画面になります。

postデータをエスケープしていないのは、htmlタグと解釈させてデータベースに保存させたい為です。

後は、必要な項目(タイトル、カテゴリ、本文、サムネイル)がちゃんと入力されているかのチェックを行っています。

問題なければ、プレビューとして投稿記事を表示させます。(後ほど、公開ページ作成の際にまとめてCSSでスタイリングさせますが、今の段階ではそのまま表示させます。)

formタグのhiddenで、submitをクリックすれば次ページへ各値をpostさせます。

投稿記事プレビュー

投稿記事登録画面

blogdone.php

settingディレクトリ配下にblogdone.phpを作成します。

このページでは、投稿記事をデータベースに保存しています。

先ほどと同じく、postデータをエスケープしていないのは、htmlタグと解釈させてデータベースに保存させたい為です。

特に説明する箇所はないですね、データベース接続後、blogテーブルに各値を保存しているだけです。

それでは、1つ記事を作成して、データベースに保存してみましょう。データベースに反映されていればOKです。

投稿記事データベース保存

長くなりましたが、投稿エディタの一連のシステムはこんな感じになります。

次回は、似た内容になりますが、固定ページの投稿ページを作成します。

9 COMMENTS

柿原

エディタで右側のボックスに反映させるのがうまくいきません。ボックスに「undefined」と表示されます。

返信する
ketunorobio

柿原様
初めまして、管理人です。
右側のBOXですが、本文のことでしょうか?只今、当記事のプログラムで確認しましたが、問題なく反映しているようです。
「undefined」のエラーが出ているようですので、javascriptなど、各種ファイルの読み込み、格納先は正しくされているでしょうか。

返信する
シロヤマ

コメント失礼します。初歩的な質問にはなってしまうのですが、デスクトップにあるxamppfilesのcmsのsettingから開いているのですが拡張子が.phpだとブラウザで開くことが出来ないので、自分でset_top.htmlに変換して開いているのですがやはりやり方が間違っているでしょうか。そこでメニューが表示されたとしても、クリックするとやはりphpのコードがブラウザ上で表示されるだけです。どうかご教授よろしくお願い致します。

返信する
ketunorobio

シロヤマさま、はじめまして、管理人です。
phpが実行できていないようですので、もしかするとXAMPPのWEBサーバーが立ち上がっていない可能性があります。

返信する
シロヤマ

お忙しい中、返信ありがとうございます。xamppでApacheを再起動させRunnningになってはいましたがやはり変わりません、、うまくいっているとset_top.phpでもあのトップページが表示されるのでしょうか。よろしくお願い致します。

返信する
ketunorobio

シロヤマさま
お返事おくれてしまい申し訳ありません。
ファイルをXAMPPのドキュメントルート(htdocs)配下に置けば、ブラウザで自信のローカルIP(127.0.0.1など)を指定すると
index.phpが表示されるのは知っていますでしょうか?
つまりset_top.phpを表示させたいのであれば、ドキュメントルートからそこまでの経路で、例えば
127.0.0.1/setting/set_top.php
とブラウザに入力する必要があります。

返信する
シロヤマ

ご指摘ありがとうございます。127.0.0.1/setting/set_top.phpと入力して404errorということは、phpが間違っているということなのでしょうか。コードは管理人様のものをコピーして使用させていただいているのですが、、恐縮ではございますが、よろしくお願い致します。

ketunorobio

シロヤマさま
管理人です。
ファイルが見つからないとのエラーですので、以下をご確認ください。
・ファイル名は合っているか
・ドキュメントルート/setting(ディレクトリ)/set_top.php 構成になっているか

ketunorobio

ブラウザのキャッシュクリアも試してみて下さい。
※一応ブラウザはchromeを使用してくださ。

管理人

返信する

ketunorobio へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です