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.