28
eSchoolPLUS 4.0 Technology
eSchoolPLUS 4.0 Technology
eSchoolPLUS 4.0 Technology
Jeff Miller – eSchoolPLUS Development Manager
10/14/2015
Overview
Learn about all of the exciting new technologies we are using to enhance the eSchoolPLUS application suite. We will review the types of technology being used to improve both its capabilities and the overall user experience.
Agenda
The Old
The New
Deep Dive: Plug-ins Used in 4.0
What’s Next
Questions
What didn’t change in 4.0?
�The database
�Microsoft SQL Server (2012 or 2014)
�Minor Schema Changes
�Are be documented with the release
�Tasks
�Still using VB6 & COM+
�Task Agent/Task Load Balancer
�A big reason for leaving the DB as is
What else didn’t change?
�The appearance/features in
� Teacher Access Center
� Home Access Center
Please note that we did modify some of the code so it could be shared with eSchoolPLUS Admin code
So what’s new?
EVERYTHING RELATING TO
THE USER INTERFACE IS
NEW IN eSchoolPLUS.
New to eSchoolPLUS 4.0
�Completely New User Interface
� All webpages are being rewritten to be:
�Modern Look, Responsive Design
�Device and Browser Agnostic
�Includes over 1000 webpages
eSchoolPLUS 4.0 Technologies
� Open Source Technologies
�HTML5 – Less coding for more browsers
�CSS3 – Adding styles to the web pages
� jQuery – Modern JavaScript library
� JSON – Packaging data to send to the web server
eSchoolPLUS 4.0 Technologies
�Responsive Design Technologies
� Twitter Bootstrap – Field, Label and Card Placement
� Font Awesome - Icons
� Microsoft Technologies
�ASP.NET MVC/Razor View Engine – Application Framework
�C# - Programming Language
�Entity Framework/LINQ – Database Queries
Entity Framework and LINQ• Object – Relational Mapping (ORM) Framework for data
access
REG_CFG
DistrictBuildingSchool Year
REG_CFG_ALERT
Alert Type
REG_CFG_ALERT_
CODEAlert TypeAlert Code
CRegConfiguration
Var District as string
Var Building as string
Var SchoolYear as date
Var CRegConfigAlertas object
Get_Configuration()
Database Tables Programming Object
Entity Framework and Linq
� Coding the SQL:
select REG_CFG.*, REG_CFG_ALERT.*, REG_CFG_ALERT_CODE.* from reg_cfg
inner join REG_CFG_ALERT on
REG_CFG_ALERT.DISTRICT = reg_cfg.DISTRICT and
reg_cfg_alert.BUILDING = reg_cfg.BUILDING and
REG_CFG_ALERT.SCHOOL_YEAR = reg_cfg.SCHOOL_YEAR
inner join REG_CFG_ALERT_CODE on
REG_CFG_ALERT_CODE.DISTRICT = REG_CFG_ALERT.DISTRICT and
REG_CFG_ALERT_CODE.BUILDING = REG_CFG_ALERT.BUILDING and
REG_CFG_ALERT_CODE.SCHOOL_YEAR = REG_CFG_ALERT.SCHOOL_YEAR and
REG_CFG_ALERT_CODE.ALERT_TYPE = REG_CFG_ALERT.ALERT_TYPE
where reg_cfg.DISTRICT = ? and
REG_CFG.BUILDING = ? and
reg_cfg.SCHOOL_YEAR = ?
Entity Framework and Linq
// get the building configuration for the district, school year, and building
Return (from BuildingConfig in
_context.BuildingConfigurations.Include("AlertConfigurations").Include("AlertConfigurations.Codes")
where BuildingConfig.District == Environment.District &&
BuildingConfig.SchoolYear == schoolYearToUse &&
BuildingConfig.Building == building
select buildingConfig).SingleOrDefault();
Entity Framework and Linq
(unrelated) Example you might see in SQL:exec sp_executesql N'SELECT
[Extent1].[DISTRICT] AS [DISTRICT],
[Extent1].[STUDENT_ID] AS [STUDENT_ID],
[Extent1].[TO_SECTION_KEY] AS [TO_SECTION_KEY],
[Extent1].[TO_RANGE_KEY] AS [TO_RANGE_KEY],
[Extent1].[CHANGE_DATE_TIME] AS [CHANGE_DATE_TIME],
[Extent1].[CHANGE_UID] AS [CHANGE_UID]
FROM [dbo].[SCHD_STU_CRS_DATES] AS [Extent1]
WHERE ([Extent1].[DISTRICT] = @EntityKeyValue1) AND ([Extent1].[STUDENT_ID] = @EntityKeyValue2) AND ([Extent1].[SECTION_KEY] = @EntityKeyValue3) AND ([Extent1].[MODELED] = @EntityKeyValue4)',N'@EntityKeyValue1 int,@EntityKeyValue2 nvarchar(128),@EntityKeyValue3 int,@EntityKeyValue4 nvarchar(128)',@EntityKeyValue1=11111,@EntityKeyValue2=N'11111 ',@EntityKeyValue3=1247349,@EntityKeyValue4=N'N
Model – View – Controller Design Pattern
• Models (Business Layer) – Parts of the application that
implement the logic for the application's data domain.
• Views (Display Layer) – Views are the components
that display the application's user interface (UI).
• Controllers (Input Control)– Components that handle user
interaction, work with the model, and ultimately select a view to render that displays UI.
Deep Dive: Plug-Ins
All Plug-Ins used by SunGard K-12 Education are carefully vetted
� Websites that add a ton of plugins slow down the website
• Use only what is needed and efficient
� Cross Product and Functional Area Technology Committee Review and Make Recommendations
• Representation from every product
• Cloud Team
• Security Approval
� Go Forward Consistency Across Applications
Deep Dive: Plug-Ins
Select2
Used for Dropdowns and Multi-selects
� https://select2.github.io/examples.html
� Add an Open Source javascript file to extend jQuery
� We’ve extended the library to better handle our responsive design patterns and improve performance
� We use events to control how the page responds based on selected answers
• Selecting one value can cause fields to appear or disappear
� Example is the Quick Search
Moment.js
Data that involved a time or date is easily formatted and adjusted for time zones
� http://momentjs.com/
� Open Source JavaScript Library
� Database, C# and JavaScript can all store and format dates differently
• By default, moment parses and displays in local time.
• var date = moment(dateVariable).format("YYYY-MM-DD");var date = moment(dateVariable).format("MM/DD/YYYY");
• moment().add(3, 'days').calendar();moment().subtract(3, 'days').calendar();moment().endOf('day').fromNow();moment().startOf('hour').fromNow();
FullCalendar
FullCalendar is a drag-n-drop jQuery plugin for displaying events on a full-sized calendar.
� http://fullcalendar.io/
� Open Source JavaScript library
� Provides total framework for using calendars for month, week, day views. We supply the data, it formats it nicely.
• $('#calendar').fullCalendar({
• year: currentYear,
• month: currentMonth,
• dayRender: function(date, cell) {
• //...add some special formatting or styling for each day
• },
• dayClick: function(date) {
• //...trigger some action if user clicks on the day
• }
• });
FullCalendar
jqGrid
Used for grids throughout the software if there is a need beyond the basic grid display
� http://www.trirand.com/blog/jqgrid/jqgrid.html
� Open Source Library
� This powerful tool gives us the ability to edit in line (even using select2!), paging, sorting individual and multiple columns
� Allows each cell to be formatted uniquely based on data conditions
� Easy to get edited data to save
� Makes Grid manipulation quicker and cleaner
jqGrid
DateTimePicker
Used for time select fields
� http://eonasdan.github.io/bootstrap-datetimepicker/
� Open Source
� Works with moment.js
HiQPdf
Used for Page Prints
� http://www.hiqpdf.com/
� Commercial product which required us to purchase an enterprise developer license. There are no run time or deployment costs and the license never expires.
• No Worthy Open Source Options
• Cost was a factor. Some range as high as $5-6K per server license to install.
� Code Snippets for JavaScript capturing HTML and C# code generating the PDF from the HTML
HiQPdf
Code Snippets
What else do we need to do?
Reports and calculations
�Why?• Remove older technology
– Still using VB6 and Com+
– Reports created using Active Reports 2.0
• Easier Installation
• Maybe sneak in some features?
�Approach• Over many releases
�Risk• Needs mitigated
