Pode.Web Application

-

The application that I am creating with the Pode.Web module will allow you to add media (TV shows, movies, books, and albums), people (friends, family, authors, directors, actors, artists, etc.), and events (concerts, sporting events, vacations, etc.) by using web forms. The data from the web forms will be stored to a sqlite database. I will eventually make connections between the three entities.

Prerequisites: Powershell and DITA Open Tool Kit.

The application will also require the following modules:

  • Pode
  • Pode.Web
  • PSSqlite

Please refer to https://badgerati.github.io/Pode.Web/0.8.3/Tutorials/Basics/ for commands used in this post.

NOTE: This post will only cover adding media, viewing it, updating it, and deleting it.

Setting up Sqlite3 Database

Perform the following command to set up a database without tables.

sqlite3 data.db

Then, run these commands from the Sqlite command prompt:

.databases
.exit

Setting Up Pode Web Server

Here is the first part of the code:

Import-Module Pode
Import-Module Pode.Web
Import-Module PSSQLite
 
Start-PodeServer {
    Add-PodeEndpoint -Address localhost -Port 8080 -Protocol Http -Name User
    Add-PodeStaticRoute -Path '/html' -Source './Public/topics/html'
    Add-PodeStaticRoute -Path '/images' -Source './Public/topics/images'
 
    Enable-PodeSessionMiddleware -Duration ([int]::MaxValue)
 
 
    # this will bind the site to the Admin endpoint
    Use-PodeWebTemplates -Title "Eric's CMS" -Theme Light -EndpointName User
 
}

This code binds the Pode webserver to Port 8080. It also sets up access to static html files and images. The title of the web application will be “Eric's CMS”.

Setting Up Home Page

Next, I will set up a simple home page:

# Define the Home Page
    Set-PodeWebHomePage -Layouts @(
    New-PodeWebHero -Title 'Welcome!' -Message "This is the Eric's CMS home page" -Content @(
        New-PodeWebText -Value 'This site is under construction' -InParagraph -Alignment Center
    )
)

It looks like this:


Adding Media Information Page

I will add media information to Sqlite database with the code that follows. The code uses a modal and webform with text boxes and radio buttons.

# Add Media
# =============================
 Add-PodeWebPage -Name 'Add Media' -Group 'Media' -ScriptBlock {
        New-PodeWebCard -Content @(
 
            New-PodeWebText -Value 'Markdown Description (click button to enter description): ' 
            New-PodeWebButton -Name 'Enter Description' -ScriptBlock {
                Show-PodeWebModal -Name 'Description'
            }
 
            New-PodeWebModal -Name 'Description' -AsForm -Content @(   
                New-PodeWebTextbox -Name 'MultiLine' -Multiline -Size 20
            ) -ScriptBlock {
 
                Write-Host 'Submit button clicked!'
 
                  $global:multiline = $WebEvent.Data['Multiline'] 
 
            }
 
        New-PodeWebParagraph -Value ' '
        New-PodeWebText -Value '   Markdown Cheat Sheet' -Style Bold
        New-PodeWebList -Items @(
        New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Headings:	# H1 ## H2 ### H3 (up to ###### H6)'
         )
        New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Bold:	**bold text** or __bold text__'
         )
         New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Italic	*text* or _text_'
         )
         New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Unordered List: Use asterisks (*), pluses (+), or hyphens (-)'
         )
         New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Ordered List: Use any integer followed by a period (.)'
         )
         New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Link: [Link title](URL)'
         )
         New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Image: ![Alt text](image URL)'
         )
         New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Code Blocks: ```python
            s = "Python syntax highlighting"
            print(s)
            ```'
         )
        )
 
           New-PodeWebForm -Name 'Example1' -ScriptBlock {
            # $WebEvent.Data | Out-Default
            # 'UUU2' + $multiline | Out-Default
 
            $MediaFileName = $WebEvent.Data['MediaFileName']
            $MediaTitle = $WebEvent.Data['MediaTitle']
            $MediaType = $WebEvent.Data['MediaType']
            $Creator = $WebEvent.Data['Creator']
            $Service = $WebEvent.Data['Service']
            $Image = $WebEvent.Data['Image']
            $ReleaseDate = $WebEvent.Data['ReleaseDate']
            $ViewDate = $WebEvent.Data['ViewDate']
            $Description = $multiline
 
            # Create md file
            $outfile = "/home/<user>/dev/pode_test1/Public/topics/" + $MediaFileName + ".md"
            $title = "# " + $MediaTitle
            Set-Content -Path $outfile -Value $title
            Add-Content -Path $outfile -Value $Description
 
             # Define database path
                $global:Database = "/home/<user>/dev/pode_test1/data.db"
 
                # Create a Table
                $QueryCreate = "CREATE TABLE IF NOT EXISTS Media (Id INTEGER PRIMARY KEY, MediaFileName TEXT, MediaTitle TEXT, MediaType TEXT, 
                Creator Text, Service Text, Image Text, ReleaseDate Text, ViewDate Text, Description Text)"
                Invoke-SqliteQuery -Query $QueryCreate -DataSource $Database
 
                # Insert Data
                $QueryInsert = "INSERT INTO Media (MediaFileName, MediaTitle, MediaType, Creator, Service, Image, ReleaseDate, ViewDate, Description) VALUES ('$MediaFileName', '$MediaTitle', '$MediaType', '$Creator','$Service','$Image','$ReleaseDate','$ViewDate', '$Description')"
                Invoke-SqliteQuery -Query $QueryInsert -DataSource $Database
 
                # Select Data
                $Media = Invoke-SqliteQuery -Query "SELECT * FROM Media" -DataSource $Database
                $Media | Format-Table | Out-Default
 
                Move-PodeWebUrl -Url '/pages/thankyou'
 
           } -Content @(
            New-PodeWebTextbox -Name 'MediaFileName' -DisplayName 'Media File Name'
            New-PodeWebTextbox -Name 'MediaTitle' -DisplayName 'Media Title'
            New-PodeWebRadio -Name 'MediaType' -DisplayName 'Media Type' -Options @('TVshow', 'Movie', 'Book','Album')
            New-PodeWebTextbox -Name 'Creator' -DisplayName "Creator/Artist/Author"
            New-PodeWebRadio -Name 'Service' -Options @('NetworkTV', 'Netflix', 'AppleTV','Hulu', 'Prime','Max', 'Libby','Kindle','Hoopla','NA')
            New-PodeWebFileUpload -Name 'Image'
            New-PodeWebTextbox -Name 'ReleaseDate' -DisplayName "Release Date" -Type Date
            New-PodeWebTextbox -Name 'ViewDate' -DisplayName "Viewing Date" -Type Date
           )
 
        )
 
    }

