Co-op Summary – Spring Semester 2014

This is my Co-op Summary for Spring Semester 2014, my final semester at Cincinnati State.  At week 1, I identified several Learning Outcomes with my Co-op Supervisor to work towards during this semester.  One of the Learning Outcomes included utilizing my blog, http://www.kimphilpot.wordpress.com, to document my experiences in this co-op (CPDM 192) during the Spring 2014 semester.  I did maintain weekly or semi-weekly posts and included information and links to the topics I’ve researched or been exposed to this semester.  This semester also included my Capstone project, so several of my blog posts have referenced that project.  One of the coolest things that I have run across is using Google Charts API in my Capstone project.  I have one more blog post to write this week (Co-op 2 Highlights 15) and am planning to explore that topic a little deeper.  One big event that happened this semester was a major domain migration from one server to another.  This was huge for the IT team, and while I was not directly involved with helping with that, I did gain a big appreciation for what a huge task it was.

Another Learning Outcome included attending a webinar for the Birst product.  This is a reporting product and it seems like it can do a lot, but there’s also a big price tag associated with it.  The great thing about Google Charts API is that it’s available at no cost.  Infographic reporting, not just lists of data, on the data that we have in our MySQL database (the Vine) and our attendance (my Capstone project) seems like it could be valuable and I hope that there will be opportunities in the future to incorporate more reporting features.  Back in January, I also worked with the Director of Communications to build a WordPress website for a conference coming up in May.  This was great to walk through each step of the process and I have made updates to the pages several times in the last couple of months.

Again this semester, I was an active participant in the Database Architect meetings and provided feedback on various topics as appropriate.  This semester included a good quantity of website updates for our sister organization, http://www.healingcentercincinnati.org.  This included uploading Powerpoint and Word documents to our Amazon storage via Cloudberry, activating ‘closed due to weather’ images on the home page, and updating the web pages for an annual event that is happening at the end of May.

Overall, this semester was heavier on website updates, but lighter on other IT-related projects.  However, including my work on the Captsone project, which is directly related to our organization, seems to be an even tradeoff.  The Capstone project includes building a SQL database and tables to hold our weekend church attendance data, which is currently stored in an Excel spreadsheet.  Once the tables were organized and normalized, I imported some test data.  After building the scaffolding for the website in C# using the MVC 4 with Razor view, I developed a couple of stored procedures to call the data, allow for updates, entering new data, and deleting data.  This was not without a lot of help from the Capstone instructor.  I think he was stumped at times too.  There are probably one hundred additional things I could do to this project, but the big things that remain are adding enhancements to the reporting page and importing additional historical data.  The historical data is tricky because everything in the Excel spreadsheet is based on a Sunday date, even if it happened on a Wednesday or Friday or Saturday.  This requires a little more finagling of the data to make sure it is in the proper format before importing in to the table.

Because this is my last semester at Cincinnati State and I will be graduating on May 4, I have been actively looking for opportunities after graduation.  My goal, going in to this program almost two years ago, was to transition to a new career working with databases and building or maintaining websites.

Co-op 2 Highlights 14

It’s funny, but I have been about a week behind all semester – I’m not sure how that happened, but we’ve come down to the last week of classes and I will be posting #14 here today and #15 sometime in the couple of days.  I met last night with the capstone instructor and we tweaked just a couple of things on VARI (Vineyard Attendance Reporting Index).  One of those was to show just one date near the delete button instead of looping through the model to see how many events could have occurred on that day (it could be 2 at Middletown or 10 at Tri-County).  I didn’t want to have 10 dates of the same date showing next to the delete button.  The other thing we tweaked was styling my back/cancel button to make it look like a button, while really being a link.  There are several opinions and ways about how best to do this.  With MVC, you can’t have more than one submit button on a form, so one way to get around that it to have 2 or 3 forms on a web page, each with their own submit button.  With the situation of a cancel button, it doesn’t really get ‘submitted’ anywhere, it would just redirect the user back to the home/starting page, so it’s more like a link in that aspect.  This post, from StackOverflow, gave some options on how to do that.

I’ve started adding in the historical data from the original Excel spreadsheet, so that everything is converted over to the SQL database.  This is easy in a way, but time-consuming.  For things like the Saturday night church service or the Wednesday or Friday services, those are all listed with the Sunday date for that week, so the dates need to be adjusted for each of those.  I’m unsure yet about how much historical data to include, but for now, I will import the last year to be able to provide some decent reporting comparisons.

Reporting – the final hill!  One of our web/IT people at work suggested using the Google Charts API and I’ve begun implementing that.  It almost seems to easy!  I need to read up on how to connect my datasource (the database) to the Google javascript, so that the chart is pulling data from the database (and not the pizza array that Google gives as an example).  There has never been really great dynamic ways of reporting on the attendance data, so I think it could prove pretty valuable.  It’s one thing to see a plus or minus number on an Excel spreadsheet and say ‘oh, we are down for the month,’ but it is a whole new world to see that represented in color on a pie chart or bar chart.  This introduces the infographics topic again – I think I wrote about that earlier this semester or last semester.  Infographics are graphical representations of data.  The use of color, trendlines, sizes, and shapes really help to convey the meaning of the data they represent.

