• 
  構築:

  The basic syntax of the code looks like this:　コードの基本的な構文は次のようになります。

  <potato-[element type]-[element id] [attribute1 attribute2...] />
  <potato-[要素の種類]-[要素のID] [属性1 属性2...] />
  
• 
  📹 YouTube
  Potato.js 概略
  OButton と OText
  OList
  OList と PostgreSQL 1
  OList と PostgreSQL 2
  OTable 1 create HTML table element
  OTable 2 editCell to edit table data
  OTable 3 editCell with tool & selectMultiple
  OTable 4 Drag & Drop
  OTable 5 Setup MySQL Database
  OTable 6 Drag & Drop with MySQL and PDO
• 
  Cheat Sheet チートシート

  • Element: 【POTATO-BUTTON】

    
    <potato-button-buttonID value="Click Me" background="yellow" marginTop="10px" image="image/img-p.png 21 21" onclick="alert('I am OButton')" ></potato-button-buttonID>
  
  
  • Element: 【POTATO-CALENDAR】

    
    <potato-calendar-calendarID value=potato.today() border="1px solid black" ></potato-calendar-calendarID>
  
  

  • ■ POTATO-LIST

    <potato-list-listID margintop=-15px width=180px data='[ ["Menu","Image","Calories","Fat"], ["Parmesan Roasted Potato","<img src='images/Parmesan Roasted Potato.jpg' width='150px' height='100px'>","183","13"], ["Mashed Potato","<img src='images/Mashed Potato.jpg' width='150px' height='100px'>","455","55"] ]' ></potato-list-listID>

  
  

  • ■ POTATO-TAB

    <potato-tab-tabID header='OButton || OText Box || OMenu' body=' <potato-button-mybtn1 value="button1"> </potato-button-mybtn1> <potato-button-mybtn2 value="button2"> </potato-button-mybtn2> <potato-button-mybtn3 value="button3"> </potato-button-mybtn3> || <potato-text-mytext value="test"/> || menu content go over here..... ' backgrtound=lightblue color=blue tabHeight=23px tabWidth=100px fontSize=18px speed=1000 marginTop=10px height=300px width=350px ></potato-tab-tabID>

  
  

  • ■ POTATO-TABLE

    <potato-table-tableID margintop=-15px width=650px height=200px fontSizeTH=18px fontSizeTD=20px fontCVolorTD=red header="No,Menu,Image,Calories,Fat" data='[ ["1","Potato Pie","<img src=\"image/Sweet Potato Pie.jpg\" width=\"100px\" height=\"60px\">","183","13"], ["2","Mashed Potato","<img src=\"image/Mashed Potato.jpg\" width=\"100px\" height=\"60px\">","455","55"] ]' click=myTableClick() callback=myTableCallback() dragdrop=' var t="drag item ( "+potato.dragVal+" ) from ( "+ potato.clickRow +" , "+potato.clickCol+" ) to ( "+potato.dropRow+" , "+potato.dropCol+" ) "; document.getElementById("mytableResult").innerHTML=t; ' editCell=" trigger:click; width:80px; tool:default; indexCol:0; editCol:[1,2,3,4]; callback: function(newVal,oldVal,targetCol,SelectCol){ document.getElementById('mytableResult').innerHTML=oldVal+' → '+newVal; }; " multipleSelect=' mark:〇; indexCol:1; selectCol:0; callback:function(potato){ $("#div_cart").html(""); var t=""; for(var i=0;i t+=i+1+". "+potato[i]+" "; } $("#mytableResult").html(t); }; ' ></potato-table-tableID>

  
  

  • ■ POTATO-CHART

    <potato-chart-chartID chartType=Bar stacked=true data='[ ["Menu1","1","3","4","8"], ["Menu2","2","5","7","14"], ["Menu3","3","1","4","8"], ["Menu4","5","7","12","24"] ]' border="0px solid black" colorIndex="#e3ff7f,#a1a4ff,yellow,orange,green,grey" xLabelData=menu1,menu2,menu3,menu4 xLabelAngle=10 y2AxesLabel="calories" data2Label="calories" dataLabel="Protein,Fat,Sugar" labelFontSize=18 label2FontSize=18 legendDisplay=true legendPosition="bottom" pointBorderColorIndex="red,blue,yellow,orange,green,grey" pointBorderWidth="2,2,2" pointStyle="rect,rectRot,triangle" title="my OChart BAR" titleDisplay=true height=330px width=500px click='return alert(potato.chartYvalue)' ></potato-chart-chartID>

  
  
  • ■ keypad - OKeypad ＜o-keypad-keypadid＞＜/o-keypad-keypadid＞
  • ■ menu - OMenu

  ＜potato-menu-menuid/＞

  potato-menu-omenuid >
  
  
  • ■ text - OText ＜potato-text-textid＞＜/potato-text-textid＞

It is a style sheet language used to describe the presentation of a document written in

HTML or XML, including colors, layout, and fonts.

CSS allows web designers to control the appearance of web pages more precisely and

efficiently than using HTML alone.

CSSの略称は「Cascading Style Sheets」です。

これは、HTMLやXMLで書かれた文書の表示方法を記述するためのスタイルシート言語です。

CSSを使用すると、ウェブデザイナーはHTML単体よりも正確かつ効率的にウェブページの外観を制御することができます。

The first "P" in PHP stands for "PHP: Hypertext Preprocessor."

It's a recursive acronym, where the "P" in PHP stands for PHP itself.

So, PHP originally stood for "Personal Home Page," but it was later changed to "Hypertext Preprocessor"

to reflect its expanded capabilities beyond personal home pages to include dynamic web page generation and server-side scripting.

PHPの最初の「P」は「PHP: Hypertext Preprocessor」の略です。

これは再帰的な頭字語で、PHPの「P」はPHP自体を指します。つまり、PHPはもともと「Personal Home Page」の略でしたが、

後に「Hypertext Preprocessor」と変更されました。これは、個人のホームページから始まり、

動的なウェブページの生成やサーバーサイドのスクリプティングなど、より幅広い機能を反映するためです。

It's a high-level programming language named after the comedy troupe Monty Python.

Guido van Rossum, the creator of Python, named it after the BBC television series "Monty Python's Flying Circus."

He wanted to choose a name that was short, unique, and slightly mysterious.

Pythonは、コメディトループMonty Pythonにちなんで名付けられた高水準プログラミング言語です。

Pythonの創始者であるGuido van Rossumは、BBCテレビシリーズ「Monty Python's Flying Circus」にちなんで名前を付けました。

彼は、短くてユニークで、少し神秘的な名前を選びたかったのです。その結果、Pythonは頭字語ではなく、言語の名前です。

• What is Django?
  ■ Django named after the jazz guitarist Django Reinhardt. According to Django's documentation, the name was chosen to "conjure the image of someone who was busy, all the time, in all the right ways." This reflects Django's goal of enabling developers to build web applications quickly and efficiently. ■ Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. It follows the Model-View-Controller (MVC) architectural pattern, but in Django, it's referred to as Model-View-Template (MVT). Here's what each component does: 1. Model: Defines the data structure. It represents the database schema, and Django automatically creates SQL code (schema) to create and update the database based on these models. Django models also provide an API to access and manipulate the database. 2. View: Handles the logic of the application and interacts with the models to fetch and store data. Views are Python functions or classes that receive HTTP requests and return HTTP responses. 3. Template: Defines the presentation layer. Templates are HTML files mixed with Django template language (DTL) syntax. They allow developers to generate HTML dynamically and incorporate data from views. ■ Built-in features of Django: - User authentication and authorization - URL routing - Form handling and validation - Database migrations - Admin interface - Security features - Internationalization and localization - Caching - Testing framework ■ Django's philosophy revolves around the DRY (Don't Repeat Yourself) principle and encourages rapid development by providing built-in components and sensible defaults. It's widely used for building a variety of web applications, from simple websites to complex, scalable web platforms.
• Djangoとは何ですか？
  ■ ジャズギタリストのDjango Reinhardtにちなんで名付けられたDjango。 Djangoのドキュメントによれば、その名前は「常に忙しく、すべての適切な方法で活動している人物のイメージを想起させる」 という理由で選ばれました。 これは、開発者が素早く効率的にウェブアプリケーションを構築できるようにするDjangoの目標を反映しています。 ■ Djangoは、迅速な開発と清潔で実用的な設計を奨励する高レベルのPythonウェブフレームワークです。 これは、モデルビューコントローラー（MVC）アーキテクチャパターンに従いますが、 Djangoではモデルビューテンプレート（MVT）と呼ばれています。 各コンポーネントの役割は次のとおりです。 1. Model モデル： データ構造を定義します。 これはデータベーススキーマを表し、 Djangoはこれらのモデルに基づいてデータベースを作成および更新するためのSQLコード（スキーマ）を自動的に作成します。 Djangoモデルはまた、データベースへのアクセスおよび操作のためのAPIを提供します。 2. View ビュー： アプリケーションのロジックを処理し、 モデルとやり取りしてデータの取得と保存を行います。 ビューはHTTPリクエストを受け取り、 HTTPレスポンスを返すPython関数またはクラスです。 3. Template テンプレート： プレゼンテーション層を定義します。 テンプレートは、Djangoテンプレート言語（DTL）構文と組み合わされたHTMLファイルです。 これにより、開発者はHTMLを動的に生成し、ビューからデータを取り込むことができます。 ■ Djangoの組み込み機能： - ユーザーの認証と認可 - URLルーティング - フォームの処理と検証 - データベースのマイグレーション - 管理者インターフェース - セキュリティ機能 - 国際化とローカリゼーション - キャッシュ - テストフレームワーク ■ Djangoの哲学はDRY（Don't Repeat Yourself）原則を中心に展開され、 組み込みのコンポーネントと理にかなったデフォルトを提供することで迅速な開発を奨励しています。 これは、シンプルなウェブサイトから複雑なスケーラブルなウェブプラットフォームまで、 様々なウェブアプリケーションを構築するために広く使用されています。
• Cheat Sheet チートシート

