自作CMSの作り方#27 データ登録～表示と独自ドメインの設定
※ 2025/4/20 記事の価格を 300 円から無料に変更しました（これまで購入された方、申し訳ありません。これから利用される方、若干古い内容なので、適度に参考にしてください）。
こんにちは。Suipediaです(∩´∀｀)∩。
前回の最後はデータベースの作成とユーザの作成及び権限付与を行いました。
今回はローカル環境でやっていたようにテーブルの登録やプログラム側からの接続を設定していきましょう。
では、早速参ります！
phpMyAdminにアクセス
前回の続きということでまずはローカル環境でおなじみとなったphpMyAdminにアクセスしましょう。
サーバパネルのトップに移っていただきまして・・・
データベースメニューのphpmyadminをクリックしましょう。
これ、データベース画面のサイドメニューからでもいけます。
クリックしますと別タブで開くのですが、このとき・・・
ユーザー名とパスワードが求められます。ここで入力するのは前回MySQLユーザを作った時に登録した情報です。
それぞれ入力出来たらログインボタンを押します。
すると・・・
はい、ディティールは少し異なるかもしれませんが、見慣れた画面ですね。
前回登録したデータベースも存在しています（↑赤線）。
ここまででプログラムからデータベース接続に必要な情報は揃っています。というわけで、テーブルとかはまだないけどまずは接続をやってしまいましょう。
プログラムからデータベースへ接続する
ファイル管理からfunction.phpにアクセスします。
これまでと同じように対象ファイルにチェックをつけ、編集ボタンを押します。
連載通りにやっていただけてましたら、スクロールするまでもなくDB接続の関数がありますね。これを見越してここに配置していました（嘘。
この中に
$dsn='mysql:dbname=test;host=127.0.0.1';
$user='root';
$pass='';このような3行がありますが、これを・・・
$dsn='mysql:dbname=xs179145_mydb;host=mysqlXXXXX.xserver.jp';
$user='xs179145_admin';
$pass='XXXXXXXXX';このようにしましょう。
はい、ちょっとわかりづらいですね。あなたの環境に合わせて設定するのはdbname、host、user、passの4つです。
dbnameは・・・
サーバーパネルで確認できるここの内容！前回やりましたね。
hostは・・・
phpMyAdminの↑それ！赤線引いたところ。
userは・・・
ここ！前回やりましたね。
passは・・・これは前回DBのユーザ作成時に入力いただいた内容です。
これらの情報を適切に設定しますと・・・
こんな感じになります。
一応申し上げておきますと、本来はdbnameもhostも公開するべきではなさそうですが、今回は説明用としてアカウントをつくり、運用していくことを想定していないので情報を公開しています。
さて、これでデータベースへの接続はできただろうと、思っています。
見てみましょう。
サーバにあげたCMSへブラウザからアクセス！
ぃよいしょ！！！どやさどやさ！！どやどやさ！！
・・・はい。無駄にテンション高いですね。どうして高いかって記事の雰囲気から感じる以上にここにたどり着くまでに苦労したからです(笑)。
テーブル・データを追加する
じゃあテーブルを追加しましょう。
記事中にテーブルやデータを追加してもらうときはいちいちSQLをお伝えしてそれを実行してもらったりしてたんですけど、簡単な方法があります。
まず、ローカル環境のphpMyAdminを開いてください。
（ここまでが有料記事時代の無料エリア）
CMSで使っているテーブルを選択した状態で、エクスポートタブを開きます。
ここで何ができるかと言いますと、テーブル情報やデータ情報を指定のフォーマットでダウンロードできます。今回はSQLとして落とします。
なぜなら別のDBにTABLE CREATEやINSERT処理をしたいからです。
いろいろ入力や選択できるオプション項目ありますが、なにも触らずそのままでよいです。実行ボタンを押しましょう。
テーブル名.sqlというファイルがダウンロード出来たらOKです。
これを各テーブルに対して行います。もうお馴染み、org_category、org_comment、org_contents、org_property、org_relationの5つですね。
エクスプローラーにファイルが5つあればOKです、このように。
で、次にですね。ここまでエクスポートしたので、今度はXSERVERのデータベースにインポートします。やり方は簡単。
まず、データベースを選択し、その上で
インポートタブを選択します。
そして、
ラジオボタンにチェックを入れて、ファイルを選択ボタンを押下します。
さっきのsqlファイルを選択して、他の部分はさわらずに実行ボタンを押しましょう。
↑これね。
実行後、こんな画面になればOK！
テーブルを開いてみると・・・
はい！データがある！！
で他の4テーブルについても同様のことを行います。キャプチャは割愛。
はい、できました。
んで、テーブルとデータも整ったところで、改めてアクセスしてみます。
↑こちらに。すると・・・
はいｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!
すみません、連載中は各アイキャッチもちゃんと用意してたんですが、いろいろ対応するうちに私のそれらはすべて失われ今はグレーになってます・・・。
でもあれですよね。動作確認的にはご法度ですよね・・・汗
ぃよいしょ。タイトルと画像がちぐはぐだけど、設定しました。
その他コメントの登録や記事の関連付け、プロパティの設定等いろいろ動かしましたが、各ページ・各動作正常に動いているようです。
これでひとまず完了ですかね(∩´∀｀)∩。
あとは独自ドメインの説明が残っています。
独自ドメインの説明
まず独自ドメインってなんぞや？という方もいらっしゃると思うのでその点を簡単にご説明します。
ドメインというのは「http://xs179145.xsrv.jp/」このURLの中の「xs179145.xsrv.jp」この部分ですね。
で、独自ドメインはそのサイトやサービス専用の住所みたいなものだと思ってください。
手前味噌ですが、私が過去にあげたサイトはsuipedia.comというドメインを取得し、これに対してサイトを構成するファイル群をアップしています。
独自にドメインを用意することはドメインだけでサイトが判別できるメリットがあり他にもSEO（検索エンジン最適化）の観点からもよいとされています。
独自ドメインに重複は許されず、完全に早い者勝ちというシステムになっています。なので自分にとってお気に入りのナイスなドメイン名を思いついたら取得だけでも早めにしてしまうのが安全です。
（でも私は見切り発車でドメインだけ先に取得して結局使わず…という失敗を何度もしてきています。）
ドメインの詳しいことは別途調べてください（すみません汗）。
独自ドメインにアップする方法をお伝えして、このXSERVERアップ編は終了としましょう。
ドメインの設定
では、ドメインの設定へアクセスしましょう。
サーバーパネルからドメイン設定をクリックします。
ドメイン設定画面が開くのでドメイン設定追加タブを開き、新しいドメインの名前を入力します。最後に確認画面へ進むボタンを押下( ｀ー´)ノ。
あ・・・ちょっとまてよ。。すんなり進めそうにない。。
・ドメインの取得
・ネームサーバーをエックスサーバ―仕様に変更
どうやらこの2つを先にしておかないと先に進めないようですので、それらをやりましょうか。
先にドメインの取得が必要なようですので、そちらからいきます。
サーバアカウントのトップページから契約情報ボタンを押下し、ドメインタブを開いてください。
はい、契約中のドメインはありません、という表示になりますね。
では、左サイドにあるサービスのお申し込みボタンを押下しましょう。
遷移先の画面ではいろいろサービスが並んでいますが、
その中のドメインの項で手を止めてください。
ドメイン自体は他の機関で入手してあとからXSERVERと紐づけるという手もあるのですが、今回はXSERVER上でやってみます。私も初めてです。
新規申し込みボタンを押下します。
利用規約同意の画面が出てくるので、同意するボタンを押下し次に進みます。
新規取得の画面です。任意のドメイン名を入れましょう。ここのドメイン名チェックというのは先ほどちらっと申しました既存のドメインと重複しないかどうかのチェックでしょうね。
ボタン押下後、画面が更新されますが、チェック結果がOKの場合下の方に値段や登録年数の選択欄がでてきます。
今回はデフォルト（初期表示）のまま行きます。
各種OKならお申し込み内容の確認・料金のお支払いボタンを押下しましょう。
支払い方法の選択画面です。
んで・・・支払いのステップは割愛しまして・・・
はい、支払い完了！
これでですね・・・
はい！ドメインの存在を確認できます！これで先ほどあげていました2つの作業・・・
・ドメインの取得
・ネームサーバーをエックスサーバ―仕様に変更
のうち、ドメインの取得はクリアしました。
では、2つ目のネームサーバー関連の設定をしましょう。
ドメインパネルボタンを押下します。
あ！！違うな・・・(。-`ω-)しなくていいな、この設定・・・というかもう、できてるな。
あまり意識せず素通りしてしまったけどさっき・・・
初期設定でネームサーバーをエックスサーバ―にしたな( ﾟДﾟ)
よし、では次行きます。
サーバーパネルに戻りまして、ドメイン設定を開きましょう。
さっきゲットしたドメイン名を入力し、確認画面へ進むボタンを押します。
あーなるほど。ちゃんとドメインを事前取得しておいたら注釈メッセージが表示されないんですね。なるほどなるほど(*・ω・)(*-ω-)(*・ω・)(*-ω-)。
では、追加するボタンを押下します。
こんな画面になりました。ちゃんと独自ドメイン用のファイルのアップ先も示されていますね。
これで後は上記フォルダにファイル群をアップしさえすれば完了、という段階まで来ました。ちなみに、今http://original-cms.comにアクセスすると・・
ありゃりゃりゃ・・・このようになってしまいました。想定ではXSERVERが用意した
この画面が表示されるはずでした。でもご安心ください。ドメインの設定は反映されるまでに時間がかかる、という性質がありましてこのような事態には今まで何度も遭ってきてます。
ではこの間に独自ドメインの設定によって追加されたフォルダをファイル管理画面から確認してみましょう。ファイル管理にアクセス！
はい、先ほどアップしたドメイン名のフォルダが作成されています。画面キャプチャは省くけど、中身のフォルダの構成はxs179145.xsrv.jpと同じです。
・・・とそんな話をしているうちに・・・
はい、独自ドメインにこの表示がされました。数分でした。
ではですね、中途半場なのでもう少しだけお付き合いください。
ローカルにどこでもいいのでフォルダを作り、FFFTPを開いてください。
デスクトップに一時利用というフォルダを作ったので、そこに一度標準ドメインにアップしたファイルを全てダウンロードします。
サーバのファイル群を全選択状態で上部にある下矢印を押下しましょう。
こうなればOK。
で、サーバ側を独自ドメインのフォルダに移動します。
移動しました。original-cmsフォルダの下のpublic_htmlフォルダにいます。
では、もとからある4つのファイルを削除し、左側のローカルに保持したフィル群を一気にアップします。
ファイルの削除はFFFTP上でも右クリックからできます。
で・・・
すべてファイルをあげました・・・！
あとは確認のみ！
いざアクセス・・・！
はい、独自ドメインでちゃんと自作CMSが表示されています。
怖いくらい上手くいきました・・・！(ﾟДﾟ;)
おわり！
おわりに
この回は長くなってしまいすみません。。画面キャプチャは50枚です。
でもレンタルサーバーにあげるところまですべてを説明することができました。これでローカルだけの開発にとどまらず、サーバにアップし実際に運用をしてみる、というところまで連載の中で支援することが叶ったと思います。
これもマガジンを購入し開発にチャレンジいただき、さらにはサーバにあげるところまで試みられた方々のおかげです。
感謝申し上げます。
ではでは引き続き、各記事の内容に関しましては不明点等ありましたらお問い合わせくださいませ。慎んでお答えさせていただきます。
ありがとうございました！
