33
CHAPTER IIITECHNICAL 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 INTERFACEThe 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 PageThis figure shows the home page of the
system that will appear once you open the website.
Figure 3.0: Register PageThis figure shows the form of the user
that will register to the website that contains different fields
that needs to be answered.
Figure 4.0: Users PageThis 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#.
Figure 5.0: Lesson PageThis figure shows the basic lessons of
c#. It contains simulator in every chapter of the lesson.
Figure 6.0: SimulatorThis figure shows the simulator which the
user can try and test the codes of C#.
Figure 7.0: Quiz PageThis figure shows where the user can take
different level of the quizzes which is introduction, intermediate,
final quiz.
Figure 8.0: Help PageThis figure shows the guide in using the
simulator; this also includes the limitations of the simulator.
Figure 9.0: Admin PageThis figure shows the administration page
of the website. This page can edit users, delete and add quiz.
Figure 10.0: ResourcesThis figure shows the video tutorials of
the system.HARDWARE INTERFACEThe 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.SOFTWARE INTERFACE
SOFTWARES DESCRIPTION
Windows XP or higherUsed as the only operating system for all
theapplication software.
Wamp Server Used for the development of platform to create web
application.
Code Igniter, MySQL Used in building dynamic website and store
Databases.
HTML 5, CSS Used for constructing the content.
Apache Used for development and maintaining the server.
Java Script Used as a programming language.
Photoshop CS3 Used for making design of the system.
Table 1.0: Software InterfaceIn 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 examView lessons
View resources
Delete user
View helpView user
View code simulator
Figure 11.0: Use Case Diagram for the AdministratorIn this
figure, shows the use case diagram shows how administrator
interacts with each module.
View quizView about us
View home
Take quiz
View lessons
View resourcesView code simulator
View help
Figure 12.0: Use Case Diagram for the UserIn this figure, shows
the use case diagram shows how user interacts with each module.
Simulate codes
View lesson, view video tutorialsLogin
View quizzes, view exercises
View result, print certificate
Try exercises, take quizzesLogout
Figure 13.0: State Chart Diagram for the UserIn 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
ViewsystemStart SessionStart Session
Login
RegisterView registered users
View tutorialsEdit quizzesAdd questionnaire
Tryandtestincodesimulator
Take Exam
Logout
Figure 14.0: Activity Diagram for DenC#: Web-Based learning
ApplicationIn this figure, shows the flow of the activity being
processed within the system.
COOMUNICATION INTERFACE
Web Server
PHPWeb Browser
MySQL
PHP File
End User
Figure 15.0: Communication Interface for Web Based Application
for Learning and Visualizing C# ProgrammingIn 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.