ゲーム開発日誌タイトル画像
IT技術部終了のお知らせ
Windows Server 構築

ASP.NETを使って管理ページを作成しよう(入門編)



Twitterでシェア
Facebookでシェア
Google+でシェア
はてなブックマークに追加
Pocketで後で読む
投稿日時:2018/04/09 21:46:50
更新日時:2018/04/19 17:55:21

Webサイトに記事を投稿するには大きく分けて3つの方法があります。

1つめはWindowsFormを使ったやり方よ。
デスクトップアプリケーション(exeファイル)を作成してWindows Server上で動かします。Windows Serverならではのやり方です。メリットとしてはデスクトップアプリケーションなのでいろいろなコントロールを使って高機能な記事管理システムを作ることができます
デメリットは画像ファイルなどをアップロードをする際、リモートデスクトップから直接Windows Serverの所定のフォルダに画像ファイルをコピペする必要があります。また、リモートデスクトップが必須なのでお使いのWindowsはProfessional以上でないと使えません。Windows Homeなどでもリモートデスクトップを使えるやり方もありますが、公式で対応していないのでライセンス的に怖いです。
画像をアップロードするのはFTPを使えばよいのでは?
FTPは暗号化されていないのでおススメできないわ。もし、どうしても利用したいならセキュリティに強いFTPSをWindows Serverでもサービスを立ち上げることね。


2つめはSQL Server Management Studio(SSMS)を使って記事をインサートするやり方よ。
メリットはSQL Serverと親和性の高いツールなので前述と後述で紹介している2つのやり方より圧倒的にエラーが起こりにくいです。デメリットはVPSだと仮想化したマシンのスペックがどうしてもネックになるので、低予算で契約したVPSの場合、SSMSは激重です。場合によってはフリーズして応答なしになります。画像ファイルのアップロードも1つめのやり方と同様です。

3つめはWebページに管理ページを作ってしまうやり方よ。
メリットはサクサク動作し、画像のアップロードもWebのフォーム機能を利用すると簡単に行えます。デメリットはCALというライセンスが必要ってことでしょうか。簡単に説明しますと、Windows Serverの場合、ログインページ(管理ページも含む)などを使ってユーザを特定できるサイトを構築した場合、その人数に合わせてクライアントアクセスライセンス(CAL)を用意する必要があります。
ただし、さくら VPS for Windows Serverの場合はご安心ください。CALが不要なSPLAというライセンス形態なのでいくらでもユーザを特定できるサイトを構築しても構いません。
心配だったのでMicrosoftに電話で問い合わせて確認しました。SPLAの場合、管理ページやユーザーを特定できるコミュニティサイトなどを作って運営しても大丈夫だそうです。


前置きが長くなってしまいましたが、せっかくSPLAのライセンスなのでWebページに記事管理システムを構築しちゃいましょう!

前回はAPS.NET MVC 5を使いましたが今回はASP.NETで作りたいと思います。ASP.NET MVCとASP.NET、名前は非常に似ていますが全然違います! 例えて言うならJavaとJavaScriptくらい違います。でもご安心ください。ASP.NETはMVCより直感的に操作できるインターフェースなのでC#の文法を理解していればすぐに慣れるかと思います。

ASP.NETの使い方講座
初めにVisual Studio Webを立ち上げてプロジェクトを作成しましょう。

ASP.NETの使い方講座
プロジェクト名はお好きな名前を付けてください。こちらは「AdminWebSite」としました。

ASP.NETの使い方講座
Emptyを選択して、Web Formsにチェックを入れます。

ASP.NETの使い方講座
まず初めにログインフォームを作りましょう。ソリューションエクスプローラーからAdminWebSiteを右クリックして「追加」から「新しい項目」を選びます。

ASP.NETの使い方講座
サイドメニューの「Visual C#」の「Web」の「Web フォーム」から「Web フォーム」を選択し、名前を「LoginForm.aspx」としました。

画面下部にある「デザイン」「並べて表示」「ソース」の中から「並べて表示」をクリックします。左側のサイドメニューにツールボックスが表示されていない場合は、トップメニューにある「表示」から「ツールボックス」をクリックしてください。また右側のサイドメニューにプロパティが表示されていない場合は、トップメニューにある「表示」から「プロパティウィンドウ」をクリックしてください。

ASP.NETのWeb Formsはツールボックスからコントロール(Webサイトを構築するパーツ)を画面下部のデザインまたは上部に表示されているソースエリアにドラッグアンドドロップして配置します。また配置したコントロールのプロパティを触ることでレイアウトを変えたり、プログラムと連動することで動的にフォームを表示できたりします。

ASP.NETの使い方講座
試しにツールボックスの「Label」をデザイン画面にドラッグアンドドロップしてみましょう。

ASP.NETの使い方講座
そして画像の右下に表示されているプロパティの一番下にある項目「Text」に「ログインID」と打ち込みます。表示されているLabelの文字が変わりましたね!

ASP.NETの使い方講座
続いてツールボックスから「TextBox」をドラッグアンドドロップします。ここで重要なのがプロパティの一番上にある(ID)の項目です。ここでは「txtLoginID」としました。プログラム側からそのコントロールに参照する時に使うので名前は分かりやすいようにします。

TextBoxのコントロールなので(ID)の初めの文字列は「txt」としています。このように(ID)を見ただけで何のコントロールなのか分かるようにすれば可読性が上がりますね!

この要領でパスワードのコントロールも作成しましょう。

