The Web Developer Bootcamp 2023 セクション41/61
この講義では、ExpressとEJS（Embedded JavaScript）を使って、CRUD（作成、読み取り、更新、削除）のWebアプリケーションを制作しているところです。このプロジェクトの目標は、ユーザーがキャンプ場の情報を閲覧・管理できるシンプルなキャンプサイトを作成することです。講師はまず、EJSに追加機能を提供するAegis Mateパッケージを導入し、アプリケーション内の各ページのボイラープレート・テンプレートを作成します。
次に、Bootstrap 5 Alphaを使用してアプリケーションに基本的なスタイリングを追加します。講師は、CDNを使用してCSSとJavaScriptファイルをインクルードし、ボイラープレート・ファイルにパーシャルとしてナバーとフッターを追加しています。また、コンテンツをラップするためにbody要素にcontainerクラスを追加し、Flexboxとmargin top autoを使ってフッターをページの下に移動させる。
次に、Unsplash APIを使用してアプリ内の各キャンプ場に画像を追加し、画像と説明を含めるためにキャンプ場モデルを更新します。また、ブートストラップ・カードを使ってキャンプ場を表示するためにインデックス・ページを更新し、新しいキャンプ場を作成するためのフォームを追加します。このフォームはBootstrapを使用してスタイリングされ、スピーカーは、データがデータベースに正しく保存されることを確認します。
最後に、講師はショーページを更新して、タイトル、画像、説明、場所、価格など、キャンプ場に関する情報を表示します。彼らは、ページにブートストラップカードを追加し、キャンプ場を編集したり削除したりするためのボタンを追加しています。講師は、このプロジェクトは基本的なCRUDアプリケーションであると結論づけ、将来的にはもっと複雑なものが追加されるだろうと言及しています。
この記事が気に入ったらサポートをしてみませんか？