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

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

プログラミング

進捗状況

更新日:



現在スケジュール管理アプリを作ってます。

今はブラウザ上で操作するWebアプリとして作成してますが、最終的にはスマホアプリも作って、互いに連携したいなーと考えてます。

多分今一番使われているであろうG○○gleカレンダーとの棲み分け?も一応考えてます。

アカウントと紐づけしてるから、誰かと共有したりしづらいと思うんですよね。

そのあたりを気にせずスケジュール等共有を気軽にできるってのがメリットになるかなと考えてます。

例えばネトゲのチーム内で互いの予定を共有して活動するとか、友人と共有して遊ぶ予定を立てやすくするとか!

そんな感じで主に遊びの面で使ってもらえるといいなーって。

 

使ってるのはHTML、CSS、JavaScript、PHP、SQLです。

作成の手順としては、

1. カレンダーの外観を作る
2. カレンダーの日付をクリックできるようにする
3. 予定を入力するページを作る
4. DBに登録できるようにする
5. アカウントと紐付ける

こんな感じですね。
今は3の予定を入力するページがもうすぐ完成するってところまできてます。

まだ勉強し始めたばっかりだから調べながら作ってるけど、まだ理解が追いついてない部分が多い現状・・・
タグの操作も何回も失敗しまくりで何とかまともに表示できたって感じですw

試行錯誤真っ最中はこんな感じでしたw

どうやったらtrとtdうまく配置できるのかって調べまくりで何とか形にしました。

枠とかもう少し何とかしたいとは思ってるけど、まぁそこは後回しで中身作る方が先かなーってことで、とりあえず保留中

クリックしたら予定入力用のページに飛ぶように作ったけど、ほんとは入力用の窓を表示させて入力!みたいなのを作りたかった。。。
結構調べたけど方法わからなくて結局新たにページを作ることにしました。

でも作った後にJQueryUIのページ見てたらDialogっての使えばそれっぽいことできるんじゃないかって(
まぁそれも全部完成して余裕があれば改良するって方向で。。。

ここまでは基本クライアント側のことばかりだから全部JavaScriptで作ったけど、予定入力したらそれDBに書き込まないといけないからPHP使う必要あるよね、ってことでPHPに値を渡す手段が必要と。

JavaScript PHP 連携

みたいな感じで調べると、Ajaxっての使えばいいっぽい?
コードのサンプルはいっぱいあったからそれら真似して書いてみたけど、全然うまくいかない\(^o^)/

JavaScriptでPOSTしてPHPで受け取るだけだからそんな難しいことじゃないのに・・・
PHPでPOST受け取るときはグローバル変数の$_POSTを使うわけです。
そしてJavaScript側でAjaxとしてPOSTするときに辞書型変数に格納して飛ばすわけですね。

例えばJavaScript側で

var test = {'postA': 1, 'postB': 2}

という変数に格納してPOSTすると、PHP側で

$_POST['postA']に1、$_POST['postB']に2が格納されるんですよ。

そういやって値を渡した後にそのページで処理しようと思ってたんですけど、PHP側で「postAなんて定義されてねーぞ!」って怒られるわけです(´・ω・`)

いたるところにecho等の出力させる文入れて見てもよくわからず、3時間くらい悩んだ後ふと思いました。

「Ajaxって非同期通信させるものなのに、ページ遷移してたら意味ないんじゃ・・・?」

予定入力するためのページを別に作ってたので、値をまず渡してからそのページに移動!って動きにしようと思って作ってたんですけど、そもそも非同期通信ってページ遷移しなくても処理できるみたいなものですよね(

つまりAjaxを使うこと自体が間違いでした!!

素直に?の後ろに値つけて(この方法の名前忘れました)PHP側でGETすればうまくいきました。。。

URLに値入ったままなの丸見えだから、見た目的になんかなーって感じだけど、まぁ日付とかだからいいかー

DBに一時的に保存する場所作ってそこ経由して渡すってのも考えたけど、JavaScriptって処理丸見えちゃうから、DB操作はよろしくないと思ってやめました。

予定入力の部分はJQuery活用しまくりで作ってます。

中身あるようでない乱雑な文章になっちゃったけど、現状こんな感じです。

もう少しで一応公開まではできると思うので、完成したら使ってもらえると泣いて喜びます!







-プログラミング
-

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