NOTE: This page will be grouped under Media on the sidebar.

Setting up Modal and Saving Results

The first part of the code sets a modal (New-PodeWebModal), which includes a button (New-PodeWebButton) that when clicked opens a textarea box for you to add markdown text. Here's an example of what an entry would look like:


$global:multiline = $WebEvent.Data['Multiline'] is used to pass the information from the modal to the form that follows. There is also code that writes the markdown text to .md file:

# Create md file
            $outfile = "/home/<user>/dev/pode_test1/Public/topics/" + $MediaFileName + ".md"
            $title = "# " + $MediaTitle
            Set-Content -Path $outfile -Value $title
            Add-Content -Path $outfile -Value $Description


Setting Up Web Form

New-PodeWebForm -Name 'Example1' -ScriptBlock is used to set up the form used to add media information. The form will look like the following:


Information from the web form is saved in the following variables:

            $MediaFileName = $WebEvent.Data['MediaFileName']
            $MediaTitle = $WebEvent.Data['MediaTitle']
            $MediaType = $WebEvent.Data['MediaType']
            $Creator = $WebEvent.Data['Creator']
            $Service = $WebEvent.Data['Service']
            $Image = $WebEvent.Data['Image']
            $ReleaseDate = $WebEvent.Data['ReleaseDate']
            $ViewDate = $WebEvent.Data['ViewDate']
 

After the form is submitted, I use the following command to indicate that form submission is complete:

Move-PodeWebUrl -Url '/pages/thankyou'

Setting up Sqlite3 Media Table

There is also code to set up a sqlite3 Media table.

# Define database path
                $global:Database = "/home/<user>/dev/pode_test1/data.db"
 
                # Create a Table
                $QueryCreate = "CREATE TABLE IF NOT EXISTS Media (Id INTEGER PRIMARY KEY, MediaFileName TEXT, MediaTitle TEXT, MediaType TEXT, 
                Creator Text, Service Text, Image Text, ReleaseDate Text, ViewDate Text, Description Text)"
                Invoke-SqliteQuery -Query $QueryCreate -DataSource $Database
 
                # Insert Data
                $QueryInsert = "INSERT INTO Media (MediaFileName, MediaTitle, MediaType, Creator, Service, Image, ReleaseDate, ViewDate, Description) VALUES ('$MediaFileName', '$MediaTitle', '$MediaType', '$Creator','$Service','$Image','$ReleaseDate','$ViewDate', '$Description')"
                Invoke-SqliteQuery -Query $QueryInsert -DataSource $Database

Managing Media

The following code displays all of the Media.

  Add-PodeWebPage -Name 'Manage Media' -Group 'Media' -ScriptBlock {
        New-PodeWebCard -Content @(
 
        New-PodeWebRaw -Value "<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
 
td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
 
tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
<table>
<th>ID</th><th>MediaFileName</th><th>MediaTitle</th><th>MediaType</th><th>Creator</th><th>Service</th><th>Manage</th>"
        $global:Database = "/home/<user>/dev/pode_test1/data.db"
                $Media = Invoke-SqliteQuery -Query "SELECT * FROM Media" -DataSource $Database
                $Media | Format-Table | Out-Default
        foreach ($item in $Media) {
          New-PodeWebRaw -Value "<tr>
          <td>$($item.ID)</td><td>$($item.MediaFileName)</td><td>$($item.MediaTitle)</td>
          <td>$($item.MediaType)</td><td>$($item.Creator)</td><td>$($item.Service)</td>
          <td><a href='/html/$($item.MediaFileName).html'>[view]</a> | <a href='/pages/Update_Media?id=$($item.ID)'>[update]</a> |
           <a href='/pages/deleteconfirm?id=$($item.ID)'>[delete]</a></td>
          </tr>" 
        }
         New-PodeWebRaw -Value "</table>" 
 
 
        )      
 
    }

Here an example of what the page would like.


The table allows you to view the entry, update the entry, or delete it.

Viewing the Entry

The code saves the Description field as .md file in the /home/<user>/dev/pode_test1/Public/topics folder. To create html files, I first create DITA topic map (media.ditamap):

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE map PUBLIC "-//OASIS//DTD DITA Map//EN" "map.dtd">
<map id="map_id_media" title="media Map">
	<topicref href="scrubs.md" format="markdown" />
	<topicref href="cheers.md" format="markdown" />
</map>

NOTE: See https://www.dita-ot.org/ for more information about DITA Open Tool Kit.

Then I run the following commands:

cd /home/<user>/dev/pode_test1/Public/topics 
~/dita-ot-x.x/bin/dita --input=media.ditamap --format=html5 --output=html

This creates html file in the following directory:

/home/<user>/dev/pode_test1/Public/topics

Here's an example of an HTML file that you will see when you click on the [view] hyperlink:




Updating the Entry

I will cover the code for [Update] hyperlink in the Updating the Media section.

Deleting the Entry

The following code is involved in the deleting an entry.

# Deleted 
# ==========
Add-PodeWebPage -Name 'Deleted' -Hide -Layouts @(
    New-PodeWebCard -Content @(
     New-PodeWebHeader -Value 'Item was deleted.' -Size 1 
     New-PodeWebParagraph -Value 'Your submissions have been reveived.'
    )
)
 
# Delete Confirmation 
# ========================
Add-PodeWebPage -Name 'DeleteConfirm' -Hide -ScriptBlock {
 
    #"ZZZ1" + $WebEvent.Query['ID'] | Out-Default
    New-PodeWebCard -Content @(
 
     New-PodeWebHeader -Value "Are you sure that you want to delete ID=$($WebEvent.Query['ID'])?" -Size 1 
     New-PodeWebParagraph -Value 'Your submissions have been reveived.'
 
     New-PodeWebContainer -Content @(
            New-PodeWebTable -Name 'Services' -ScriptBlock {
                #"YYY22" | Out-Default
                $global:Database = "/home/eric/dev/pode_test1/data.db"
                $Media = Invoke-SqliteQuery -Query "SELECT * FROM Media where ID = $($WebEvent.Query['ID'])" -DataSource $Database
                $Media | Format-Table | Out-Default
 
 
 
                foreach ($item in $Media) {
                    $global:ID_val = $item.ID
                    [ordered]@{
                        ID      = "$($item.ID)"
                        MediaFileName    = "$($item.MediaFileName)"
                        MediaTitle = "$($item.MediaTitle)"
                        MediaType = "$($item.MediaType)"
                        Creator = "$($item.Creator)"
                        Service = "$($item.Service)"
 
 
                    }
                }
 
            }

 
            New-PodeWebCard -Content @(
                New-PodeWebForm -Name 'DeleteConfirm' -ScriptBlock {
                     'ZZZ1' + $WebEvent.Data['DeleteConfirm'] | Out-Default
 
                     if ($WebEvent.Data['DeleteConfirm'].Contains("No")) {
                        Move-PodeWebUrl -Url '/pages/Manage_Media'
                     }
                     if ($WebEvent.Data['DeleteConfirm'].Contains("Yes")) {
                        Invoke-SqliteQuery -Query "DELETE FROM Media where ID = $($WebEvent.Query['ID'])" -DataSource $Database
                        Move-PodeWebUrl -Url '/pages/Deleted'
                     }
 
 
                } -Content @(
                    New-PodeWebRadio -Name 'DeleteConfirm' -Options 'Yes', 'No'
                )
            )
 
        )
    )
}

