Posts for addison.im blog http://www.addison.im/blog Latest posts for addison.im blog en-us Razor Engine CMS : A CMS built with .NET and Razor Engine Project Source Code

The web application I work on at work has a custom CMS for the front end where all of the HTML, CSS/LESS, and JavaScript development is done. The templating framework used for building pages in the app was created by a previous developer and is written in PostScript.

The syntax of the language is reverse Polish notation, which means things are backwards. For example, to add the numbers “one” and “two,” it would be “1 2 +,” since the language is stack oriented. As you can imagine, this is kind of a pain to work with and hard to get new people up-to-speed, so I started looking into the idea of bringing Razor into our CMS. After a quick Google search, I found the framework Razor Engine, and that got me started.

The app I work with uses MVC in parts, but is really more of a SPA (Single Page Application), so most of the pages either get data through a stored procedure call using the PostScript templating framework or using Ajax. To pass data to Razor Engine, I decided to make another page field for a custom model. In this page field / section, you can write C# with access to the RazorEngineCms.PageModelClasses Library, where there are classes for getting includes, as well as data through calling stored procedures. The result of this Page Model section is then assigned to an anonymous object variable called Model which is passed to Razor Engine. Below is a screen shot showing this process:

razor-demo-1

Inside the Page Template field, you have access to the Razor templating language for manipulating data from the model. Below is a screen shot of what this page would look like once it is compiled:

razor-demo-2

Another benefit of using Razor in the CMS is that, unless a page uses a query string variable, the page can be pre-compiled with the compiled page stored in the database. For pages that do use URL parameters, a Caching process is in place to cache the compiled page for each permutation of possibilities. For example, the first time the page /example/sproc-call/22 is loaded, it will be dynamically compiled, but after that the page will be rendered from Cache.

Due to having to dynamically compile some of the pages, I came to the conclusion that in order for the CMS to be viable in a production environment there would have to be a background process to cleanup the temporary files created by both Razor Engine and dynamically compiling the model. For this reason, I decided that instead of trying to retro-fit Razor into our CMS, a better solution would be to work towards taking front end development out of the CMS and back into something like Visual Studio.

One of the main reasons for developing in a CMS is that we develop software for an international audience, so pages have to be loaded with different languages and cultural changes. In the current CMS, language resources and includes are database driven, but in the long run it would make more sense to bring things back into Visual Studio so resource files could be used. The downside of having database-driven language resources and includes is that for each include or phrase, a database call has to be made, which can result in some pages having around 100 separate database calls to load!

Overall, this was a fun project to work on, but I decided to put a fork in it as it was suffering from scope creep and I was tired of building a CMS.

]]>
post/37 Mon, 21 Nov 2016 22:32:40 +0000
Updating the site, blog, and Nginx to use Laravel 5 A few months ago I finished rebuilding the blog and CMS I use to manage the site with Laravel 5. The bulk of the business logic is in a repository pattern with a base class of CRUD methods that is used by the Users, Posts, and Comments repositories. Overall I really like the framework with the exception of creating routes being very verbose. As far as I could tell a route has to be specified for every controller method. There is not logic like in ASP.NET MVC where the controller endpoints are figured out using reflection. For example in ASP.NET MVC something like /{controller}/{action} can be specified which will be a route for all controller methods.

I updated the front-end to use the latest version of Bootstrap and kept it simple since I am mainly interested and work in back-end development.

Since my server hosting was expiring this month I also decided to switch from A Small Orange to Digital Ocean. So far Digital Ocean is awesome and creating your own Ubuntu server and configuring it to the LEMP (or LAMP) stack is easy with their tutorials and documentation.

To get Laravel 5 to work with Nginx the config /etc/nginx/sites-available/default needs the following edits:


     root /var/www/html/yourLaravel/public;

     location / {
          try_files $uri $uri/ /index.php?$query_string;
     }

     location ~ \.php$ {
          try_files $uri /index.php?$query_string /index.php =404;
          fastcgi_split_path_info ^(.+\.php)(/.+)$;
          fastcgi_pass 127.0.0.1:9000;
          fastcgi_index index.php;
          fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
          include fastcgi_params;
        }

Another update that is required as a result of the above Nginx change is to update the php fpm config file /etc/php/7.0/fpm/pool.d/www.conf and change

listen = /some/path/to/php/
to
listen = 127.0.0.1:9000

After making the above configuration changes remember to restart the services by running the following commands.

sudo service php7.0-fpm restart
sudo service nginx restart

The code for the updated website can be found here and the updated Laravel blog code is here.

]]>
post/36 Sun, 07 Aug 2016 23:37:06 +0000
Adding a namespace to jQuery extension functions The javascript library jQuery has the ability to extend functions, which allows you to create your own jQuery functions. To prevent your custom functions from having conflicting names it is a good idea to put them in their own namespace. One method of doing so is to create an object and put the functions in the object so they can be called like:
  $(yourSelector).yourNamespace.function()
I first tried to implement this idea but ran into the issue of not being able to access $(this)of the parent $(this).yourNamespace in the function itself since "this" has a different context in a function.

My resolution to this was to create one function that takes in a callback name that is called by that function. The different functions are stilled stored in an object, but since they are called by the function the correct context of $(this) can be used.

An example of calling a function using this approach would look like:

$(yourSelector).yourNamespace("function"); // where function is the name of a callback function in .namespace()

A callback function can be added to $(yourSelector).yourNamespace(); by adding to the callbacks object similar to below:

  // example callback function 
  callbacks.yourFunction = function (params) {
    if (params.length != 2) {
        return { msg : "invalid params", numParams : 1 }; // second param is default and always set 
   }
   var yourParam = params[0];
   var jquery = params[1];
   // do something with params 
   // example jquery html function call on $(this) of yourNamespace
   jquery.html("<div>" + yourParam + "</div>")
   return  { msg : "OK" };
  }

  // can be called like 
  $(".selector").yourNamespace("yourFunction", [ yourParam ]);

In the github at the end of the post there is another example that also shows how error logging works and some additional callback functions. If invalid parameters or an unknown callback function name are passed an error message is logged to the console using the logger object.

Github Repository

]]>
post/35 Mon, 06 Jun 2016 23:56:59 +0000
Migrating a WordPress Multisite into AWS with EC2 + RDS Amazon Web Services. For performance and ease of maintenance we decided to use an EC2 instance to run the WordPress site with the database set up in RDS. Since I was leaving once the sandbox environment was set up I tried my best to document the setup process, which can be seen here.

Overall I am really impressed with AWS and the sandbox environment. The customer service is helpful, the amount of control over the servers is awesome, and the new site is fast. Page load times went from eight seconds (I know way too slow) to three seconds. Most of this is due to using Require.js and asynchronus calls with JS to parse RSS feeds, however I think moving from GoDaddy helped.

]]>
post/31 Tue, 08 Jul 2014 04:56:14 +0000
Compilation of songs I know on acoustic guitar

Due to the record being done with my phone it is not the best quality and needs to be turned up in order to hear. I left the recording pretty much raw except for doing a noise reduction to get rid of a static/clicking sound which helped the quality but made it even softer.

Check back for updates as to where this project is going. This list of side projects is only getting bigger, however I hope to finish this one over the summer.

]]>
post/32 Mon, 14 Jul 2014 06:09:02 +0000
OneK - A challenge to create a webapp in under 1,000 Bytes of data post on Reddit about onekb.net where you can "Get one KiloByte of free webspace for just 0.00000001 bitcoin per hour!" The goal of the post was to see what you could create in under 1 KB of data. I came up with the idea of making a Reddit RSS reader (unoriginal idea, I know).

