CMS for Japan

[Mortis]

I've been slightly dumbfounded with my Japan/David Sylvian lyrics archive site (www.slowdays.org/japan/) for quite a good time now, as working on it manually is a -bit- too much work, just a bit, so I've started to wonder if I could make the workload smaller with a content management... thing. Not a system but a little tool.

The thing is, I've a desire to format the site out really well. That's the thing about it. Here are examples of what I've done this far:

Code: Select all

Secrets of the Beehive</cite></h2>
   <img src="album-sylvian-gone-to-earth.gif" border="1">
      <ol style="list-style-type: decimal-leading-zero;">
         <li><a href="#september">September</a></li>
         <li><a href="#theboywiththegun">The Boy with the Gun</a></li>
         <li><a href="#maria">Maria</a></li>
         <li><a href="#orpheus">Orpheus</a></li>
         <li><a href="#thedevilsown">The Devil's Own</a></li>
         <li><a href="#whenpoetsdreamedofangels">When Poets Dreamed of Angels</a></li>
         <li><a href="#motherandchild">Mother and Child</a></li>
         <li><a href="#letthehappinessin">Let the Happiness In</a></li>
         <li><a href="#waterfront">Waterfront</a></li>
         <li><a href="#forbiddencolours">Forbidden Colours</a></li>
      </ol>
      <ol style="list-style-type: decimal-leading-zero;">
         <li><a href="#promise">Promise (The Cult of Eurydice)</a></li>
      </ol>

This is the changing song menu that appears when you click on a particular album title. Each album has a menu file assigned to it with unique anchors, and there is a cover art logo. It would be really effective to just assign a global variable that would define

• What the visible title is
• What the image should be named as
• What the menu file filename is

And here's an example of the preferred(?) lyrics formatting:

Code: Select all