Updating the Media

The code for this is very similar to the code for adding media. Only information saved in the sqlite database is used to populate the webform with the -value option. The sqlite commands to update an a media entry are also different.

# Update Media
# ==================
    Add-PodeWebPage -Name 'Update_Media' -Hide -ScriptBlock {
        New-PodeWebCard -Content @(
 
            New-PodeWebText -Value 'Markdown Description (click button to enter description): ' 
            New-PodeWebButton -Name 'Enter Description' -ScriptBlock {
                Show-PodeWebModal -Name 'Description'
            }
 
            New-PodeWebModal -Name 'Description' -AsForm -Content @(   
                #$global:Database = "/home/eric/dev/pode_test1/data.db"
                $global:Media = Invoke-SqliteQuery -Query "SELECT * FROM Media where ID = $($WebEvent.Query['ID'])" -DataSource $Database
                #"PPP99" + $Media + $Media.MediaType | Format-Table | Out-Default
 
 
 
                New-PodeWebTextbox -Name 'MultiLine' -Multiline -Value "$($Media.Description)" -Size 20
            ) -ScriptBlock {
 
                Write-Host 'Submit button clicked!'
                 #'UUU1' + $WebEvent.Data['Multiline'] | Out-Default
 
                  $global:multiline = $WebEvent.Data['Multiline'] 
 
            }
 
        New-PodeWebParagraph -Value ' '
        New-PodeWebText -Value '   Markdown Cheat Sheet' -Style Bold
        New-PodeWebList -Items @(
        New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Headings:	# H1 ## H2 ### H3 (up to ###### H6)'
         )
        New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Bold:	**bold text** or __bold text__'
         )
         New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Italic	*text* or _text_'
         )
         New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Unordered List: Use asterisks (*), pluses (+), or hyphens (-)'
         )
         New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Ordered List: Use any integer followed by a period (.)'
         )
         New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Link: [Link title](URL)'
         )
         New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Image: ![Alt text](image URL)'
         )
         New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Code Blocks: ```python
            s = "Python syntax highlighting"
            print(s)
            ```'
         )
        )
 
           New-PodeWebForm -Name 'Example1' -ScriptBlock {
             $WebEvent.Data | Out-Default
             'UUU2' + $multiline | Out-Default
 
            $MediaFileName = $WebEvent.Data['MediaFileName']
            $MediaTitle = $WebEvent.Data['MediaTitle']
            $MediaType = $WebEvent.Data['MediaType']
            $Creator = $WebEvent.Data['Creator']
            $Service = $WebEvent.Data['Service']
            $Image = $WebEvent.Data['Image']
            $ReleaseDate = $WebEvent.Data['ReleaseDate']
            $ViewDate = $WebEvent.Data['ViewDate']
            $Description = $multiline
 
            # Create md file
            $outfile = "/home/eric/dev/pode_test1/Public/topics/" + $MediaFileName + ".md"
            $title = "# " + $MediaTitle
            Set-Content -Path $outfile -Value $title
            Add-Content -Path $outfile -Value $Description
 
             # Define database path
                $global:Database = "/home/eric/dev/pode_test1/data.db"
 
 
 
                # Insert Data
                $QueryUpdate = "UPDATE Media SET MediaFileName = '$MediaFileName', MediaTitle = '$MediaTitle', Creator = '$Creator', Service = '$Service', Image = '$Image', ReleaseDate = '$ReleaseDate', ViewDate = '$ViewDate', Description = '$Description' WHERE ID = $($WebEvent.Query['ID'])"
                Invoke-SqliteQuery -Query $QueryUpdate -DataSource $Database             
 
                # Select Data
                $Media = Invoke-SqliteQuery -Query "SELECT * FROM Media" -DataSource $Database
                $Media | Format-Table | Out-Default
 
                Move-PodeWebUrl -Url '/pages/thankyou'
 
           } -Content @(
            New-PodeWebTextbox -Name 'MediaFileName' -DisplayName 'Media File Name' -Value "$($Media.MediaFileName)"
            New-PodeWebTextbox -Name 'MediaTitle' -DisplayName 'Media Title' -Value "$($Media.MediaTitle)"
            New-PodeWebRadio -Name 'MediaType' -DisplayName 'Media Type' -Options @("$($Media.MediaType)",'TVshow', 'Movie', 'Book','Album')
            New-PodeWebTextbox -Name 'Creator' -DisplayName "Creator/Artist/Author" -Value "$($Media.Creator)"
            New-PodeWebRadio -Name 'Service' -Options @("$($Media.Service)",'NetworkTV', 'Netflix', 'AppleTV','Hulu', 'Prime','Max', 'Libby','Kindle','Hoopla','NA')
            New-PodeWebTextbox -Name 'Image' -Value "$($Media.Image)"
            New-PodeWebTextbox -Name 'ReleaseDate' -DisplayName "Release Date" -Type Date -Value "$($Media.ReleaseDate)"
            New-PodeWebTextbox -Name 'ViewDate' -DisplayName "Viewing Date" -Type Date -Value "$($Media.ViewDate)"
           )
 
        )
 
    }

