The Construction of Online Teaching System of Computer

Application Under the Flipped Classroom Mode

Yurong Hu

Linyi Vocational College, Linyi, Shandong, China

Keywords: Flipped Classroom, SSH, Computer Teaching, Application System Construction.

Abstract: In order to improve the traditional education mode of computer teaching, which takes teachers as the main

body, and strengthen students' innovation and learning autonomy, this paper studies the online teaching

system of computer application under the flipped classroom mode. The system is an application of J2EE

architecture, with Struts2 as the front-end development software, spring as the functional logic design

software and hibernate as the ORM framework of the system. The server development language is Java, and

the front page design language is css+HTML+JavaScript. This paper makes an in-depth analysis and

introduction of the design of computer application online teaching system from three aspects: demand

analysis, technical outline and function realization. The ports are designed according to the needs of

students and teachers. Practice shows that the construction of this system can stimulate students' learning

autonomy in computer science, improve students' learning interest, improve teachers' teaching quality, and

play a positive role in promoting the teaching effect of computer science.

https://orcid.org/0000-0002-6614-4862

1 INTRODUCTION

With the rapid development of Internet technology,

China has paid more and more attention to the

education of Internet-related majors, and computer

application teaching has become an indispensable

key course in all major campus courses. However,

the characteristics of computer application courses

focus on the combination of theory and practice.

Under the traditional mode, they are all conducted

separately, with some courses of pure theory and

others of pure practice. Often, the two courses tend

to form class hours competition, resulting in poor

integration effect of the two parts and insufficient

effectiveness of the whole course. In addition, in the

traditional computer teaching courses, from

grammar to algorithm and even to the programming

stage, students follow the teacher's unilateral ideas to

conduct research and study, ignoring the most

important innovative features of computer science.

Moreover, because most students study in the same

classroom, it is difficult for teachers to teach

students in accordance with their aptitude and

maximize their individual abilities. The

characteristics of computer science force us to

improve the current computer teaching mode.

Flipped classroom is a teaching mode with online

preview, offline practice, online consolidation and

homework, and online communication as the

educational process. By adopting the mode of

flipped classroom with students as the center,

students' autonomous learning can be realized, and

teachers' role can be brought into play to guide and

assist, so that students can spontaneously construct

their understanding of computer application design

discipline knowledge. (Sun, 2021)

Through the analysis of the above contents, this

paper thinks that we should deeply study the flipped

classroom teaching model, and design an online

learning application system for computer application

education according to the characteristics of flipped

classroom teaching model. This system is a network

teaching platform that provides corresponding

technical knowledge for reversing the classroom

teaching mode. This system uses javaweb

technology to develop major functional modules,

including personal information management,

teaching resource database, online courses,

homework and interactive question and answer. The

system also has the functions of user login and

Hu, Y.

The Construction of Online Teaching System of Computer Application Under the Flipped Classroom Mode.

DOI: 10.5220/0011908300003613

In Proceedings of the 2nd International Conference on New Media Development and Modernized Education (NMDME 2022), pages 167-172

ISBN: 978-989-758-630-9

 2023 by SCITEPRESS – Science and Technology Publications, Lda. Under CC license (CC BY-NC-ND 4.0)

167

registration, learning state response, and homework

evaluation. This system can better support online

computer application teaching course learning based

on flip classroom, and is suitable for basic education

in computer application discipline.

2 TECHNICAL SUMMARY

2.1 Spring Framework

The inventor of Spring is Rod Johnson. Spring is a

declaration cycle management container for bean

components in J2EE, and it is also an open source

J2EE lightweight application development

framework, providing IOC, AOP, MVC and many

other important functional components in developing

web applications. Spring can reduce the complexity

of the problems encountered in the development of

enterprise applications. The important reason why

Spring framework is widely used is that it can design

the layered architecture of web application system

development, and allow developers to select the

required individual components to use when using

this framework. At the same time, Spring also

provides developers with an integrated framework

for J2EE program development. Spring consists of

seven modules, which constitute the core of Spring

framework. Each module can be used independently

or jointly. (Chen, 2022)

As the core container of Spring, Spring core has

developed the core component BeanFactory to

facilitate the comprehensive management of Java

bean in J2EE. BeanFactory can realize the assembly

of components by separating the configuration of

application programs from the code of development

programs. This function especially uses IOC control

inversion technology. Spring context is a

configuration file library, which can save all

configuration file information and reduce the

programming complexity of configuration file call

information. Spring AOP is responsible for the

security management services of log and transaction

in application objects developed by Spring. Spring

DAO provides an interface for applications to

quickly access the server database, which reduces

the amount of code writing tasks for developers to

build the database. Spring ORM provides ORM

object relationship management tools and inherits

several ORM frameworks, including JDO, Hibernate

and iBatis SQL Map. Springweb provides context

checking function for application development.

2.2 Springmvc Pattern

Many enterprise-level application development is

based on MVC pattern, and Spring MVC is a tool

specially designed for MVC architecture pattern. It

can decouple and divide the modules in the WEB

application according to MVC, which can

effectively improve the efficiency of system

development and reduce the complexity of

application system expansion and maintenance. The

working principle of Spring mvc is shown in Figure

1. (Shen, 2020)

Send HTTP request from client to distributor.

The distributor prime minister sends this request to

the processor map, and the processor map looks up

the responding controller according to the URL and

returns it to the distributor. Then the controller

processes the request from the client by calling the

data model algorithm corresponding to the business

logic and functions, and sends the generated model

view to the view parser and model layer through the

distributor. The distributor injects the model results

into the view and then returns them to the client to

complete, so as to realize various functions. In the

SpringMVC request processing, the distributor is in

the core control position.

Figure 1. Schematic diagram of the Spring operation

NMDME 2022 - The International Conference on New Media Development and Modernized Education

168

2.3 Hibernate

Hibernate is an open source lightweight ORM

framework, which is responsible for object

relationship mapping in the DAO layer of the overall

application architecture. — JDBC, the method of

JAVA program operating database, is encapsulated.

In this way, developers only need to simply

configure hibernate when configuring the operation

functions of adding, deleting and checking the

database, which further improves the development

efficiency of the system. Hibernate has five core

interfaces. Hibernate's startup method reads the

Hibernate Configuration file through the

configuration interface, and in this process, the

SessionFactory object will be generated. Hibernate

initialization is the responsibility of sessionFactory

interface. The application needs to implement the

session interface when operating data objects, such

as load () loading method, save () saving method,

update () updating method and delete () deleting

method, which is the core functional interface of

hibernate. Query interface can implement a series of

queries of persistent objects. Transaction is

responsible for managing all transactions and

encapsulating the faulty operation of the underlying

code in time. (Huang, 2019)

2.4 Development Environment

In this part, the related technologies developed and

used in the online teaching platform of computer

application are briefly introduced. This system is

developed based on the framework of Structs

2.3+Spring Framework 5.3.2+Hibernate 5.3. The

development environment is myeclipse9.0, the

relational database is MySQL 8.0.28, and Navicat

for MySQL is used to visualize the database. Choose

Apache Tomcat 9.0 for server deployment.

First, open myeclipse and create a new Web

Project project. Select jdk version 1.8, Tomcat

version tomcat9, next–> next check the web.xml

configuration file, and finish. Then you need to

import the Jar package, import all the Jar packages

into the lib folder, and then open the web.xml to

configure Spring and Struts. Then, by configuring

the application-Context.xml file, the transaction

processor and configuration file of Hibernate are

built. The last step is to configure JDBC as MySQL-

connector-Java-bin.jar. At this point, the complete

SSH framework has been built. The choice of

system architecture and key implementation

technologies is very important. According to the

analysis of relevant technologies in the current era,

the author believes that it is technically feasible to

build an online teaching system for computer

applications based on the above technologies. (Gao,

2018)

3 REQUIREMENT ANALYSIS

3.1 Functional Requirements

In the flipped classroom mode, the online teaching

system of computer application sets up two kinds of

user ports: student client and teacher client. The

function of the application system is divided into

five main functional modules, including personal

information management, teaching resource

database, online courses, homework after class and

interactive question and answer. For the student

client, after logging in to the system, students can

choose carefully needed courses from the online

course library according to their needs, and add them

to their personal collections for study. The teaching

resource library can choose digital teaching

resources such as text, code and various

experimental packages, from which students can

choose to download. When students have finished

their studies, they can click to enter the homework

module, check the homework assigned by teachers

in each course and complete the submission within

the specified time limit. When students encounter

problems in their study, they can ask for help from

teachers through the interactive question-answering

module in the system. Teachers need to log in their

employee number and corresponding password

when logging in. Click on the teaching resource

database, and teachers also have the function of

selecting courses and adding new courses to the

online course database. They can add, delete, modify

and query all kinds of resources in the online courses

and teaching resource database. Teachers can check

the completion of students' after-school homework

through the after-school homework module, and

make corrections and evaluation.

3.2 Overall Design

The computer online teaching system is an

enterprise application, so it is developed with J2EE

mode and B/S architecture. The overall design

diagram of the system is shown in Figure 2. The

system adopts hierarchical architecture, which is

divided into three parts: view display layer, business

logic layer and data persistence layer. The view

display layer includes javabean, action and

The Construction of Online Teaching System of Computer Application Under the Flipped Classroom Mode

169

actionservlet in J22E program. It is developed by

Struts2 tool, and the development language is

CSS3+HTML5+JavaScript. Teachers and students

send out various operation requests by accessing the

function modules of the view display layer through

their respective clients. After the client sends the

request, it transmits the instruction to the business

logic layer. The business logic layer is developed

and designed by spring. The business logic layer is

responsible for receiving the instructions from the

client to perform all kinds of logical processing on

the instructions. The business logic layer calls the

data through the data persistence layer, returns the

results to the client after completing the relevant

operation instructions, and displays the operation

results in the view display layer. All kinds of data

processing functions in the system need the help of

data persistence layer, which is processed by

hibernate ORM framework. Data persistence layer

includes object-oriented idea, data query engine and

DAO layer encapsulating JDBC. The system can

only connect to MySQL database through hibernate.

(Zhang, 2017)

Figure 2: System overall framework diagram

4 FUNCTIONAL

IMPLEMENTATION

4.1 Student Client

The curriculum learning module is designed for

students to learn the course content and practice

online. First of all, student users need to log in to the

system to learn the relevant knowledge of the course

in advance according to the course content of the

teacher's online class, so as to enhance the learning

efficiency of the offline class. Secondly, after class,

students can choose the categories of computer

courses according to their own needs, such as java

courses, C++ courses and Python courses according

to language. It can also be selected according to

technology, such as database technology, front-end

page development technology, data structure theory

and other courses. Online courses will display a list

of courses, click on the course name, and jump to

the links of the introduction and chapters. Students

can collect courses and study according to the class

hours. (Xin, 2021) The video playback function

provides pause and playback functions. Students can

learn the knowledge points that are difficult to

understand repeatedly to achieve better learning

results. This interactive question answering system

is different from the offline classroom question

answering. It adopts one-to-one communication

mode, with students as the main body and teachers

asking questions individually. Because many

students have difficulty expressing their views in

public. After the teacher replies, students can check

the reply. The code of relevant functional modules

of interactive question answering is shown in Figure

3. (Zou, 2021)

NMDME 2022 - The International Conference on New Media Development and Modernized Education

170

Figure 3: Function realization of the interactive Q& A module

4.2 Teacher Client

The curriculum module is an important part of the

flipped classroom teaching model, and it is also the

focus of the design and development of this system.

Click on the online course function module, and

teachers have the function of selecting courses and

adding new courses to the online course database,

and can add, delete, modify and query all kinds of

resources in online courses and teaching resource

database. Teachers need to upload video files for

each course chapter by chapter to help students

watch and learn, and upload the corresponding

homework questions in each chapter's after-school

exercise system. These files need to be uploaded into

the system by teachers. The system will upload these

files to the network server and distribute them to the

student client according to the request instructions of

the student client. The code for managing various

files of online courses is shown in Figure 4. (Huang,

2022)

The Construction of Online Teaching System of Computer Application Under the Flipped Classroom Mode

171

Figure 4: Implementation of teaching course management function code

5 CONCLUSIONS

The computer application teaching system based on

the flipped classroom designed in this paper is a

flexible and powerful application program. The

system is easy to operate and suitable for students

and teachers to use in computer learning. In the

research of this paper, due to the limited energy and

ability, there are still many deficiencies in this

system that need to be improved. It needs to be

further improved in the future maintenance process

to enrich the computer operation simulation related

functions of the system. While improving the

operating efficiency of the system, the stability and

security of the system also need to be further

improved and optimized.

REFERENCES

Chen Mingrui. (2022) Application Analysis of Modern

Educational Technology in Computer Teaching in

Colleges and Universities.Digital Technology and

Application.06.

Gao Yiping. (2018) Research on the Flipped Classroom

Teaching Mode Based on the Introduction and Use of

High-quality Online Open Courses.Information

Literacy.09.

Huang Jilin. (2022) Research on Computer Teaching

Reform in Higher Vocational Colleges under the

Background of Informatization.Heilongjiang

Science.07.

Huang Yubin. (2019) Research on Strategies for

Improving Teaching Effect of Flipped Classroom in

Colleges and Universities. Journal of Higher

Education.10.

Shen Zilei. (2020) Design and Implementation of

Computer Course Assisted Instruction System Based

on WEB.SP.05.

Sun Bowen, Li Chengyan, Lin Kezheng, Jia Lijuan, Ren

Xianghua. (2021) Teaching Practice in Epidemic

Situation and Reflection on Computer Teaching in

Post-epidemic Era.Computer Education.08.

Xin Jianjun. (2021) Design and Implementation of College

Computer Online Teaching System Based on

B/S.China Computer&Communication.05.

Zhang Yushuang. (2017) Design and Implementation of

the Teaching Support and Management System of

Flipped Classroom Based on MOOC+SPOC.Harbin

Institute of Technology.06.

Zou Qingchun. (2021) Research on Computer Practice

Teaching System Based on Cloud Platform.

Software.12.

NMDME 2022 - The International Conference on New Media Development and Modernized Education

172