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 2: Review of HTML and CSS

Creating The Management Index.bxm

Goal: By the end of this document, you will have made a management index.bxm page and created a link to it from the public area

PreviousMaking a Static Website DynamicNextCreating An HTML Form with Bootstrap

Last updated 4 months ago

Later on in the course we are going to examine the rationale as to why our site is broken down the way it is but for now, we are going to forge ahead with creating some more page. The first will be the main page for the management section.

  1. Copy the index.bxm page from the /public folder and paste it into the manage folder.

  2. In the browser navigate to that site by going to /bookstore/manage

  3. You will see a large missingInclude error message. This is because the page is trying to include a file called header.bxm from the same folder but that file doesn't exist. Change that reference in index.bxm to ../public/header.bxm and reload the page. You will get another error but you should see the header at the top of the page.

  4. Our management page is going to have a different navigation system than the public area so, for now, copy the horizontalNav.bxm file from the /public folder into the /manage folder. After doing that, in /manage/horizontalNav.bxm, change the text Store Information to Manage Articles. Reload your browser and make sure you can see the Manage Articles navigation in the top nav.

  5. We are going to adapt our /manage/index.bxm file to only have one section in our main area. Let's delete the <section id="left"></section> and change the class for <section id="center"> to col-sm-12.

  6. Create a new file in /manage called manageArticles.bxm . Type some text ( such as "Manage Articles" ) in the file and then change /manage/index.bxm to include that in the <section id="center"> node. From now on we'll use the shorthand notation for HTML elements where # refers to an id and . refers to a class. For example, <section id="center"> would simply be section#center.

  7. Adapt the footer in the same way we did the header and reference the footer.bxm in the /public folder.

  8. Your page should be opening correctly now with one exception. Do you have a broken image in your navbar? Can you open /manage/horizontalNavbar.bxm and fix that reference?