<h2>Secrets of the Beehive</h2>
<div id="september" class="visible">
      <a name="september"><h3>01. September</h3></a>
         <? echo nl2br("<blockquote>The sun shines high above
         The sounds of laughter
         The birds swoop down upon
         The crosses of old grey churches
         
         We say that we're in love
         While secretly wishing for rain
         Sipping Coke and playing games
         
         September's here again
         September's here again</blockquote>");?>
   </div>


As you can see, each song title and song div has a name assigned to it, and the lyrics are formatted in blockquotes. The actual album title is readded manually here, ugh. Any idea on how I should approach the whole thing? I think the best thing would be to database this thing with flat files, but... usually flat file CMSes are very limited especially in how they treat menus.

[Mortis]

Okay here is my design document for the tool I have been talking about. Since I don't know anything about coding or PHP the whole premise might be off, but I'll fix this as we go. In fact I'll show you the finished code if I ever get that far

MENU CREATOR bit:

It all starts when the script has a text box that asks for $albumname

Based on inputting that variable it will do the following:

• Write a file with the corresponding filename: $albumname = "albumname-menu.txt"; Unsure of how to capitalize or lowercase or remove spaces at this point but we'll find out soon enough.
• Write a header at the top of the txt file, inside a html cite and h2. Same thing here with upper/lowercase, and perhaps a list can be defined that will render a certain list of words in lowercase (the, of, etc).
• Below the topic it writes a html img phrase where $albumname is entered into an url that goes something like japan/covers/"albumname.gif" border="1" too.

Next, the script asks for a list of songs on the album:
There is a bunch of input $songname fields that will function with the following variables: $songname1 $songname2 and so on

These songnames will be always inserted into a table that goes like this:

Code: Select all

<ol style="list-style-type: decimal-leading-zero;">
<li><a href="#$songname1">$songname</a></li>
</ol>


It inserts as many songnames as there are holes.

LYRICS creator bit:
the script then moves onto a second page that has $albumname as title
then it has a field for every song name that you input
Each of these fields will be written into

Code: Select all

<a name="$songname1"><h3>$songname</h3></a>
<? echo nl2br("<blockquote>
Lyrics
</blockquote>");?>
   </div>

And then the page is output as $albumlyrics = "artist-albumnamelyrics.txt"

Ugh I got so horribly lost already gotta press Submit

[Mortis]

Okay I finished it! My first PHP script, an html code adder/generator for my Japan lyrics site. It can be found at
http://www.slowdays.org/japan/testscript/testscript.php

There are two known bugs:

• Due to the implementation of a while counter, the song title boxes are upside down (1 is at bottom).
• There's one extra box for inputting song lyrics.

It does work though, which was a surprise to all parties. Currently the output is a little off for my own purposes but I will modify it shortly.

The first real thing I had it output for me is the Blemish portion of the site:
http://www.slowdays.org/japan/index.php ... an-blemish

If I haven't explicitly mentioned it earlier, one of the main ideas with the site (in addition to there being very few lyrics sites for Japan/Sylvian after the biggest one went down) was to provide semantically correct code for lyrics. It's just horribly dull to attempt writing it like that in a larger scale, so the generator will hopefully come in handy.

There's also a possibility me and Smea will have a 2nd go with it depending on how much we have time. After all, this was really my first programming work ever, so it's horribly written.

[Mortis]

I've managed to convert the generator to output to XHTML strict now, the only thing missing is feeding in the data. You can see the newest version at http://www.slowdays.org/japan/generator/ - no harm done if you try it, so feel free.

Here's the image switcher plan for Smeagol:

The real idea behind this plan is to have a browse-through menu to save space, as the current menu of the site is hungry for vertical space.

Firstly I would need to define an array that defines the list of divs (by their ids) that will be visibility-toggled through CSS (display: block/none); there will be three of these divs, each have a distinct id: "japan", "davidsylvian" and "ninehorses", for example.

The array could then be called "divArr" and thus the following:

Code: Select all

 var divArr = new Array('japan','davidsylvian','ninehorses');

The divs in question are:

Code: Select all

<a href="javascript:browseDiv();">browseDiv</a>
<div id="japan">japan</div>
<div id="davidsylvian">davidsylvian</div>
<div id="ninehorses">ninehorses</div>

There I named the function that will toggle the visibility of each layer "browseDiv".

For the sake of looping, there should be a counter, "i", which will be incremented with every click. At the beginning, it corresponds with "japan", which is the first of the length of the array:

i = 0; japan
i = 1; davidsylvian
i = 2; ninehorses

Thus, if the counter is 2 or more, it will reverted back to zero:

Code: Select all

if ( i >= divArr.length) i = 0;

The div elements of the document are then parsed by the following formula, according to the value of the counter i:

Code: Select all

document.getElementById(divArr[i]).style.display

This requires that the divs are styled to have the "display" element set to "none" (non-visible):

Code: Select all

<style type="text/css">
div#japan, div#davidsylvian, div#ninehorses
{
display: none;
}

The line that changes the visibility would then, in full, be:

Code: Select all

document.getElementById(divArr[i]).style.display = document.getElementById(divArr[i]).style.display? "block":"none"

Okay. Here's where I've gotten stuck. Not only does the javascript: part not function correctly (you need to click it two times to work in FF and three in IE) and I don't know how to logically increment and decrement the "i" counter so that only one div is displayed at a time.

Also, my if statement that would loop "i" back to 0 and start the script over seems to usually not work.

Oh! And divArr.length is in fact 3! What to do of that?

[Smeagol]

About the array length is 3 that is true, if you think about it, sylvian, japan and ninehorses, one two three!

What i do when i want to toggle things, i involve if's, the ()?true;false is alright, but it's pretty scary

Code: Select all

  int previousIndex;
  if(i - 1 < 0){ previousIndex = divArr.length - 1; }
  else { previousIndex = i-1; }
  document.getElementById(divArr[previousIndex]).style.display = "none";
  document.getElementById(divArr[i]).style.display = "block";
[/code]
About i not reverting to 0, is kinda hard to answer without looking at the whole code. Placed it in the beginning of the loop ?

[Smeagol]

Code: Select all

var i =0;
var divArr = new Array('japan','davidsylvian','ninehorses');
function toggleDiv()
{
      if(i==divArr.length){
            i=0;
      }

      var previousIndex;
      if(i == 0){
            previousIndex = divArr.length - 1;
      } else {
            previousIndex = i-1;
      }

      document.getElementById(divArr[previousIndex]).style.display = "none";
      document.getElementById(divArr[i]).style.display = "block";

      i++;
}


Maybe?

[Mortis]

Code: Select all

   $coverart = "lyrics/$band-$album.gif";
   $spacereplace = array("_", "-");
   list($coveralt,$ending) = explode(".", str_replace($spacereplace, " ",  $coverart));
   list($directory,$coveralt) = explode("/", $coveralt);
   $coveralt = ucwords($coveralt);
   $words = array('And','The','Of','Or','On','A','With','For');
   $words = implode(',', $words);
   $wordexceptions = strtolower($words);
   $coveralt = str_replace($words, $wordexceptions, $coveralt);
   echo $coveralt;


Problem is, str_replace seems to have no effect atm.

[Smeagol]

Code: Select all

   $coverart = "lyrics/$band-$album.gif";
   $spacereplace = array("_", "-");
   list($coveralt,$ending) = explode(".", str_replace($spacereplace, " ",  $coverart));
   list($directory,$coveralt) = explode("/", $coveralt);
   $coveralt = ucwords($coveralt);
   $words = array('And','The','Of','Or','On','A','With','For');
   $words = implode(',', $words);
   $wordexceptions = strtolower($words);
   $coveralt = str_replace($words, $wordexceptions, $coveralt);
   echo $coveralt;


Problem is, str_replace seems to have no effect atm.

The problem lies with the $words, you'll have a hard time finding "And,The,Of,Or..." in a string , if you want case insensitive replacement use str_ireplace()

[Mortis]

I'm still working on that word filter, but everything else is fixed now I think.

http://www.slowdays.org/japan/

All valid, working pretty much like I wanted it to Some of the lyrics are still C- quality and I'm working on upgrading them, but all in all this project is finally coming to its fruition.

[Mortis]

Arrrrgh! I tried adding new content with my injector and of course it has stopped working during the time I've not been using it.

The most peculiar thing is that I really have not edited or touched anything, it just said "so long and thanks for the fish" and fizzled off! Is that even legal?!

[Mortis]

Interestingly enough Smeagol pointed out an actual existing error in my brain-busting code, one that nevertheless worked earlier. It's very puzzling to me, it shouldn't have functioned in the first place!

Still, I've now added several new albums and replaced older ones with better versions. My interest partially stems from the awesome concert, but also because I noticed the site does very well in Google searches - with some songs, it's the first choice. I think that's great because I frankly abhor all those "SongLyrics.com" (no, don't go there!) -type scam sites with spyware and popups and cookies and bad searches and all that. That is exactly why I made the site in the first place, to offer a better alternative to people that are interested about the bands. The site still fails in several aspects but at least it doesn't hijack your computer