Setting up templates

**prabirchoudhury** · May 17 '09, 09:14 AM

hey..could you explain bit details abt how and what template you wnat to setup...

**borrisjd** · May 20 '09, 07:04 PM

The templates will be basically empty web site shells. The customer will choose one of the templates they like, and that will become their web site. The templates will be written in html for the most part, perhaps containing some jsp. We will be using a MySQL database to hold the options of the customer, i.e. which template, which color choices, what text do they want displayed in text field one for example.

**Frinavale** · May 26 '09, 02:19 PM

Most of your work is going to have to be done in the Server Side code.

You're going to have to write a template HTML page that will be rendered.

Then you'll have to dynamically generate the styles for this page based on the user's selections. It'd probably be easiest to store the CSS code in your database ...but it's up to you how you implement it.

You will also have to dynamically grab the text content for the web pages from your database as well.

**borrisjd** · May 27 '09, 02:24 PM

Would you just put the CSS code into say a text data type in the database? I was thinking using jsp calls to the database to redirect to a specific folder that would contain the web site, style sheet, jsp pages ... and have each template in its own folder. Is this more cumbersomethan just using the css?

**Frinavale** · May 27 '09, 02:43 PM

I don't know much about JSP but from what I do know is that you pretty much write the HTML structure for the page....in specific places in the page you're going to have JSP code (that is executed on the server) which will write dynamic content into the page.

So first you have to have some sort of HTML structure (template) that will generally lay out the page. Once you have this structure in place you can dynamically write the CSS and the content (text) into the page.

So, for example, this would be your HTML structure and anywhere that I have comments you'll have to replace with JSP code that does what I've specified in the comments:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>
    <!-- Dynamically grab the title for the page -->
  </title>
 
 <style type="text/css">
    body{
      //here you need to dynamically 
      //grab the style for the body of the
      //web site...
     }
    .banner{
      //here you need to dynamically
      //grab the style used for the Banner
      //displayed for the web page
    }
    .contentSection{
      //here you need to dynamically
      //grab the style used for the content (the text)
      //displayed for the web page
    }
  </style>
</head>
<body>
  <div id="bannerSection" class="banner">
    <!---
      Here you will dynamically display a Banner
      It could be an Image, it could be some Text...
      It could be whatever you want.

      Note the "class" property in the <div> for this section.
      This class will be linked up to the style which is used
      to style this section...the style is dynamically
      generated but because the class name is known 
      it'll work.
     -->
  </div>
  <div id="contentSection" class="content">
    <!---
      Here you will dynamically display the content
      (the text) for the web page..

      Note the "class" property in the <div> for this section.
      This class will be linked up to the style which is used
      to style this section...the style is dynamically
     generated but because the class name is known 
     it'll work.
     -->
  </div>
</body>
</html>

The CSS can drastically change how the layout of the page is displayed but it doesn't actually change the HTML structure of the page.

For example you could write CSS for the banner section that displays the banner above the page's content. Or you could write CSS that displays the banner section to the right or the left of the content.

CSS is very powerful and can drastically change how websites look to the end user even though the HTML structure of the page is the same as another page.

**borrisjd** · May 27 '09, 02:51 PM

That makes sense. I have done all the dynamic work with the html code using jsp and php, does it work the same way in the style sheet?

**Frinavale** · May 27 '09, 02:55 PM

Wait a sec, are you creating external style sheets?

**Dormilich** · May 27 '09, 03:00 PM

Originally posted by borrisjd

I have done all the dynamic work with the html code using jsp and php, does it work the same way in the style sheet?

it is possible to build CSS files through PHP (and I think JSP too), you only need to make sure the files are recognised as CSS by sending the appropriate headers.

**borrisjd** · May 27 '09, 03:00 PM

I am fairly new to html and css. I thought the css were always external. I guess by your question they are not. So if I put the css inside of my html page I can use jsp to call to the database like I have done before. If I were to use external is it possible to make that dynamic as well?

**Dormilich** · May 27 '09, 03:02 PM

Originally posted by borrisjd

I thought the css were always external.

not necessarily, but it makes maintenance much easier.

Originally posted by borrisjd

If I were to use external is it possible to make that dynamic as well?

yepp, there's not much difference.

**borrisjd** · May 27 '09, 03:05 PM

Very cool. Thanks for helping. I think I have enough to get started. I'm sure I'll be back when I get stuck lol.

**Frinavale** · May 27 '09, 03:06 PM

Actually it's probably cleaner to keep them as external style sheets.

In this case all you have to do is write a JSP page that returns a Style Sheet instead of HTML.

This JSP page (I'm going to call it "JspPageThatDyn amicallySpitsOu tStyleSheets") would look something like:

Code:

    body{
      //here you need to dynamically 
      //grab the style for the body of the
      //web site...
     }
    .banner{
      //here you need to dynamically
      //grab the style used for the Banner
      //displayed for the web page
    }
    .contentSection{
      //here you need to dynamically
      //grab the style used for the content (the text)
      //displayed for the web page
   }

The JSP page that will display the website (the HTML) will request the external style sheet from the JspPageThatDyna micallySpitsOut StyleSheets like so:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>
    <!-- Dynamically grab the title for the page -->
  </title>
<link type="text/css" rel="stylesheet" href="/JspPageThatDynamicallySpitsOutStyleSheets.jsp?styleID=xyz"></link>
</head>
<body>
<!-- .....-->
</body>

Note the link.
It's making a request to the JspPageThatDyna micallySpitsOut StyleSheets, passing it a style ID as a parameter. The JspPageThatDyna micallySpitsOut StyleSheets will use the style ID to dynamically create the style sheet requested.

**Frinavale** · May 27 '09, 03:10 PM

Originally posted by Dormilich

not necessarily, but it makes maintenance much easier
...
yepp, there's not much difference.

Originally posted by borrisjd

Very cool. Thanks for helping. I think I have enough to get started. I'm sure I'll be back when I get stuck lol.

Hehe Dormilich you're too fast :)
(or maybe I'm just too slow)

**Dormilich** · May 27 '09, 03:12 PM

It's always a good idea to send the appropriate headers along with the document

Code:

// PHP
<?php
header("content-type: text/css");
?>

// style sheet content here

there should be some adequate code in JSP

Setting up templates

Setting up templates

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment