Creating a 'website builder' - How would I architect it?
I've been tasked with adding a website builder to our suite of applications. Most of our clients are non technical small business owners (brick and mortar stores, mom and pop shops). I've been told that I should be looking at Blogger Template Editor and trying to see if I can make something that fully featured and easy to use. The idea being that our customers should be able to bring their business online without knowing anything about web development.
I mostly work with c# and silverlight on a day to day basis. So going with .net is likely the best way for me. ASP.NET MVC and SPARK look very attractive, but I am not too sure about how I will accomplish the following things
1- How do I build a templating system that allows a designer to create templates that use a certain format and are compatible with my app. Is there any generic framework out there for this?
2- How would I persist the changes the client makes to his/her site (for example the client changes the background color and adds a list of ingredients on a page).
Edit: Yes I am aware this is a big task and I am potentially looking at writing a fullblown CMS, however our clients need very limited and basic functionality to begin with and I imagine this would be an iterative process, with perhaps more developers coming on later if the product proves to be successful. I will make these concerns known to our manager though.
Initially I am planning on just giving them a few templated layouts and allow them to customize what goes in the various sections as well as the colors and images with CSS. HAML and Sass look like they could be useful and I could persist all user customizable parameters in a database.
Am I thinking along the right lines or completely off the mark here?
Answer
It depends a lot on your requirements.
A simple solution would be to have several base-templates with placeholders that get filled with content/other templates later.
I.e. a template might look like this:
<html>
<head><title>foo</title></head>
<body>
<div id="menu">{auto_generated_menu}</div>
<h1>{page_header}</h1>
<div id="content">
{page_content}
</div>
</body>
</html>
Then you provide the users with a simple way to define page headers and page_contents, i.e. the first might just be a textbox, the content is filled by using something like TinyMCE. If necessary, the clients can use other placeholders in the content, but that might not be neccessary.
After that you just add an auto-generated menu, create the logic that replaces the placeholders with the user-entered content (something along the lines of template.Content = template.Content.Replace("{page_content}", customer.Pages['foo'].GetTemplateContent("page_content")); )and maybe add a CSS stylesheet with color and font settings provided by the customers.
The most complex part is the backend and user-authentification.
This solution is simple to implement and has no real flexibility at all but it allows customers to quickly write a few texts and add some fancy images without having to care about anything else.
To persist color settings, write them into the database and create a new CSS stylesheet everytime they are changed. For other content just use a Database table "content" with the columns "key" and "value" and you might want to generate static HTML pages on every change.