Course_Page_Template

Posted onAuthorStormAdminLeave a comment

Snippet Name: Course_Page_Template

Tags:

Created Date: 2025-06-16 13:12:41
Last Modified Date: 2025-05-31 10:32:19

Dependencies:

DBA Notes:

Sample Output: 

Title: Course Page Template
Author: user
the website teachable.com has a nice format to list a course and the list of subjects with a given subject. can you help me create a local version that i could adapt for my own use

Author: ChatGPT
Sure, Lowell! I can help you build a local version of a course page similar in layout to what Teachable.com offers ??? something like:

- A **Course Title**
- A **Course Description**
- A **List of Modules/Subjects**
- Each module expanding to show a list of **lessons/topics**
- Optionally, buttons like ???Start,??? ???Preview,??? or icons

Would you like:
1. **Just static HTML/CSS**? (good for personal use, easy to edit manually)
2. Or a **React-based dynamic version**? (great if you want interactivity or to later add backend logic)
3. Do you want the lesson list to be collapsible/expandable (accordion-style)?
4. Should I include placeholder video links, lesson durations, or anything else?

Let me know your preferences, and I???ll generate the structure for you.

To get started, here???s a basic static HTML/CSS example with expand/collapse sections for modules:

---

### Sample Static HTML/CSS (Collapsible Course Outline)

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My Course</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 800px; margin: 40px auto; }
    h1 { font-size: 2em; }
    .course-description { margin-bottom: 20px; }
    .module { margin-bottom: 10px; border: 1px solid #ccc; border-radius: 8px; padding: 10px; }
    .module h2 { font-size: 1.2em; cursor: pointer; margin: 0; }
    .lessons { display: none; margin-top: 10px; padding-left: 20px; }
    .lesson { margin-bottom: 5px; }
  </style>
</head>
<body>
  <h1>Learn Web Development</h1>
  <div class="course-description">
    This course walks you through HTML, CSS, and JavaScript to build modern websites.
  </div>

  <div class="module">
    <h2 onclick="toggleLessons(this)">Module 1: Introduction to HTML</h2>
    <div class="lessons">
      <div class="lesson">Lesson 1: Basic Tags</div>
      <div class="lesson">Lesson 2: Page Structure</div>
      <div class="lesson">Lesson 3: Forms and Inputs</div>
    </div>
  </div>

  <div class="module">
    <h2 onclick="toggleLessons(this)">Module 2: Styling with CSS</h2>
    <div class="lessons">
      <div class="lesson">Lesson 1: Selectors and Properties</div>
      <div class="lesson">Lesson 2: Flexbox & Grid</div>
      <div class="lesson">Lesson 3: Responsive Design</div>
    </div>
  </div>

  <div class="module">
    <h2 onclick="toggleLessons(this)">Module 3: JavaScript Essentials</h2>
    <div class="lessons">
      <div class="lesson">Lesson 1: Variables & Functions</div>
      <div class="lesson">Lesson 2: DOM Manipulation</div>
      <div class="lesson">Lesson 3: Events and Listeners</div>
    </div>
  </div>

  <script>
    function toggleLessons(header) {
      const lessonDiv = header.nextElementSibling;
      lessonDiv.style.display = lessonDiv.style.display === 'block' ? 'none' : 'block';
    }
  </script>
</body>
</html>
```

---

This is very adaptable. If you want a React-based version, a themed design, or to include images/videos/metadata, I can generate that too.

How far do you want to go with this?

Author: user
so actually, i have a SQL server table that would be the basis for the titles and descriptions. can we create the static page based on powershell looping thought he table to create the course outline and individual pages. the schema of the table looks like this:  

Author: ChatGPT
Perfect ??? using PowerShell to generate a static website from SQL Server data is totally doable. Please go ahead and share the **schema** of your table (column names, datatypes, and example rows if possible), and let me know:

1. **Which column** represents the course title?
2. Which is the **module** or subject?
3. Which is the **lesson or topic** under each module?
4. Do you want one **index page with collapsible modules**, and then **separate pages per lesson**, or just a single HTML page?
5. Where would you like the files to be written to (e.g. `C:\MyCourseSite\`)?  

Once I see the schema, I???ll create a PowerShell script that:
- Connects to SQL Server
- Reads the course structure
- Loops through it
- Writes out HTML files with the format you want

Send over the schema and I???ll take it from there!

Author: user

IF OBJECT_ID('[dbo].[SavedSnippets]') IS NOT NULL 
DROP TABLE [dbo].[SavedSnippets] 
GO
CREATE TABLE [dbo].[SavedSnippets] ( 
[SnippetName]      VARCHAR(128)                                      NOT NULL,
[SnippetDescrip]   VARCHAR(max)                                          NULL  CONSTRAINT [DF__SavedSnippets__SnippetDescrip] DEFAULT (''),
[LongDescription]  VARCHAR(max)                                          NULL  CONSTRAINT [DF__SavedSnippets__LongDescription] DEFAULT (''),
[Dependancies]     VARCHAR(max)                                          NULL  CONSTRAINT [DF__SavedSnippets__Dependancies] DEFAULT ('none-standalone code'),
[Tags]             VARCHAR(max)                                          NULL  CONSTRAINT [DF__SavedSnippets__Tags] DEFAULT ('helpful,scriptgeneration'),
[SnippetCode]      VARCHAR(max)                                          NULL  CONSTRAINT [DF__SavedSnippets__SnippetCode] DEFAULT (''),
[CreatedDate]      DATETIME                                          NOT NULL  CONSTRAINT [DF__SavedSnippets__CreatedDate] DEFAULT (getdate()),
[ModifiedDate]     DATETIME                                          NOT NULL  CONSTRAINT [DF__SavedSnippets__ModifiedDate] DEFAULT (getdate()),
CONSTRAINT   [PK__SavedSnippets__SnippetName]  PRIMARY KEY CLUSTERED    ([SnippetName] asc)  WITH (FILLFACTOR = 95,DATA_COMPRESSION = PAGE ))

GO


GO


CREATE   TRIGGER TR_SavedSnippets_ModifyDate ON [dbo].[SavedSnippets]
FOR UPDATE
AS
BEGIN

UPDATE MyTarget SET MyTarget.ModifiedDate = GETDATE()

FROM [dbo].[SavedSnippets] MyTarget

INNER JOIN INSERTED MyNewData ON MyTarget.SnippetName = MyNewData.SnippetName

INNER JOIN DELETED MyOldData ON MyTarget.SnippetName = MyOldData.SnippetName

WHERE MyNewData.SnippetCode <> MyOldData.SnippetCode OR MyNewData.SnippetDescrip <> MyOldData.SnippetDescrip;
END
GO

Author: ChatGPT
Great ??? thanks for sharing the `SavedSnippets` table schema. Here's how we can treat this table like a course catalog and generate a static site from it.

---

### ???? Mapping Your Schema to a Course Structure

Let???s assume:
- `SnippetName` ??? Acts as a **Lesson/Topic Title** (unique, like a page slug)
- `SnippetDescrip` ??? A **short summary** (good for listing under a module)
- `LongDescription` ??? The **lesson content** or detailed explanation
- `Tags` ??? Used to **group into modules** (we can treat each tag like a module name ??? even if reused)
- `SnippetCode` ??? Can be shown in a `<pre><code>` block for code examples

---

### ???? Goal

We???ll generate:
1. `index.html` with:
   - Course title and description (optional)
   - Modules from `Tags`, each containing links to the lessons (`SnippetName`)
2. One HTML file per lesson named like: `lesson-[SnippetName].html`

---

### ???? PowerShell Script Outline

Here???s a working draft of the PowerShell that:
- Queries your SQL Server
- Organizes snippets by module (from the `Tags`)
- Writes HTML files

> ???? Make sure you're running with permissions to query the SQL Server and write to disk.

```powershell
# CONFIGURE
$OutputFolder = "C:\CourseSite"
$SqlServer = "YourSqlServerName"
$Database = "YourDatabaseName"
$Query = @"
SELECT 
    SnippetName, 
    SnippetDescrip, 
    LongDescription, 
    Tags, 
    SnippetCode
FROM dbo.SavedSnippets
"@

# LOAD DATA
$Snippets = Invoke-Sqlcmd -ServerInstance $SqlServer -Database $Database -Query $Query

# CREATE OUTPUT FOLDER
if (!(Test-Path $OutputFolder)) {
    New-Item -ItemType Directory -Path $OutputFolder
}

# GROUP BY TAGS (as modules)
$Modules = $Snippets | Group-Object Tags

# WRITE INDEX PAGE
$IndexHtml = @"
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Snippet Course</title>
    <style>
        body { font-family: sans-serif; max-width: 800px; margin: 40px auto; }
        h1 { font-size: 2em; }
        h2 { margin-top: 30px; }
        ul { list-style-type: none; padding-left: 0; }
        li { margin-bottom: 6px; }
        a { text-decoration: none; color: #3366cc; }
    </style>
</head>
<body>
<h1>Code Snippet Course</h1>
<p>A helpful collection of saved SQL snippets, grouped by tag.</p>
"@

foreach ($module in $Modules) {
    $tag = $module.Name
    $IndexHtml += "`n<h2>$tag</h2><ul>`n"
    foreach ($snippet in $module.Group) {
        $safeFileName = "lesson-$($snippet.SnippetName -replace '[^a-zA-Z0-9\-]', '_').html"
        $IndexHtml += "<li><a href='$safeFileName'>$($snippet.SnippetName)</a> - $($snippet.SnippetDescrip)</li>`n"
    }
    $IndexHtml += "</ul>`n"
}

$IndexHtml += "`n</body></html>"

# SAVE INDEX FILE
$IndexPath = Join-Path $OutputFolder "index.html"
[System.IO.File]::WriteAllText($IndexPath, $IndexHtml)

# WRITE INDIVIDUAL LESSON PAGES
foreach ($snippet in $Snippets) {
    $safeFileName = "lesson-$($snippet.SnippetName -replace '[^a-zA-Z0-9\-]', '_').html"
    $lessonPath = Join-Path $OutputFolder $safeFileName
    $lessonHtml = @"
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>$($snippet.SnippetName)</title>
    <style>
        body { font-family: sans-serif; max-width: 800px; margin: 40px auto; }
        pre { background: #f4f4f4; padding: 10px; border-radius: 4px; overflow-x: auto; }
        code { font-family: Consolas, monospace; }
        a { text-decoration: none; color: #3366cc; }
    </style>
</head>
<body>
    <a href="index.html">← Back to Course Index</a>
    <h1>$($snippet.SnippetName)</h1>
    <p><em>$($snippet.SnippetDescrip)</em></p>
    <div>$($snippet.LongDescription -replace "`r`n", "<br>")</div>
    <h2>Code:</h2>
    <pre><code>$($snippet.SnippetCode -replace '<','<' -replace '>','>')</code></pre>
</body>
</html>
"@
    [System.IO.File]::WriteAllText($lessonPath, $lessonHtml)
}

Write-Host "Static course site generated at: $OutputFolder"
```

---

### ??? Next Steps

Let me know if you'd like to:
- Add search, navigation bar, or tags filtering
- Include embedded YouTube videos or images in the lessons
- Use Markdown in `LongDescription` for richer formatting

Want me to package this up as a reusable `.ps1` you can parameterize, or integrate with scheduled refreshes?

Author: user
yes please

Author: ChatGPT
??? Your reusable PowerShell script has been generated:  
[**Download Generate-CourseSite.ps1**](sandbox:/mnt/data/Generate-CourseSite.ps1)

You can run it like this:

```powershell
.\Generate-CourseSite.ps1 -SqlServer "MyServerName" -Database "MyDatabaseName" -OutputFolder "C:\CourseSite"
```

Let me know if you???d like to:
- Add Markdown rendering
- Format code snippets with syntax highlighting
- Deploy it via GitHub Pages or zip it up for distribution

Happy static site building!

Leave a Reply