{"id":1604,"date":"2025-01-16T06:40:08","date_gmt":"2025-01-16T11:40:08","guid":{"rendered":"https:\/\/pressbooks.bccampus.ca\/nelson\/chapter\/chapter-15-more-on-an-example-website-with-a-database-connection\/"},"modified":"2025-02-06T06:49:02","modified_gmt":"2025-02-06T11:49:02","slug":"chapter14thirdedition-2","status":"publish","type":"chapter","link":"https:\/\/pressbooks.bccampus.ca\/nelson\/chapter\/chapter14thirdedition-2\/","title":{"raw":"Chapter 15 More on an Example Website with a Database Connection","rendered":"Chapter 15 More on an Example Website with a Database Connection"},"content":{"raw":"
\r\n

Original Material to the textbook: Fred Strickland<\/p>\r\n\r\n

Learning Outcomes<\/h2>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n

Computing Sub Discipline<\/strong><\/p>\r\n<\/td>\r\n

\r\n

Document Code, Reference Code, and Page Number<\/strong><\/p>\r\n<\/td>\r\n

\r\n

Text<\/strong><\/p>\r\n<\/td>\r\n<\/tr>\r\n

\r\n

Computer Science<\/p>\r\n<\/td>\r\n

\r\n

CS2013<\/p>\r\n

IM\/Query Languages<\/p>\r\n

(Page 1136)<\/p>\r\n<\/td>\r\n

\r\n

5. Embed object-oriented queries into a stand-alone language such as C++ or Java (e.g., SELECT Col.Method() FROM Object). [Usage]<\/p>\r\n

6. Write a stored procedure that deals with parameters and has some control flow, to provide a given functionality. [Usage]<\/p>\r\n<\/td>\r\n<\/tr>\r\n

\r\n

CS2023<\/p>\r\n

DM-Core: Core Database Systems Concepts<\/p>\r\n

(Pages 115-116)<\/p>\r\n<\/td>\r\n

\r\n

CS Core 8. How to support CRUD-only applications<\/p>\r\n<\/td>\r\n<\/tr>\r\n

\r\n

CS2023<\/p>\r\n

DM-NoSQL: NoSQL Systems<\/p>\r\n

(Pages 120-121)<\/p>\r\n<\/td>\r\n

\r\n

KA Core 1. Why NoSQL? (e.g., Impedance mismatch between Application [CRUD] and RDBMS)<\/p>\r\n<\/td>\r\n<\/tr>\r\n

CS2023\r\n\r\nFPL[1]<\/a>-Event-Driven:\u00a0 Event-Driven and Reactive Programming\r\n

(Pages 134-135)<\/p>\r\n\r\n

KA Core 6.\u00a0 Separation of model, view, and controller.\r\n

ILO KA Core 4.\u00a0 Describe an interactive system in terms of a model, a view, and a controller<\/p>\r\n<\/td>\r\n<\/tr>\r\n

\r\n

CS2023<\/p>\r\n

SPD Web: Web Platforms<\/p>\r\n

(Page 302)<\/p>\r\n<\/td>\r\n

\r\n

KA Core 1. Web programming languages (e.g., HTML5, JavaScript \u2026, CSS)<\/p>\r\n

KA Core 4. Web standards such as document object model, accessibility.<\/p>\r\n

Non-core 6. Analyzing requirements for web applications<\/p>\r\n

ILO KA Core 3. Compare and contrast web programming with general-purpose programming.<\/p>\r\n

ILO KA Core 5. Discuss how web standards impact software development.<\/p>\r\n

<\/p>\r\n<\/td>\r\n<\/tr>\r\n

<\/td>\r\n<\/td>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n

Introduction to Chapter 15<\/h2>\r\n

In Chapter 14, we looked at creating a front end that could interact with a database. The examples were based on Bootstrap 5. Since we did not add any JavaScript code, there was no functionality to the created web page. For this chapter, we have the same learning outcomes as for Chapter 14 plus the addition of CS2023 ILO KA Core 3.<\/p>\r\n

We will not repeat the paragraphs on website design. Nor will we repeat the paragraphs on how to design a good database. We will assume that we understand these concepts.<\/p>\r\n

We will be working with ASPNET Core, Entity Framework Core, Model-View-Controller framework, Bootstrap 5 with JavaScript, code-behind, and a SQL Server Management database.<\/p>\r\n\r\n

The Third Edition Style Guide<\/h2>\r\n

This is the style guide that this book will follow for this chapter and for the other chapters.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n
\r\n

Naming Convention:<\/p>\r\n\r\n

    \r\n \t
  • All English names<\/li>\r\n \t
  • Plural table names<\/li>\r\n \t
  • Singular column names<\/li>\r\n \t
  • Capitalized words<\/li>\r\n \t
  • Pascal Case for composite names<\/li>\r\n \t
  • No underscores or special characters<\/li>\r\n \t
  • No unique SQL commands<\/li>\r\n \t
  • No object prefixes<\/li>\r\n<\/ul>\r\n

    Using the IE\u2019s Notation with Crow\u2019s Foot Notation.<\/p>\r\n<\/td>\r\n<\/tr>\r\n

<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n

Figure 15.1 The database style guide. Adapted from https:\/\/vertabelo.com\/blog\/database-schema-naming-conventions\/<\/p>\r\n

The examples will conform to the style guide.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n
\r\n

The material in this chapter covers cutting edge technology. This area is changing rapidly. If you should decide to explore tutorials on the Internet, there are some cautions:<\/span><\/p>\r\n\r\n

    \r\n \t
  • Avoid ASP.NET Core 6 and older. Microsoft made a major change. I used ASP.NET Core 8 for this chapter. ASP.NET Core 9 was out, but it is an 18-month edition.<\/span><\/li>\r\n \t
  • Avoid ADO.NET. This has been replaced by Entity Framework Core.<\/span><\/li>\r\n \t
  • Avoid very old editions of Visual Studio. As of this writing, 2022 is the most current edition.<\/span><\/li>\r\n \t
  • Avoid instructions on how to add Bootstrap to a Visual Studio project. Recent editions of Visual Studio include Bootstrap in the provided project templates.<\/span><\/li>\r\n \t
  • Avoid instructions pertaining to Microsoft.EntityFrameworkCore 6.<\/span><\/li>\r\n \t
  • Avoid any instructions that mention Start.cs. Program.cs is the correct file name.<\/span><\/li>\r\n \t
  • Avoid any instructions that mention JQuery and Bootstrap. JQuery was added in Bootstrap 3 and was dropped in Bootstrap 5.<\/span><\/li>\r\n<\/ul>\r\n

    This chapter may appear disjointed. I wanted to wrap up this project before the start of 2025.<\/span><\/p>\r\n<\/td>\r\n<\/tr>\r\n

<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n

The Project: A Small Religious Educational Institution<\/h2>\r\n

Storyboarding<\/h3>\r\n

We will storyboard the website and we will use the University of Notre Dame approach. Here is the first navigation row:<\/p>\r\n

\"image\"<\/p>\r\n

Figure 15.2 First navigation row.<\/p>\r\n

Here is the second navigation row:<\/p>\r\n

\"image\"<\/p>\r\n

Figure 15.3 Second navigation row.<\/p>\r\n

Under the \u201cAbout\u201d tab is information about the leadership, about the offices, about the history, about the mission, about notable alumni, about commitments, about financial information, and about a contact link. The middle has some text about the history of the university. On the far right is a quote. Scrolling down is information about the number of majors, colleges and schools, and the ranking based on several respectable authorities. There is more information.<\/p>\r\n

Under the \u201cVisit\u201d tab is information about the campus and the nearby area.<\/p>\r\n

In the second row is where one would find more detailed information. The \u201cAcademics\u201d tab has the academic units, the various academic programs, and other items. I did notice that a visitor would keep going deeper and deeper into the website. What I found troubling is the absence of a traditional catalog with academic plans and course descriptions.<\/p>\r\n

The \u201cAdmissions\u201d tab has a link to an application and another link to financial aid. It takes several mouse clicks to reach the actual form. And the actual application is hosted on three different third-party websites. A person must create an account before going forward. This has the benefit of saving the entries, but it has the disadvantage of preventing a person from previewing the questions.<\/p>\r\n

You may continue to explore the remaining tabs.<\/p>\r\n

As a personal note, I could not find on the University of Norte Dame website the traditional catalog. This is a large book that contains detailed information about the policies, about the programs, about the courses, about the faculty, and about other important items. I had the same issue with the Douglas College website. Has this document become obsolete? The answer is \u201cNo.\u201d Recall from Chapter 14 that Abhijeet Kaldate had a list of noteworthy higher education institutions. Let\u2019s look at Syracuse University in central New York.<\/p>\r\n

The Syracuse University navigation bar is simpler.<\/p>\r\n

\"image\"<\/p>\r\n

Figure 15.4 The main Syracuse University navigation bar.<\/p>\r\n

Under the \u201cAcademics\u201d tab is the link to the catalog. The label is \u201cCourse Catalog.\u201d This label is a bit misleading since this contains more than just course information.<\/p>\r\n

\"image\"<\/p>\r\n

Figure 15.5 The Syracuse University academic drop down list.<\/p>\r\n

After some pondering, here is the new storyboard:<\/p>\r\n

\"image\"<\/p>\r\n

Figure 15.6 Proposed Website (Unfortunately, the image is fuzzy.)<\/p>\r\n

The storyboard is very small. Here is an outline of the proposed website below the home page:<\/p>\r\n\r\n