I’m planning to present this project to our IT team and a couple of other interested parties at work next week.  Then, I can get feedback and together, we can determine if it is a useful enough product to present to the leadership team and possibly launch for real-world use.

Co-op 2 Highlights 13

So, I’m catching up now on my posts here.  I had fallen a bit behind on posting, but not for lack of ideas or things to write about, rather a lack of time to put fingers to keyboard (like putting pen to paper).  🙂

My capstone project has been pretty much all-consuming lately and I am starting to see the end of the tunnel – it is a real, live attendance tracking tool.  You can enter attendance data for a specific date for a specific location and church time and save it.  And, it really does save into a database!  One of the things that I’ve added is a jquery datepicker, which has been a nice addition.  My capstone instructor has been very helpful with this project and maybe even a little stumped at times.  Between the two of us (him:  logic and syntax, me:  double-checking commas, column names, datatypes), we created a stored procedure to create a temp db – this will check to see if any attendance record already exists for that particular date.  If so, it allows you to update that attendance.  If not, it creates a record.  That was a huge breakthrough about 3-4 weeks ago now.  Connecting the datepicker was helpful and allows the end user to just click on a date, instead of typing in the date (and already knowing that Sunday was April 6 instead of April 5).

One thing I’ve realized though about our historical attendance data, which I am now importing in to the database, is that all records are based on a Sunday date, regardless of whether they happened on Wednesday, Friday, or Saturday.  Over the years, that has been the structure and it has worked, but in a pretty rudimentary way.  The Wednesday and Friday attendance numbers are in the same column, so you can’t really compare or analyze those numbers accurately because you don’t know if something was a Good Friday service or a Wednesday night church service.  I have to think through this a little further, but I am leaning to the side of correcting all of those items as they are imported into the new database.  It makes it more accurate, and databases are all about accurate.

Another thing I have wrestled with in the past 2 weeks is a datetime format for my data – I found this website with a great listing of examples for any type of format you may want.  I am still fine-tuning my date and time listings.  The times show up in 24-hr format, instead of AM/PM and I think the AM/PM would be a more user-friendly way to display the church times.

Reporting is one of the final big hills to tackle with this and I’m not sure how pretty it’s going to end up.  The project is based on MVC overall, but MVC and WebForms can intermingle within the same project.  I’ve found some good information here and here about this.  Actually making that happen doesn’t seem to be quite as easy.  I do have a basic gridview on a Reports page that allows sorting and paging of data, so you could sort by date, time, location, notes, or even attendance count.  I would love to find a great way to create a visual or infographic to display this data.  I’m still working on this and hopefully will be able to post about my success in my next post (#14).

One last piece is implementing a log-in system on this project, so not just anyone could enter data.  That will take a bit more research.

 

Co-op Highlights 14

A couple of weeks ago, a new project has developed at my organization – to remodel a website for our sister organization.  One of the ideas that came up was to remodel this using Responsive Web Design style or techniques.  Although I’ve heard of the term, I didn’t actually know much about what Responsive Web Design was, so I did a little research and thought I would document that here. As an introduction to Responsive Web Design (or RWD), Wikipedia provides a decent definition.

RWD recognizes that we are no longer viewing websites on a ‘normal’ computer desktop or laptop screen, but may be viewing these web pages on tablets, notebooks, smartphones, or even 60″ TVs.  In the past, websites were designed for specific viewing sizes.  As more and more people are accessing websites on a wider variety of electronics with varying screen sizes, it is necessary to be ‘responsive’ or proactive so that the viewing experience is optimized.  The goal is that navigation and easy viewing is accomplished with a minimum of scrolling and resizing. The main way to accomplish this is by using CSS3 media queries (based on the characteristics of the device accessing the website, usually the width of the browser), which is an extension of the @media rule.  Another key piece is using a fluid grid, where page elements are sized and resized in percentages.

Ethan Marcotte first used the term ‘Responsive Web Design’ in a May 2010 article in the magazine, A List Apart.  He also described the theory and practice of responsive web design in his 2011 book, Responsive Web Design.  Giving further credence to this web design style, RWD was listed as #2 in Top Web Design Trends for 2012 by .net magazine with progressive enhancement coming in at the #1 spot.

This website, http://mediaqueri.es/, gives some great examples of what you might see on different viewer/browser sizes, all showing the same website.
 
Infographics is another term that has come up recently regarding the website remodel for our sister organization. In a short definition, infographics is the ‘graphic visual representation of information, data, or knowledge, presenting complex information quickly and clearly.’  This Fast Company article from April 2011 provides some resources for creating infographics using template-driven tools.  This website, Visual.ly, also gives some great information.
 
Quite often, the solution to presenting data was to create a chart in Excel and copy that chart to your PowerPoint slide or your web page.  The result is rather plain-looking .  Infographics and data visualization takes this to a whole new level and will definitely be something to look for in the future.