- Version
- Description
- Technology stack
- Architecture
- Flow diagram
- Sequence diagram
- Database design
- API producer
- API consumer
- Project structure
- Development steps
- Environment properties
- Running application
- Tools
- Author
| Date | Version | Author | Changelog |
|---|---|---|---|
| 2022-02-07 | 1.0.0 | Murti Daryandono | Initial release |
Web example basic (project : example-web-basic) is a sample project that intended to help Java developers create basic web application using Java based technologies based on MVC (Model View Controller) concept. In this sample project, we will create to-do application with some feature will be provided, such as :
- Page templating
- Read environment properties
- Service class based on business logic to-do list
- Controller class to handle request and response (show, add, remove & update to-do list)
- Create UI for to-do list
- Test application
- Blade : Java web framework (here are blade link & baeldung link)
- Gson : JSON manipulation tools from Google (Gson link)
- Jetbrick : Java page templating (Jetbrick link)
- SL4J : Java logging framework
- Project Lombok : Java getter & setter auto generation (Project Lombok link)
- JUnit : Java unit test framework
- Htmx : HTML framework (Htmx link)
- Bulma : CSS framework (Bulma link)
- Font Awesome : Font framework (Font Awesome link)
graph TD
A[Web browser] --- |Request/Response| B[Blade - Web framework]
B --- |Server| C[Netty]
B --- |Template| D[Jetbrick]
B --- |AJAX| H
D --- |Page| H
C --- |JVM| F[Java]
B --- |Logging| G[SL4J]
subgraph Presentation layer
H[HTML] --- I[Htmx]
H --- J[Bulma]
H --- K[Font Awesome]
end
TBD
-
Index page
- Path (GET) : /todo
- Diagram
Loading
sequenceDiagram participant Requestor participant Controller participant Service participant Page Requestor ->> Controller : HTTP GET request "/todo" Controller ->> Service : Process request Service ->> Page : Load index.html Page -->> Service : Return index.html Service -->> Controller : Process response Controller -->> Requestor : Render page
- Response
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>To-do list application</title> <link href="/static/css/bulma.min.css" rel="stylesheet"/> <script src="/static/js/htmx.min.js"></script> </head> <body> <div> <table> <thead> <tr> ... </tr> </thead> <tbody> <tr> <!-- list of to-do here --> </tr> </tbody> </table> </div> </body>
-
Add to-do item on the list
- Path (POST) : /todo
- Query param : todoItem
- Diagram
Loading
sequenceDiagram participant Requestor participant Controller participant Service Requestor ->> Controller : HTTP POST request "/todo" Controller ->> Service : Add to-do list (query param "todoItem") Service -->> Controller : Return to-do list ("<tr>...</tr>") Controller -->> Requestor : Render page - Response
<tr> <!-- to-do list --> </tr>
-
Remove to-do item on the list
- Path (DELETE) : /todo
- Query param : todoId
- Diagram
Loading
sequenceDiagram participant Requestor participant Controller participant Service Requestor ->> Controller : HTTP DELETE request "/todo" Controller ->> Service : Remove to-do list (query param "todoId") Service -->> Controller : Return to-do list ("<tr>...</tr>") Controller -->> Requestor : Render page - Response
<tr> <!-- to-do list --> </tr>
-
Update to-do item on the list
- Path (PUT) : /todo
- Query param : todoId, todoItem
- Diagram
Loading
sequenceDiagram participant Requestor participant Controller participant Service Requestor ->> Controller : HTTP PATCH request "/todo" Controller ->> Service : Update to-do list (query param "todoId, todoItem") Service -->> Controller : Return to-do list ("<tr>...</tr>") Controller -->> Requestor : Render page - Response
<tr> <!-- to-do list --> </tr>
N/A
N/A
N/A
TBD
TBD
| Environment | File properties |
|---|---|
| Development | application.properties |
| Staging | application-stg.properties |
| Production | application-prd.properties |
Contents of environment properties are :
# server configuration
server.port=[port value where your application will run]
# application configuration
mvc.statics=[path to static directory]
mvc.statics.show-list=[true if you want to be show via url]- Run in development environment
java -jar target/web-example-basic.jar
- Run in staging environment
java -jar target/web-example-basic.jar --app.env=stg
- Run in production environment
java -jar target/web-example-basic.jar --app.env=prd
- Java 8 as main language
- Maven as dependency manager
- IntelliJ as Java IDE (Integrated Development Environemnt)
- Mermaid as markdown plugin for diagram
name : Murti Daryandono
email : murti.daryandono@gmail.com
twitter : murti_d
blog : https://daryandono.id