B4J Tutorial [Pakai] Creating a Blog

Introduction​

This tutorial is a continuous to [Tutorial] Pakai framework v6
I assume you already have the default project successfully running on development.
In this tutorial, we will continue to work with 2 libraries, MiniHtml and MiniORMUtils.

Let's Start​

1. So far, we have 2 entities or I will call them models. They are Categories and Products.
2. Let's leave Categories as it is.
3. We will remove Products and create a new model call Articles.
4. You can name it as Posts if you like but I don't want to confuse with the HTTP POST method.
5. Right click on the ProductsHandler and click Remove.
   
   
6. Then we right click on the Handlers group and add a Server Handler.
   
   
7. Give it a name ArticlesHandler and click Ok.
   
   
8. You will see a new handler class is created.
9. Inside Class_Globals sub, start typing pakai until you see a dialog pops up showing the (code snippets) Pakai handler Globals v6.00.
   
   
10. Press enter and you will get the code added as showed below.
    
    
11. Now delete the code after line #9.
12. Start typing pakai again and this time we select the second code snippet.
    
    
13. Now there are more code added for you and the word plural is highlighted in amber colour.
    
    
14. Press Backspace and type the word articles. Press Tab to go to next highlighted word.
    
    
15. Press Tab and now it is highlighting on the word Model.
    
    
16. Change it to Articles and press Tab.
    
    
17. Press Tab to skip on the word SERVER_URL.
    
    
18. Similarly, change the dbtable to tbl_articles and singular to article.
    
    
19. When the cursor returns to top of page, you know you can confirm the changes by pressing Enter.
20. Now you have a new server handler for Articles.

 

[aeric]

Create Articles table​

1. On the Modules tab, search for CreateDatabase. Click on the word Database.
   
   
2. Scroll down to the line where you see the code below.
   
   DB.Table = "tbl_products"
3. We can modify the code for creating tbl_products to create our Articles table name tbl_articles.
4. We can also replace the sample data in tbl_categories.
5. You can replace the code inside CreateDatabase sub with the highlighted code below:
   
   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
6. Now go to Main module tab.
7. Enable the Macro or press Ctrl+click on #Macro: Title, Objects to open the projects Objects directory.
8. Open sqlite.ini using Notepad or any Text Editor.
   
   
9. Edit the value for DbFile to blog.db then save the file and close it.
10. Back to B4J and open code tab for ArticlesHandler class.
11. Under Handle sub, update the following code to point to "/".
    Before:
    If path = "/articles" Then
        RenderPage
    After:
    If path = "/" Then
        RenderPage
12. Under CreateArticlesTable sub, modify the code as follow:
    
    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
13. Under CreateArticlesRow sub, modify the code as follow:
    
    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
14. Go to AppStart (Ctrl+6) and update the code for calling the server handlers.
    
    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
15. Now we can run the project again.
16. A new database should be created with the new Articles table.
17. Navigate to the index page and you should see a page looks like following:
    
    
18. The app is not fully working yet but we will fix it later.
19. However, it is good to see our articles table is loaded successfully.

 

[aeric]

Update Articles Page​

1. When we click on the "Add Articles" button, a modal dialog shows only a Name field.
   
   
2. We want to change this field to Title.
3. Stop the debug if not already done so.
4. Open HandleAddModal sub for ArticlesHandler.
5. Find the following lines:
   
   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")
6. 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")
7. The updated code will look like following:
   
   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")
8. We want to allow user to enter article Body using a bigger box.
9. Highlight the above 3 lines and press Ctrl + D key to duplicate the lines.
10. Change the variable from group1 to group2.
11. Update the values from "title" to "body".
12. Change the text input to Textarea type.
13. We can also set the rows to "3" to give the textarea more height.
14. Lastly we want to add a selection dropdown for the publishing Status.
15. We can copy code from above group1 again and make changes.
16. We add options with value "0" for "Draft" and value "1" for "Published".
17. Remember to use Bootstrap "form-select" CSS class to apply for the Dropdown.
18. Here is how the code looks like:
    
    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)
19. Run the debug and click the Add Articles button to see the updated modal.
    
    
20. Nice! We now have 3 fields showing on the modal dialog.