C++ Final Presentation

Topics Splash Page Sandbox Backend Parser Code Generation User Interface (Instructor,Account, Student) Documentation

Splash Page Login to web application Create an account User logs in with email and password A php session is created for that user Create an account A user can create a new account by inputting their email, password, first name, and last name. Passwords are hashed using bcrypt

Sandbox Drag'n'Drop zone AJAX control panel output box Line highlighting Variable box updates

Sandbox . Drag ' n ' Drop HTML Element Based Javascript enabled <script type-"text/javascript"> //setup the listeners on the page to be used for drag'n'drop var dropZone = document.getElementById('drop_zone'); dropZone.addEventListener('dragover', handleDragOver, false); dropZone.addEventListener('drop', handleFileSelect, false); </script> //This function handles the file that is dropped in the box function handleFileSelect(evt) { evt.stopPropagation(); //to stop browsers' default action evt.preventDefault(); //to stop browsers' default action var files = evt.dataTransfer.files; // FileList object. for (var i = 0, f; f = files[i]; i++) { var r = new FileReader(); r.onload = function(e){ document.getElementById('userCode').value = e.target.result; } r.readAsText(f);

Sandbox . AJAX control panel AJAX call to CGI scripts for execution Run activates after compile Javascript monitors keypress Forces compiling upon changes Simple debugger control

Sandbox . Output box Contains messages from backend Gives simplified version of debugger output Acts as if it's a modified stdout

Sandbox . Line Highlighting Small jQuery code adds divs with line #'s to textarea tweaked Javascript to allow for highlighting Made CSS class to show highlighted line Changed the HTML class/id of divs to show current line Client side parsing of gdb output calls function below, passes in the line number

Sandbox . Variable Box Box to show program variables and values Updates based upon Next and Step button gdb output is parsed on backend JSON object returned with variables:values Basic HTML table innerHTML replaced any time a button is pressed

Backend Components backendServer.py gdbthinclient.cgi gdbwrapper.py srvThread gdbthinclient.cgi gdbwrapper.py asyncRead.py genCPP.cgi runprog.cgi

Backend . backendServer.py Multithreaded socket server receives requests from gdbthinclient over socket spawns new thread of srvThread class for each connection srvThread class communicates with gdb instance through gdbwrapper.py Web backendServer.py srvThread Request Request srvThread

Backend . gdbthinclient.cgi cgi script called when button is pressed on Sandbox.php Button press corresponds to command sent to backendServer.py and from there to gdb returns results of gdb command in JSON object via AJAX Web backendServer.py gdbthinclient.cgi

Backend . gdbwrapper.py Wraps gdb to provide communication between front end website and gdb instance Sends commands to gdb and reads output Utilizes asynchronous I/O through the asynchRead class to read the output gdbwrapper.py asyncRead.py backendServer.py gdb

Backend . genCPP.cgi Simple script to generate the C++ file Takes code from HTML textarea, writes to file named /temp/prog_user.cpp Calls g++ command on file, saves executable name /temp/compiledfrompython_user Uses pipe and JSON to send return output

Backend . runprog.cgi Similar to genCPP.cgi, calls command to simply execute the file Runs file based on username ex [ ./ compiledfrompython_csmith1 ] Only active after Compile is pressed (or no changes)

Parser Pull XML from database Pull information out of XML MySQLdb save XML in temp directory on server Pull information out of XML stores information in list objects search objects based on 'rbid' attribute

Code Generation ElementTree Trace XML build order of calls each element has logic for generating code ex) var, else, functioncall

User Interface Student Instructor Account For the student to answer assignments Instructor For the instructor to manage assignments, courses, and questions Account For the user to change account settings

User Interface .Account The user can change the password Must enter existing password Must enter the new password twice The user can change their name First and last name The user can change login Must be unique

User Interface .Instructor Courses can be added,edited and deleted Assignments can be added,edited and deleted Questions can be added,edited and deleted

User Interface .Student Students can answer assignments that are assigned to them Students can update them after they are answered also The assignments display on the sidebar on the assignments page.

Questions?