INFO 2480-61: Website Database Implementation
  • Syllabus
  • Welcome Letter
  • Week 1: Software and Setup
    • Folder Structure
    • Git: Getting Started
      • Installing a Git Client
      • Creating a Local Repository
      • Making Changes and Merging them
      • Git Wrap Up
    • Git: Github
      • Creating a New Account
      • Creating a Repo on Github
      • Cloning and Forking
      • Cloning a Repo from Github
      • Pushing Changes to Github.com
      • Github: Adding a Collaborator
    • Command Box
      • Downloading the Software
      • Unzipping and Running the Software for the first time
      • Using CommandBox And Installing the UML-Info package.
      • Setting Up Your Local Server
      • Last Step
    • IDE ( Integrated Development Environment )
      • VS Code
      • IntelliJ
    • Journal
  • Week 2: Review of HTML and CSS
    • Making Point In Time and Working Branches
    • Opening our Project from Week 1 and Starting our BoxLang server
    • HTTP Calls and Requests
    • Making a Static Website Dynamic
    • Creating The Management Index.bxm
    • Creating An HTML Form with Bootstrap
    • Last Steps
  • Week 3: Working Forms and our First Table
    • Data Types
    • Case Types and Naming Conventions
    • Database Tools and Your First DB
      • Installing MySql WorkBench
      • Connecting to your MySQL database
      • Creating Your First Table
    • Working Forms
      • Separation of Concerns
      • Configuring Our Site To Use Our Database
      • Capturing Your Form Data
      • Creating Our Server Side Logic
  • Week 5: SQL and Modelling
    • Our Project And Its Users
    • Introduction to SQL
    • Completing our Articles page.
      • Adapting manageArticles.bxm to display existing articles in the database
      • Completing ManageArticles.bxm to Edit Existing Articles.
      • Making Active Articles Appear On The Public Page
  • Week 6: Managing Books
    • Introduction To Modelling
    • Our Data Models
    • Adapting Our Management Page To Be Multi-Tool
    • Creating The Manage Books Page
    • Adding Search To Our Front Index Page
  • Week 7: Working with Selects, Files, WYSIWYG and more.
    • Adding WYSIWYG Capabilities
    • Adding WYSIWYG to the Manage Books Tool
    • Adding Images To Our Store
    • Creating Our Publisher Select Control
  • Week 9: Joins and Better Searching
    • Displaying Our Publisher
    • Searching By Publisher
    • Creating a Browse by Genre
      • Adapting Our Database
      • Building our Queries: Part 1
      • Assigning Genres to a Book in our AddEdit.bxm page
      • Building our Queries: Part 2
      • Building the GenreNav.bxm
      • Adapting The Details.bxm Page to Search By Genre
  • End of Project Checkllist
Powered by GitBook
On this page
  1. Week 3: Working Forms and our First Table
  2. Working Forms

Capturing Your Form Data

PreviousConfiguring Our Site To Use Our DatabaseNextCreating Our Server Side Logic

Last updated 3 months ago

Previously, in , we made a form that submitted two value but had no way of seeing where the data went or had any way to access that data to do anything with it. A server side language allows you to capture, manipulate and use that data easily.

Prepping our Form

Previously, we were focused on making sure our form was visually appearing the way we wanted. Now we need to ensure that our form has all the properties present that we need to make the data usable.

  1. Open the manageArticles.bxm page in VSCode.

  2. Wrap your entire form in <bx:output> </bx:output>. That will make sure that BoxLang will fill in any BoxLang variables needed.

  3. In your form tag, make sure you have these attributes

    1. action="#cgi.script_name#" - This is one of the BoxLang variables. This will tell the page to submit the form data to this same page.

    2. method="POST" - This will tell form how the data is to be submitted.

    3. Your final form tag should look like this:

      <form action="#cgi.script_name#" method="POST">
  4. In addition to the type and other properties your input tags have, each of them should have a name property. <input type="text" name="title" ...... />

  5. At the very top of your page put the line of code

    <bx:dump var="#form#" />
  6. Enter some data into your form and submit it. You should see you information appear at the top of the page like this:

  7. If you don't, make sure you followed all the directions on this page including wrapping the form in <bx:output> </bx:output>, putting a name property on all of your <input /> tags and putting the <bx:dump> at the top of the page.

Creating An HTML Form with Bootstrap