B4J Tutorial [Pakai] Creating a Blog

aeric · Nov 12, 2025

Create Articles table

On the Modules tab, search for CreateDatabase. Click on the word Database.
Scroll down to the line where you see the code below.
Code:
```
DB.Table = "tbl_products"
```
We can modify the code for creating tbl_products to create our Articles table name tbl_articles.
We can also replace the sample data in tbl_categories.

You can replace the code inside CreateDatabase sub with the highlighted code below:

Code:

Private Sub CreateDatabase
    ' Irrelevant code hidden
    DB.Table = "tbl_categories"
    DB.Columns.Add(DB.CreateColumn2(CreateMap("Name": "category_name", "Null": False)))
    DB.Create

    DB.Columns = Array("category_name")
    DB.Insert2(Array("Life"))
    DB.Insert2(Array("Jokes"))
    DB.Insert2(Array("News"))

    DB.Table = "tbl_articles"
    DB.Columns.Add(DB.CreateColumn2(CreateMap("Name": "category_id", "Type": DB.INTEGER, "Null": False)))
    DB.Columns.Add(DB.CreateColumn2(CreateMap("Name": "article_title", "Null": False)))
    DB.Columns.Add(DB.CreateColumn2(CreateMap("Name": "article_body", "Null": False)))
    DB.Columns.Add(DB.CreateColumn2(CreateMap("Name": "article_status", "Type": DB.INTEGER, "Null": False, "Default": "0")))
    DB.Columns.Add(DB.CreateColumn2(CreateMap("Name": "article_featured_image", "Type": DB.BLOB)))
    DB.Foreign("category_id", "id", "tbl_categories", "", "")
    DB.Create

    DB.Columns = Array("category_id", "article_title", "article_body", "article_status")
    DB.Insert2(Array(3, "New to Blogs", $"<H1>Welcome to My Blog</H1>
    <p>It's my first time writing a blog!<br>
    I am very excited to share more on my life journey. 😉</p>"$, 1))

    Wait For (DB.ExecuteBatch) Complete (Success As Boolean)
    ' Irrelevant code hidden
End Sub

Now go to Main module tab.
Enable the Macro or press Ctrl+click on #Macro: Title, Objects to open the projects Objects directory.
Open sqlite.ini using Notepad or any Text Editor.
Edit the value for DbFile to blog.db then save the file and close it.
Back to B4J and open code tab for ArticlesHandler class.
Under Handle sub, update the following code to point to "/".
Before:
Code:
```
If path = "/articles" Then
    RenderPage
```
After:
Code:
```
If path = "/" Then
    RenderPage
```

Under CreateArticlesTable sub, modify the code as follow:

Code:

Private Sub CreateArticlesTable As Tag
    Dim table1 As Tag = HtmlTable.cls("table table-bordered table-hover rounded small")
    Dim thead1 As Tag = Thead.cls("table-light").up(table1)
    thead1.add(Th.sty("text-align: right; width: 50px").text("#"))
    thead1.add(Th.text("Title"))
    thead1.add(Th.sty("text-align: center; width: 120px").text("Actions"))
    Dim tbody1 As Tag = Tbody.init.up(table1)

    DB.SQL = Main.DBOpen
    DB.Table = "tbl_articles"
    DB.Columns = Array("id", "article_title AS title")
    DB.OrderBy = CreateMap("id": "")
    DB.Query
    ' Irrelevant code hidden
End Sub

Under CreateArticlesRow sub, modify the code as follow:

Code:

Private Sub CreateArticlesRow (data As Map) As Tag
    Dim id As Int = data.Get("id")
    Dim title As String = data.Get("title")

    Dim tr1 As Tag = Tr.init
    tr1.add(Td.cls("align-middle").sty("text-align: right").text(id))
    tr1.add(Td.cls("align-middle").text(title))

    Dim td3 As Tag = Td.cls("align-middle text-center px-1 py-1").up(tr1)
    ' Irrelevant code hidden
End Sub

Go to AppStart (Ctrl+6) and update the code for calling the server handlers.

Code:

Sub AppStart (Args() As String)
    App.Initialize
    ' Irrelevant code hidden
    App.Get("", "ArticlesHandler")
    App.Get("/categories", "CategoriesHandler")
    App.Rest("/api/articles/*", "ArticlesHandler")
    App.Rest("/api/categories/*", "CategoriesHandler")
    App.Start
    ' Irrelevant code hidden
    StartMessageLoop
End Sub

Now we can run the project again.
A new database should be created with the new Articles table.
Navigate to the index page and you should see a page looks like following:
The app is not fully working yet but we will fix it later.
However, it is good to see our articles table is loaded successfully.

aeric · Nov 12, 2025

Update Articles Page

When we click on the "Add Articles" button, a modal dialog shows only a Name field.
We want to change this field to Title.
Stop the debug if not already done so.
Open HandleAddModal sub for ArticlesHandler.

Find the following lines:

B4X:

Dim group1 As Tag = modalBody.add(Div.cls("form-group"))
Label.forId("name").text("Name ").up(group1).add(Span.cls("text-danger").text("*"))
Input.typeOf("text").up(group1).id("name").name("name").cls("form-control").attr3("required")

Edit the word "name" to "title" for the following attributes.
a. forId("name") -> forId("title")
b. text("Name ") -> text("Title ")
c. id("name") -> id("title")
d. name("name") -> name("title")

The updated code will look like following:

Code:

Dim group1 As Tag = modalBody.add(Div.cls("form-group"))
Label.forId("title").text("Title ").up(group1).add(Span.cls("text-danger").text("*"))
Input.typeOf("text").up(group1).id("title").name("title").cls("form-control").attr3("required")

We want to allow user to enter article Body using a bigger box.
Highlight the above 3 lines and press Ctrl + D key to duplicate the lines.
Change the variable from group1 to group2.
Update the values from "title" to "body".
Change the text input to Textarea type.
We can also set the rows to "3" to give the textarea more height.
Lastly we want to add a selection dropdown for the publishing Status.
We can copy code from above group1 again and make changes.
We add options with value "0" for "Draft" and value "1" for "Published".
Remember to use Bootstrap "form-select" CSS class to apply for the Dropdown.

Here is how the code looks like:

Code:

Dim group1 As Tag = modalBody.add(Div.cls("form-group"))
Label.forId("title").text("Title ").up(group1).add(Span.cls("text-danger").text("*"))
Input.typeOf("text").up(group1).id("title").name("title").cls("form-control").attr3("required")

Dim group2 As Tag = modalBody.add(Div.cls("form-group"))
Label.forId("body").text("Body ").up(group2).add(Span.cls("text-danger").text("*"))
Textarea.rows("3").up(group2).id("body").name("body").cls("form-control").attr3("required")

Dim group3 As Tag = modalBody.add(Div.cls("form-group"))
Label.forId("status").text("Status ").up(group3).add(Span.cls("text-danger").text("*"))
Dim select1 As Tag = Dropdown.up(group3).id("status").name("status").cls("form-select").attr3("required")
Option.valueOf("0").text("Draft").up(select1)
Option.valueOf("1").text("Published").up(select1)

Run the debug and click the Add Articles button to see the updated modal.
Nice! We now have 3 fields showing on the modal dialog.

aeric · Nov 12, 2025

Insert Article to Database

In the previous HandleAddModal sub, we have a form component created using MiniHTML that will be submitted to the URL "/api/articles" using POST method.

This API endpoint is passed to HandleArticles sub inside Handle sub when it falls under the Else condition.

Code:

Sub Handle (req As ServletRequest, resp As ServletResponse)
    ' Irrelevant code hidden'
    Dim path As String = req.RequestURI
    If path = "/" Then
        ' Irrelevant code hidden'
    Else If path = "/api/articles/table" Then
        ' Irrelevant code hidden'
    Else
        HandleArticles
    End If
End Sub

HandleArticles sub will handle the database operation for HTTP methods POST, PUT and DELETE which are corresponded to SQL INSERT, UPDATE and DELETE.

From the code we can see the variable name is assigned from the Request.GetParameter("name")

Code:

Private Sub HandleArticles
    Select Method
        Case "POST"
            ' Create
            Dim name As String = Request.GetParameter("name")
            If name = "" Or name.Trim.Length < 2 Then
                ShowAlert("Articles name must be at least 2 characters long.", "warning")
                Return
            End If

Let's change this to read the form data for Title, Body and Status.

The code should look like the following:

Code:

Dim article_title As String = Request.GetParameter("title")
Dim article_body As String = Request.GetParameter("body")
Dim article_status As String = Request.GetParameter("status")

Since Body is conflicting with a module in MiniHtml, we use article_body as the variable name.
We standardized the variable naming for other fields with article_ prefix.

Next, we use MiniORMUtils to check if an article with the same title already existed.

B4X:

DB.Table = "tbl_articles"
DB.Where = Array("article_title = ?")
DB.Parameters = Array(article_title)
DB.Query
If DB.Found Then
    DB.Close
    ShowAlert("Articles with same title already exists!", "warning")
    Return
End If

If it has already existed, we stop the operation from being proceed.
We can show an alert message using ShowAlert sub.

The code for inserting a new article should look like the following:

Code:

Private Sub HandleArticles
    Select Method
        Case "POST"
            ' Create
            Dim article_title As String = Request.GetParameter("title")
            Dim article_body As String = Request.GetParameter("body")
            Dim article_status As String = Request.GetParameter("status")
            If article_title = "" Or article_title.Trim.Length < 2 Then
                ShowAlert("Article title must be at least 2 characters long.", "warning")
                Return
            End If
            If article_body = "" Then
                ShowAlert("Article body cannot be empty.", "warning")
                Return
            End If
            If article_status = "" Then
                ShowAlert("Article status cannot be empty.", "warning")
                Return
            End If
            Try
                DB.SQL = Main.DBOpen
                DB.Table = "tbl_articles"
                DB.Where = Array("article_title = ?")
                DB.Parameters = Array(article_title)
                DB.Query
                If DB.Found Then
                    DB.Close
                    ShowAlert("Article with same title already exists!", "warning")
                    Return
                End If
            Catch
                Log(LastException)
                ShowAlert($"Database error: ${LastException.Message}"$, "danger")
            End Try

            ' Insert new row
            Try
                DB.Reset
                DB.Columns = Array("article_title", "article_body", "article_status")
                DB.Parameters = Array(article_title, article_body, article_status)
                DB.Save
                DB.Close
                ShowToast("Articles", "created", "Article created successfully!", "success")
            Catch
                ShowAlert($"Database error: ${LastException.Message}"$, "danger")
            End Try
        Case "PUT"
            ' Irrelevant code hidden
        Case "DELETE"
            ' Irrelevant code hidden
    End Select
End Sub

If the operation succeeded, we use ShowToast sub to close the modal dialog and show a Bootstrap toast. The table will also be refreshed using HTMX.
Let's try adding an article.

We get an error

Code:

(SQLException) java.sql.SQLException: [SQLITE_CONSTRAINT]  Abort due to constraint violation (tbl_articles.category_id may not be NULL)

It seems I have forgotten to add the input for category_id which is a Foreign Key to table tbl_categories.
Let's fix this in the following tutorial.

aeric · Nov 12, 2025

Populate Categories Dropdown Dynamically

Unlike Status dropdown where we hardcoded the items, we can dynamically load items from the database.
We can check the code in ProductsHandler which I already removed from the start.
Let's add back ProductsHandler to the project to copy the sub.
There is a sub name CreateCategoriesDropdown sub that we can copy to ArticlesHandler.

Let's copy this sub and paste at the bottom of ArticlesHandler class.

Code:

Private Sub CreateCategoriesDropdown (selected As Int) As Tag
    Dim select1 As Tag = Dropdown.cls("form-select")
    select1.attr3("required")
    'select1.hxGet("/api/categories/list")
    Option.valueOf("").text("Select Category").attr3(IIf(selected < 1, "selected", "")).attr3("disabled").up(select1)

    DB.SQL = Main.DBOpen
    DB.Table = "tbl_categories"
    DB.Columns = Array("id", "category_name AS name")
    DB.Query
    For Each row As Map In DB.Results
        Dim catid As Int = row.Get("id")
        Dim catname As String = row.Get("name")
        If catid = selected Then
            Option.valueOf(catid).attr3("selected").text(catname).up(select1)
        Else
            Option.valueOf(catid).text(catname).up(select1)
        End If
    Next
    DB.Close
    Return select1
End Sub

Then we can also copy the code for group1 tag inside HandleAddModal sub from ProductsHandler to ArticlesHandler.

The code should now look like the following:

Code:

Private Sub HandleAddModal
    Dim form1 As Tag = Form.init
    form1.hxPost("/api/articles")
    form1.hxTarget("#modal-messages")
    form1.hxSwap("innerHTML")

    Dim modalHeader As Tag = Div.cls("modal-header").up(form1)
    H5.cls("modal-title").text("Add Articles").up(modalHeader)
    Button.typeOf("button").cls("btn-close").data("bs-dismiss", "modal").up(modalHeader)

    Dim modalBody As Tag = Div.cls("modal-body").up(form1)
    Div.id("modal-messages").up(modalBody)'.hxSwapOob("true")

    Dim group1 As Tag = Div.cls("form-group").up(modalBody)
    Label.forId("category1").text("Category ").up(group1).add(Span.cls("text-danger").text("*"))
    Dim select1 As Tag = CreateCategoriesDropdown(-1)
    select1.id("category1")
    select1.name("category")
    select1.up(group1)

    Dim group1 As Tag = modalBody.add(Div.cls("form-group"))
    Label.forId("title").text("Title ").up(group1).add(Span.cls("text-danger").text("*"))
    Input.typeOf("text").up(group1).id("title").name("title").cls("form-control").attr3("required")

    Dim group2 As Tag = modalBody.add(Div.cls("form-group"))
    Label.forId("body").text("Body ").up(group2).add(Span.cls("text-danger").text("*"))
    Textarea.rows("3").up(group2).id("body").name("body").cls("form-control").attr3("required")

    Dim group3 As Tag = modalBody.add(Div.cls("form-group"))
    Label.forId("status").text("Status ").up(group3).add(Span.cls("text-danger").text("*"))
    Dim select1 As Tag = Dropdown.up(group3).id("status").name("status").cls("form-select").attr3("required")
    Option.valueOf("0").text("Draft").up(select1)
    Option.valueOf("1").text("Published").up(select1)

    Dim modalFooter As Tag = Div.cls("modal-footer").up(form1)
    Button.typeOf("submit").cls("btn btn-success px-3").text("Create").up(modalFooter)
    Button.typeOf("button").cls("btn btn-secondary px-3").data("bs-dismiss", "modal").text("Cancel").up(modalFooter)

    App.WriteHtml(Response, form1.Build)
End Sub

It is fine if we reuse the variable name group1 here. You can rename the variables if you wish.
We pass a value of -1 to CreateCategoriesDropdown so no item is selected when the modal is loaded.
B4X:
```
CreateCategoriesDropdown(-1)
```
Let's try run the project in Debug to see the changes.
Stop debug and let's add the missing code for category_id when inserting a row for the articles table.

Now the code should looks like the following:

Code:

Private Sub HandleArticles
    Select Method
        Case "POST"
            ' Create
            Dim article_title As String = Request.GetParameter("title")
            Dim article_body As String = Request.GetParameter("body")
            Dim article_status As String = Request.GetParameter("status")
            Dim category_id As Int = Request.GetParameter("category")
         
            If category_id = "" Then
                ShowAlert("Please select a category for the Article.", "warning")
                Return
            End If        
            If article_title = "" Or article_title.Trim.Length < 2 Then
                ShowAlert("Article title must be at least 2 characters long.", "warning")
                Return
            End If
            If article_body = "" Then
                ShowAlert("Article body cannot be empty.", "warning")
                Return
            End If
            If article_status = "" Then
                ShowAlert("Please select a status for the Article.", "warning")
                Return
            End If
            Try
                DB.SQL = Main.DBOpen
                DB.Table = "tbl_articles"
                DB.Where = Array("article_title = ?")
                DB.Parameters = Array(article_title)
                DB.Query
                If DB.Found Then
                    DB.Close
                    ShowAlert("Article with same title already exists!", "warning")
                    Return
                End If
            Catch
                Log(LastException)
                ShowAlert($"Database error: ${LastException.Message}"$, "danger")
            End Try

            ' Insert new row
            Try
                DB.Reset
                DB.Columns = Array("article_title", "article_body", "article_status", "category_id")
                DB.Parameters = Array(article_title, article_body, article_status, category_id)
                DB.Save
                DB.Close
                ShowToast("Articles", "created", "Article created successfully!", "success")
            Catch
                ShowAlert($"Database error: ${LastException.Message}"$, "danger")
            End Try
    ' The rest of code

Let's try again to add an article.
It doesn't work. I really should not buy a lottery.
This is because we are comparing Integer value with empty String.

Let's fix it with the following code:

Code:

If category_id < 1 Then
    ShowAlert("Please select a category for the Article.", "warning")
    Return
End If

Now, let's finger crossed. Click on the Create button.
Well, it works this time.

aeric · Nov 13, 2025

Edit Articles from Database

Up to now, can you follow this tutorial?
Each part has around 20 steps but most are explanation which I tried to make them as short as possible. The actual steps maybe only 5.
Let's continue with the Edit Articles modal dialog.

When the Articles table is generated using CreateArticlesTable, we called CreateArticlesRow sub by passing a Map from the MiniORM for each row.
Code:
```
For Each row As Map In DB.Results
    Dim tr1 As Tag = CreateArticlesRow(row)
    tr1.up(tbody1)
Next
```
In CreateArticlesRow sub, we pass the id at the end of URL to hxGet attribute of an anchor tag.
When the edit button (pencil icon) is clicked, it made a request to the backend to call the endpoint e.g /api/articles/edit/1

This will call HandleEditModal sub as you can see in the Handle sub.

Code:

Sub Handle (req As ServletRequest, resp As ServletResponse)
' Irrelevant code hidden
    If path = "/" Then
        RenderPage
    Else If path = "/api/articles/table" Then
        HandleTable
    Else If path = "/api/articles/add" Then
        HandleAddModal
    Else If path.StartsWith("/api/articles/edit/") Then
        HandleEditModal
    Else If path.StartsWith("/api/articles/delete/") Then
        HandleDeleteModal
    Else
        HandleArticles
    End If
End Sub

We want to populate modal dialog with the data from database given the id from the endpoint.
For now, we only have one name input field.
We can copy the code from HandleAddModal sub.
Paste the code inside HandleEditModal sub.

Take note that a hidden input for "id" is already added in the modal form.

We need to update the code for MiniORM for querying more columns from tbl_articles database table.
Replace the following line:

Code:

DB.Columns = Array("id", "article_name AS name")

into this:

Code:

DB.Columns = Array("article_title AS title", "article_body AS body", "article_status AS status", "category_id AS category")

Replace the following line:
Code:
```
Dim name As String = DB.First.Get("name")
```
by this:
Code:
```
Dim row As Map = DB.First
```
We assign DB.First from MiniORM to a map call "row" so we can use it more than once later.

Now we add variables for article_title, article_body, article_status and category_id.

Code:

Dim row As Map = DB.First
Dim article_title As String = row.Get("title")
Dim article_body As String = row.Get("body")
Dim article_status As Int = row.Get("status")
Dim category_id As Int = row.Get("category")

Then we can put the values to our modal form input fields.
Start from the Dropdown component for category.
Replace the code:
Code:
```
Dim select1 As Tag = CreateCategoriesDropdown(-1)
```
by this:
Code:
```
Dim select1 As Tag = CreateCategoriesDropdown(category_id)
```
So the Dropdown will select the category name based on the category id of that row.

Next, for the Title input text, we add a new valueOf attribute to the line.

Code:

Dim group1 As Tag = modalBody.add(Div.cls("form-group"))
Label.forId("title").text("Title ").up(group1).add(Span.cls("text-danger").text("*"))
Input.typeOf("text").up(group1).id("title").name("title").cls("form-control").valueOf(article_title).attr3("required")

For article_body, to set the value to textarea component, instead of using valueOf, we use text attribute.

Code:

Dim group2 As Tag = modalBody.add(Div.cls("form-group"))
Label.forId("body").text("Body ").up(group2).add(Span.cls("text-danger").text("*"))
Textarea.rows("3").up(group2).id("body").name("body").cls("form-control").text(article_body).attr3("required")

For article_status, we want to select the item if the values matched.

Code:

If article_status = 0 Then
    Option.valueOf("0").attr3("selected").text("Draft").up(select1)
Else
    Option.valueOf("0").text("Draft").up(select1)
End If
If article_status = 1 Then
    Option.valueOf("1").attr3("selected").text("Published").up(select1)
Else
    Option.valueOf("1").text("Published").up(select1)
End If

Maybe this code can be simplified as one liner using IIf but here let's make this easy to understand.

The code now should looks like the following:

Code:

Private Sub HandleEditModal
    Dim id As String = Request.RequestURI.SubString("/api/articles/edit/".Length)
    Dim form1 As Tag = Form.init
    form1.hxPut($"/api/articles"$)
    form1.hxTarget("#modal-messages")
    form1.hxSwap("innerHTML")
 
    DB.SQL = Main.DBOpen
    DB.Table = "tbl_articles"
    DB.Columns = Array("article_title AS title", "article_body AS body", "article_status AS status", "category_id AS category")
    DB.WhereParam("id = ?", id)
    DB.Query
    If DB.Found Then
        Dim row As Map = DB.First
        Dim article_title As String = row.Get("title")
        Dim article_body As String = row.Get("body")
        Dim article_status As Int = row.Get("status")
        Dim category_id As Int = row.Get("category")
 
        Dim modalHeader As Tag = Div.cls("modal-header").up(form1)
        H5.cls("modal-title").text("Edit Articles").up(modalHeader)
        Button.typeOf("button").cls("btn-close").data("bs-dismiss", "modal").up(modalHeader)
 
        Dim modalBody As Tag = Div.cls("modal-body").up(form1)
        Div.id("modal-messages").up(modalBody)
        Input.typeOf("hidden").up(modalBody).name("id").valueOf(id)
 
        Dim group1 As Tag = Div.cls("form-group").up(modalBody)
        Label.forId("category1").text("Category ").up(group1).add(Span.cls("text-danger").text("*"))
        Dim select1 As Tag = CreateCategoriesDropdown(category_id)
        select1.id("category1")
        select1.name("category")
        select1.up(group1)

        Dim group1 As Tag = modalBody.add(Div.cls("form-group"))
        Label.forId("title").text("Title ").up(group1).add(Span.cls("text-danger").text("*"))
        Input.typeOf("text").up(group1).id("title").name("title").cls("form-control").valueOf(article_title).attr3("required")

        Dim group2 As Tag = modalBody.add(Div.cls("form-group"))
        Label.forId("body").text("Body ").up(group2).add(Span.cls("text-danger").text("*"))
        Textarea.rows("3").up(group2).id("body").name("body").cls("form-control").text(article_body).attr3("required")

        Dim group3 As Tag = modalBody.add(Div.cls("form-group"))
        Label.forId("status").text("Status ").up(group3).add(Span.cls("text-danger").text("*"))
        Dim select1 As Tag = Dropdown.up(group3).id("status").name("status").cls("form-select").attr3("required")
        If article_status = 0 Then
            Option.valueOf("0").attr3("selected").text("Draft").up(select1)
        Else
            Option.valueOf("0").text("Draft").up(select1)
        End If
        If article_status = 1 Then
            Option.valueOf("1").attr3("selected").text("Published").up(select1)
        Else
            Option.valueOf("1").text("Published").up(select1)
        End If

        Dim modalFooter As Tag = Div.cls("modal-footer").up(form1)
        Button.typeOf("submit").cls("btn btn-primary px-3").text("Update").up(modalFooter)
        Button.typeOf("button").cls("btn btn-secondary px-3").data("bs-dismiss", "modal").text("Cancel").up(modalFooter)
    End If
    DB.Close

    App.WriteHtml(Response, form1.Build)
End Sub

Let's save it and let the Hot code swap completed successfully.
Now click the pencil button and see the updated modal dialog.
Well, give yourself a pat on the back.
Wait, let's try to click the Update button.
Well, it's too early to celebrate. We actually got an error.
Code:
```
(SQLException) java.sql.SQLException: [SQLITE_ERROR] SQL error or missing database (no such column: article_name)
```
We haven't updated the code to update the database.
Head to the HandleArticles sub and let's finish up the code.
If you are lazy like I am, just copy the code we already have in POST section.
Scroll to the line:
Code:
```
Case "PUT"
```
where we are going to execute an UPDATE to the database.
Then replace the code here:

We are not interested to check the name or title for duplicate here so we can safely remove the following code:

Code:

DB.Reset
DB.Where = Array("article_name = ?", "id <> ?")
DB.Parameters = Array(name, id)
DB.Query
If DB.Found Then
    ShowAlert("Articles already exists!", "warning")
    DB.Close
    Return
End If

The code for updating is very similar to Insert article. So again, we can take the code from POST section and paste it here.

But we also want to update the "modified_date" column.

Code:

' Update row
Try
    DB.Reset
    'DB.Columns = Array("article_name", "modified_date")
    'DB.Parameters = Array(name, Main.CurrentDateTime)
    DB.Columns = Array("article_title", "article_body", "article_status", "category_id", "modified_date")
    DB.Parameters = Array(article_title, article_body, article_status, category_id, Main.CurrentDateTime)
    DB.Id = id
    DB.Save
    DB.Close
    ShowToast("Articles", "updated", "Articles updated successfully!", "info")
Catch
    ShowAlert($"Database error: ${LastException.Message}"$, "danger")
End Try

The final code now should look like the following:

Code:

Private Sub HandleArticles
    Select Method
        Case "POST"
            ' Irrelevant code hidden
        Case "PUT"
            ' Update
            Dim id As Int = Request.GetParameter("id")
            Dim article_title As String = Request.GetParameter("title")
            Dim article_body As String = Request.GetParameter("body")
            Dim article_status As String = Request.GetParameter("status")
            Dim category_id As Int = Request.GetParameter("category")
       
            If category_id < 1 Then
                ShowAlert("Please select a category for the Article.", "warning")
                Return
            End If      
            If article_title = "" Or article_title.Trim.Length < 2 Then
                ShowAlert("Article title must be at least 2 characters long.", "warning")
                Return
            End If
            If article_body = "" Then
                ShowAlert("Article body cannot be empty.", "warning")
                Return
            End If
            If article_status = "" Then
                ShowAlert("Please select a status for the Article.", "warning")
                Return
            End If
            DB.SQL = Main.DBOpen
            DB.Table = "tbl_articles"
            DB.Find(id)
            If DB.Found = False Then
                ShowAlert("Articles not found!", "warning")
                DB.Close
                Return
            End If
       
            ' Update row
            Try
                DB.Reset
                DB.Columns = Array("article_title", "article_body", "article_status", "category_id", "modified_date")
                DB.Parameters = Array(article_title, article_body, article_status, category_id, Main.CurrentDateTime)
                DB.Id = id
                DB.Save
                DB.Close
                ShowToast("Articles", "updated", "Articles updated successfully!", "info")
            Catch
                ShowAlert($"Database error: ${LastException.Message}"$, "danger")
            End Try
        Case "DELETE"
            ' Irrelevant code hidden
    End Select
End Sub

Now, save the changes and wait for B4J IDE Hot swap to complete.
Click the pencil button again and make some changes.
Click the Update button.
Click the pencil button again to see the data is persisted.
Voila, it works!
We can verify this using DB Browser for SQLite.

aeric · Nov 17, 2025

Delete Article

If you have followed the previous tutorials for Adding and Editing Articles, the steps for creating a delete dialog and execute the backend operation should be easy.
I have thought to leave this for developers to figure it out but then I believe there are novice developers who want to look up the answer immediately or curious how I would done it my way. So, I will include this tutorial.
Let me create a new article as a sacrifice.
Go to HandleDeleteModal sub and edit the query for MiniORM.

Replace the following code:

Code:

DB.Columns = Array("id", "article_name AS name")

with this:

B4X:

DB.Columns = Array("article_title")

Replace the following line:

Code:

Dim name As String = DB.First.Get("name")

with this:

Code:

Dim article_title As String = DB.First.Get("article_title")

Replace the following line:

B4X:

Paragraph.text($"Delete ${name}?"$).up(modalBody)

with this:

Code:

Paragraph.text($"Delete ${article_title}?"$).up(modalBody)

Then in HandleArticles sub, we remove the following code in DELETE method as this is not needed:

Code:

DB.Table = "dbtable2" ' child table
DB.WhereParam("article_id = ?", id)
DB.Query
If DB.Found Then
    ShowAlert("Cannot delete article with associated rows!", "warning")
    DB.Close
    Return
End If

Save the code and wait Hot swapping completed.
Now when the user clicks on the delete button, a dialog will show the article title for confirmation.
Ok, the delete function is working as expected.

aeric · Nov 17, 2025

Adding Menu Items to Navigation Bar

The index page now has no links to navigate to other pages.
Let's add a some link items to the navigation bar so we can navigate to the categories and articles page.
Let's check the code in RenderPage sub under CategoriesHandler class.
You can copy the code in the following highlighted section and paste into ArticlesHandler.
Adjust the code for better readibility.
We can copy anchor1 tag to put at list2 section (line #51 -> line #59) and copy anchor2 tag into the upper section at list1 section (line #58 -> line #52) as following:

Replace the following line:

Code:

Dim anchor2 As Tag = Anchor.href("/users").up(list2)

with this:

Code:

Dim anchor1 As Tag = Anchor.href("/categories").up(list1)

Then replace the bottom part from:

Code:

Dim anchor1 As Tag = Anchor.href("#").up(list1)

with this:

Code:

Dim anchor2 As Tag = Anchor.href("#").up(list2)

Update the text label from the following line:
Code:
```
anchor2.text("Users")
```
with this:
Code:
```
anchor2.text("Articles")
```
Save the code and refresh the page. When the user clicks on the top right hamburger menu, the links will appear in the navigation bar.

We can also enable the article link in CategoriesHandler too.
Replace the commented code:

Code:

'Dim list2 As Tag = Li.cls("nav-item d-block d-lg-block").up(ulist1)
'Dim anchor2 As Tag = Anchor.href("/users").up(list2)
'anchor2.cls("nav-link")
'anchor2.text("Users")

with this:

B4X:

Dim list2 As Tag = Li.cls("nav-item d-block d-lg-block").up(ulist1)
Dim anchor2 As Tag = Anchor.href("/articles").up(list2)
anchor2.cls("nav-link")
anchor2.text("Articles")

The menu in Categories page now should look like this:

aeric · Nov 17, 2025

Create New Index Page

The index page for now is showing a table for articles CRUD operation.
A blog should only show a list of posts or articles.
Let's create a new server handler and name it as IndexHandler.

In Class_Globals sub, add the following lines:

Code:

Sub Class_Globals
    Private App As EndsMeet
    Private Request As ServletRequest
    Private Response As ServletResponse
End Sub

Inside Initialize sub, add this line:

Code:

Public Sub Initialize
    App = Main.App
End Sub

In Handle sub, we only need to call RenderPage sub.

Code:

Sub Handle (req As ServletRequest, resp As ServletResponse)
    Request = req
    Response = resp
    Dim path As String = Request.RequestURI
    If path = "/" Then
        RenderPage
    End If
End Sub

The code for RenderPage should look like the following:

Code:

Private Sub RenderPage
    Dim main1 As MainView
    main1.Initialize
    main1.LoadContent(ContentContainer)
    Dim page1 As Tag = main1.Render
    Dim doc As Document
    doc.Initialize
    doc.AppendDocType
    doc.Append(page1.build)
    App.WriteHtml2(Response, doc.ToString, App.ctx)
End Sub

For ContentContainer sub, the code should look as following:

Code:

Private Sub ContentContainer As Tag
    Dim content1 As Tag = Div.cls("row mt-3 text-center align-items-center justify-content-center")
    Dim col1 As Tag = Div.cls("col-md-12 col-lg-6").up(content1)
    Dim container1 As Tag = Div.up(col1)
    container1.hxGet("/api/articles/list")
    container1.hxTrigger("load")
    container1.text("Loading...")

    Return content1
End Sub

Create Card Items

From previous section, the hxGet method in ContentContainer sub is calling "/api/articles/list".
We will write the code in ArticlesHandler to handle this request.
In ArticlesHandler sub, inside Handle sub, add the following lines:
Code:
```
Else If path = "/api/articles/list" Then
    HandleArticlesList
```
Create a sub call HandleArticlesList.

Use MiniORM to query the articles where status is 1 (Published).

Code:

DB.SQL = Main.DBOpen
DB.Table = "tbl_articles"
DB.Columns = Array("id", "article_title", "article_body", "created_date")
DB.WhereParam("article_status = ?", 1)
DB.OrderBy = CreateMap("id": "")
DB.Query

Then we use a For Each loop to display each article from the results.

Code:

For Each row As Map In DB.Results
    Dim article_title As String = row.Get("article_title")
    Dim article_body As String = row.Get("article_body")
    Dim created_date As String = "created on " & row.Get("created_date")
    ' generate the frontend
Next
DB.Close

For the frontend, let's use Bootstrap card to display the content.

From Bootstrap website example, we got this html:

HTML:

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

We can convert it into MiniHtml tags:

Code:

Dim card1 As Tag = Div.cls("card text-start")
Dim cardbody1 As Tag = Div.cls("card-body").up(card1)
H5.cls("card-title").up(cardbody1).text("article title")
H6.cls("card-subtitle mb-2 text-body-secondary").up(cardbody1).text("created date")
Paragraph.cls("card-text").text("article body")

Note:
a. We removed the width style to card1 tag so it will appear wider.
b. We add text-start after the card class so the text will aligned to left.
c. Both card-link tags are removed.

The code for HandleArticlesList should look like following:

Code:

Private Sub HandleArticlesList
    DB.SQL = Main.DBOpen
    DB.Table = "tbl_articles"
    DB.Columns = Array("id", "article_title", "article_body", "created_date")
    DB.WhereParam("article_status = ?", 1)
    DB.OrderBy = CreateMap("id": "")
    DB.Query
  
    Dim div1 As Tag = Div.init
    For Each row As Map In DB.Results
        Dim article_title As String = row.Get("article_title")
        Dim article_body As String = row.Get("article_body")
        Dim created_date As String = "created on " & row.Get("created_date")
      
        Dim card1 As Tag = Div.cls("card text-start")
        Dim cardbody1 As Tag = Div.cls("card-body").up(card1)
        H5.cls("card-title").up(cardbody1).text(article_title)
        H6.cls("card-subtitle mb-2 text-body-secondary").up(cardbody1).text(created_date)
        Paragraph.cls("card-text").up(cardbody1).text(article_body)
        card1.up(div1)
    Next
    DB.Close
    App.WriteHtml(Response, div1.Build)
End Sub

Save the code and refresh the page.
The index page now should display like the following:
Add more articles if you like.

Add the menu links to the navigation bar so you can navigate to categories and articles management page.

Code:

Private Sub RenderPage
    Dim main1 As MainView
    main1.Initialize
    main1.LoadContent(ContentContainer)
    Dim page1 As Tag = main1.Render

    Dim body1 As Tag = page1.Child(1)
    Dim nav1 As Tag = body1.Child(0)
    Dim container1 As Tag = nav1.Child(0)
    Dim navbar1 As Tag = container1.Child(3)
    Dim ulist1 As Tag = navbar1.Child(0)
  
    Dim list1 As Tag = Li.cls("nav-item d-block d-lg-block").up(ulist1)
    Dim anchor1 As Tag = Anchor.href("/categories").up(list1)
    anchor1.cls("nav-link")
    anchor1.text("Categories")

    Dim list2 As Tag = Li.cls("nav-item d-block d-lg-block").up(ulist1)
    Dim anchor2 As Tag = Anchor.href("/articles").up(list2)
    anchor2.cls("nav-link")
    anchor2.text("Articles")
  
    Dim doc As Document
    doc.Initialize
    ' Irrelevant code hidden
End Sub

Final Touch

In Main module, inside AppStart sub, update the index route to point to IndexHandler.

Add the route for "/articles" to point to ArticlesHandler class.

Code:

Sub AppStart (Args() As String)
    App.Initialize
    ' Irrelevant code hidden
    App.Get("", "IndexHandler")
    App.Get("/categories", "CategoriesHandler")
    App.Get("/articles", "ArticlesHandler")
    App.Rest("/api/articles/*", "ArticlesHandler")
    App.Rest("/api/categories/*", "CategoriesHandler")
    App.Start
    ' Irrelevant code hidden
    StartMessageLoop
End Sub

In ArticlesHandler, remember to update the path to "/articles"
Code:
```
If path = "/articles" Then
    RenderPage
```
Inside HandleArticlesList sub, update the code to add a bottom margin "mb-3" CSS class to the card1 tag.
Code:
```
Dim card1 As Tag = Div.cls("card text-start mb-3")
```
You have now completed the tutorial on how to use Pakai framework to create a blog.
This application can be use as a foundation to create other applications such as corporate website, ERP, CRM, inventory system, dashboard or any web applications. The posibilities is infinite!

The full source code is available on GitHub: https://github.com/pyhoon/Pakai-Blog

B4J Tutorial [Pakai] Creating a Blog

Introduction

Let's Start

aeric

Expert

Create Articles table

aeric

Expert

Update Articles Page

aeric

Expert

Insert Article to Database

aeric

Expert

Populate Categories Dropdown Dynamically

aeric

Expert

Edit Articles from Database

aeric

Expert

Delete Article

aeric

Expert

Adding Menu Items to Navigation Bar

aeric

Expert

Create New Index Page

Create Card Items

Final Touch

Similar Threads

B4J Tutorial [Pakai] Creating a Blog

Introduction​

Let's Start​

Expert

Create Articles table​

Expert

Update Articles Page​

Expert

Insert Article to Database​

Expert

Populate Categories Dropdown Dynamically​

Expert

Edit Articles from Database​

Expert

Delete Article​

Expert

Adding Menu Items to Navigation Bar​

Expert

Create New Index Page​

Create Card Items​

Final Touch​

Similar Threads

Introduction

Let's Start

Create Articles table

Update Articles Page

Insert Article to Database

Populate Categories Dropdown Dynamically

Edit Articles from Database

Delete Article

Adding Menu Items to Navigation Bar

Create New Index Page

Create Card Items

Final Touch