Putting it All Together

This section shows all of the Pode.web code together. It is quite impressive with this limited code that I can create an entire web application. See the complete code below.

Import-Module Pode
Import-Module Pode.Web
Import-Module PSSQLite
 
Start-PodeServer {
    Add-PodeEndpoint -Address localhost -Port 8080 -Protocol Http -Name User
    #Add-PodeEndpoint -Address localhost -Port 8090 -Protocol Http -Name Admin
    Add-PodeStaticRoute -Path '/html' -Source './Public/topics/html'
    Add-PodeStaticRoute -Path '/images' -Source './Public/topics/images'
 
    Enable-PodeSessionMiddleware -Duration ([int]::MaxValue)
 
 
    # this will bind the site to the Admin endpoint
    Use-PodeWebTemplates -Title "Eric's CMS" -Theme Light -EndpointName User
 
 
 # Define the Home Page
    Set-PodeWebHomePage -Layouts @(
    New-PodeWebHero -Title 'Welcome!' -Message "This is the Eric's CMS home page" -Content @(
        New-PodeWebText -Value 'This site is under construction' -InParagraph -Alignment Center
    )
)
 
# Add Media
# =============================
 Add-PodeWebPage -Name 'Add Media' -Group 'Media' -ScriptBlock {
        New-PodeWebCard -Content @(
 
            New-PodeWebText -Value 'Markdown Description (click button to enter description): ' 
            New-PodeWebButton -Name 'Enter Description' -ScriptBlock {
                Show-PodeWebModal -Name 'Description'
            }
 
            New-PodeWebModal -Name 'Description' -AsForm -Content @(   
                New-PodeWebTextbox -Name 'MultiLine' -Multiline -Size 20
            ) -ScriptBlock {
 
                Write-Host 'Submit button clicked!'
                # 'UUU1' + $WebEvent.Data['Multiline'] | Out-Default
 
                  $global:multiline = $WebEvent.Data['Multiline'] 
 
            }
 
        New-PodeWebParagraph -Value ' '
        New-PodeWebText -Value '   Markdown Cheat Sheet' -Style Bold
        New-PodeWebList -Items @(
        New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Headings:	# H1 ## H2 ### H3 (up to ###### H6)'
         )
        New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Bold:	**bold text** or __bold text__'
         )
         New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Italic	*text* or _text_'
         )
         New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Unordered List: Use asterisks (*), pluses (+), or hyphens (-)'
         )
         New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Ordered List: Use any integer followed by a period (.)'
         )
         New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Link: [Link title](URL)'
         )
         New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Image: ![Alt text](image URL)'
         )
         New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Code Blocks: ```python
            s = "Python syntax highlighting"
            print(s)
            ```'
         )
        )
 
           New-PodeWebForm -Name 'Example1' -ScriptBlock {
            # $WebEvent.Data | Out-Default
            # 'UUU2' + $multiline | Out-Default
 
            $MediaFileName = $WebEvent.Data['MediaFileName']
            $MediaTitle = $WebEvent.Data['MediaTitle']
            $MediaType = $WebEvent.Data['MediaType']
            $Creator = $WebEvent.Data['Creator']
            $Service = $WebEvent.Data['Service']
            $Image = $WebEvent.Data['Image']
            $ReleaseDate = $WebEvent.Data['ReleaseDate']
            $ViewDate = $WebEvent.Data['ViewDate']
            $Description = $multiline
 
            # Create md file
            $outfile = "/home/eric/dev/pode_test1/Public/topics/" + $MediaFileName + ".md"
            $title = "# " + $MediaTitle
            Set-Content -Path $outfile -Value $title
            Add-Content -Path $outfile -Value $Description
 
             # Define database path
                $global:Database = "/home/eric/dev/pode_test1/data.db"
 
                # Create a Table
                $QueryCreate = "CREATE TABLE IF NOT EXISTS Media (Id INTEGER PRIMARY KEY, MediaFileName TEXT, MediaTitle TEXT, MediaType TEXT, 
                Creator Text, Service Text, Image Text, ReleaseDate Text, ViewDate Text, Description Text)"
                Invoke-SqliteQuery -Query $QueryCreate -DataSource $Database
 
                # Insert Data
                $QueryInsert = "INSERT INTO Media (MediaFileName, MediaTitle, MediaType, Creator, Service, Image, ReleaseDate, ViewDate, Description) VALUES ('$MediaFileName', '$MediaTitle', '$MediaType', '$Creator','$Service','$Image','$ReleaseDate','$ViewDate', '$Description')"
                Invoke-SqliteQuery -Query $QueryInsert -DataSource $Database
 
                # Select Data
                $Media = Invoke-SqliteQuery -Query "SELECT * FROM Media" -DataSource $Database
                $Media | Format-Table | Out-Default
 
                Move-PodeWebUrl -Url '/pages/thankyou'
 
           } -Content @(
            New-PodeWebTextbox -Name 'MediaFileName' -DisplayName 'Media File Name'
            New-PodeWebTextbox -Name 'MediaTitle' -DisplayName 'Media Title'
            New-PodeWebRadio -Name 'MediaType' -DisplayName 'Media Type' -Options @('TVshow', 'Movie', 'Book','Album')
            New-PodeWebTextbox -Name 'Creator' -DisplayName "Creator/Artist/Author"
            New-PodeWebRadio -Name 'Service' -Options @('NetworkTV', 'Netflix', 'AppleTV','Hulu', 'Prime','Max', 'Libby','Kindle','Hoopla','NA')
            New-PodeWebFileUpload -Name 'Image'
            New-PodeWebTextbox -Name 'ReleaseDate' -DisplayName "Release Date" -Type Date
            New-PodeWebTextbox -Name 'ViewDate' -DisplayName "Viewing Date" -Type Date
           )
 
        )
 
    }
 
 