■ Application Development Tools: (Webアプリケーション開発ツール:)

PostgreSQL	PostgreSQL: Downloads ( Database )/span>
GIT	Git (git-scm.com) ( Command Line Tool for Version Control )
SourceTree	Sourcetree | Free Git GUI for Mac and Windows ( GUI Graphical User Interface Tool for Version Control )
GitHub	https://github.com/ ( GitHub is a platform for hosting and collaborating on Git projects )
VS Code	Visual Studio Code - Code Editing. Redefined ( Code Editor )
XAMPP (Apache)	XAMPP Installers and Downloads for Apache Friends ( Web Server Software Packages ) ■ XAMPP初期設定 + Hello Potato ■ PORT設定 ■ index.htmlの設定 既存ポートを80から8090のような他のポートに​変更してください。​ ポート80はすでに他のシステムで使用されている​能性が高いであるためです。​ Apacheをポート80で起動できる場合は、​そのまま80のままにしてもOKです。 　 「DirectoryIndex」を探し、​ 「index.html」をウェブサーバーの最優先​エントリーポイントに設定するために、​ 「index.html」を「index.php」の前に最初の位置に移動​してください。 　 ■ PostgresqlのDBドライバーの設定 キーワード「pgsql」を探し、 「extension=pdo_pgsql」と 「extension=pgsql」の行のコメントアウトを​解除してください。 　 ■ First WEBシステム "Hello Potato" ① 「スタート」ボタンをクリックしてApacheサーバーを起動し、Apacheが緑色になるまで待ちます。 ② "xampp"フォルダー内の "htdocs"フォルダーに移動し、 ​ "htdocs"フォルダー内のすべてのフイルを削除してください。​ ③ その後、"index.html"という名前のファイルを作成してください。 ④ 次に、「index.html」を編集してファイル内に「Hello Potato」と入力し、保存してください。​ ⑤ 最後に、ブラウザを開いて「localhost:8090」と入力し、"Hello Potato"が表示されれば、 おめでとうございます！あなたは最初のウェブアプリケーションを構築しました！​
Postman	Postman API Platform | Sign Up for Free
IIS（Internet Information Services）	■ 先に下記の手順に従うことで、Windows システムに IIS をインストールできます。 1. コントロールパネルを開く： 　Windows マシンのコントロールパネルに移動します。 2. プログラムと機能： 　「プログラム」または「プログラムと機能」をクリックします。 3. Windows の機能の有効化または無効化： 　「Windows の機能の有効化または無効化」というオプションを見つけてクリックします。 4. Internet Information Services (IIS) を選択： 　表示されるウィンドウで、「Internet Information Services」を機能のリストから見つけます。 　それを選択するための横にあるチェックボックスをチェックします。 　必要に応じてカテゴリを展開して特定のコンポーネントを選択できます。 5. IIS のインストール： 　必要なコンポーネントを選択した後、「OK」ボタンをクリックしてインストールプロセスを開始します。 　Windows はその後、IIS およびそのコンポーネントをインストールします。 6. インストールの完了を待つ： 　システム構成や選択したコンポーネントによっては、インストールに時間がかかる場合があります。 　プロセスが完了するのを待ちます。 7. インストールの確認： 　インストールが完了したら、「inetmgr」と入力して Windows 検索バーで Enter キーを押します。 　これにより、Internet Information Services (IIS) マネージャーが開き、IIS が正常にインストールされていることが示されます。
PHP（PHP Hypertext Preprocessor）	PHP Installers ■ IISを構成して、.phpファイルの拡張子をPHP FastCGIモジュールにマッピングしてPHPファイルを処理する。 1. IISマネージャーを開く： Windowsサーバーに移動し、Internet Information Services（IIS）マネージャーを開きます。 通常、スタートメニューで「IISマネージャー」と検索して見つけることができます。 2. サーバーを選択： 左側の接続パネルで、サーバーノードを展開して選択します。 3. ハンドラーマッピングを開く： 中央のペインで「ハンドラーマッピング」をダブルクリックします。 これにより、サーバーのハンドラーマッピングのリストが表示されます。 4. モジュールマッピングの追加： 右側のアクションパネルで「モジュールマッピングの追加」をクリックします。 これにより、新しいハンドラーマッピングを追加するためのダイアログボックスが開きます。 5. マッピングを構成する： - リクエストパス：「*.php」と入力します（引用符なし）。 これは、.php拡張子を持つファイルに対してハンドラーが呼び出されることを指定します。 - モジュール：ドロップダウンリストから「FastCgiModule」を選択します。 - 実行可能ファイル：php-cgi.exe実行可能ファイルへの完全なパスを入力します。 たとえば、PHPインストールに応じて「C:\php\php-cgi.exe」になる場合があります。 - 名前：ハンドラーマッピングに名前を付けます。 たとえば、「PHP_via_FastCGI」などです。 6. マッピングを保存： マッピングを保存するには、OKをクリックします。 これらの手順を完了すると、IISが.php拡張子を持つリクエストをPHP FastCGIモジュールにルーティングし、 サーバーでPHPスクリプトを実行できるようになります。