そよ風情報局 -初心者プログラマが独学で試行錯誤-

Webエンジニア目指して勉強中の初心者が、苦労したことや学んだ言語について書いてます。たまにゲームのことも。

プログラミング

スケジューラも改良しました

更新日:



ホームページをリニューアルしたのにあわせてスケジューラも少しだけ改良しました。

まだ編集機能と、記入済みの日付のマーキング機能は実装できてないです((
機能面よりも見た目の変更だけとなります。。。

変更点は

・スケジュールの編集メニューの表示方法
・ログイン・ログアウト方法

この2点です。

編集メニューの表示方法について

今までは表示されたスケジュールの横に番号が表示されて、その番号をクリックしたらメニューが表示されるって感じでしたが、番号をクリックってなんか嫌だなーなんて思いましてw
ボタンっぽく色付けて、そこをクリックすると編集メニューが表示されるようにしました。

また、編集メニューも変更前はクリックしたらその番号を受け取って、その番号を元にスケジュールをDBから引っ張ってきて、それを処理用のPHPファイルでGETするって動きでした。

PHPファイルでメニューを表示させると、画面いっぱいにボタン2つだけの表示になってしまって、見た目がすごく残念な感じでした(^_^;)
そのため、今回はPHPでページ遷移させずに、JQueryでdialog(ダイアログ)を表示して、そこにボタンを設置するようにしました。
そして、そのボタンをクリックしたときにAjaxで処理するためのPHPファイルに必要な値をPOSTして、そのPHPファイルで処理を行うという感じです。
Ajaxを使うことでページ遷移を行わずにページの裏側で処理させることができるので、dialogを使うことが活かされてくるかなと。

このような仕様に変更することで、無駄なページ遷移を減らすことができますし、dialogを使うことでポップアップメニューのような動作をさせることができて、見た目もかっこよくなりますw

ちなみに、このdialogは前までのログインメニューに使っていました。
さて、次はそのログインメニューについてです。

ログイン・ログアウトの方法について

今まではホームページのTOPページにログインボタンを設置して、そこからログイン。
ログインされていたらスケジュールが開けるという動作にしてました。
というのも、最初はホームページから何かをするためにはログインが必要な会員制ページみたいなものにしようかと考えていたからです。
でも結局そうする必要があるようなコンテンツが準備できず、スケジュール使うときだけログインすればいいんじゃないかということで、このような変更になりました。

わざわざログインボタンを設置せず、スケジュールを開く際にログインメニューを表示させて、一度ログインさえすればセッション保持して他ページに遷移してもそのままスケジュールが開けるという感じです。

ログアウトボタンはスケジュールのTOPページ扱いであるカレンダーのページに設置しました。
ただ、何も飾ってないただのボタンなので、もう少し何かしらの工夫して見栄えよくしたいなと考え中です。

今回のスケジューラリニューアルを通して

まだなかなかJavascriptやJQueryの使い方がわかってなくて、何するにしても毎回調べながら作ってましたが、今回のリニューアルする際は調べる回数が減りました。
特にボタンの処理の部分がずっと怪しくて、form使ったinputのボタンにonClick書くのか、ただのボタンタグにするのかみたいなのが毎回わからず調べてました。
今となってはボタンはJQueryで、

$(#button).click(function(){
  //処理
});

みたいな書き方するのが便利で、基本的にボタンの処理はこの方法使ってます。

コードって書けば書くだけ身に付いてスキルアップが実感できます。
やっぱりここが楽しいですね。
まだまだ初心者ながら成長できてはいて安心ですw

最後に

実はホームページだけでなく、少し前にこのブログもリニューアルしました。
リニューアルと言ってもテーマを変えただけですけどもw
それを機に、書き方も少し変えようかなと。
いつも話題が変わるときは空白入れたりしてましたけど、その話題についてのサブタイトル的なのを書いてわかりやすくしました。
これからはこんな感じの書き方にしようかなと思ってます。







-プログラミング
-, , ,

Copyright© そよ風情報局 -初心者プログラマが独学で試行錯誤- , 2018 All Rights Reserved Powered by STINGER.