ASP.NETの使い方講座
パスワードの(ID)は「txtPassword」としました。

ASP.NETの使い方講座
パスワードのコントロールのプロパティでTextModeを「Password」として、入力される文字は「●」で伏字にして表示してくれるようにします。

ASP.NETの使い方講座
ログインボタンも作ります。Buttonのコントロールをドラッグアンドドロップしてください。

(ID)は「btnLogin」にしました。

ASP.NETの使い方講座
ログインに失敗した時などに表示させるメッセージを担うLabelも追加しておきます。

(ID)は「lblMessage」としました。

コントロールが綺麗に整列するようにtableタグなんかを使うと見栄えが良くなりそうです。その場合はソースウィンドウで直接HTMLをゴリゴリと書いてくださいね。ここでいったんデザインの方を終わってプログラミングの方に移っていきたいと思います。

ASP.NETの使い方講座
ソリューションエクスプローラーから「LoginForm.aspx」の左にある三角のアイコンをクリックして中身を展開して、「LoginFrom.aspx.cs」を開きます。その下にある「LoginForm.aspx.designer.cs」はデザイナです。デザインを定義しているファイルなので触るとレイアウトが崩れるので基本はノータッチです。

LoginFrom.aspx.csにコードを書いていきます。

Page_Load()メソッドが一番初めに読み込まれます。ここにコントロールの初期化処理を書いたりします。まずはエラーなどのメッセージを表示するラベル(lblMessage)を非表示にしましょう。ログインできなかった時に非表示から表示に切り替えるコードを後で書きます。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace AdminWebSite
{
    public partial class LoginForm : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            lblMessage.Visible = false;
        }
    }
}
LoginForm.aspxに戻ってログインボタンをダブルクリックします。

btnLogin_Click()メソッドが自動で生成されたと思います。ログインボタンをクリックするとこのメソッドに入ります。ログイン機能を実装しましょう。セッションを使って正しいユーザがちゃんとページに入っているかチェックしなければなりません。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace AdminWebSite
{
    public partial class LoginForm : System.Web.UI.Page
    {
        // ログインのID
        string strLoginID = "admin";
        // ログインのパスワード
        string strPassword = "pass";

        protected void Page_Load(object sender, EventArgs e)
        {
            lblMessage.Visible = false;
        }

        protected void btnLogin_Click(object sender, EventArgs e)
        {
            if (txtLoginID.Text == strLoginID && txtPassword.Text == strPassword)
            {
                Session["ID"] = strLoginID;
                Session["PASS"] = strPassword;

            }
        }
    }
}
ログインID(strLoginID)は認証する時のIDを、ログインパスワード(strPassword)は認証に使うパスワードを担っています。変数の「admin」と「pass」は適宜変更してください。ログインが成功したら別のフォーム画面に移動させます。メインとなるフォームを新しく作成しましょう。ここでは「MasterForm.aspx」としました。

MasterForm.aspx.csは下記のように記述しました。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace AdminWebSite
{
    public partial class MasterFrom : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (Session["ID"] == null || Session["PASS"] == null)
            {
                //認証されていないユーザなのでログインページに飛ばす
                Response.Redirect("LoginForm.aspx");
            }
        }
    }
}


ASP.NETの使い方講座
MasterForm.aspxの画面だと分かりやすいように「Master Form」とデザインに記述しました。

ここでLoginForm.aspx.csに戻ってログインボタンで認証が通ればメインフォームであるMasterForm.aspxに飛ばすようにしましょう。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace AdminWebSite
{
    public partial class LoginForm : System.Web.UI.Page
    {
        // ログインのID
        string strLoginID = "admin";
        // ログインのパスワード
        string strPassword = "pass";

        protected void Page_Load(object sender, EventArgs e)
        {
            lblMessage.Visible = false;
        }

        protected void btnLogin_Click(object sender, EventArgs e)
        {
            if (txtLoginID.Text == strLoginID && txtPassword.Text == strPassword)
            {
                Session["ID"] = strLoginID;
                Session["PASS"] = strPassword;
                Response.Redirect("MasterForm.aspx");
            }
            else
            {
                lblMessage.Text = "ログインIDまたはパスワードが間違っています。";
                lblMessage.Visible = true;
            }
        }
    }
}
ASP.NETの使い方講座
ここでデバッグをする前にスタートページをLoginForm.aspxにしましょう。トップメニューの「プロジェクト」から「プロパティ」を開きます。

ASP.NETの使い方講座
サイドメニュー「Web」の「ページを指定する」からLoginForm.aspxとしてCtrl + Sで保存します。

デバッグをしてみましょう。

ASP.NETの使い方講座
ログインに失敗するとメッセージを表示しています。

ASP.NETの使い方講座
ログインに成功すると別のページに遷移したのが分かると思います。

ここで疑問に思うのがURLでログインページをスルーしていきなり下記のように
http://localhost:49739/MasterForm.aspx
にダイレクトでアクセスしたらどうなるでしょうか。実はセッションにデータが入っていないとLoginForm.aspxのページに戻されるようにしています。

ASP.NETの使い方講座
なので、http://localhost:49739/MasterForm.aspxにアクセスしてもLoginFormのページにリダイレクトされます。
こんな感じでASP.NETではフォームの制御を行います。次はメインとなるMasterForm.aspxにより記事管理をする機能を付けましょう。
コメント一覧
お名前:

コメント:
left981716right
 表示されている6桁の数字を入力してください。
 (※スパムコメント対策です。)
00004075