2023.12.28

「Webアプリケーションに機能を導入する」の概要

marugotoyoten

cs50のYoutube動画「「Webアプリケーションに機能を導入する」の概要」について要点と要約をまとめました

３つの要点

要点１
index.htmlにフォームを実装して、ファイルをアップロードし、アルゴリズムを選択し、Webアプリケーションで比較するためのフォームを作成する
要点２
必要な属性、action、enctype、methodを持つHTMLでフォームを作成する
要点３
name、type、valueなどの必要な属性と値を入力フィールドに追加する

要約

index.htmlにフォームを実装して、Webアプリケーションに機能を導入する
helpers.pyに書かれた機能をWebアプリケーションに導入するためには、index.htmlにフォームを作成する必要があります。フォームは、ユーザーが2つのファイルをアップロードし、比較のためのアルゴリズムを選択し、部分文字列の比較のための長さを指定できるようにする必要があります。また、フォームにはデータをWebアプリケーションに送信するための送信ボタンも含まれている必要があります。

必要な属性と入力フィールドを持つHTMLでフォームを作成する
HTMLでフォームを作成するには、特定の属性を持つformタグを使用する必要があります。action属性は、フォームデータを適切なルートに送信するために「/compare」に設定する必要があります。enctype属性は、ファイルのアップロードを許可するために「multipart/form-data」に設定する必要があります。method属性は、POSTリクエストメソッドを使用するために「post」に設定する必要があります。フォームタグの内部では、ファイル1、ファイル2、アルゴリズム、および長さの入力フィールドを作成する必要があります。各入力フィールドには、送信される情報のタイプに基づいてname属性とtype属性を持たせる必要があります。

入力フィールドに必要な属性と値を追加する
フォームの各入力フィールドには、必要な属性が必要です。name属性は、入力フィールドに応じてfile1、file2、algorithm、またはlengthに設定する必要があります。type属性は、送信される情報のタイプに応じてfile、radio、またはnumberに設定する必要があります。アルゴリズムの入力フィールドには、選択したアルゴリズムに応じてlines、sentences、またはsubstringsに設定するvalue属性も必要です。

送信ボタンを含めてフォームを完成させる
フォームの最下部に、type属性がsubmitに設定されたbuttonタグを追加する必要があります。ボタンのテキストは「比較」などのカスタマイズが可能です。フォームが完成すると、ユーザーは2つのファイルを比較し、アルゴリズムを選択し、ファイルをWebアプリケーションにアップロードすることができ、ファイル間の類似度が表示されます。

▼今回の動画