# Update Media
# ==================
    Add-PodeWebPage -Name 'Update_Media' -Hide -ScriptBlock {
        New-PodeWebCard -Content @(
 
            New-PodeWebText -Value 'Markdown Description (click button to enter description): ' 
            New-PodeWebButton -Name 'Enter Description' -ScriptBlock {
                Show-PodeWebModal -Name 'Description'
            }
 
            New-PodeWebModal -Name 'Description' -AsForm -Content @(   
                #$global:Database = "/home/eric/dev/pode_test1/data.db"
                $global:Media = Invoke-SqliteQuery -Query "SELECT * FROM Media where ID = $($WebEvent.Query['ID'])" -DataSource $Database
                #"PPP99" + $Media + $Media.MediaType | Format-Table | Out-Default
 
 
 
                New-PodeWebTextbox -Name 'MultiLine' -Multiline -Value "$($Media.Description)" -Size 20
            ) -ScriptBlock {
 
                Write-Host 'Submit button clicked!'
                 #'UUU1' + $WebEvent.Data['Multiline'] | Out-Default
 
                  $global:multiline = $WebEvent.Data['Multiline'] 
 
            }
 
        New-PodeWebParagraph -Value ' '
        New-PodeWebText -Value '   Markdown Cheat Sheet' -Style Bold
        New-PodeWebList -Items @(
        New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Headings:	# H1 ## H2 ### H3 (up to ###### H6)'
         )
        New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Bold:	**bold text** or __bold text__'
         )
         New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Italic	*text* or _text_'
         )
         New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Unordered List: Use asterisks (*), pluses (+), or hyphens (-)'
         )
         New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Ordered List: Use any integer followed by a period (.)'
         )
         New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Link: [Link title](URL)'
         )
         New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Image: ![Alt text](image URL)'
         )
         New-PodeWebListItem -Content @(
            New-PodeWebText -Value 'Code Blocks: ```python
            s = "Python syntax highlighting"
            print(s)
            ```'
         )
        )
 
           New-PodeWebForm -Name 'Example1' -ScriptBlock {
             $WebEvent.Data | Out-Default
             'UUU2' + $multiline | Out-Default
 
            $MediaFileName = $WebEvent.Data['MediaFileName']
            $MediaTitle = $WebEvent.Data['MediaTitle']
            $MediaType = $WebEvent.Data['MediaType']
            $Creator = $WebEvent.Data['Creator']
            $Service = $WebEvent.Data['Service']
            $Image = $WebEvent.Data['Image']
            $ReleaseDate = $WebEvent.Data['ReleaseDate']
            $ViewDate = $WebEvent.Data['ViewDate']
            $Description = $multiline
 
            # Create md file
            $outfile = "/home/eric/dev/pode_test1/Public/topics/" + $MediaFileName + ".md"
            $title = "# " + $MediaTitle
            Set-Content -Path $outfile -Value $title
            Add-Content -Path $outfile -Value $Description
 
             # Define database path
                $global:Database = "/home/eric/dev/pode_test1/data.db"
 
 
 
                # Insert Data
                $QueryUpdate = "UPDATE Media SET MediaFileName = '$MediaFileName', MediaTitle = '$MediaTitle', Creator = '$Creator', Service = '$Service', Image = '$Image', ReleaseDate = '$ReleaseDate', ViewDate = '$ViewDate', Description = '$Description' WHERE ID = $($WebEvent.Query['ID'])"
                Invoke-SqliteQuery -Query $QueryUpdate -DataSource $Database             
 
                # Select Data
                $Media = Invoke-SqliteQuery -Query "SELECT * FROM Media" -DataSource $Database
                $Media | Format-Table | Out-Default
 
                Move-PodeWebUrl -Url '/pages/thankyou'
 
           } -Content @(
            New-PodeWebTextbox -Name 'MediaFileName' -DisplayName 'Media File Name' -Value "$($Media.MediaFileName)"
            New-PodeWebTextbox -Name 'MediaTitle' -DisplayName 'Media Title' -Value "$($Media.MediaTitle)"
            New-PodeWebRadio -Name 'MediaType' -DisplayName 'Media Type' -Options @("$($Media.MediaType)",'TVshow', 'Movie', 'Book','Album')
            New-PodeWebTextbox -Name 'Creator' -DisplayName "Creator/Artist/Author" -Value "$($Media.Creator)"
            New-PodeWebRadio -Name 'Service' -Options @("$($Media.Service)",'NetworkTV', 'Netflix', 'AppleTV','Hulu', 'Prime','Max', 'Libby','Kindle','Hoopla','NA')
            New-PodeWebTextbox -Name 'Image' -Value "$($Media.Image)"
            New-PodeWebTextbox -Name 'ReleaseDate' -DisplayName "Release Date" -Type Date -Value "$($Media.ReleaseDate)"
            New-PodeWebTextbox -Name 'ViewDate' -DisplayName "Viewing Date" -Type Date -Value "$($Media.ViewDate)"
           )
 
        )
 
    }
 
 
 
# Manage Media
# ========================
    Add-PodeWebPage -Name 'Manage Media' -Group 'Media' -ScriptBlock {
        New-PodeWebCard -Content @(
 
        New-PodeWebRaw -Value "<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
 
td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
 
tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
<table>
<th>ID</th><th>MediaFileName</th><th>MediaTitle</th><th>MediaType</th><th>Creator</th><th>Service</th><th>Manage</th>"
        $global:Database = "/home/eric/dev/pode_test1/data.db"
                $Media = Invoke-SqliteQuery -Query "SELECT * FROM Media" -DataSource $Database
                $Media | Format-Table | Out-Default
        foreach ($item in $Media) {
          New-PodeWebRaw -Value "<tr>
          <td>$($item.ID)</td><td>$($item.MediaFileName)</td><td>$($item.MediaTitle)</td>
          <td>$($item.MediaType)</td><td>$($item.Creator)</td><td>$($item.Service)</td>
          <td><a href='/html/$($item.MediaFileName).html'>[view]</a> | <a href='/pages/Update_Media?id=$($item.ID)'>[update]</a> |
           <a href='/pages/deleteconfirm?id=$($item.ID)'>[delete]</a></td>
          </tr>" 
        }
         New-PodeWebRaw -Value "</table>" 
 
 
        )      
 
    }
 
 # Define the destination page
 
 # Thankyou 
 # ==========
Add-PodeWebPage -Name 'ThankYou' -Hide -Layouts @(
    New-PodeWebCard -Content @(
     New-PodeWebHeader -Value 'Thank You for Submitting!' -Size 1 
     New-PodeWebParagraph -Value 'Your submissions have been reveived.'
    )
)
 
# Deleted 
# ==========
Add-PodeWebPage -Name 'Deleted' -Hide -Layouts @(
    New-PodeWebCard -Content @(
     New-PodeWebHeader -Value 'Item was deleted.' -Size 1 
     New-PodeWebParagraph -Value 'Your submissions have been reveived.'
    )
)
 
# Delete Confirmation 
# ========================
Add-PodeWebPage -Name 'DeleteConfirm' -Hide -ScriptBlock {
 
    #"ZZZ1" + $WebEvent.Query['ID'] | Out-Default
    New-PodeWebCard -Content @(
 
     New-PodeWebHeader -Value "Are you sure that you want to delete ID=$($WebEvent.Query['ID'])?" -Size 1 
     New-PodeWebParagraph -Value 'Your submissions have been reveived.'
 
     New-PodeWebContainer -Content @(
            New-PodeWebTable -Name 'Services' -ScriptBlock {
                #"YYY22" | Out-Default
                $global:Database = "/home/eric/dev/pode_test1/data.db"
                $Media = Invoke-SqliteQuery -Query "SELECT * FROM Media where ID = $($WebEvent.Query['ID'])" -DataSource $Database
                $Media | Format-Table | Out-Default
 
 
 
                foreach ($item in $Media) {
                    $global:ID_val = $item.ID
                    [ordered]@{
                        ID      = "$($item.ID)"
                        MediaFileName    = "$($item.MediaFileName)"
                        MediaTitle = "$($item.MediaTitle)"
                        MediaType = "$($item.MediaType)"
                        Creator = "$($item.Creator)"
                        Service = "$($item.Service)"
 
 
                    }
                }
 
            }

 
            New-PodeWebCard -Content @(
                New-PodeWebForm -Name 'DeleteConfirm' -ScriptBlock {
                    
 
                     if ($WebEvent.Data['DeleteConfirm'].Contains("No")) {
                        Move-PodeWebUrl -Url '/pages/Manage_Media'
                     }
                     if ($WebEvent.Data['DeleteConfirm'].Contains("Yes")) {
                        Invoke-SqliteQuery -Query "DELETE FROM Media where ID = $($WebEvent.Query['ID'])" -DataSource $Database
                        Move-PodeWebUrl -Url '/pages/Deleted'
                     }
 
 
                } -Content @(
                    New-PodeWebRadio -Name 'DeleteConfirm' -Options 'Yes', 'No'
                )
            )
 
        )
    )
}
 
 
 
 
}

This code also creates a professional looking menu system (see the screen capture that follows).



Comments

Post a Comment

Popular posts from this blog

Using Drupal and DITA OT to Create a PDF File

-
Image
This post shows you how to use Drupal and DITA OpenToolkit to create a PDF file. It uses Views in Drupal and the REST UI to create a json file that will be used to create a bookmap and markdown files. These files will be used by Open Toolkit to create a PDF file. Prerequisites:  Drupal, DITA OT, Python Make sure that the following modules are installed in Drupal: For DITA Open Toolkit, you can use markdown files instead of DITA files. For this post we will use markdown files, which are much easier to work with. DITA files require that you are familiar with fairly complex tagging. Markdown is much easier to use. See the following website for a markdown cheatsheet: https://www.markdownguide.org/cheat-sheet/ Creating  Dita Bookmap and Markdown Content Types We will create a Dita bookmap and two markdown files. First, let's make two new  Content Types  in Drupal. For the first content type, perform the following steps: Select  Structure > Content Types > ...
Read more

DokuWiki Docker Container

-
I love DokuWiki. It is an  easy to use text-based wiki.  It is my go-to place to store information about programs that I work on, movies and TV shows that I watch, books that I read, and so on.  The information for this post was taken from a dokuwiki page. Here's the docker-compose.yml: version : '3' services : dokuwiki : container_name : dokuwiki image : php:7-apache-bullseye restart : unless-stopped networks : - dokuwiki ports : - '8889:80' volumes : - ./html:/var/www/html networks : dokuwiki: See  https://loganmarchione.com/2022/03/the-best-way-to-run-dokuwiki-in-docker/  for installation instructions. Exec into the container. docker exec -it dokuwiki /bin/bash Download DokuWiki. cd /var/www/html curl --remote-name https://download.dokuwiki.org/src/dokuwiki/dokuwiki-stable.tgz tar -xzvf dokuwiki-stable.tgz --strip-components=1 rm dokuwiki-stable.tgz chown -R www-data:www-data /var/www/ Go to  http://...
Read more

Favorite Docker Containers

-
Updated: 4/28/2026 - Added links to other relevant posts. I’m a Technical Writer, so my choices of Docker containers reflect my preference toward documentation oriented ones. Portainer  - A must have for running Docker. Shows all your containers, images, and volumes. It lets you stop and start the containers and shows the ports that they are running on. See also  Portainer Docker Container . Homepage  - Lets you set links to services and websites that you use frequently. Uses configuration files for setting the links, backgrounds, and icons. See also  Link-Based Docker Containers . Drupal  - Content management system (CMS) that allows you create dynamic web sites. See Using Drupal and DITA OT to Create a PDF File for a Drupal use case and  Drupal Docker Container . WordPress  - Easy to use content management system for developing web sites (see also  Wordpress Docker Container ). Panadoc - Allows conversion from one documentation format to anothe...
Read more