【画面作成】ログイン画面 | 自転車旅行とWebサービス

自転車旅行とWebサービス

しがないSEが自転車旅行にかまけながら自前Webサービス作成を目指す

 

Perlでのプログラミングがちょっとばかし分かってきたところで画面の作成をこころみる。


・・・しかし

画面を作成するには明確な目的が無いといけない。
つまり「ネタ」である。

ぶっちゃけそんなもんない・・・

 


だからといって止まっているわけにもいかないので
何はともあれログイン画面でも作ってみる。

 

しかし画面周りのプログラムなんてほとんど触ったことがない・・・
仕事ではフレームワークやパッケージに任せっきりであるツケが回っきたのだ
仕方がないのでとりあえず簡単な画面遷移を考える。

 

 

 


まずはID/パスワードを入力し、
それらの情報をAPに渡す。
そのID/パスワードが正しければログイン成功画面に遷移し、
ダメなら元のID/パスワード入力画面に戻ってくる寸法

 

ログイン画面Login.htmlをHTMLで書く。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS">
    <title>TEST</title>
  </head>

  <body>
    <br>
    <form action="../cgi-bin/testLOGIN.cgi" method="POST">
      USER:<input type="text" name="uname" size="10">
      <br>
      PASS:<input type="password" name="upass" size="10">
      <br>
      <input type="submit" value="ログイン">
    </form>
  </body>
</html>

 

大事そうなところはここ↓
<form action="../cgi-bin/testLOGIN.cgi" method="POST">

formにプログラムを紐づけるが、
プログラムを置く場所とHTMLを置く場所が違うということを意識しなければならない。

具体的にはHTMLはいつもPerlのプログラムを置いているcgi-binではなくhtdocsにおく

 

Apache2.2
  ├─cgi-bin ←ここじゃなくて
  │  └─CMN
  │      └─DCMN
  │     
  └─htdocs ←こっち


なぜかってApacheのドキュメントルートがそこだから。
cgi-binにHTMLを置いてもエラーになる。

あと、いつもプログラムはUTF-8で書いているがHTMLはShift-JISで書く
これを忘れて後で文字コードを変えると残念なことになってしまう。


また、入力されたパラメータはPOSTで取得する。
なんかGETだと文字数制限はあるわパラメータモロ見えだわでよくないらしい

 

GETとはよくあるやつ。
ググるときのURL見てたらわかる
http://www.google.co.jp/search?hl=ja
                     ↑この辺にくっついてるやつ

一応、見えないようにエンコードすることもできるが、
簡単にデコードできてしまうのでほぼ意味はない


POSTとはパラメータをHTTPリクエストに含めて送る方法
HTTPリクエストが具体的になんなのかよくわからんので説明は省く

 

 

そしてログイン成功画面を作s・・・と言いたいところだが、
何事も一気にやろうとするとハマるものである。

まずは成功画面HTMLファイルを作らずに、
HTMLからプログラムにちゃんと遷移して、
かつパラメータがとれているかチェックする

#!"C:\Perl64\bin\perl.exe"

use CGI::Carp qw(fatalsToBrowser);
use CGI;
use Encode 'decode';

$cgi = CGI->new();

$uname = $cgi->param('uname');
$upass = $cgi->param('upass');

print "Content-Type: text/html; charset=UTF-8\n\n";
print '<html>';
print '<head>';
print '<meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS">';
print '<title>TEST</title>';
print '</head>';
print '<body>';
print '<br>  USER :'.decode('Shift_JIS',$uname).'<br>';
print '<br>  PASS :'.decode('Shift_JIS',$upass).'<br>';
print '</body>';
print '</html>';



冒頭の3行がキモである。

$cgi = CGI->new();

$uname = $cgi->param('uname');
$upass = $cgi->param('upass');

これだけで遷移元からパラメータが取得できる。
すげぇどうなってんだこれ

扱う文字コードだけには注意が必要だが・・・

 

やってみる。
鈴木/tarouと入力する
 
  
  
すると
  
 
 おお、できたできた