【145日目】投稿フォームに記事を呼び出せるようにする-2
Posted: Last Update:
「記事の投稿ページを作成する」プロジェクト。昨日から、記事投稿フォームに既存の記事を呼び出そうとしながら、手前で止まっています。昨日はスタイルシートの設定で終わってしまいましたが、今日こそ処理まで進みたい！
ここまでの成果
このサイトはWordPressを使わずに自作しています。今現在も、HTML/PHPのタグ打ちをしながらブログを書いています。記事入力を簡単にしたいということで始めた「記事の投稿ページを作成する」プロジェクト。
まだ何も機能していませんが、投稿フォームはのページはここまで作りました。「site」の選択で「category」、「Category」の選択で「Open or Create」を開こうとしているところです。
カテゴリーから、新規と既存の選択をできるようにしたい
昨日は「site」の選択で「category」を表示できるようになりましたが、「category」を選択しても「Open or Create」が開きませんでした。スクショの部分です。
今日はまず「Open or Create」を開きたい。検索したところ、開いたり閉じたりするメニューが隣接していなかったのが悪かったようです。修正して、治りました！HTMLとスタイルシートがこんな感じです。
HTML
<h4>Select Site</h4>
<input type="radio" class="siteselectkame" name="site" value="kame">kamenokoki.com<br>
<input type="radio" class="siteselectchlg" name="site" value="chlg">亀のチャレンジ
<div class="ctgryselectkame">
<h4>Select Category</h4>
<input type="radio" class="selectcat" name="category" value="article">article<br>
<input type="radio" class="selectcat" name="category" value="blog">blog
<div class="coroselect">
<h4>Open or Create</h4>
<input type="radio" name="CorO" value="exist">Open Existing File<br>
<input type="radio" name="CorO" value="new">Create New File<br>
<br>
<div style="text-align: right;"><input type="submit" value="GO"></div>
</div>
</div>
Stylesheet
.siteselectkame:checked ~ .ctgryselectkame { padding: 0; height: auto; opacity: 1; transition: 0.8s;}
.coroselect{height: 0; padding: 0; overflow: hidden; opacity: 0; transition: 0.8s;}
.selectcat:checked ~ .coroselect { padding: 0; height: auto; opacity: 1; transition: 0.8s;}
submitで既存ファイルの呼び出し
無事メニューが完成したので、次は動作させましょう。「GO」ボタンをおすと、ファイルの一覧が右側に出るようにしたいです。
Sessionを使うのでしょう。自分自身に「サイト」「カテゴリ」「ページ」の情報を送りたいと思います。まずは先ほどのHTMLに「<form action="http://localhost:50006/" method="get">」を追加しました。自分自身にサイトなどの情報を飛ばします。
「http://localhost:50006/」から、無事「http://localhost:50006/?site=kame&category=article&CorO=list」というURLに飛びました！
ホスト名とかも変数で置きたいですね。将来的にサーバーを移動させるかもしれないし。あと、「CorO」は気に入らないので変更したいと思います。そちらは後回しで、とりあえず、今日はファイルの一覧を呼び出したい。
時間切れ！
と、思ったら！今日はここで時間切れです。まぁ、ちょっとだけ進んだかなぁ…？
明日はいよいよPHPの出番ですね。「http://localhost:50006/?site=kame&category=article&CorO=list」というURLから、サイト情報などを取得して、記事の一覧を引っ張り出して来たいと思います。
明日からやっと「それっぽいこと」に手をつけられます。楽しみだ！それでは、また明日。
記事をシェアする
亀の子に連絡
ランキング参加中！ぽちっとしてね
