{"id":33117,"date":"2024-11-01T09:13:53","date_gmt":"2024-11-01T09:13:53","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=33117"},"modified":"2024-11-01T11:28:54","modified_gmt":"2024-11-01T11:28:54","slug":"spring-boot-backend-development-course-blog-screen-composition-example-creating-and-testing-html-view","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/33117\/","title":{"rendered":"Spring Boot Backend Development Course, Blog Screen Composition Example, Creating and Testing HTML View"},"content":{"rendered":"

<\/p>\n

\n
\n

Blog Layout Example, Creating and Testing HTML View<\/h2>\n

Author: [Name]<\/p>\n

Publication Date: [Date]<\/p>\n<\/header>\n

\n

1. Introduction<\/h3>\n

Spring Boot is a Java-based web framework that helps developers quickly build applications. In this course, we will cover how to develop the backend of a blog application using Spring Boot and create HTML views for testing.<\/p>\n

We will learn how to design RESTful APIs, manage data exchange with clients, and provide visual content to users through HTML views. Through this, we will gain an overall understanding of Spring Boot and the structure of web applications.<\/p>\n<\/section>\n

\n

2. Setting Up the Development Environment<\/h3>\n

The process of setting up a development environment using Spring Boot is as follows:<\/p>\n

    \n
  1. Install JDK: Spring Boot is implemented in Java, so you must install the Java Development Kit (JDK). JDK 11 or higher is recommended.<\/li>\n
  2. Set up an IDE: Install an Integrated Development Environment (IDE) such as IntelliJ IDEA or Eclipse.<\/li>\n
  3. Create a Spring Boot Project: Use Spring Initializr to create a new Spring Boot project.<\/li>\n<\/ol>\n<\/section>\n
    \n

    3. Creating a Spring Boot Project<\/h3>\n

    Here\u2019s how to create a project using Spring Initializr:<\/p>\n

      \n
    1. Go to Spring Initializr<\/a>.<\/li>\n
    2. Project: Choose (Maven Project or Gradle Project)<\/li>\n
    3. Language: Java<\/li>\n
    4. Spring Boot: Select the latest version<\/li>\n
    5. Fill in Project Metadata: Group, Artifact, Name, Description, etc.<\/li>\n
    6. Select Spring Web, Thymeleaf in Dependencies<\/li>\n
    7. Click the Generate button to download the project<\/li>\n
    8. Open the downloaded zip file in your IDE<\/li>\n<\/ol>\n<\/section>\n
      \n

      4. Adding Dependencies<\/h3>\n

      To manage the dependencies required for the application you are developing, you will need to modify the build.gradle or pom.xml file. Generally, libraries such as Spring, JPA, and Thymeleaf are added.<\/p>\n<\/section>\n

      \n

      5. Designing the RESTful API<\/h3>\n

      Design the RESTful API for the blog application. The goal is to design an API that provides basic CRUD (Create, Read, Update, Delete) functionalities.<\/p>\n

      5.1. Defining the Domain Model<\/h4>\n

      To manage the blog posts, we define a Post entity:<\/p>\n

      \n@Entity\npublic class Post {\n    @Id\n    @GeneratedValue(strategy = GenerationType.IDENTITY)\n    private Long id;\n\n    private String title;\n    private String content;\n    private LocalDateTime createdAt;\n\n    \/\/ Getter and Setter\n}\n<\/code><\/pre>\n
      5.2. Creating the Repository Interface<\/h4>\n
      Create a repository for interacting with the database through Spring Data JPA:<\/p>\n
      \n@Repository\npublic interface PostRepository extends JpaRepository {\n    List findAll();\n}\n<\/code><\/pre>\n
      5.3. Creating the Service Class<\/h4>\n
      Implement a service class to handle business logic:<\/p>\n
      \n@Service\npublic class PostService {\n    private final PostRepository postRepository;\n\n    public PostService(PostRepository postRepository) {\n        this.postRepository = postRepository;\n    }\n\n    public List getAllPosts() {\n        return postRepository.findAll();\n    }\n\n    public Post createPost(Post post) {\n        return postRepository.save(post);\n    }\n}\n<\/code><\/pre>\n
      5.4. Creating the Controller Class<\/h4>\n
      Implement a controller class to handle HTTP requests:<\/p>\n
      \n@RestController\n@RequestMapping(\"\/api\/posts\")\npublic class PostController {\n    private final PostService postService;\n\n    public PostController(PostService postService) {\n        this.postService = postService;\n    }\n\n    @GetMapping\n    public List getAllPosts() {\n        return postService.getAllPosts();\n    }\n\n    @PostMapping\n    public Post createPost(@RequestBody Post post) {\n        return postService.createPost(post);\n    }\n}\n<\/code><\/pre>\n<\/section>\n
      \n
      6. Creating HTML View<\/h3>\n
      Let’s look at how to create an HTML view using Thymeleaf in Spring Boot.<\/p>\n
      6.1. Creating HTML Template<\/h4>\n
      Create an HTML file in the src\/main\/resources\/templates folder. For example, create home.html:<\/p>\n
      \n\n\n\n\n    Blog Home<\/title>\n<\/head>\n<body>\n    <h1>Blog Post List<\/h1>\n    <div th:each=\"post : ${posts}\">\n        <h2 th:text=\"${post.title}\"><\/h2>\n        <p th:text=\"${post.content}\"><\/p>\n    <\/div>\n<\/body>\n<\/html>\n<\/code><\/pre>\n<h4>6.2. Adding Method to Return HTML View in Controller<\/h4>\n<p>Add a method in the controller to return the HTML view:<\/p>\n<pre><code>\n@GetMapping(\"\/home\")\npublic String getHomePage(Model model) {\n    List<Post> posts = postService.getAllPosts();\n    model.addAttribute(\"posts\", posts);\n    return \"home\";\n}\n<\/code><\/pre>\n<\/section>\n<section>\n<h3>7. Testing and Running<\/h3>\n<p>Run the application and check the HTTP requests in a web browser to ensure the features are functioning correctly.<\/p>\n<ol>\n<li>Run the application in the IDE to start the Spring Boot application.<\/li>\n<li>Access <code>http:\/\/localhost:8080\/home<\/code> in the browser to check the HTML view.<\/li>\n<li>Test the RESTful API using Postman.<\/li>\n<\/ol>\n<\/section>\n<section>\n<h3>8. Conclusion<\/h3>\n<p>In this course, we learned how to develop the backend of a blog application using Spring Boot. We gained basic usage of Spring Boot through designing RESTful APIs, creating HTML views, and testing them.<\/p>\n<p>Now you can develop your own various web applications based on Spring Boot. You will be able to implement more complex applications by leveraging the various features of Spring Boot.<\/p>\n<\/section>\n<footer>\n<h3>References<\/h3>\n<ul>\n<li><a href=\"https:\/\/spring.io\/projects\/spring-boot\">Spring Boot Official Documentation<\/a><\/li>\n<li><a href=\"https:\/\/www.thymeleaf.org\/\">Thymeleaf Official Documentation<\/a><\/li>\n<li><a href=\"https:\/\/www.baeldung.com\/learn-spring-boot\">Baeldung – Learn Spring Boot<\/a><\/li>\n<\/ul>\n<\/footer>\n<\/article>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Blog Layout Example, Creating and Testing HTML View Author: [Name] Publication Date: [Date] 1. Introduction Spring Boot is a Java-based web framework that helps developers quickly build applications. In this course, we will cover how to develop the backend of a blog application using Spring Boot and create HTML views for testing. We will learn … <a href=\"https:\/\/atmokpo.com\/w\/33117\/\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> “Spring Boot Backend Development Course, Blog Screen Composition Example, Creating and Testing HTML View”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[131],"tags":[],"class_list":["post-33117","post","type-post","status-publish","format-standard","hentry","category-spring-boot-backend-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Spring Boot Backend Development Course, Blog Screen Composition Example, Creating and Testing HTML View - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/atmokpo.com\/w\/33117\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Spring Boot Backend Development Course, Blog Screen Composition Example, Creating and Testing HTML View - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"Blog Layout Example, Creating and Testing HTML View Author: [Name] Publication Date: [Date] 1. Introduction Spring Boot is a Java-based web framework that helps developers quickly build applications. In this course, we will cover how to develop the backend of a blog application using Spring Boot and create HTML views for testing. We will learn … \ub354 \ubcf4\uae30 "Spring Boot Backend Development Course, Blog Screen Composition Example, Creating and Testing HTML View"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/33117\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:13:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:28:54+00:00\" \/>\n<meta name=\"author\" content=\"root\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:site\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:label1\" content=\"\uae00\uc4f4\uc774\" \/>\n\t<meta name=\"twitter:data1\" content=\"root\" \/>\n\t<meta name=\"twitter:label2\" content=\"\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04\" \/>\n\t<meta name=\"twitter:data2\" content=\"3\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/atmokpo.com\/w\/33117\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/33117\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"Spring Boot Backend Development Course, Blog Screen Composition Example, Creating and Testing HTML View\",\"datePublished\":\"2024-11-01T09:13:53+00:00\",\"dateModified\":\"2024-11-01T11:28:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/33117\/\"},\"wordCount\":541,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"Spring Boot backend development\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/33117\/\",\"url\":\"https:\/\/atmokpo.com\/w\/33117\/\",\"name\":\"Spring Boot Backend Development Course, Blog Screen Composition Example, Creating and Testing HTML View - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:13:53+00:00\",\"dateModified\":\"2024-11-01T11:28:54+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/33117\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/33117\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/33117\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Spring Boot Backend Development Course, Blog Screen Composition Example, Creating and Testing HTML View\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/atmokpo.com\/w\/#website\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/atmokpo.com\/w\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"contentUrl\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"width\":400,\"height\":400,\"caption\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\"},\"image\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/bebubo4\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\",\"name\":\"root\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"caption\":\"root\"},\"sameAs\":[\"http:\/\/atmokpo.com\/w\"],\"url\":\"https:\/\/atmokpo.com\/w\/author\/root\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Spring Boot Backend Development Course, Blog Screen Composition Example, Creating and Testing HTML View - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/atmokpo.com\/w\/33117\/","og_locale":"ko_KR","og_type":"article","og_title":"Spring Boot Backend Development Course, Blog Screen Composition Example, Creating and Testing HTML View - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"Blog Layout Example, Creating and Testing HTML View Author: [Name] Publication Date: [Date] 1. Introduction Spring Boot is a Java-based web framework that helps developers quickly build applications. In this course, we will cover how to develop the backend of a blog application using Spring Boot and create HTML views for testing. We will learn … \ub354 \ubcf4\uae30 \"Spring Boot Backend Development Course, Blog Screen Composition Example, Creating and Testing HTML View\"","og_url":"https:\/\/atmokpo.com\/w\/33117\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:13:53+00:00","article_modified_time":"2024-11-01T11:28:54+00:00","author":"root","twitter_card":"summary_large_image","twitter_creator":"@bebubo4","twitter_site":"@bebubo4","twitter_misc":{"\uae00\uc4f4\uc774":"root","\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04":"3\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/atmokpo.com\/w\/33117\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/33117\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"Spring Boot Backend Development Course, Blog Screen Composition Example, Creating and Testing HTML View","datePublished":"2024-11-01T09:13:53+00:00","dateModified":"2024-11-01T11:28:54+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/33117\/"},"wordCount":541,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["Spring Boot backend development"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/33117\/","url":"https:\/\/atmokpo.com\/w\/33117\/","name":"Spring Boot Backend Development Course, Blog Screen Composition Example, Creating and Testing HTML View - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:13:53+00:00","dateModified":"2024-11-01T11:28:54+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/33117\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/33117\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/33117\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"Spring Boot Backend Development Course, Blog Screen Composition Example, Creating and Testing HTML View"}]},{"@type":"WebSite","@id":"https:\/\/atmokpo.com\/w\/#website","url":"https:\/\/atmokpo.com\/w\/","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","description":"","publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/atmokpo.com\/w\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ko-KR"},{"@type":"Organization","@id":"https:\/\/atmokpo.com\/w\/#organization","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","url":"https:\/\/atmokpo.com\/w\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/","url":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","contentUrl":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","width":400,"height":400,"caption":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8"},"image":{"@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/bebubo4"]},{"@type":"Person","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7","name":"root","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","caption":"root"},"sameAs":["http:\/\/atmokpo.com\/w"],"url":"https:\/\/atmokpo.com\/w\/author\/root\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/33117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/comments?post=33117"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/33117\/revisions"}],"predecessor-version":[{"id":33118,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/33117\/revisions\/33118"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=33117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=33117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=33117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}