PHPとMySQLとjQueryを用いて画像うpろだを作る方法①

http://heya-vip.pelolias.com/up/

↑のような画像うpろだを作った際の私の四苦八苦メモ。

作ろうと思った経緯は、ただ単に暇だったから。そして、私のスペック↓

html:まぁそこそこ使えるレベル(css含む)
php:まぁなんとなくわかる・・・レベル
mysql:は?なにそれ。レベル
jquery:javascriptでdocument.writeとかやって喜んでるレベル。

要はhtml以外ろくに使えません。

本題に入ります。

まず最初に、画像をうpさせるあのボタンみたいなのを付けて実際に画像をうpしてみたい!!って思いました。こういうの→
これは、

こういう風に書くと、ファイルを選択して、アップロードボタンを押すとアップロードできるのですが、ボタンを押すと画面が遷移してしまいます。私はそれが気に入りませんでした。

色々探してると、javascriptのAjax機能(XMLHttpRequest)というものを使うと非同期(グーグルマップみたいなやつ)でアップロードできることを知りました。
おお、これ使えばすぐ解決やん!と思いきや、この機能はブラウザの種類によって処理を書き分けたりする必要があり、面倒くさくなりました。
他に探してると、そういうブラウザによる違いを吸収してくれる「jQuery」ライブラリというjavascriptのライブラリ郡があることを知りました。
そのjqueryの.ajaxというメソッドを使えばpostでファイルをアップできるみたいなのですが、なんだか長ったらしいのでもっと短くできないのかと調べてると、jquery.uploadライブラリというものが公開されていることを知りました。
http://lagoscript.org/jquery/upload ←ココ

これを使うと

こんな感じで簡単に非同期でうpできます。2個目の引数はupload.phpで受け取れるpost変数です。


次にアップロードしたファイルに関する、ファイルサイズとか投稿日時、コメントとかも表示できるようにしたい、と考えました。
とりあえず、ファイルうpしたときに投稿日時とかをデータベース?みたいなやつに蓄積していけばいいんだろ?簡単じゃん!って思いましたが、これが結構面倒。
まずデータベースの種類だけでも

  • Oracle
  • SQL Server
  • Access
  • PostgreSQL
  • MySQL
  • XMLDB

などがあります。
まず、こういうのに金をかけるのは私の信条というかイデオロギー的なものに反するので、無料のもの一択です。そするとPostgreSQLとMySQLに絞られたのですが、スピード的にもシェア数も多い(?)のでMySQLが私の中で勝手に軍配が上がりました。
選んだのはいいものの、実際どうすればいいんや?という状態でしたが、phpからmysqlのデータベースにアクセスできる関数を色々用意してくれてるみたいで割りと簡単に接続やら何やらできました。
データベースの基本的な知識(テーブルとかレコードとかカラムとか)は自分で勉強してください。

ex.

データベースのテーブルのカラムはこんな感じ。うpするファイルNO、拡張子、ファイルサイズ、投稿時間、コメント内容、削除パス。(phpmyadminで見たテーブル構造)

これにphpからデータベースにレコードを挿入するにはこんな感じに書きます↓

保存したデータベースの中身を取り出すにはこんな感じに書きます。

‘; }

テーブルのレコードが30以上ある場合は、「もっと見る」ボタンを押すと非同期にデータを更新できるようにしました(ツ○ッターを意識)テーブルのtbodyタグの最後尾($(‘tbody’).append(data))に読み込んだデータを追加します。more変数は次に読み込むデータのオフセットアドレス的なのを格納してます。あとfadeoutエフェクトとかでそれっぽく演出しました。

主要なところはこれくらいです。
あとは適当にhtmlとjqueryでデザインしただけです。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク