22

CHAPTER III
TECHNICAL BACKGROUND
This chapter describes the tools used in the development of the DenC#: Web Based
Application for Learning and Visualizing C# programming such as user software,
hardware, and communication interfaces. This chapter determines what type of
application or requirements are needed to be able to develop the system. Figures are
used to represent the sample graphical user interface (GUI) of the website.
USER INTERFACE
The user interface developed the system serves as visual that enables the user
to interact with the system. To make appealing and user friendly.

Figure 2.0: Home Page

This figure shows the home page of the system that will appear once you open
the website.

23

Figure 3.0: Register Page

This figure shows the form of the user that will register to the website that
contains different fields that needs to be answered.

24

Figure 4.0: Users Page

This figure shows the content of the user page which can be viewed if they are
already registered in the website and the user can access the lessons and take quizzes
and exams and to try the code simulator for some sample program of C#.

25

Figure 5.0: Lesson Page

This figure shows the basic lessons of c#. It contains simulator in every chapter
of the lesson.

26

Figure 6.0: Simulator

This figure shows the simulator which the user can try and test the codes of C#.

27

Figure 7.0: Quiz Page

This figure shows where the user can take different level of the quizzes which is
introduction, intermediate, final quiz.

28

Figure 8.0: Help Page

This figure shows the guide in using the simulator; this also includes the
limitations of the simulator.

29

Figure 9.0: Admin Page

This figure shows the administration page of the website. This page can edit
users, delete and add quiz.

30

Figure 10.0: Resources

This figure shows the video tutorials of the system.
HARDWARE INTERFACE
The researchers have used these hardwares as the maximum specification for
the development of the system of the system. A unit desktop or laptop with a Pentium 4
processor and a RAM of at least 512MB to be enable to use the different programming
platforms and applications. The video card must not be lower than 1GB for rendering of
images. A hard drive must have at least 100GB of free space is required for the
installation of the application and to make for files and documents. Internet connection
is also required.

31

SOFTWARE INTERFACE
SOFTWARES
Windows XP or higher

DESCRIPTION
Used as the only operating system for all the

application software.
Wamp Server

Used for the development of platform to create

web application.
Code Igniter, MySQL

Used in building dynamic website and store

HTML 5, CSS
Apache

Databases.
Used for constructing the content.
Used for development and maintaining the server.

Java Script
Photoshop CS3

Used as a programming language.

Used for making design of the system.

Table 1.0: Software Interface

In this table, shows the application software used by the researcher in developing
the system, including the different programming languages and operating system, and
for the web, users they can access the system through a java enabled web browser as
Microsoft Internet Explorer, Mozilla Firefox and Google Chrome.

View about us
Edit exam

View lessons

View resources
Delete user

32

View user

View help

View code
simulator

Figure 11.0: Use Case Diagram for the Administrator

In this figure, shows the use case diagram shows how administrator interacts
with each module.

View quiz
View home

View about us

33

Take quiz

View lessons

View code
simulator

View resources

View help

Figure 12.0: Use Case Diagram for the User

In this figure, shows the use case diagram shows how user interacts with each
module.

Simulate codes

Login

View lesson,
view video
tutorials

34
View quizzes,
view exercises

Try exercises,
take quizzes

View result,
print certificate

Logout

Figure 13.0: State Chart Diagram for the User

In this figure, shows a simple state diagram for user process. User may register
in order to have a account the confirmation of the registration will be confirmed to the
users e-mail and user may try the code simulator take quizzes.

Administrator
User

Start Session

Login

Start Session

Viewsystem

35

View
registered
users

Register

Add
questionnair
e

View
tutorials

Edit quizzes

Tryandtestinc
odesimulator

Take Exam

Logout

Figure 14.0: Activity Diagram for DenC#: Web-Based learning Application

In this figure, shows the flow of the activity being processed within the system.

COOMUNICATION INTERFACE

Web Server

Web Browser
PHP

36

MySQL

PHP File

End User

Figure 15.0: Communication Interface for Web Based Application for Learning
and Visualizing C# Programming
In this figure, shows the communication interface of the system. To use this system it is
required to use a web browser such as the following Google Chrome, Mozilla Firefox, MS
Internet Explorer. The system will use an e-mail that will serve as the confirmation of registration
for the proposed system, the system will require internet connection.