Web-based survey platforms offer a variety of features and functional requirements that can help you create effective surveys. Here are some of the most common features available in web-based survey tools:<\/p>\n
- \n
- Question Types: Web-based survey platforms offer a variety of question types, such as multiple-choice, open-ended, rating scales, and more.<\/li>\n
- Skip Logic: Skip logic allows you to customize the flow of your survey based on the respondent\u00e2\u0080\u0099s answers. It enables you to skip irrelevant questions and show only those relevant to the respondent.<\/li>\n
- Real-time Analytics: Web-based survey platforms provide real-time analytics that allows you to track responses as they come in and analyze data in real-time.<\/li>\n
- Mobile Compatibility: Web-based surveys can be optimized for mobile devices, making it easy for respondents to complete surveys on their smartphones or tablets.<\/li>\n
- Integration with Other Tools: Web-based survey platforms can integrate with other tools such as email marketing software, CRM systems, etc.<\/li>\n<\/ul>\n
What We’re Building<\/h2>\n
In this tutorial, we’ll be creating a web-based survey platform that leverages the power of Spring Boot and GridDB. For now, we will start with implementing open-ended questions, and the respondent can submit multiple responses. Finally, there will be a report showing the answers and the percentage of the answers per question.<\/p>\n
Requirements<\/h3>\n
Based on the previous overview, we will have the following functional requirements:<\/p>\n
- \n
- Display a list of surveys, responses, and answers<\/li>\n
- Record answers<\/li>\n
- Visualize answers in table and chart<\/li>\n<\/ol>\n
The out of scope: * User management (register, login, etc) * Survey management (create, edit, delete)<\/p>\n
\n
In this tutorial we will seed our application with survey data from CSV files.<\/p>\n<\/blockquote>\n
Where should we store the data?<\/h3>\n
The choice between SQL and NoSQL databases depends on specific requirements. However, here are some reasons why NoSQL databases are preferred over SQL databases for this system:<\/p>\n
- \n
- Horizontal scalability: NoSQL databases typically provide easy horizontal scalability.<\/li>\n
- Query Structure: In this case, there is no need for complex relational operations such as table joins.<\/li>\n
- NoSQL databases are typically built with a distributed and decentralized architecture, enabling easy scaling by adding more nodes to the cluster.<\/li>\n<\/ol>\n
Class diagram for online survey<\/h3>\n
Next, let’s tackle database design and high-level architecture. The class diagram for the survey platform is shown below.<\/p>\n
![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2024\/01\/survey-erd.png\")
<\/a><\/p>\nDatabase design for online survey<\/h3>\n
From the above class diagram, we will create a database schema with the following attributes:<\/p>\n
- \n
- \n
Survey<\/p>\n
This is the starting point for our system. This entity contains core information about each survey generated in the system. It has the following attributes:<\/p>\n
- \n
String id<\/code>: System generated unique identifier. It is the primary key.<\/li>\nString title<\/code>: The overview of the survey<\/li>\nString description<\/code>: The description for the purpose of the survey<\/li>\nboolean isActive<\/code>: A boolean value that indicates whether the survey is still valid<\/li>\nDate createdAt<\/code>: System-generated timestamp of survey creation<\/li>\n<\/ul>\n<\/li>\n- \n
Question<\/p>\n
This entity contains the questions available for a survey. It has the following attributes:<\/p>\n
- \n
String id<\/code>: System generated unique identifier. It is the primary key.<\/li>\nString surveyId<\/code>: The ID to identify the parent survey<\/li>\nString questionText<\/code>: The text of the question<\/li>\nInteger position<\/code>: The order of the question among the questions in the survey<\/li>\n<\/ul>\n<\/li>\n- \n
SurveyResponse<\/p>\n
This entity contains information about the response and the moment of start and finish responding to a survey. It has the following attributes:<\/p>\n
- \n
String id<\/code>: System generated unique identifier. It is the primary key.<\/li>\nString surveyId<\/code>: The ID to identify the parent survey<\/li>\nDate startedAt<\/code>: The date and time when the respondent starts responding to the survey<\/li>\nDate completedAt<\/code>: The date and time when the respondent finishes responding to the survey.<\/li>\n<\/ul>\n<\/li>\n- \n
Answer<\/p>\n
This entity contains the respondent’s answer for each question in the survey. It has the following attributes:<\/p>\n
- \n
String id<\/code>: System generated unique identifier. It is the primary key.<\/li>\nString surveyResponseId<\/code>: The ID to identify the parent survey’s response<\/li>\nString answer<\/code>: The date and time when the respondent starts responding to the survey<\/li>\nDate createdAt<\/code>: The date and time when the respondent finishes responding to the survey.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nHow to Set up the Project<\/h2>\n
What you can do with Spring Boot<\/h3>\n
Spring boot offers a fast way to build applications. Spring Boot does not generate code to make edits to your files. Instead, when you start your application, Spring Boot dynamically wires up beans and settings and applies them to your application context. With Spring Boot, we can focus more on the business features and less on the infrastructure.<\/p>\n
What you need to install<\/h3>\n
- \n
- Java 17 or later<\/a>, Maven 3.5+<\/a>, and your favorite text editor (Intellij IDEA<\/a>, or VSCode<\/a>)<\/li>\n<\/ul>\n
Create a Spring Boot Project<\/h3>\n
Navigate to start.spring.io<\/a>. This service pulls in all the dependencies you need for an application and does most of the setup. Follow the screenshot below then click generate, it will generate the Spring Boot project and download it as a zip.<\/p>\n
![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2024\/01\/springboot-initializr.png\")
<\/a><\/p>\nNow unzip this project and import it into any IDE.
\nNext, we need to add additional library needed in this project as follows:<\/p>\n\n<dependencies>\n<!-- Include log4j2 -->\n<dependency>\n <groupId>org.springframework.boot<\/groupId>\n <artifactId>spring-boot-starter-log4j2<\/artifactId>\n<\/dependency>\n \n<dependency>\n <groupId>com.github.griddb<\/groupId>\n <artifactId>gridstore<\/artifactId>\n <version>5.1.0<\/version>\n<\/dependency>\n\n<dependency>\n <groupId>com.github.f4b6a3<\/groupId>\n <artifactId>tsid-creator<\/artifactId>\n <version>5.2.5<\/version>\n<\/dependency>\n<dependency>\n <groupId>de.siegmar<\/groupId>\n <artifactId>fastcsv<\/artifactId>\n <version>2.2.2<\/version>\n<\/dependency>\n\n<\/dependencies><\/code><\/pre>\n<\/div>\nCoding<\/h3>\n
Data access with GridDB<\/h4>\n
First, we create Java POJO classes that represent the underlying table or container in GridDB. We annotate a class with Lombok @Data, which automatically generates getters for all fields, a useful toString method, and hashCode and equals implementations that check all non-transient fields. Also generate setters for all non-final fields, as well as a constructor.<\/p>\n
\n@Data\npublic class Survey {\n @RowKey String id;\n String title;\n String description;\n boolean isActive;\n Date createdAt;\n}\n\n@Data\npublic class SurveyResponse {\n @RowKey String id;\n String respondentId;\n String surveyId;\n Date startedAt;\n Date completedAt;\n}\n\n@Data\npublic class Answer {\n @RowKey String id;\n String surveyResponseId;\n String questionId;\n Date createdAt;\n String answer;\n}\n\n@Data\npublic class Question {\n @RowKey String id;\n String surveyId;\n String questionText;\n Integer position;\n}\n\n@Data\npublic class Respondent {\n @RowKey String id;\n}<\/code><\/pre>\n<\/div>\nNext, we create the
GridDBConfig<\/code> class as a central configuration for database operation. The class will do the following: * Read environment variables for connecting to the GridDB database * Create a GridStore class for managing database connection to the GridDB instance * Create GridDB Collection’s container (Table) to manage a set of rows. The container is a rough equivalent of the table in a relational database. * On creating\/updating the Collection we specify the name and object corresponding to the column layout of the collection. Also for each collection, we add an index for a column that is frequently searched and used in the condition of the WHERE section of TQL.<\/p>\n\n@Configuration\npublic class GridDBConfig {\n\n @Value(\"${GRIDDB_NOTIFICATION_MEMBER}\")\n private String notificationMember;\n\n @Value(\"${GRIDDB_CLUSTER_NAME}\")\n private String clusterName;\n\n @Value(\"${GRIDDB_USER}\")\n private String user;\n\n @Value(\"${GRIDDB_PASSWORD}\")\n private String password;\n\n @Bean\n public GridStore gridStore() throws GSException {\n \/\/ Acquiring a GridStore instance\n Properties properties = new Properties();\n properties.setProperty(\"notificationMember\", notificationMember);\n properties.setProperty(\"clusterName\", clusterName);\n properties.setProperty(\"user\", user);\n properties.setProperty(\"password\", password);\n GridStore store = GridStoreFactory.getInstance().getGridStore(properties);\n return store;\n }\n\n @Bean\n public Collection<String, Survey> surveyCollection(GridStore gridStore) throws GSException {\n Collection<String, Survey> collection = gridStore.putCollection(\"surveys\", Survey.class);\n return collection;\n }\n\n @Bean\n public Collection<String, Respondent> respondentCollection(GridStore gridStore)\n throws GSException {\n Collection<String, Respondent> collection =\n gridStore.putCollection(\"respondents\", Respondent.class);\n return collection;\n }\n\n @Bean\n public Collection<String, SurveyResponse> surveyResponseCollection(GridStore gridStore)\n throws GSException {\n Collection<String, SurveyResponse> collection =\n gridStore.putCollection(\"surveyResponses\", SurveyResponse.class);\n collection.createIndex(\"surveyId\");\n collection.createIndex(\"respondentId\");\n return collection;\n }\n\n @Bean\n public Collection<String, Question> questionCollection(GridStore gridStore) throws GSException {\n Collection<String, Question> collection = gridStore.putCollection(\"questions\", Question.class);\n collection.createIndex(\"surveyId\");\n return collection;\n }\n\n @Bean\n public Collection<String, Answer> answerCollection(GridStore gridStore) throws GSException {\n Collection<String, Answer> urlCollection = gridStore.putCollection(\"answers\", Answer.class);\n urlCollection.createIndex(\"surveyResponseId\");\n return urlCollection;\n }\n}<\/code><\/pre>\n<\/div>\nService class<\/h4>\n
Next, we create a service class with @Service annotation for handling business logic and convert the Entity class into DTO. For example, the
SurveyService.java<\/code> is responsible for finding, and creating survey data in GridDB.<\/p>\n- \n
create<\/code>: Creating a new survey row. This method receives data from a web request (SurveyWebController<\/code>) and then assigns the value to a new Survey entity. For saving the entity into the GridDB database, we call theput<\/code> method from thesurveyCollection<\/code> bean created before.<\/li>\n<\/ul>\n\npublic String create(SurveyCreateRequest request) {\n Survey survey = new Survey();\n survey.setId(KeyGenerator.next(\"survey\"));\n survey.setActive(request.isActive());\n survey.setTitle(request.getTitle());\n survey.setDescription(request.getDescription());\n survey.setCreatedAt(new Date());\n try {\n log.info(\"put: {}\", survey);\n surveyCollection.put(survey.getId(), survey);\n } catch (GSException e) {\n e.printStackTrace();\n }\n return survey.getId();\n }<\/code><\/pre>\n<\/div>\n- \n
getSurvey<\/code>: For finding rows from GridDB, first we build TQL (a query language used by GridDB) with parametersurveyId<\/code>, then create Query object to execute the TQLsurveyCollection.query(tql)<\/code>. To get the set of rows we call thefetch()<\/code> method.<\/li>\n<\/ul>\n\npublic SurveyDto getSurvey(String surveyId) {\n String tql = String.format(\"select * from surveys where id='%s'\", surveyId);\n List<surveydto> surveyDtos = query(tql, true);\n if (surveyDtos == null || surveyDtos.size() == 0) {\n throw new ResponseStatusException(NOT_FOUND, \"Not found\");\n }\n return surveyDtos.get(0);\n }\n\n public List<\/surveydto><surveydto> getSurveys() {\n String tql = \"select * from surveys limit 50\";\n return query(tql, false);\n }\n\n private List<\/surveydto><surveydto> query(String tql, boolean includeQuestion) {\n List<\/surveydto><surveydto> result = new ArrayList<>();\n Query<survey> query;\n try {\n query = surveyCollection.query(tql);\n RowSet<\/survey><survey> rs = query.fetch();\n while (rs.hasNext()) {\n Survey model = rs.next();\n List<questiondto> questions = new ArrayList<>();\n if (includeQuestion) questions = questionService.getQuestions(model.getId());\n result.add(\n SurveyDto.builder()\n .id(model.getId())\n .createdAt(model.getCreatedAt())\n .description(model.getDescription())\n .title(model.getTitle())\n .isActive(model.isActive())\n .questions(questions)\n .build());\n }\n } catch (GSException e) {\n e.printStackTrace();\n }\n return result;\n }\n<\/questiondto><\/survey><\/surveydto><\/code><\/pre>\n<\/div>\nServing Web Content with Spring MVC<\/h3>\n
Spring’s web MVC framework is, like many other web MVC frameworks, request-driven, designed around a central Servlet that dispatches requests to controllers and offers other functionality that facilitates the development of web applications. By using Spring MVC Framework we got the following advantages: * The Spring MVC separates each role, where the model object, controller, command object, view resolver, etc. can be fulfilled by a specialized object. * It uses a lightweight servlet container to develop and deploy your application. * It provides a robust configuration for both framework and application classes that includes easy referencing across contexts, such as from web controllers to business objects. * It provides the specific annotations that easily redirect the page.<\/p>\n
In this tutorial, we will follow a standard MVC architecture. We will have a controller (
SurveyWebController<\/code> class), views (surveys.html<\/code> Thymeleaf template), and a model (a Java map object) for passing data into the view. Every method of the controller is mapped to a URI.<\/p>\nSurveys page<\/h4>\n
In the following example,
SurveyWebController<\/code>, methodlistSurveys<\/code> handles GET requests for\/surveys<\/code> by returning the name of a View (in this case,surveys<\/code>), also adding attributesurveys<\/code> toModel<\/code> via itsaddAttribute<\/code> method. To provide the attribute value (List of Survey) we callsurveyService.getSurveys()<\/code> method.<\/p>\n\n@Controller\npublic class SurveyWebController {\n \n @GetMapping(\"\/surveys\")\n public String listSurveys(Model model) {\n model.addAttribute(\"surveys\", surveyService.getSurveys());\n return \"surveys\";\n }\n}\n<\/code><\/pre>\n<\/div>\nAfter creating the controller class, we need to define the template for the views to be generated. We are using Thymeleaf, a modern server-side Java template engine for both web and standalone environments. The HTML templates written in Thymeleaf still look and work like HTML. In the following example,
surveys.html<\/code>, the model attributes can be accessed with the following syntax:${attributeName}<\/code>, where the attributeName, in this case, issurveys<\/code>. We define an HTML table for displaying a list of surveys and useth:each<\/code> tag attribute to iterate over a collection of surveys, andth:text<\/code> tag for displaying the value.<\/p>\n\n<div class=\"table-responsive\">\n <table class=\"table table-bordered\" id=\"dataTableSurvey\">\n <thead>\n <tr>\n <th scope=\"col\">#<\/th>\n <th scope=\"col\">Title<\/th>\n <th scope=\"col\">Description<\/th>\n <th scope=\"col\">Is Active<\/th>\n <th scope=\"col\">Created Date<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr th_each=\"survey : ${surveys}\">\n <td>\n <a class=\"nav-link\" th_href=\"@{\/responses\/{surveyId}(surveyId=${survey.id})}\">Answer<\/a>\n <\/td>\n <td>\n <a class=\"nav-link\" th_href=\"@{\/surveys\/{surveyId}\/responses(surveyId=${survey.id})}\" th_text=\"${survey.title}\"><\/a>\n <\/td>\n <td th_text=\"${survey.description}\"><\/td>\n <td th_text=\"${survey.isActive}? 'Yups': 'No'\"><\/td>\n <td th_text=\"${survey.createdAt}\"><\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n<\/div><\/code><\/pre>\n<\/div>\n- \n
- For answering the survey we provide an answer link in the table.<\/li>\n
- For viewing the response list we can navigate through the survey title. From the response list, we can navigate to the answer.<\/li>\n<\/ul>\n
Here is a preview of the survey list page.<\/p>\n
![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2024\/01\/1_survey_list.png\")
<\/a><\/p>\nChart page<\/h4>\n
Here is a preview of the chart page:<\/p>\n
- \n