After I finished a version to host I realized that I cannot use any PHP in the site, just JS/HTML. I plan on making a version in JS in the future but right now it is in either PHP/XSL or just PHP. The latest version is being hosted on my site at addison.im/oneK/ and I also have reddit.onekb.net/ for another couple of hours.

Once on the site you can search by subreddit but just adding it on like it is another directory. For example to list only posts in /r/webdev/ you would write /oneK/webdev/

The site pulls in content from the RSS feed at http://reddit.com/.rss using a combination of PHP and XSLT (Extensible Stylesheet Language Transformations). The website I help develop at work uses RSS feeds to pass content around the site since WordPress automatically generates them for posts. At work today for some reason RSS feeds were not working inside of the building's network. When I noticed my site wasn't working I thought there was an issue with the XML to XSLT transformation so I rewrote the site to only use PHP (I actually prefer using just PHP to parse XML feeds but I thought using XSLT would be more concise, which I was wrong about), but the error persisted.

Here is the github repo for the site. The live version is way over the 1,000 Byte limit since I chose to add the subreddit feature. I plan on having a new version, under 1 KB in just PHP/CSS up soon as well as adding some more styles to the current version like a header/menu with subreddits.

]]>
post/30 Thu, 24 Apr 2014 02:21:15 +0000
PHP Reddit - a side project I've been chipping away at /r/40daysofruby where the premise was to learn Ruby on Rails in 40 days. Since I had a few weeks off I thought this would be a good project. I decided the end goal would be to recreate reddit in the RoR MVC framework.

Learning the basics of ruby wasn't too hard but about half way through this tutorial by Michael Hartl I decided I was not learning much and had created the example apps without really understanding MVC.

Since I still wanted to finish the project, and also was looking for a new project to work on, I decided to build the back end of the site in PHP/MySQL instead of Ruby on Rails/SQLite. Having not really understood the MVC framework at the time I did not follow any design pattern besides trying to keep the site RESTful.

I plan on going back and reworking the structure of the site to follow a MVC design pattern in the future. As of now there is a basic version of the site up at addison.im/php_reddit and as always a github repo.

Check back later for updates to this post about the site! ]]>
post/29 Mon, 14 Apr 2014 04:44:00 +0000
About this Blog Laravel 4, a popular PHP framework. The framework uses a MVC design pattern which I am starting to feel comfortable with. In the past I have worked with Ruby on Rails and found the MVC structure a bit confusing at first, but after reading the Laravel 4 Cookbook and some other online tutorials I think I have it figured out.

Using Laravel I was able to make this simple blog and CMS. New posts are created through the admin dashboard, where comments are approved and posts are edited as well. I haven't created a way, besides a database seed class, for creating new users since I will be the only one making posts. A demo of the admin dashboard can be seen here.

I wanted to keep Laravel and the blog on the /blog/ directory since I plan on hosting other projects on this domain so I ended up using RSS to link posts across the site (something I picked up from working with WordPress). An RSS feed is generated with some PHP at addison.im/blog/feed/ and then read in the XML file, again with PHP, where ever I want to list the latest posts (this is how posts are listed on the addison.im page).

I ran into a problem of links to posts, similar to /blog/post/12/show/, being redirected to /post/12/show/ since the Laravel installation thinks it is configured at the root level. I decided to just write a mod_rewrite rule on the .htaccess file as seen below:
# redirect fix for posts from outside links
RewriteEngine On
RewriteRule ^post/(.*)$  /blog/public/post/$1  [R=301,NE,L] 

The rewrite rule is pretty self explanatory. The (.*) in combination with $1 takes everything past /post/ in the original URL and places it where the $1 is, R=301 means that the address bar will reflect the change in URL, and the NE ensures that the request is not escaped. The L flag means that if the rule matches, no further rules will be processed.

To look at the code for this blog check out the github repo here. In the future I plan on writing about another side project I have been working on called PHP Reddit. ]]> post/27 Mon, 31 Mar 2014 01:44:59 +0000