Programming Language Syntax Comparison - part 3

I have a confession...

I managed to get a bit distracted since the last time I posted about this project. That was over a year ago, and was around the same time that MITx and the University level open education system kicked up a gear. Several courses later, and things have finally come full circle. Finishing up one of the latest course from HarvardX (cs50), I'm required to do a project using what I learned from the course. The development platform they gave me, as well as some lessons on php made this an ideal time to pick up this project again. And I've hit the ground running!

Oh, and I should have a few more reviews for the new edX platform and several of the classes coming out as well.

When we last left our heroes...

We were just finishing up the design phase and were abandoning text stored data formats, like xml or comma separated files, in favor of a database. Before I got side tracked I had even manged to build a test database, and generate some basic test data as well as most of the queries I should need for the project. It turned out to be pretty easy to transfer that database to the new Virtual Machine and get some basic functionality up quickly.

The VM I'm using has a phpMyAdmin set up similar to my web hosting, as well as a basic template for some php/html development. Later on when adding user convenience features, I may start including some javascript as well, but right now my goal is to get the project functional.

The first thing I did was create a front page that populated two drop down boxes with all of the languages currently in my database. Throw in some basic validation, and a submit button. And progress! That part took hardly any time at all. What took slightly longer was making the display page to format the data for the languages, but after a little work...

Language Comparison Success

Note: That copyright is left over from the previous template of the website. I'll probably replace that with a creative commons marker once I figure out the 'official channels' if any.

This page was generated dynamically from the database using php and mysql. right now C# and VB.NET are the only languages with any test data, but I could generate them in either order now. I can even handle the case of only displaying one language (Originally this was done using two separate pages and functions, but I've changed it so now displaying one or two languages references the same page. This will reduce the amount of places I have to edit when changing styling later on).

This was day one...

Current Progress

While the default tables had looked fine, I wound up borrowing some of the html structure from the source of my original inspiration to try and fix that double spacing issue. I'll do another more detailed pass of the css and look of the site later on, but for now it looked a lot better then I hoped it would this early on.

What was really surprising is that the test data from my database managed to format quite nicely as html data without any modification. Getting the data into the database like that in the first place though will be a non trivial challenge.

My current task has been to create administrator tools for all of the data entry task. So day two I spent flushing out all of the template php and html files I would need for this. Most of them are already functional at this point and can insert new rows into the database. The only exception is the "syntax content" page that holds the actual coding example for all of the language, which will most likely be the largest chunk of work for the rest of the project.

Form to Insert Categories for Programing SyntaxThese data entry pages have basic error trapping and validation for now, but they are still very much 'developer/admin' only pages. While some of the rows can be edited, deletion or restructuring the tables still requires direct access to the database. There is also no rollback function or user validation for changes, so these tools won't likely be made public any time soon.

I do have the html and forms coded for the "syntax content" edit page, but it doesn't interact with the database yet and requires a few more design decisions as it has the most complex operations. Right now it looks a lot like my first picture of the comparison page, but with the entire right side replaced with text areas for every section.

Future Plans and Challanges

Day three will be working on the "syntax content" adding page. This is the largest functional hurdle I need to implement before the entire project is otherwise in a functional alpha state. After which I'll have to deal with data entry, beautification, and styling. Even after I get the release version of the project out, I imagine there is a lot I will be able to do to improve the administrative tools and user friendliness on the back end. It would be great if it were possible for outside people to edit or create their own content for different languages.

I still have several concerns for this project going forward that I will need to read up on:

  • Security: Since I am transferring formatted code and html both to the database, and to an html page, there is a lot of danger of making it vulnerable to injection attacks. I imagine the more I do to safely escape all of the characters that need escaping, the harder it will be to format and display the text correctly.
  • Clean code: As I get basic functionality up and start implementing more advanced features, I'm probably going to go back and do a pass on all my code. It's at this point where the design conventions I choose now as far as naming and coding practices will make my life easier or a living hell later on.
  • Scope Creep: If all of the data was already in the database, I could call this project finished right now. But to make this a truly modular/dynamic site, I have to create some way to more easily add new Languages and content. The question is just how far should I go to make this easier for the administrative users.
  • css: Programing something functional, and programing something that looks good are two entirely different beast. There is a lot of really subtle stuff that can make a big impact on the final presentation of the project, and I am still relatively new to dealing with cascading style sheets at an advanced level.
  • Deploying to live: My web hosting site is going to have a different directory structure then my VM. Locations of php files, knowing where to divide the public and private files, and so on. This leads to concerns of both functionality, and security in making sure I properly deploy it.
  • Copyright: Is there an offical channel to registering a copyright or creative commons license? Or do you simply apply a stamp to the bottom of your page? Either way I also want to make sure I give credit to the original site, as well as anyone else who contributes before the project is complete.

That list looks a lot larger then I thought it would. Almost as impressive as the number of task I've crossed off my list after working on this project for the past few days. The deadline for the CS50 course project is April 15th, though I'd like to have the work done by the end of this month (at least on the VM machine), and start worrying about making the screen cast to show it off. I'll write up part 4 of this series once I get a few languages content complete in the database.

Leave a Reply

Your email address will not be published. Required fields are marked *