docs/ja-jp/source/web.txt

   1 .. index::
   2         single: ウェブ開発 (CGI ライブラリ); はじめに
   3
   4 ===========================
   5 ウェブ開発 (CGI ライブラリ)
   6 ===========================
   7
   8 Ring で記述された CGI ライブラリでウェブアプリケーションを開発する方法を学びます。
   9
  10
  11 .. index::
  12         pair: ウェブ開発 (CGI ライブラリ); Apache ウェブサーバーの設定
  13
  14 Apache ウェブサーバーの設定
  15 ===========================
  16
  17 CGI の実行に対応しているウェブサーバーであれば Ring を使えます。
  18
  19 Apache HTTP サーバーでの Ring の用法を学びます。
  20
  21 こちらから Apache をダウンロードできます。 : http://httpd.apache.org/
  22
  23 または、ほかのプロジェクトに同梱されているものを入手できます。
  24
  25 XAMPP : https://www.apachefriends.org/download.html
  26
  27 インストール後にファイルを開きます:
  28
  29 .. code-block:: none
  30
  31         xampp\apache\conf\httpd.conf
  32
  33 検索します。
  34
  35 .. code-block:: none
  36
  37         <Directory />
  38
  39 この行を追加します。
  40
  41 .. code-block:: none
  42
  43         Options FollowSymLinks +ExecCGI
  44
  45 つまり、こうなります。
  46
  47 .. code-block:: none
  48
  49         <Directory />
  50         Options FollowSymLinks +ExecCGI
  51
  52 この行を検索してコメントアウトされていないことを確認してください。
  53
  54 .. code-block:: none
  55
  56         LoadModule cgi_module modules/mod_cgi.so
  57
  58 検索 : AddHandler cgi-script
  59
  60 CGI 拡張機能を拡張子 ”.ring” へ対応させます。
  61
  62 用例:
  63
  64 .. code-block:: none
  65
  66         AddHandler cgi-script .cgi .ring
  67
  68 用例:
  69
  70 .. code-block:: none
  71
  72         AddHandler cgi-script .cgi .pl .asp .ring
  73
  74 サーバーの実行と開始をします。
  75
  76 Web サーバーが対応しているディレクトリへウェブアプリケーションを作成します。
  77
  78 用例:
  79
  80 .. code-block:: none
  81
  82         Apache2.2\htdocs\mywebapplicationfolder
  83
  84 用例:
  85
  86 .. code-block:: none
  87
  88         xampp\htdocs\mywebapplicationfolder
  89
  90 この行をソースコードファイル (\*.ring) の内側に追加します。
  91
  92 .. code-block:: ring
  93
  94         #!ring -cgi
  95
  96 .. note:: 前述の行はシステムにある ring.exe のパスに基づいて変更してください。
  97
  98 .. index::
  99         pair: ウェブ開発 (CGI ライブラリ); Ring CGI - Hello World  プログラム
 100
 101 Ring CGI - Hello World  プログラム
 102 ==================================
 103
 104 このプログラムは、 Hello World プログラムです。
 105
 106 .. code-block:: ring
 107
 108         #!ring -cgi
 109
 110         See "content-type: text/html" +nl+nl+
 111             "Hello World!" + nl
 112
 113
 114 .. index::
 115         pair: ウェブ開発 (CGI ライブラリ); ウェブライブラリ版 Hello World プログラム
 116
 117 ウェブライブラリ版 Hello World プログラム
 118 =========================================
 119
 120 ウェブライブラリで手軽に CGI ウェブアプリケーションを記述できます。
 121
 122 用例① :
 123
 124 .. code-block:: ring
 125
 126         #!ring -cgi
 127
 128         Load "weblib.ring"
 129
 130         Import System.Web
 131
 132         New Page
 133         {
 134                 Text("Hello World!")
 135         }
 136
 137
 138 用例② :
 139
 140 .. code-block:: ring
 141
 142         #!ring -cgi
 143
 144         Load "weblib.ring"
 145
 146         Import System.Web
 147
 148         WebPage()
 149         {
 150                 Text("Hello World!")
 151         }
 152
 153 .. tip:: 用例①と用例②の違いは、新しいステートメントでオブジェクトを作成するのではなく、
 154         WebPage() 関数でページオブジェクトを返すことです。
 155
 156 .. index::
 157         pair: ウェブ開発 (CGI ライブラリ); ウェブライブラリの機能
 158
 159 ウェブライブラリの機能
 160 ======================
 161
 162 この機能は手軽にウェブアプリケーションを作成するために、ウェブライブラリに実装されています。
 163
 164 * 関数版 HTML ページ
 165 * オブジェクト版 HTML ページ
 166 * HTTP Get
 167 * HTTP Post
 168 * ファイルのアップロード
 169 * URL エンコード
 170 * テンプレート
 171 * CRUD MVC のサンプル
 172 * ユーザのロジックと登録のサンプル
 173
 174 .. index::
 175         pair: ウェブ開発 (CGI ライブラリ); HTTP Get の用例
 176
 177 HTTP Get の用例
 178 ===============
 179
 180 ページのユーザインタフェース
 181
 182 .. code-block:: ring
 183
 184         #!ring -cgi
 185         Load "weblib.ring"
 186         Import System.Web
 187         New Page
 188         {
 189           Title = "Test HTTP Get"
 190           divstart([ :style = StyleSizeFull() ] )
 191           boxstart()
 192                 text( "Test HTTP GET" )
 193                 newline()
 194           boxend()
 195           divstart([ :style = Styledivcenter("600px","550px") +
 196                               StyleGradient(21) ])
 197           divstart([:style = stylefloatleft() + stylesize("100px","100%") +
 198                              stylecolor("black") + stylegradient(58)])
 199           formstart("ex5.ring")
 200                 tablestart([ :style = stylesize("65%","90%") +
 201                                       stylemarginleft("35%") +
 202                                       stylemargintop("30%") ])
 203                   rowstart([])
 204                         cellstart([])
 205                           text ( "Name : "  )
 206                         cellend()
 207                         cellstart([])
 208                           cTextboxStyle = StyleMarginLeft("5%") +
 209                                           StyleWidth("250px") +
 210                                           StyleColor("black") +
 211                                           StyleBackColor("white")
 212                           textbox([ :name = "Name", :style = cTextboxStyle ] )
 213                         cellend()
 214                   rowend()
 215                   rowstart([])
 216                         cellstart([])
 217                           text ( "Address : " )
 218                         cellend()
 219                         cellstart([])
 220                           textbox([ :name = "Address", :style = cTextboxStyle] )
 221                         cellend()
 222                   rowend()
 223                   rowstart([])
 224                         cellstart([])
 225                           text ( "Phone : " )
 226                         cellend()
 227                         cellstart([])
 228                           textbox([ :name = "Phone", :style = cTextboxStyle ])
 229                         cellend()
 230                   rowend()
 231                   rowstart([])
 232                         cellstart([])
 233                           text ( "Age : "  )
 234                         cellend()
 235                         cellstart([])
 236                           textbox([ :name = "Age", :style = cTextboxStyle ])
 237                         cellend()
 238                   rowend()
 239                   rowstart([])
 240                         cellstart([])
 241                           text ( "City: " )
 242                         cellend()
 243                         cellstart([])
 244                           listbox([ :name = "City", :items = ["Cairo","Riyadh","Jeddah"],
 245                                  :style = stylemarginleft("5%") + stylewidth("400px") ] )
 246                         cellend()
 247                   rowend()
 248                   rowstart([])
 249                         cellstart([])
 250                           text ( "Country : " )
 251                         cellend()
 252                         cellstart([])
 253                           combobox([ :name = "Country",
 254                                  :items = ["Egypt","Saudi Arabia","USA"],
 255                                  :style = stylemarginleft("5%") +
 256                                           stylewidth("400px")+
 257                                           stylecolor("black")+
 258                                           stylebackcolor("white")+
 259                                           stylefontsize("14px") ])
 260                         cellend()
 261                   rowend()
 262                   rowstart([])
 263                         cellstart([])
 264                           text ( "Note : " )
 265                         cellend()
 266                         cellstart([])
 267                           editbox([ :name = "Notes",
 268                                 :style = stylemarginleft("5%") +
 269                                          stylesize("400px","100px")+
 270                                          stylecolor("black")+
 271                                          stylebackcolor("white") ,
 272                                 :value = "write comments here..." ] )
 273                         cellend()
 274                   rowend()
 275                   rowstart([])
 276                         cellstart([])
 277                         cellend()
 278                         cellstart([])
 279                           submit([ :value = "Send" , :Style = stylemarginleft("5%") ])
 280                         cellend()
 281                   rowend()
 282                 tableend()
 283           formend()
 284           divend()
 285           divend()
 286           divend()
 287         }
 288
 289 スクリーンショット:
 290
 291 .. image:: ex4.jpg
 292         :alt: HTTP Get
 293
 294 応答:
 295
 296 .. code-block:: ring
 297
 298         #!ring -cgi
 299         Load "weblib.ring"
 300         Import System.Web
 301         New Page
 302         {
 303          divstart([ :style = styledivcenter("800px","500px") ])
 304           boxstart()
 305                 text ( "HTTP GET Response" )  newline()
 306           boxend()
 307           divstart([ :style = stylefloatleft()+stylewidth("10%")+
 308                               stylecolor("black")+stylegradient(58) ])
 309                 newline()
 310                 text ( "Name : "   )
 311                 newline() newline()
 312                 text ( "Address : "  )
 313                 newline() newline()
 314                 text ( "Phone : "   )
 315                 newline() newline()
 316                 text ( "Age : "   )
 317                 newline() newline()
 318                 text ( "City : "   )
 319                 newline() newline()
 320                 text ( "Country : "   )
 321                 newline() newline()
 322                 text ( "Note : "   )
 323                 newline() newline()
 324           divend()
 325           divstart([ :style = stylefloatleft()+stylewidth("90%")+
 326                               stylecolor("black")+stylegradient(47) ])
 327                 divstart([ :style = stylefloatleft() + stylewidth("1%") ])
 328                   newline()
 329                 divend()
 330                 divstart([ :style = stylefloatleft() + stylewidth("95%") ])
 331                   newline()
 332                   text ( aPageVars["Name"] )
 333                   newline() newline()
 334                   text ( aPageVars["Address"] )
 335                   newline() newline()
 336                   text ( aPageVars["Phone"] )
 337                   newline() newline()
 338                   text (  aPageVars["Age"] )
 339                   newline() newline()
 340                   text ( aPageVars["City"] )
 341                   newline() newline()
 342                   text (aPageVars["Country"] )
 343                   newline() newline()
 344                   text ( aPageVars["Notes"] )
 345                   newline() newline()
 346                 divend()
 347           divend()
 348          divend()
 349         }
 350
 351 スクリーンショット:
 352
 353 .. image:: ex5.jpg
 354         :alt: HTTP Get
 355
 356 .. index::
 357         pair: ウェブ開発 (CGI ライブラリ); HTTP POST の用例
 358
 359 HTTP POST の用例
 360 ================
 361
 362 ページのユーザインタフェース
 363
 364 .. code-block:: ring
 365
 366         #!ring -cgi
 367         Load "weblib.ring"
 368         Import System.Web
 369         New Page
 370         {
 371                 boxstart()
 372                         text( "Post Test")
 373                         newline()
 374                 boxend()
 375                 divstart([ :style=StyleFloatLeft()+StyleWidth("100px") ])
 376                         newline()
 377                         text( "Number1 : " )    newline() newline()
 378                         text( "Number2 : " )    newline() newline()
 379                 divend()
 380                 formpost("ex7.ring")
 381                         divstart([ :style = styleFloatLeft()+StyleWidth("200px") ])
 382                                 newline()
 383                                 textbox([ :name = "Number1" ])  newline() newline()
 384                                 textbox([ :name = "Number2" ])  newline() newline()
 385                                 submit([ :value = "Send" ] )
 386                         divend()
 387                 formend()
 388         }
 389
 390
 391 スクリーンショット:
 392
 393 .. image:: ex6.jpg
 394         :alt: HTTP Post
 395
 396 応答:
 397
 398 .. code-block:: ring
 399
 400         #!ring -cgi
 401         Load "weblib.ring"
 402         Import System.Web
 403         New Page
 404         {
 405                 boxstart()
 406                         text( "Post Result" )
 407                         newline()
 408                 boxend()
 409                 divstart([ :style = styleFloatLeft()+styleWidth("200px") ])
 410                         newline()
 411                         text( "Number1 : " + aPageVars["Number1"] )
 412                         newline() newline()
 413                         text( "Number2 : " + aPageVars["Number2"] )
 414                         newline() newline()
 415                         text( "Sum : " + (0 + aPageVars["Number1"] + aPageVars["Number2"] ) )
 416                         newline()
 417                 divend()
 418         }
 419
 420 スクリーンショット:
 421
 422 .. image:: ex7.jpg
 423         :alt: HTTP Post
 424
 425 .. index::
 426         pair: ウェブ開発 (CGI ライブラリ); Upload Files
 427
 428 ファイルのアップロード
 429 ======================
 430
 431 ページのユーザインタフェース
 432
 433 .. code-block:: ring
 434
 435         #!ring -cgi
 436         Load "weblib.ring"
 437         Import System.Web
 438         New page
 439         {
 440                 boxstart()
 441                         text( "Upload File" )
 442                         newline()
 443                 boxend()
 444                 for x = 1 to 3 newline() next
 445                 formupload("ex9.ring")
 446                         text( "Customer Name : " )
 447                         textbox([ :name = "custname" ])
 448                         newline() newline()
 449                         divstart([ :style = styleFloatLeft() + styleWidth("90px") ])
 450                                 uploadfile("file")  newline() newline()
 451                                 uploadfile("file2") newline() newline()
 452                                 submit([ :value = "Send" ])
 453                         divend()
 454                 formend()
 455         }
 456
 457 スクリーンショット:
 458
 459 .. image:: ex8.jpg
 460         :alt: ファイルのアップロード
 461
 462 応答:
 463
 464 .. code-block:: ring
 465
 466         #!ring -cgi
 467         Load "weblib.ring"
 468         Import System.Web
 469
 470         cUploadPath = "C:/Apache2.2/htdocs/ringapp/upload/"
 471         cUploadFolder = "/ringapp/upload/"
 472
 473         New page
 474         {
 475                 boxstart()
 476                         text( "Upload Result" )
 477                         newline()
 478                 boxend()
 479                 newline()
 480                 divstart([ :style=  styleFloatLeft() + styleWidth("100px") ])
 481                         text( "Name : " + aPageVars["custname"] )
 482                         newline()
 483                 divend()
 484                 if aPageVars["file"] != char(13)
 485                         getuploadedfile(self,"file")
 486                 ok
 487                 if aPageVars["file2"] != char(13)
 488                         getuploadedfile(self,"file2")
 489                 ok
 490         }
 491
 492         Func getuploadedfile oObj,cFile
 493                 # ここで object.プロパティ を使用
 494                 # オブジェクトの代わりに { } を使うと braceend メソッドの実行を回避します。
 495                 cFileName = cUploadPath + oObj.getfilename(aPageVars,cFile)
 496                 write(cFileName,aPageVars[cFile])
 497                 system("chmod a+x "+cFileName)
 498                 oObj.newline()
 499                 oObj.text( "File "+cFileName+ " Uploaded ..." )
 500                 oObj.newline()
 501                 imageURL = cUploadFolder + oObj.getfilename(aPageVars,cFile)
 502                 oObj.link([ :url = imageURL, :title = "Download" ])
 503                 oObj.newline()
 504                 oObj.image( [ :url = imageURL , :alt = :image  ] )
 505                 oObj.newline()
 506
 507 スクリーンショット:
 508
 509 .. image:: ex9.jpg
 510         :alt: ファイルのアップロード
 511
 512 .. index::
 513         pair: ウェブ開発 (CGI ライブラリ); Cookies (クッキー)
 514
 515 Cookies (クッキー)
 516 ==================
 517
 518 ページのユーザインタフェース
 519
 520 .. code-block:: ring
 521
 522         #!ring -cgi
 523         Load "weblib.ring"
 524         Import System.Web
 525
 526         New page
 527         {
 528                 boxstart()
 529                         text( "Cookie Test" )
 530                         newline()
 531                 boxend()
 532                 newline()
 533                 link([ :url = "ex11.ring", :title = "Use Cookies" ])
 534                 cookie("custname","Mahmoud Fayed")
 535                 cookie("custage",28)
 536         }
 537
 538 スクリーンショット:
 539
 540 .. image:: ex10.jpg
 541         :alt: Cookies
 542
 543 応答:
 544
 545 .. code-block:: ring
 546
 547         #!ring -cgi
 548         Load "weblib.ring"
 549         Import System.Web
 550
 551         New Page
 552         {
 553                 boxstart()
 554                         text( "Cookies Values" )
 555                         newline()
 556                 boxend()
 557                 link([ :url = "ex10.ring", :title = "back" ])
 558                 newline()
 559                 divstart([:style="float:left;width:200px"])
 560                         text( "Name : " + aPageVars["custname"] )
 561                         newline()
 562                         text( "Age : " + aPageVars["custage"] )
 563                         newline()
 564                 divend()
 565         }
 566
 567 スクリーンショット:
 568
 569 .. image:: ex11.jpg
 570         :alt: Cookies
 571
 572 .. index::
 573         pair: ウェブ開発 (CGI ライブラリ); URL エンコード
 574
 575 URL エンコード
 576 ==============
 577
 578 ページのユーザインタフェース
 579
 580 .. code-block:: ring
 581
 582         #!ring -cgi
 583         Load "weblib.ring"
 584         Import System.Web
 585
 586         New Page
 587         {
 588                 boxstart()
 589                         text( "URLEncode" )
 590                         newline()
 591                 boxend()
 592                 link([ :url = "ex5.ring?Name="+URLEncode("-*{Mahmoud}*-")+
 593                               "&Address=Egypt&Phone=123456&Age=28&Notes=Programmer",
 594                               :title = "Test URL Encode" ])
 595         }
 596
 597 スクリーンショット:
 598
 599 .. image:: ex12.jpg
 600         :alt: URL エンコード
 601
 602 スクリーンショット:
 603
 604 .. image:: ex12r.jpg
 605         :alt: URL エンコード
 606
 607
 608 .. index::
 609         pair: ウェブ開発 (CGI ライブラリ); テンプレート
 610
 611 テンプレート
 612 ============
 613
 614 テンプレートで HTML ファイルの内側に Ring コードを記述できます。
 615
 616 文法:
 617
 618 .. code-block:: html
 619
 620         <%= Ring 式 %>
 621         <%  Ring ステートメント %>
 622
 623 HTML コード
 624
 625 .. code-block:: html
 626
 627         <h1>Listing Numbers</h1>
 628         <table>
 629           <tr>
 630             <th> <%= myheader.cColumn1 %> </th>
 631             <th> <%= myheader.cColumn2 %> </th>
 632             <th></th>
 633             <th></th>
 634             <th></th>
 635           </tr>
 636         <% for x in aNumbers %>
 637           <tr>
 638             <td> <%= x.nValue  %> </td>
 639             <td> <%= x.nSquare %> </td>
 640           </tr>
 641         <% next %>
 642         </table>
 643
 644 Ring コード
 645
 646 .. code-block:: ring
 647
 648         #!ring -cgi
 649         Load "weblib.ring"
 650         Import System.Web
 651
 652         New NumbersController { start() }
 653
 654         Class NumbersController
 655
 656                 MyHeader aNumbers
 657
 658                 Func Start
 659
 660                         MyHeader = New Header
 661                         {
 662                                 cColumn1 = "Number" cColumn2 = "Square"
 663                         }
 664
 665                         aNumbers = list(20)
 666
 667                         for x = 1 to len(aNumbers)
 668                                 aNumbers[x] = new number
 669                                 {
 670                                         nValue  = x   nSquare = x*x
 671                                 }
 672                         next
 673
 674                         cTemp = Template("mynumbers.html",self)
 675
 676                         New Page
 677                         {
 678                                 boxstart()
 679                                         text( "Test Templates" )
 680                                         newline()
 681                                 boxend()
 682                                 html(cTemp)
 683                         }
 684
 685         Class Header cColumn1 cColumn2
 686         Class Number nValue   nSquare
 687
 688 スクリーンショット:
 689
 690 .. image:: ex13.jpg
 691         :alt: テンプレート
 692
 693 .. index::
 694         pair: ウェブ開発 (CGI ライブラリ); HTML の特殊文字
 695
 696 HTML の特殊文字
 697 ===============
 698
 699 text() 関数は HTML の特殊文字を表示します。
 700
 701 HTML コードを記述したい場合は html() 関数を使用します。
 702
 703 .. code-block:: ring
 704
 705         #!ring -cgi
 706         Load "weblib.ring"
 707         Import System.Web
 708
 709         New Page
 710         {
 711                 boxstart()
 712                         text("HTML Special Characters")
 713                         newline()
 714                 boxend()
 715                 text('
 716                         <html>
 717                                 <body>
 718                                         <p> "hello world" </p>
 719                                 </body>
 720                         </html>
 721                 ')
 722         }
 723
 724 スクリーンショット:
 725
 726 .. image:: ex14.jpg
 727         :alt: HTML の特殊文字
 728
 729
 730 .. index::
 731         pair: ウェブ開発 (CGI ライブラリ); ハッシュ関数
 732
 733 ハッシュ関数
 734 ============
 735
 736 ページのユーザインタフェース
 737
 738 .. code-block:: ring
 739
 740         #!ring -cgi
 741         Load "weblib.ring"
 742         Import System.Web
 743
 744         New Page
 745         {
 746                 boxstart()
 747                         text( "Hash Test")
 748                         newline()
 749                 boxend()
 750                 divstart([ :style = StyleFloatLeft() + StyleWidth("100px") ])
 751                         newline()
 752                         text( "Value : " )
 753                         newline() newline()
 754                 divend()
 755                 formpost("ex16.ring")
 756                         divstart([ :style = StyleFloatLeft() + StyleWidth("300px") ])
 757                                 newline()
 758                                 textbox([ :name = "Value" ])
 759                                 newline() newline()
 760                                 submit([ :value = "Send" ])
 761                         divend()
 762                 formend()
 763         }
 764
 765 スクリーンショット:
 766
 767 .. image:: ex15.jpg
 768         :alt: ハッシュ関数
 769
 770 応答:
 771
 772 .. code-block:: ring
 773
 774         #!ring -cgi
 775         Load "weblib.ring"
 776         Import System.Web
 777
 778         New Page
 779         {
 780                 boxstart()
 781                         text( "Hash Result" )
 782                         newline()
 783                 boxend()
 784                 divstart([ :style = styleFloatLeft() + styleWidth("100%") ])
 785                         newline()
 786                         text( "Value : "  + aPageVars["Value"] )
 787                         newline()
 788                         text( "MD5 : "    + MD5(aPageVars["Value"]) )
 789                         newline()
 790                         text( "SHA1 : "   + SHA1(aPageVars["Value"]) )
 791                         newline()
 792                         text( "SHA256 : " + SHA256(aPageVars["Value"]) )
 793                         newline()
 794                         text( "SHA224 : " + SHA224(aPageVars["Value"]) )
 795                         newline()
 796                         text( "SHA384 : " + SHA384(aPageVars["Value"]) )
 797                         newline()
 798                         text( "SHA512 : " + SHA512(aPageVars["Value"]) )
 799                         newline()
 800                 divend()
 801         }
 802
 803 スクリーンショット:
 804
 805 .. image:: ex16.jpg
 806         :alt: ハッシュ関数
 807
 808 .. index::
 809         pair: ウェブ開発 (CGI ライブラリ); 画像の無作為表示
 810
 811 画像の無作為表示
 812 ================
 813
 814 .. code-block:: ring
 815
 816         #!ring -cgi
 817         Load "weblib.ring"
 818         Import System.Web
 819
 820         cUploadPath = "C:/Apache2.2/htdocs/ringapp/upload/"
 821
 822         New Page
 823         {
 824                 boxstart()
 825                         text( "Random Test")
 826                         newline()
 827                 boxend()
 828                 divstart([ :style = styleFloatLeft() + styleWidth("400px") ])
 829                         newline()
 830                         aList = dir(cUploadPath)
 831                         if len(aList) > 0
 832                                 nIndex = random(len(aList))
 833                                 if nindex = 0 nIndex = 1 ok
 834                                 cItem = "upload/" + aList[nIndex][1]
 835                                 newline()
 836                                 image( [ :url = cItem , :alt = :image  ] )
 837                         else
 838                                 text("No images!") newline()
 839                         ok
 840                 divend()
 841         }
 842
 843 スクリーンショット:
 844
 845 .. image:: ex17.jpg
 846         :alt: 画像の無作為表示
 847
 848 .. index::
 849         pair: ウェブ開発 (CGI ライブラリ); HTML のリスト
 850
 851 HTML のリスト
 852 =============
 853
 854 この用例では、 1 ～ 10 までの数値があるリストの内容を表示します。
 855
 856 そして Ring のリストからリストを表示します。
 857
 858 最終的にボタンのリストがあり、ボタンが押されたときにクリックされた
 859 ボタンの番号を有するメッセージを取得します。
 860
 861 リストを開始するには ulstart() 関数を使用します。
 862
 863 リストを終了するには ulend() 関数を使用します。
 864
 865 listart() と liend() 関数でリストの項目を決定します。
 866
 867 .. code-block:: ring
 868
 869         #!ring -cgi
 870         Load "weblib.ring"
 871         Import System.Web
 872
 873         Func Main
 874                 New Page
 875                 {
 876                         ulstart([])
 877                                 for x = 1 to 10
 878                                         listart([])
 879                                                 text(x)
 880                                         liend()
 881                                 next
 882                         ulend()
 883                         list2ul(["one","two","three","four","five"])
 884                         ulstart([])
 885                                 for x = 1 to 10
 886                                         listart([])
 887                                                 cFuncName = "btn"+x+"()"
 888                                                 button([ :onclick = cFuncName , :value = x])
 889                                                 script(scriptfuncalert(cFuncName,string(x)))
 890                                         liend()
 891                                 next
 892                         ulend()
 893                 }
 894
 895 スクリーンショット:
 896
 897 .. image:: ex18.jpg
 898         :alt: のリスト
 899
 900 .. index::
 901         pair: ウェブ開発 (CGI ライブラリ); HTML のテーブル
 902
 903 HTML のテーブル
 904 ===============
 905
 906 この用例では tablestart(), tableend(), rowstart(), rowend(),headerstart(),
 907 headerend(), cellstart() および cellend() 関数版 HTML テーブルの生成方法を学びます。
 908
 909 .. code-block:: ring
 910
 911         #!ring -cgi
 912         Load "weblib.ring"
 913         Import System.Web
 914
 915         Func Main
 916                 New Page
 917                 {
 918                         divstart([ :style = styledivcenter("400px","500px") ] )
 919                                 style(styletable() + styletablerows("t01"))
 920                                 tablestart([ :id = :t01 , :style = stylewidth("100%") ])
 921                                         rowstart([])
 922                                                 headerstart([]) text("Number") headerend()
 923                                                 headerstart([]) text("square") headerend()
 924                                         rowend()
 925                                         for x = 1 to 10
 926                                                 rowstart([])
 927                                                         cellstart([]) text(x)   cellend()
 928                                                         cellstart([]) text(x*x) cellend()
 929                                                 rowend()
 930                                         next
 931                                 tableend()
 932                         divend()
 933                 }
 934
 935 スクリーンショット:
 936
 937 .. image:: ex19.jpg
 938         :alt: HTML のテーブル
 939
 940
 941 .. index::
 942         pair: ウェブ開発 (CGI ライブラリ); グラデーション
 943
 944 グラデーション
 945 ==============
 946
 947 この用例では StyleGradient() 関数の用法を学びます。
 948
 949 関数の入力としてスタイルを数値で指定します (1 から 60 までの範囲)。
 950
 951 .. code-block:: ring
 952
 953         #!ring -cgi
 954         Load "weblib.ring"
 955         Import System.Web
 956
 957         Func Main
 958                 New Page
 959                 {
 960                         boxstart()
 961                                 text("StyleGradient() Function")
 962                         boxend()
 963                         for x = 1 to 60
 964                                 divstart([ :id = x , :align = "center" ,
 965                                            :style = stylefloatleft() +
 966                                                     stylesize(string(100/60*6)+"%","50px") +
 967                                                     stylegradient(x) ])
 968                                         h3(x)
 969                                 divend()
 970                         next
 971                 }
 972
 973 スクリーンショット:
 974
 975 .. image:: ex20.jpg
 976         :alt: グラデーション
 977
 978 .. index::
 979         pair: ウェブ開発 (CGI ライブラリ); オブジェクト版ページ生成
 980
 981 オブジェクト版ページ生成
 982 ========================
 983
 984 HTML ページを生成するために関数、メソッドではなく
 985 ページで要素ごとのオブジェクトを使えます。
 986
 987 この選択をするとコードは綺麗になりますが、動作速度は遅くなります。
 988
 989 最も高速な方法は関数の使用、次に早いのはテンプレートの使用、
 990 そして最後にオブジェクトを使用 (低速) して HTML コードを直接出力することです。
 991
 992 .. code-block:: ring
 993
 994         #!ring -cgi
 995         Load "weblib.ring"
 996         Import System.Web
 997
 998         Func Main
 999
1000           WebPage()
1001           {
1002                 Title = "Using objects to create the Web Page content"
1003                 h1 { text("welcome") }
1004                 link
1005                 {
1006                   Title = "Google"
1007                   Link  = "http://www.google.com"
1008                 }
1009                 div
1010                 {
1011                   id = "div1"
1012                   style = stylegradient(30) + stylesize("50%","50%")
1013                   text("Outer Div")
1014                   div
1015                   {
1016                         id = "div2"
1017                         color = "white"
1018                         backgroundcolor = "green"
1019                         width = "50%"
1020                         height = "50%"
1021                         marginleft = "5%"
1022                         margintop = "5%"
1023                         text("Inner Div")
1024                   }
1025                 }
1026                 div
1027                 {
1028                   id = "div3"
1029                   color = "black"
1030                   backgroundcolor = "silver"
1031                   width = "100%"
1032                   height = "100%"
1033                   text("Form")
1034                   form
1035                   {
1036                         method = "POST"
1037                         Action = "helloworld.ring"
1038                         Table
1039                         {
1040                           style = stylewidth("100%") + stylegradient(24)
1041                           TR
1042                           {
1043                                 TD { WIDTH="10%" text("Name : " )  }
1044                                 TD { Input { type = "text" } }
1045                           }
1046                           TR
1047                           {
1048                                 TD { WIDTH="10%" text("Email : " ) }
1049                                 TD { Input { type = "text" } }
1050                           }
1051                           TR
1052                           {
1053                                 TD { WIDTH="10%" text("Password : " ) }
1054                                 TD { Input { type = "password" } }
1055                           }
1056                           TR
1057                           {
1058
1059                                 TD { WIDTH="10%" text("Notes") }
1060                                 TD { TextArea { width="100%" rows = 10  cols = 10
1061                                                 text("type text here...") } }
1062                           }
1063                           TR
1064                           {
1065                                 TD { WIDTH="10%" text("Gender") }
1066                                 TD {
1067                                   select
1068                                    {
1069                                          width = "100%"
1070                                          option { text("Male") }
1071                                          option { text("Female") }
1072                                    }
1073                                 }
1074                           }
1075                           TR
1076                           {
1077                                 TD {   WIDTH="10%" text("Role") }
1078                                 TD
1079                                 {
1080                                   select
1081                                   {
1082                                          multiple = "multiple"
1083                                          width    = "100%"
1084                                          option { text("student") }
1085                                          option { text("admin") }
1086                                    }
1087                                 }
1088                           }
1089                         }
1090                         Input { type = "submit" value = "send" }
1091                         Image { src="upload/profile1.jpg" alt="profile"}
1092                         Input { type = "checkbox" value = "Old Member"} text("old member")
1093                         Input { type = "range" min=1 max=100}
1094                         Input { type = "number" min=1 max=100}
1095                         Input { type = "radio" color="black" name="one"
1096                                 value = "one"} text("one")
1097                   }
1098                 }
1099                 div
1100                 {
1101                   color = "white"
1102                   backgroundcolor = "blue"
1103                   width = "100%"
1104                   UL
1105                   {
1106                         LI { TEXT("ONE") }
1107                         LI { TEXT("TWO") }
1108                         LI { TEXT("THREE") }
1109                   }
1110                 }
1111                 div
1112                 {
1113                   audio
1114                   {
1115                         src = "horse.ogg"
1116                         type = "audio/ogg"
1117                   }
1118
1119                   video
1120                   {
1121                          width = 320
1122                          height = 240
1123                          src = "movie.mp4"
1124                          type = "video/mp4"
1125                   }
1126
1127                   Input
1128                   {
1129                         type = "color"
1130                         value = "#ff0000"
1131                         onchange = "clickColor(0, -1, -1, 5)"
1132                   }
1133                 }
1134           }
1135
1136 スクリーンショット:
1137
1138 .. image:: ex21.jpg
1139         :alt: オブジェクトの使用
1140
1141 .. image:: ex21_2.jpg
1142         :alt: オブジェクトの使用 - 第二部
1143
1144
1145 .. index::
1146         pair: ウェブ開発 (CGI ライブラリ); HtmlPage クラス
1147
1148 HtmlPage クラス
1149 ===============
1150
1151 このクラスは標準出力を経由せずに HTML ドキュメントを作成します。
1152
1153 ウェブアプリケーションだけで WebLib を使うときの代用になります。
1154
1155 また、コンソール、 GUI、モバイル用のアプリケーションでも使えます。
1156
1157 用例:
1158
1159 .. code-block:: ring
1160
1161         load "stdlib.ring"
1162         load "weblib.ring"
1163
1164         import System.Web
1165
1166         func main
1167
1168                 mypage = new HtmlPage {
1169                         h1 { text("Customers Report") }
1170                         Table
1171                         {
1172                                   style = stylewidth("100%") + stylegradient(4)
1173                                   TR
1174                                   {
1175                                         TD { WIDTH="10%" text("Customers Count : " )  }
1176                                         TD { text (100) }
1177                                   }
1178                         }
1179
1180                         Table
1181                         {
1182                                   style = stylewidth("100%") + stylegradient(26)
1183                                   TR
1184                                   {
1185                                         style = stylewidth("100%") + stylegradient(24)
1186                                         TD { text("Name " )  }
1187                                         TD { text("Age" ) }
1188                                         TD { text("Country" ) }
1189                                         TD { text("Job" ) }
1190                                         TD { text("Company" ) }
1191                                   }
1192                                   for x =  1 to 100
1193                                         TR
1194                                         {
1195                                                 TD { text("Test" )  }
1196                                                 TD { text("30" ) }
1197                                                 TD { text("Egypt" ) }
1198                                                 TD { text("Sales" ) }
1199                                                 TD { text("Future" ) }
1200                                         }
1201                                   next
1202                         }
1203
1204                 }
1205
1206                 write("report.html",mypage.output())
1207
1208 .. index::
1209         pair: ウェブ開発 (CGI ライブラリ); 関数版 Bootstrap ライブラリの用法
1210
1211 関数版 Bootstrap ライブラリの用法
1212 =================================
1213
1214 この用例は HTML ページ生成時に Bootstrap JavaScript ライブラリを使います。
1215
1216 .. code-block:: ring
1217
1218         #!ring -cgi
1219         Load "weblib.ring"
1220         Import System.Web
1221
1222         Func Main
1223           new BootstrapPage {
1224                 divstart([ :class = "container" ])
1225                    divstart([ :class = "jumbotron"  ])
1226                         h1("Bootstrap Page")
1227                   divend()
1228                   divstart([ :class = :row ])
1229                         divstart([ :class = "col-sm-4" ])
1230                           h3("Welcome to the Ring programming language")
1231                           p([ :text = "Using a scripting language is very fun!" ])
1232                         divend()
1233                         divstart([ :class = "col-sm-4" ])
1234                           h3("Welcome to the Ring programming language")
1235                           p([ :text = "using a scripting language is very fun!" ])
1236                         divend()
1237                         divstart([ :class = "col-sm-4" ])
1238                           h3("Welcome to the Ring programming language")
1239                           p([ :text = "using a scripting language is very fun!" ])
1240                         divend()
1241                   divend()
1242                 divend()
1243           }
1244
1245
1246 スクリーンショット:
1247
1248 .. image:: ex22.jpg
1249         :alt: Bootstrap
1250
1251 .. index::
1252         pair: ウェブ開発 (CGI ライブラリ); オブジェクト版 Bootstrap ライブラリの用法
1253
1254 オブジェクト版 Bootstrap ライブラリの用法
1255 =========================================
1256
1257 この用例では、 HTML ページの生成時に Bootstrap JavaScript ライブラリを使用します。
1258
1259 HTML 要素の生成関数ではなくオブジェクトを使用します。
1260
1261 .. code-block:: ring
1262
1263         #!ring -cgi
1264         Load "weblib.ring"
1265         Import System.Web
1266
1267         Func Main
1268           BootStrapWebPage()
1269           {
1270                 div
1271                 {
1272                   classname = :container
1273                   div
1274                   {
1275                         classname = :jumbotron
1276                         H1 {   text("Bootstrap Page")   }
1277                   }
1278                   div
1279                   {
1280                         classname = :row
1281                         for x = 1 to 3
1282                           div
1283                           {
1284                                 classname = "col-sm-4"
1285                                 H3 { html("Welcome to the Ring programming language") }
1286                                 P  { html("Using a scripting language is very fun!") }
1287                           }
1288                         next
1289                   }
1290                   div
1291                   {
1292                         classname = :row
1293                         div
1294                         {
1295                           classname = "col-sm-4"
1296                           Button
1297                           {
1298                                 classname = "btn btn-info btn-lg"
1299                                 datatoggle= "modal"
1300                                 datatarget = "#myModal"
1301                                 text("Open Large Modal")
1302                           }
1303                         }
1304                         div
1305                         {
1306                           classname = "col-sm-4"
1307                           Button {  classname = "btn btn-default btn-lg" text("default") }
1308                           Button {  classname = "btn btn-primary btn-md" text("primary") }
1309                           Button {  classname = "btn btn-sucess btn-sm"  text("sucess") }
1310                           Button {  classname = "btn btn-info btn-xs"    text("info") }
1311                           Button {  classname = "btn btn-warning"        text("warning") }
1312                           Button {  classname = "btn btn-danger"         text("danger") }
1313                           Button {  classname = "btn btn-link"           text("link") }
1314                         }
1315                         div
1316                         {
1317                           classname = "col-sm-4"
1318                           Button {  classname = "btn btn-default btn-block" text("default") }
1319                           Button {  classname = "btn btn-primary btn-block" text("primary") }
1320                           Button {  classname = "btn btn-sucess btn-block"  text("sucess") }
1321                           Button {  classname = "btn btn-info btn-block"    text("info") }
1322                           Button {  classname = "btn btn-warning btn-block" text("warning") }
1323                           Button {  classname = "btn btn-danger btn-block"  text("danger") }
1324                           Button {  classname = "btn btn-link btn-block"    text("link") }
1325                         }
1326                         div
1327                         {
1328                           classname = "col-sm-4"
1329                           div { classname = "btn-group"
1330                                 button {  classname="btn btn-primary" text("one") }
1331                                 button {  classname="btn btn-primary" text("two") }
1332                                 button {  classname="btn btn-primary" text("three") }
1333                           }
1334                         }
1335                         div
1336                         {
1337                           classname = "col-sm-4"
1338                           div { classname = "btn-group btn-group-lg"
1339                                 button {  classname="btn btn-primary" text("one") }
1340                                 button {  classname="btn btn-primary" text("two") }
1341                                 button {  classname="btn btn-primary" text("three") }
1342                           }
1343                         }
1344                         div
1345                         {
1346                           classname = "col-sm-4"
1347                           div {
1348                                 classname = "btn-group-vertical btn-group-lg"
1349                                 button {  classname="btn btn-primary" text("one") }
1350                                 button {  classname="btn btn-primary" text("two") }
1351                                 button {  classname="btn btn-primary" text("three") }
1352                           }
1353                         }
1354                   }
1355                   div { classname="modal fade" id="myModal" role="dialog"
1356                         div { classname = "modal-dialog modal-lg"
1357                           div { classname="modal-content"
1358                                 div { classname="modal-header"
1359                                   button {  classname="close" datadismiss="modal"
1360                                         html("&times")
1361                                   }
1362                                   h4 {  classname="modal-title"
1363                                         text("Modal Header")
1364                                   }
1365                                 }
1366                                 div { classname = "modal-body"
1367                                   p { text("This is a large model.") }
1368                                 }
1369                                 div { classname="modal-footer"
1370                                   button { classname = "btn btn-default" datadismiss="modal"
1371                                         text("close")
1372                                   }
1373                                 }
1374                           }
1375                         }
1376                   }
1377                 }
1378           }
1379
1380 スクリーンショット:
1381
1382 .. image:: ex23.jpg
1383         :alt: オブジェクト版 Bootstrap ページ
1384
1385 .. index::
1386         pair: ウェブ開発 (CGI ライブラリ); MVC 版 CRUD の用例
1387
1388 MVC 版 CRUD の用例
1389 ==================
1390
1391 この用例では、 weblib.ring と datalib.ring を使用します。
1392
1393 datalib.ring には MVC パターンでデータベースアプリケーションを作成するためのクラスがあります。
1394
1395 この用例では SalaryController クラスからオブジェクトを作成して Routing メソッドを呼び出します。
1396
1397 ページの基本的な URL を保持するために変数 website を定義します。
1398
1399 ModelBase クラスから SalaryModel クラスを作成する時に、テーブル salary が開かれ model クラスでカラムデータが属性として定義されます。
1400
1401 SalaryView クラスは、変換用の SalaryLanguageEnglish クラスからオブジェクトを作成します。
1402
1403 AddFuncScript メソッドはフォームへレコードデータを追加、または修正するために使用されます。
1404
1405 FormViewContent メソッドはフォームへレコードを追加、または修正するときにコントロールを決定するために使用されます。
1406
1407 .. code-block:: ring
1408
1409         #!ring -cgi
1410         Load "weblib.ring"
1411         Load "datalib.ring"
1412         Import System.Web
1413
1414         website = "ex24.ring"
1415
1416         New SalaryController { Routing() }
1417
1418         Class SalaryModel from ModelBase
1419
1420         Class SalaryController From ControllerBase
1421
1422         Class SalaryView From ViewBase
1423
1424           oLanguage = new SalaryLanguageEnglish
1425
1426           Func AddFuncScript oPage,oController
1427                 return   oPage.scriptfuncajax("myadd",oController.cMainURL+
1428                          oController.cOperation+"=add","mysubpage")
1429
1430           Func FormViewContent oController,oTranslation,oPage
1431                 return [
1432                                 [ oTranslation.aColumnsTitles[2], "textbox", "name",
1433                                   oController.oModel.Name, oPage.stylewidth("100%")    ],
1434                                 [ oTranslation.aColumnsTitles[3], "textbox", "salary",
1435                                   oController.oModel.Salary, oPage.stylewidth("50%") ]
1436                            ]
1437
1438         Class SalaryLanguageEnglish
1439           cTitle = "Salary Table"
1440           cBack = "back"
1441           aColumnsTitles = ["ID","Name","Salary"]
1442           cOptions = "Options"
1443           cSearch = "Search"
1444           comboitems = ["Select Option...","Edit","Delete"]
1445           cAddRecord = "Add Record"
1446           cEditRecord = "Edit Record"
1447           cRecordDeleted = "Record Deleted!"
1448           aMovePages = ["First","Prev","Next","Last"]
1449           cPage = "Page"
1450           cOf = "of"
1451           cRecordsCount = "Records Count"
1452           cSave = "Save"
1453           temp = new page
1454           cTextAlign = temp.StyleTextRight()
1455           cNoRecords = "No records!"
1456
1457 スクリーンショット:
1458
1459 .. image:: ex24.jpg
1460         :alt: 給与表
1461
1462 .. image:: ex24_2.jpg
1463         :alt: 給与表 - 検索
1464
1465 .. index::
1466         pair: ウェブ開発 (CGI ライブラリ); ユーザの登録とログイン
1467
1468 ユーザの登録とログイン
1469 ======================
1470
1471 ユーザ名、および電子メールなど利用者のデータを扱うためにユーザクラス (Model,
1472 View および Controller) があります。
1473
1474 このコードは ex25_users.ring として収録しています。
1475
1476 .. code-block:: ring
1477
1478         Class UsersModel from ModelBase
1479           cSearchColumn = "username"
1480
1481         Class UsersController From ControllerBase
1482           aColumnsNames = ["id","username","email"]
1483
1484           Func UpdateRecord
1485                 oModel.id = aPageVars[cRecID]
1486                 oModel.updatecolumn("username", aPageVars[:username] )
1487                 oModel.updatecolumn("email", aPageVars[:email] )
1488                 oView.UpdateView(self)
1489
1490         Class UsersView from ViewBase
1491
1492           oLanguage = new UsersLanguageEnglish
1493
1494           Func AddFuncScript oPage,oController
1495                 return   oPage.scriptfunc("myadd",oPage.scriptredirection("ex26.ring"))
1496
1497           Func FormViewContent oController,oTranslation,oPage
1498                 return [
1499                                 [oTranslation.aColumnsTitles[2],"textbox","username",
1500                                 oController.oModel.UserName,oPage.stylewidth("100%")],
1501                                 [oTranslation.aColumnsTitles[3],"textbox","email",
1502                                 oController.oModel.Email,oPage.stylewidth("50%")]
1503                            ]
1504
1505         Class UsersLanguageEnglish
1506           cTitle = "Users Table"
1507           cBack = "back"
1508           aColumnsTitles = ["ID","User Name","Email"]
1509           cOptions = "Options"
1510           cSearch = "Search"
1511           comboitems = ["Select Option...","Edit","Delete"]
1512           cAddRecord = "Add Record"
1513           cEditRecord = "Edit Record"
1514           cRecordDeleted = "Record Deleted!"
1515           aMovePages = ["First","Prev","Next","Last"]
1516           cPage = "Page"
1517           cOf = "of"
1518           cRecordsCount = "Records Count"
1519           cSave = "Save"
1520           temp = new page
1521           cTextAlign = temp.StyleTextRight()
1522           cNoRecords = "No records!"
1523
1524 ファイル ex25.ring では ex25_users.ring を読み込み後に UsersController クラスからオブジェクトを作成します。
1525
1526 作成されたオブジェクトで routing メソッドを呼び出します。
1527
1528 .. code-block:: ring
1529
1530         #!ring -cgi
1531         Load "weblib.ring"
1532         Load "datalib.ring"
1533         Load "ex25_users.ring"
1534
1535         Import System.Web
1536         website = "ex25.ring"
1537         New UsersController { Routing() }
1538
1539 スクリーンショット:
1540
1541 .. image:: ex25.jpg
1542         :alt: 利用者表
1543
1544 このコードは登録ページを示しています。
1545
1546 .. code-block:: ring
1547
1548         #!ring -cgi
1549         Load "weblib.ring"
1550         Load "datalib.ring"
1551         Import System.Web
1552
1553         website = "ex26.ring"
1554
1555         new page {
1556           boxstart()
1557                 text( "Register")
1558                 newline()
1559           boxend()
1560           divstart([:style = stylegradient(6) + stylesize("100%","95%") ])
1561           link([ :url = website, :title = "back" , :style = stylecolor("white")])
1562           newline()
1563           divstart([ :style= styledivcenter("500","160") + stylegradient(52) ])
1564           formpost("ex27.ring")
1565                 tablestart([ :Style =    stylemarginleft("2%") + stylemargintop("2%") +
1566                                          stylewidth("90%") ])
1567                   rowstart([])
1568                         cellstart([:style = stylewidth("20%") + styleheight(30)])
1569                           text("User Name")
1570                         cellend()
1571                         cellstart([ :style = stylewidth("80%")  ])
1572                           textbox([:name = "username", :style = stylewidth("100%")])
1573                         cellend()
1574                   rowend()
1575                   rowstart([])
1576                         cellstart([ :Style = styleheight(30)])
1577                           text("Password")
1578                         cellend()
1579                         cellstart([])
1580                           textbox([:name = "password" , :type = "password"])
1581                         cellend()
1582                   rowend()
1583                   rowstart([])
1584                         cellstart([ :style = styleheight(30)])
1585                           text("Email")
1586                         cellend()
1587                         cellstart([])
1588                           textbox([:name = "email" , :style = stylewidth("100%")])
1589                         cellend()
1590                   rowend()
1591                   rowstart([])
1592                         cellstart([ :style = styleheight(30)])
1593                         cellend()
1594                         cellstart([ :style = styleheight(30)])
1595                           submit([:value = "Register"  ])
1596                         cellend()
1597                   rowend()
1598                 tableend()
1599           formend()
1600           divend()
1601           divend()
1602         }
1603
1604 スクリーンショット:
1605
1606 .. image:: ex26.jpg
1607         :alt: 登録ページ
1608
1609
1610 登録ページの応答
1611
1612 .. code-block:: ring
1613
1614         #!ring -cgi
1615         Load "weblib.ring"
1616         Load "datalib.ring"
1617         Load "ex25_users.ring"
1618
1619         Import System.Web
1620
1621         oUser = new UsersModel
1622         oUser.Connect()
1623         if oUser.findwith("username",aPageVars["username"])
1624                 new page {
1625                         text("The user name is already registered")
1626                 }
1627                 return
1628         ok
1629         if oUser.findwith("email",aPageVars["email"])
1630                 new page {
1631                         text("This email is already registered")
1632                 }
1633                 return
1634         ok
1635
1636         aPageVars["salt"] = str2hex(RandBytes(32))
1637         aPageVars["pwhash"] = sha256(aPagevars["password"]+aPageVars["salt"])
1638         aPageVars["sessionid"] = str2hex(randbytes(32))
1639         oUser.Insert()
1640         new page {
1641                 cookie("sessionid",aPageVars["sessionid"])
1642                 text("New User Created!")
1643                 newline()
1644                 text("User Name : " + aPageVars["username"])
1645                 newline()
1646         }
1647         oUser.Disconnect()
1648
1649 このコードはログインページを示しています。
1650
1651 .. code-block:: ring
1652
1653         #!ring -cgi
1654         Load "weblib.ring"
1655         Load "datalib.ring"
1656
1657         Import System.Web
1658
1659         website = "ex28.ring"
1660
1661         new page {
1662           boxstart()
1663                 text( "Login")
1664                 newline()
1665           boxend()
1666           divstart([:style = stylegradient(6) + stylesize("100%","95%") ])
1667           link([ :url = website, :title = "back" , :style = stylecolor("white")])
1668           newline()
1669           divstart([ :style= styledivcenter("500","130") + stylegradient(52) ])
1670           formpost("ex29.ring")
1671                 tablestart([ :Style =   stylemarginleft("2%") + stylemargintop("2%") +
1672                                         stylewidth("90%") ])
1673                   rowstart([])
1674                         cellstart([:style = stylewidth("20%") + styleheight(30)])
1675                           text("User Name")
1676                         cellend()
1677                         cellstart([ :style = stylewidth("80%") ])
1678                           textbox([:name = "username", :style = stylewidth("100%")])
1679                         cellend()
1680                   rowend()
1681                   rowstart([])
1682                         cellstart([ :style = styleheight(30)])
1683                           text("Password")
1684                         cellend()
1685                         cellstart([])
1686                           textbox([:name = "password" , :type = "password"])
1687                         cellend()
1688                   rowend()
1689                   rowstart([])
1690                         cellstart([ :style = styleheight(30) ])
1691                         cellend()
1692                         cellstart([])
1693                           submit([:value = "Login"  ])
1694                         cellend()
1695                   rowend()
1696                 tableend()
1697           formend()
1698           divend()
1699           divend()
1700         }
1701
1702 スクリーンショット:
1703
1704 .. image:: ex28.jpg
1705         :alt: ログインページ
1706
1707
1708 ログインページの応答
1709
1710 .. code-block:: ring
1711
1712         #!ring -cgi
1713         Load "weblib.ring"
1714         Load "datalib.ring"
1715         Load "ex25_users.ring"
1716
1717         Import System.Web
1718
1719         oUser = new UsersModel
1720         oUser.Connect()
1721         lResult = oUser.FindWith("username",aPageVars["username"])
1722         new page {
1723                 if lResult
1724                         if sha256(aPagevars["password"]+oUser.Salt) = oUser.pwhash
1725                                 text ("Correct Password!")
1726                                 aPageVars["sessionid"] = str2hex(randbytes(32))
1727                                 oUser.UpdateColumn("sessionid",aPageVars["sessionid"])
1728                                 cookie("sessionid",aPageVars["sessionid"])
1729                         else
1730                                 text ("Bad password!")
1731                         ok
1732                 else
1733                         text("Bad User Name!")
1734                 ok
1735         }
1736         oUser.Disconnect()
1737
1738 このコードはユーザのログインが必要かどうかを確認するためのものです。
1739
1740 .. code-block:: ring
1741
1742         #!ring -cgi
1743         Load "weblib.ring"
1744         Load "datalib.ring"
1745         Load "ex25_users.ring"
1746
1747         Import System.Web
1748
1749         oUser = new UsersModel
1750         oUser.Connect()
1751         lResult = oUser.FindWith("sessionid",aPageVars["sessionid"])
1752         new page {
1753                 if lResult
1754                         text("User Name : " + oUser.username )
1755                 else
1756                         text("Please Login First!")
1757                 ok
1758         }
1759         oUser.Disconnect()
1760
1761 .. index::
1762         pair: ウェブ開発 (CGI ライブラリ); Database, ModelBase と ControllerBase クラス
1763
1764 Database, ModelBase と ControllerBase クラス
1765 ============================================
1766
1767 datalib.ring からコードの一部を示します。
1768
1769 このコードでは Database, ModelBase と ControllerBase クラスです。
1770
1771 .. code-block:: ring
1772
1773         Import System.Web
1774
1775         Class Database
1776
1777           cServer = "localhost"
1778           cUserName = "root"
1779           cPassword = "root"
1780           cDatabase = "mahdb"
1781
1782           Func Connect
1783
1784                 con = mysql_init()
1785                 mysql_connect(con, cServer, cUserName, cPassWord,cDatabase)
1786
1787           Func Disconnect
1788
1789                 mysql_close(con)
1790
1791           Func Query cQuery
1792
1793                 mysql_query(con,cQuery)
1794
1795           Func QueryResult
1796
1797                 return mysql_result(con)
1798
1799           Func QueryResultWithColumns
1800                 # カラム名＋クエリの結果を返します。
1801                 return mysql_result2(con)
1802
1803           Func QueryValue
1804                 aResult = mysql_result(con)
1805                 if islist(aResult) and len(aResult) >= 1
1806                   aResult = aResult[1]
1807                   if len(aResult) >= 1
1808                         return aResult[1]
1809                   ok
1810                 ok
1811                 return 0
1812
1813           Func EscapeString x
1814                 if isstring(x)
1815                   return MySQL_Escape_String(con,x)
1816                 else
1817                   return MySQL_Escape_String(con,string(x))
1818                 ok
1819
1820           Private
1821                 con = NULL
1822
1823         Class ModelBase from Database
1824
1825           cTableName = ""
1826           cSearchColumn = "name"
1827           aColumns = []
1828           aQueryResult = []
1829           ID = 0
1830
1831           # クラス名からテーブル名を設定します。
1832           classname = lower(classname(self))
1833           if right(classname,5) = :model
1834                 cTablename = left(classname,len(classname)-5)
1835           ok
1836
1837           Func Insert
1838
1839                 cValues = ""
1840                 for x in aColumns
1841                   cValues += "'" + EscapeString(aPageVars[x]) + "',"
1842                 Next
1843                 cValues = left(cValues,len(cValues)-1)  # 末尾のカンマを削除
1844                 cColumns = ""
1845                 for x in aColumns
1846                   cColumns += x + ","
1847                 next
1848                 cColumns = left(cColumns,len(cColumns)-1)
1849                 query("insert into " + cTableName + "("+cColumns+") values (" +
1850                          cValues + ")" )
1851
1852           Func Update nID
1853
1854                 cStr = ""
1855                 for x in aColumns
1856                   cStr += x + " = '" + EscapeString(aPageVars[x]) + "' , "
1857                 # カンマの後にスペースは必要
1858                 Next
1859                 cStr = left(cStr,len(cStr)-2)
1860                 query("update " + cTableName + " set " + cStr + " where id = " + nID )
1861
1862           Func UpdateColumn cColumn,cValue
1863                 query("update " + cTableName + " set " + cColumn + " = '" +
1864                 EscapeString(cValue) + "' where id = " + self.ID )
1865
1866
1867           Func Count cValue
1868
1869                 query("SELECT count(*) FROM " + cTableName +
1870                          " where "+cSearchColumn+" like '" + EscapeString(cValue) + "%'")
1871                 return queryValue()
1872
1873           Func Read nStart,nRecordsPerPage
1874
1875                 query("SELECT * FROM "+ cTableName+" limit " + EscapeString(nStart) + "," +
1876                 EscapeString(nRecordsPerPage) )
1877                 aQueryResult = queryResult()
1878
1879           Func Search cValue,nStart,nRecordsPerPage
1880
1881                 query("SELECT * FROM "+ cTableName+" where "+cSearchColumn+" like '" +
1882                 EscapeString(cValue) + "%'" +
1883                   " limit " + EscapeString(nStart) + "," + EscapeString(nRecordsPerPage) )
1884                 aQueryResult = queryResult()
1885
1886           Func Find nID
1887
1888                 query("select * from " + cTableName + " where id = " + EscapeString(nID) )
1889                 aResult = queryResult()[1]
1890                 # オブジェクトの属性から配列へ結果を移動
1891                 ID = nID
1892                 cCode = ""
1893                 for x = 2 to len(aResult)
1894                   cCode += aColumns[x-1] + " = hex2str('" + str2hex(aResult[x]) + "')" + nl
1895                 next
1896                 eval(cCode)
1897
1898           Func FindWith cColumn,cValue
1899
1900                 query("select * from " + cTableName + " where "+cColumn+" = '" +
1901                 EscapeString(cValue) + "'" )
1902                 aResult = queryResult()
1903                 if len(aResult) > 0
1904                   aResult = aResult[1]
1905                 else
1906                   return 0
1907                 ok
1908                 # オブジェクトの属性から配列へ結果を移動
1909                 ID = aResult[1]
1910                 cCode = ""
1911                 for x = 2 to len(aResult)
1912                   cCode += aColumns[x-1] + " = hex2str('" + str2hex(aResult[x]) + "')" + nl
1913                 next
1914                 eval(cCode)
1915                 return 1
1916
1917           Func Delete ID
1918
1919                 query("delete from " + cTableName + " where id = " + EscapeString(ID) )
1920
1921           Func Clear
1922
1923                 cCode = ""
1924                 for x in aColumns
1925                   cCode += x + ' = ""' + nl
1926                 next
1927                 eval(cCode)
1928
1929           Func LoadModel
1930
1931                 # カラム配列の作成
1932                 query("SELECT * FROM "+ cTableName + " limit 0,1")
1933                 aQueryResult = QueryResultWithColumns()[1]
1934                 for x = 2 to len(aQueryResult)
1935                   aColumns + lower(trim(aQueryResult[x]))
1936                 next
1937
1938                 # カラムごとの属性を作成
1939                 for x in aColumns
1940                   addattribute(self,x)
1941                 next
1942
1943           Func Connect
1944
1945                 Super.Connect()
1946                 if nLoadModel = 0
1947                   nLoadModel = 1
1948                   LoadModel()
1949                 ok
1950
1951           private
1952
1953                 nLoadModel = 0
1954
1955
1956         Class ControllerBase
1957
1958           nRecordsPerPage = 5
1959           nRecordsCount = 0
1960           nPagesCount = 0
1961           nActivePage = 0
1962
1963           # oView = new tablenameView と oModel = new tablename.Model の動的生成
1964           classname = lower(classname(self))
1965           if right(classname,10)  = :controller
1966                 tablename = left(classname,len(classname)-10)
1967                 cCode = "oView = new " + tablename+"View" + nl
1968                 cCode += "oModel = new " + tablename+"Model" + nl
1969                 eval(cCode)
1970                 oModel.connect()
1971           ok
1972
1973           cSearchName = "searchname"
1974           cPart = "part"
1975           cPageError = "The page number is not correct"
1976           cLast = "last"
1977           cOperation = "operation"
1978           cRecID = "recid"
1979
1980           aColumnsNames = ["id"]
1981           for t in oModel.aColumns
1982                 aColumnsNames + t
1983           next
1984
1985           cMainURL = website + "?"
1986
1987           func Routing
1988
1989                 switch      aPageVars[cOperation]
1990                 on NULL     showtable()
1991                 on :add     addrecord()
1992                 on :save    saverecord()
1993                 on :delete  deleterecord()
1994                 on :edit    editrecord()
1995                 on :update  updaterecord()
1996                 off
1997
1998           func ShowTable
1999
2000                 nRecordsCount = oModel.Count( aPageVars[cSearchName] )
2001
2002                 nPagesCount = ceil(nRecordsCount / nRecordsPerPage)
2003
2004                 if aPageVars[cPart] = cLast
2005                   aPageVars[cPart] = string(nPagesCount)
2006                 ok
2007
2008                 nActivePage = number(aPageVars[cPart])
2009                 if nActivePage = 0 nActivePage = 1 ok
2010
2011                 if ( nActivePage > nPagesCount ) and nRecordsCount > 0
2012                   ErrorMsg(cPageError)
2013                   return
2014                 ok
2015
2016                 nStart = (nActivePage-1)*nRecordsPerPage
2017
2018                 if aPageVars[cSearchName] = NULL
2019                   oModel.Read( nStart,nRecordsPerPage )
2020                 else
2021                   oModel.Search( aPageVars[cSearchName],nStart,nRecordsPerPage )
2022                 ok
2023
2024                 oView.GridView(self)
2025
2026           func AddRecord
2027
2028                 oModel.clear()
2029                 oView.FormViewAdd(Self,:save,false) # false ならば レコード ID はない
2030
2031           func SaveRecord
2032
2033                 oModel.Insert()
2034                 oView.SaveView(self)
2035
2036           func EditRecord
2037
2038                 oModel.Find( aPageVars[cRecID] )
2039                 oView.FormViewEdit(Self,:update,true) # true ならば レコード ID はある
2040
2041           func UpdateRecord
2042
2043                 oModel.update( aPageVars[cRecID] )
2044                 oView.UpdateView(self)
2045
2046           func DeleteRecord
2047
2048                 oModel.Delete( aPageVars[cRecID] )
2049                 oView.DeleteView()
2050
2051           func braceend
2052
2053                 oModel.Disconnect()
2054
2055 .. index::
2056         pair: ウェブ開発 (CGI ライブラリ); WebLib API
2057
2058 WebLib API
2059 ==========
2060
2061 ウェブライブラリ関数、クラスとメソッドについて示します。
2062
2063 =====================   =============   =================================================================================
2064 関数                    仮引数          解説
2065 =====================   =============   =================================================================================
2066 LoadVars                なし            aPageVars リストにリクエストの仮引数とクッキーを保存します。
2067 WebPage                 なし            WebPage クラスから新しいオブジェクトを作成します。
2068 BootStrapWebPage        なし            BootStrapWebPage クラスから新しいオブジェクトを作成します。
2069 HTMLSpecialChars        cString         HTML と等価な特殊文字をエンコードします。
2070 Template                cFile,oObject   { } で oObject へアクセス後に cFile にある Ring コードを実行します。
2071 Alert                   cMessage        cMessage を表示するために JavaScript Alert() で HTML ページを生成します。
2072 HTML2PDF                cString         HTML 文字列 (cString) から PDF ファイルの生成と表示を行います。
2073 =====================   =============   =================================================================================
2074
2075 このようなクラスが Package System.Web にあります。
2076
2077 =====================   ================================================================================
2078 クラス名                            説明
2079 =====================   ================================================================================
2080 Application                             エンコーディング、デコーディング、クッキーなど様々なメソッドがあります。
2081 Page                                    HTML ページを生成するためのメソッドがあります。
2082 ScriptFunctions                 JavaScript 関数を生成するためのメソッドがあります。
2083 StyleFunctions                  CSS を生成するためのメソッドがあります。
2084 PageBuffer                              HTML ページをメモリへ生成します (出力を表示しません)。
2085 HTML2PDF                                HTML コードから PDF ファイルを生成します。
2086 BootStrapPage                   BootStrap ライブラリを使用します。
2087 WebPage                                 各要素のオブジェクトでページを生成しますす。
2088 HtmlPage                                WebPage と同様、標準出力への出力は行いますが表示はしません。
2089 BootStrapWebPage                BootStrap ライブラリではオブジェクトによりページを生成します。
2090 ObjsBase                                page オブジェクトの親クラスです。
2091 NewObjectsFunctions     ページまたは要素により、新しいオブジェクトを作成するためのメソッドです。
2092 H1                                              HTML H1 のラップ
2093 H2                                              HTML H2 のラップ
2094 H3                                              HTML H3 のラップ
2095 H4                                              HTML H4 のラップ
2096 H5                                              HTML H5 のラップ
2097 H6                                              HTML H6 のラップ
2098 P                                               HTML P のラップ
2099 Link                                    HTML link のラップ
2100 NewLine                                 HTML NewLine のラップ
2101 Div                                             HTML Div のラップ
2102 Form                                    HTML Form のラップ
2103 Input                                   HTML Input のラップ
2104 TextArea                                HTML TextArea のラップ
2105 Select                                  HTML Select のラップ
2106 Option                                  HTML Option のラップ
2107 Image                                   HTML Image のラップ
2108 UL                                              HTML UL のラップ
2109 LI                                              HTML LI のラップ
2110 Table                                   HTML Table のラップ
2111 TR                                              HTML TR のラップ
2112 TD                                              HTML TD のラップ
2113 TH                                              HTML TH のラップ
2114 Audio                                   HTML Audio のラップ
2115 Video                                   HTML Video のラップ
2116 Nav                                             HTML Nav のラップ
2117 Span                                    HTML Span のラップ
2118 Button                                  HTML Button のラップ
2119 =====================   ================================================================================
2120
2121 .. index::
2122         pair: ウェブ開発 (CGI ライブラリ); Application クラス
2123
2124 Application クラス
2125 ==================
2126
2127 ============    =====================================   ========================================================
2128 メソッド        仮引数                                  説明
2129 ============    =====================================   ========================================================
2130 DecodeString    cString                                 リクエストの仮引数をデコードします。
2131 Decode          cString                                 マルチパートまたはフォームデータのデコードをします。
2132 GetFileName     aArray,cVar                             cVarで aArray にあるファイル名を取得します。
2133 SetCookie       name,value,expires,path,domain,secure   クッキーの設定
2134 Cookie          name,value                              name および value のみでクッキーを設定します。
2135 GetCookies      なし                                    クッキーの取得
2136 URLEncode       cString                                 URL エンコード
2137 ScriptLibs      なし                                    BootStrap などを JavaScript ライブラリへ追加します。
2138 Print           なし                                    ページの内容を出力します。
2139 Style           cStyle                                  ページの CSS の内容を cStyle へ追加します。
2140 StartHTML       なし                                    ページの内容に HTTP ヘッダを追加します。
2141 ============    =====================================   ========================================================
2142
2143 DecodeString メソッドは HTTP リクエストの仮引数を取得します。
2144
2145 Decode および GetFileName メソッドはファイルのアップロードで使用します。
2146
2147 SetCookie, Cookie および GetCookies メソッドはクッキーの追加と読み取りで使用します。
2148
2149 StartHTML, ScriptsLibs, Style と Print メソッドはページの構造、および JavaScript/CSS の対応で使用します。
2150
2151 URLEncode メソッドは HTML ページで使用される URL をエンコードするために使用します。
2152
2153 .. index::
2154         pair: ウェブ開発 (CGI ライブラリ); Page クラス
2155
2156 Page クラス
2157 ===========
2158
2159 =====================   ======================================= ============================================================================================
2160 メソッド                            仮引数                                                                       説明
2161 =====================   ======================================= ============================================================================================
2162 text                                    x                                                                               ページの内容へ HTMLSpecialChars(x) を追加します (文字列と数値を受け入れます)。
2163 html                                    cString                                                                 ページの内容に HTML コードを追加します。
2164 h1                                              x                                                                               <h1> ～ </h1> の間にページの内容 x を追加します。
2165 h2                                              x                                                                               <h2> ～ </h2> の間にページの内容 x を追加します。
2166 h3                                              x                                                                               <h3> ～ </h3> の間にページの内容 x を追加します。
2167 h4                                              x                                                                               <h4> ～ </h4> の間にページの内容 x を追加します。
2168 h5                                              x                                                                               <h5> ～ </h5> の間にページの内容 x を追加します。
2169 h6                                              x                                                                               <h6> ～ </h6> の間にページの内容 x を追加します。
2170 p                                               aPara                                                                   HTML <p> </p> の属性を取得するために aPara リストをハッシュとして使用します。
2171 NewLine                                 なし                                                                  ページの内容に <br /> を追加します。
2172 AddAttributes                   aPara                                                                   HTML の要素属性を aPara リストのハッシュとして変換します。
2173 Link                                    aPara                                                                   HTML <a href> および </a> の属性を取得するために aPara リストをハッシュとして使用します。
2174 Image                                   aPara                                                                   HTML <img> の属性を取得するために aPara リストをハッシュとして使用します。
2175 Button                                  aPara                                                                   HTML <input type=”button”> の属性を取得するために aPara リストをハッシュとして使用します。
2176 ButtonLink                              aPara                                                                   HTML <input type=”button”> は、リンク属性によりリンクをナビゲートするために使用します。
2177 Textbox                                 aPara                                                                   HTML <input type=”text”> の属性を取得するために aPara リストをハッシュとして使用します。
2178 Editbox                                 aPara                                                                   HTML <textarea> および </textarea> の属性を取得するために aPara を使用します。
2179 Combobox                                aPara                                                                   HTML <select> は <option> でリスト項目の属性として使用します。
2180 Listbox                                 aPara                                                                   HTML <select multiple=’multiple’> は <option> で項目の属性として使用します。
2181 ulstart                                 aPara                                                                   HTML <ul>
2182 ulend                                   aPara                                                                   HTML </ul>
2183 listart                                 aPara                                                                   HTML <li>
2184 liend                                   aPara                                                                   HTML </li>
2185 List2UL                                 aList                                                                   Ring のリスト項目から項目をインクルードして HTML <ul> を生成します。
2186 DivStart                                aPara                                                                   HTML <div> の属性を取得するために aPara リストをハッシュとして使用します。
2187 NavStart                                aPara                                                                   HTML <nav> の属性を取得するために aPara リストをハッシュとして使用します。
2188 SpanStart                               aPara                                                                   HTML <span> の属性を取得するために aPara リストをハッシュとして使用します。
2189 BoxStart                                なし                                                                  ページのヘッダとして使用するために黒色の背景の Div を生成します。
2190 DivEnd                                  なし                                                                  HTML </div>
2191 NavEnd                                  なし                                                                  HTML </nav>
2192 SpanEnd                                 なし                                                                  HTML </span>
2193 BoxEnd                                  なし                                                                  HTML </div> であり divend() と同じです。
2194 FormStart                               cAction                                                                 HTML <form> は cAction の action 属性または空値です。
2195 FormPost                                cAction                                                                 HTML <form method=”post”> は cAction の action 属性です。
2196 FormEnd                                 なし                                                                  HTML </form>
2197 Submit                                  aPara                                                                   HTML <input type=”submit”>
2198 Hidden                                  cName,cValue                                                    HTML <input type=”hidden”>
2199 FormUpload                              x                                                                               HTML のフォームであり、 method=”post” enctype=”multipart/form-data” および x = action
2200 UploadFile                              x                                                                               HTML <input type=”file”> および name = x
2201 Video                                   aPara                                                                   HTML <video>
2202 Audio                                   aPara                                                                   HTML <audio>
2203 GetColor                                aPara                                                                   配色の選択
2204 Radio                                   aPara                                                                   HTML <input type=”radio”>
2205 Checkbox                                aPara                                                                   HTML <input type=”checkbox”>
2206 Spinner                                 aPara                                                                   HTML <input type=”number”>
2207 Slider                                  aPara                                                                   HTML <input type=”range”>
2208 TableStart                              aPara                                                                   HTML <table>
2209 TableEnd                                なし                                                                  HTML </table>
2210 RowStart                                aPara                                                                   HTML <tr>
2211 RowEnd                                  なし                                                                  HTML </tr>
2212 CellStart                               aPara                                                                   HTML <td>
2213 CellEnd                                 なし                                                                  HTML </td>
2214 HeaderStart                             aPara                                                                   HTML <th>
2215 HeaderEnd                               なし                                                                  HTML </th>
2216 =====================   ======================================= ============================================================================================
2217
2218 aPara にある page メソッドは属性と値を有するリストです。
2219 aPara で下記の属性値を設定できます。
2220
2221 .. code-block:: ring
2222
2223         classname id name align style dir value onclick oncontextmenu ondblclick
2224         onmousedown onmouseenter onmouseleave onmousemove onmouseover onmouseout
2225         onmouseup onkeydown onkeypress onkeyup onabort onbeforeunload onerror
2226         onhashchange onload onpageshow onpagehide onresize onscroll onunload
2227         onblur onchange onfocus onfocusin onfocusout oninput oninvalid onreset
2228         onsearch onselect onsubmit ondrag ondragend ondragenter ondragleave
2229         ondragover ondragstart ondrop oncopy oncut onpaste onafterprint
2230         onbeforeprint oncanplay oncanplaythrough ondurationchange onemptied
2231         onended onloadeddata onloadedmetadata onloadstart onpause onplay
2232         onplaying onprogress onratechange onseeked onseeking onstalled onsuspend
2233         ontimeupdate onvolumechange onwaiting animationend animationiteration
2234         animationstart transitionend onmessage onopen onmousewheel ononline
2235         onoffline onpostate onshow onstorage ontoggle onwheel ontouchcancel
2236         ontouchend ontouchmove ontouchstart color opacity background backgroundattachment
2237         backgroundcolor backgroundimage backgroundposition backgroundrepeat backgroundclip
2238         backgroundorigin backgroundsize border borderbottom borderbottomcolor
2239         borderbottomleftradius borderbottomrightradius borderbottomstyle borderbottomwidth
2240         bordercolor borderimage borderimageoutset borderimagerepeat borderimageslice
2241         borderimagesource borderimagewidth borderleft borderleftcolor borderleftstyle
2242         borderleftwidth borderradius borderright  borderrightcolor borderrightstyle
2243         borderrightwidth borderstyle bordertop bordertopcolor bordertopleftradius
2244         bordertoprightradius bordertopstyle bordertopwidth borderwidth boxdecorationbreak
2245         boxshadow bottom clear clip display float height left margin marginbottom marginleft
2246         marginright margintop maxheight maxwidth minheight minwidth overflow overflowx
2247         overflowy padding paddingbottom paddingleft paddingright paddingtop position
2248         right top visibility width verticalalign zindex aligncontent alignitems alignself
2249         flex flexbasis flexdirection flexflow flexgrow flexshrink flexwrap justifycontent
2250         order hangingpunctuation hyphens letterspacing linebreak lineheight overflowwrap
2251         tabsize textalign textalignlast textcombineupright textindent textjustify
2252         texttransform whitespace wordbreak wordspacing wordwrap textdecoration
2253         textdecorationcolor textdecorationline textdecorationstyle textshadow
2254         textunderlineposition @fontface @fontfeaturevalues font fontfamily fontfeaturesettings
2255         fontkerning fontlanguageoverride fontsize fontsizeadjust fontstretch fontstyle
2256         fontsynthesis fontvariant fontvariantalternates fontvariantcaps fontvarianteastasian
2257         fontvariantligatures fontvariantnumeric fontvariantposition fontweight direction
2258         textorientation unicodebidi writingmode bordercollapse borderspacing captionside
2259         emptycells tablelayout counterincrement counterreset liststyle liststyleimage
2260         liststyleposition liststyletype @keyframes animation animationdelay animationdirection
2261         animationduration animationfillmode animationiterationcount animationname
2262         animationplaystate animationtimingfunction backfacevisibility perspective
2263         perspectiveorigin transform transformorigin transformstyle transition
2264         transitionproperty transitionduration transitiontimingfunction transitiondelay
2265         boxsizing content cursor imemode navdown navindex navleft navright navup
2266         outline outlinecolor outlineoffset outlinestyle outlinewidth resize textoverflow
2267         breakafter breakbefore breakinside columncount columnfill columngap columnrule
2268         columnrulecolor columnrulestyle columnrulewidth columnspan columnwidth columns
2269         widows orphans pagebreakafter pagebreakbefore pagebreakinside marks quotes
2270         filter imageorientation imagerendering imageresolution objectfit objectposition
2271         mask masktype mark markafter markbefore phonemes rest restafter restbefore
2272         voicebalance voiceduration voicepitch voicepitchrange voicerate voicestress
2273         voicevolume marqueedirection marqueeplaycount marqueespeed marqueestyle datatoggle
2274         dataride datatarget dataslideto dataslide datadismiss dataplacement datacontent
2275         datatrigger dataspy dataoffset dataoffsettop
2276
2277 .. index::
2278         pair: ウェブ開発 (CGI ライブラリ); ScriptFunctions クラス
2279
2280 ScriptFunctions クラス
2281 ======================
2282
2283 このクラスには生成されたウェブページへ JavaScript コードを追加するためのメソッドがあります。
2284
2285 このクラスは Page クラスへ統合されており、
2286 このメソッドから page オブジェクトを直接使えます。
2287
2288 ==================  ==============================================      ===================================================================
2289 メソッド            仮引数                                              説明
2290 ==================  ==============================================      ===================================================================
2291 Script              cCode                                               <script> ～ </script> の間に文字列として cCode を追加します。
2292 ScriptRedirection   cURL                                                cURL へ window.location を設定します。
2293 ScriptFunc          cFuncName,cCode                                     cCode を有する cFuncName 関数を定義します。
2294 ScriptFuncAlert     cFuncName,cMsg                                      alert() 関数で cMsg を出力する cFuncName 関数を定義します。
2295 ScriptFuncAjax      cFuncName,cLink,cDiv                                cDiv へ cLink を読み込みために cFuncName 関数を定義します。
2296 ScriptFuncClean     cFuncName,cDiv  cDiv                                を消去するために cFuncName 関数を定義します。
2297 ScriptFuncSelect    cF,aL,cD,cR,cGR,cFC,nTO,cL1,cL2                     グリッドレコードの編集・削除で使用されます。
2298 ScriptScrollFixed   cDiv,nSize                                          Size = nSize で Div を固定するために cDiv を設定します。
2299 ==================  ==============================================      ===================================================================
2300
2301 .. index::
2302         pair: ウェブ開発 (CGI ライブラリ); StyleFunctions クラス
2303
2304 StyleFunctions クラス
2305 =====================
2306
2307 このクラスには生成されたウェブページへ CSS を追加するためのメソッドがあります。
2308
2309 ScriptFunctions など StyleFunctions クラスのメソッドは Page クラスへ統合されており、
2310 このメソッドから page オブジェクトを直接使えます。
2311
2312 =====================   ====================    ==============================================================
2313 メソッド                仮引数                  説明
2314 =====================   ====================    ==============================================================
2315 StyleFloatLeft          なし                    float: left ; を返します。
2316 StyleFloatRight         なし                    float: right ; を返します。
2317 StyleSizeFull           なし                    width: 100% ; height: 100% ; を返します。
2318 Stylecolor              x                       “ color: ” + x + ” ; “ を返します。
2319 Stylebackcolor          x                       “ background-color: ” + x + ” ;” を返します。
2320 StyleTextCenter         なし                    “ text-align: center ;” を返します。
2321 StyleTextRight          なし                    “text-align: right ;” を返します。
2322 StyleTextLeft           なし                    “text-align: left ;” を返します。
2323 StyleSize               x,y                     “ width: ” + x + ” ; height: ” + y + ” ;” を返します。
2324 StyleWidth              x                       “ width: ” + x + ” ;” を返します。
2325 StyleHeight             x                       “ height: ” + x + ” ;” を返します。
2326 StyleTop                x                       “ top: ” + x + ” ;” を返します。
2327 StyleLeft               x                       “ Left: ” + x + ” ;” を返します。
2328 StylePos                x,y                     “ top: ” + x + ” ;” + ” Left: ” + y + ” ;” を返します。
2329 StyleHorizontalCenter   なし                    “ margin-right:auto ; margin-left:auto; “ を返します。
2330 StyleMarginTop          x                       “ margin-top: ” + x + ” ;” を返します。
2331 StyleMarginRight        x                       “ margin-right: ” + x + ” ;” を返します。
2332 StyleMarginLeft         x                       “ margin-left: ” + x + ” ;” を返します。
2333 StyleDivCenter          nWidth,nHeight          ページの中央に Div を作成します。
2334 StyleAbsolute           なし                    “ position:absolute ;” を返します。
2335 StyleFixed              なし                    “ position:fixed ;” を返します。
2336 StyleZIndex             x                       “ z-index: ” + x + ” ;” を返します。
2337 StyleFontSize           x                       “ font-size: ” + x + ” ;” を返します。
2338 StyleGradient           x                       グラデーションの生成 (x の値は 1 から 60 まで)
2339 StyleTable              なし                    テーブルの属性を設定します。
2340 StyleTableRows          id                      テーブルの偶数、および奇数の横列へ交互に異なる色を設定します。
2341 StyleTableNoBorder      なし                    “ border-style: none;” を返します。
2342 =====================   ====================    ==============================================================
2343
2344
2345 .. index::
2346         pair: ウェブ開発 (CGI ライブラリ); WebPage クラス
2347
2348 WebPage クラス
2349 ==============
2350
2351 有効な WebPage オブジェクトの属性へアクセスするために括弧を使用します。
2352
2353 これらの属性のうち一つを括弧により使用することで再度新しい属性を返します。
2354
2355 =====================   ========================================================
2356 属性                    説明
2357 =====================   ========================================================
2358 H1                      HTML H1 のラップ
2359 H2                      HTML H2 のラップ
2360 H3                      HTML H3 のラップ
2361 H4                      HTML H4 のラップ
2362 H5                      HTML H5 のラップ
2363 H6                      HTML H6 のラップ
2364 P                       HTML P のラップ
2365 Link                    HTML link のラップ
2366 NewLine                 HTML NewLine のラップ
2367 Div                     HTML Div のラップ
2368 Form                    HTML Form のラップ
2369 Input                   HTML Input のラップ
2370 TextArea                HTML TextArea のラップ
2371 Select                  HTML Select のラップ
2372 Option                  HTML Option のラップ
2373 Image                   HTML Image のラップ
2374 UL                      HTML UL のラップ
2375 LI                      HTML LI のラップ
2376 Table                   HTML Table のラップ
2377 TR                      HTML TR のラップ
2378 TD                      HTML TD のラップ
2379 TH                      HTML TH のラップ
2380 Audio                   HTML Audio のラップ
2381 Video                   HTML Video のラップ
2382 Nav                     HTML Nav のラップ
2383 Span                    HTML Span のラップ
2384 Button                  HTML Button のラップ
2385 =====================   ========================================================
2386
2387 .. index::
2388         pair: ウェブ開発 (CGI ライブラリ); HtmlPage クラス
2389
2390 HtmlPage クラス
2391 ===============
2392
2393 WebPage クラスと同じですが、このような変更を行っています。
2394
2395 (1) 標準出力への出力は行いません。
2396 (2) 出力の取得用に Output メソッドがあります。
2397
2398 文法:
2399
2400 .. code-block:: ring
2401
2402         output() ---> 文字列を出力
2403