Creating and App using PHP, Mysql, and jquery and i am stuck - php

Question

I would like to create an app that writes a basic music chord chart to a database and pulls it out onto a different page.
I know the basic to intermediate concepts of inserting and returning data to a database but I am having trouble on this one.
In a textarea I would like the member to be able to insert into the database like so...
{C}I`ve {F}been {G}though {A}the {C}desert
The Letters inside the brackets being the chords and the words outside of the brackets being the lyrics.
This is not the problem though, I know how to do that.
The problem is, I would like the {Chords} to be placed directly above the letter they are preceding while also giving them a class that would allow me to change the font color, size, and weight when rendered on page.
I have been thinking that there is a way to do this with tables, str_replace, and strTok but I cannot figure it out.
Any suggestions?

Answer 1

use regular expression to extract content of {} into an array
str_replace {} to blank (space), in a way you will have plain text except chords letter
use html css, put Chords letters in span tag.change css of span, so it position above the letter. i.e. span position is absolute and parent container position to relative.
if you want to save those chords into table , you can as its already in array
Hope this helps, best of luck

Answer 2

Working with HTML tables can be a real pain. Here's how you could do the HTML part of it without using tables:
<style>
.phrase { display: inline-block; }
.chord { font-size: 20px; }
.lyrics { font-size: 12px; margin-right: 1em; }
</style>
<div class="phrase">
<span class="chord">C</span><br>
<span class="lyrics">I've</span>
</div>
And with a little PHP mixed in:
<?php
$phrases = array(
array('chord' => 'C', 'lyrics' => "I've"),
array('chord' => 'F', 'lyrics' => 'been'),
);
?>
<?php foreach($phrases as $phrase): ?>
<div class="phrase">
<span class="chord"><?php echo $phrase['chord']; ?></span><br>
<span class="lyrics"><?php echo $phrase['lyrics']; ?></span>
</div>
<?php endforeach; ?>
As far as saving/retrieving from the database. You could do some fancy regular expression/string replace thing, but that's probably more work than you really need to do. Just keep it simple and create a structure like this:
Songs Example
--------- -----------
id (PK) 1234
song_title I've been through the desert
Phrases
-----------
id (PK) 1
song_id (FK) 1234
chord C
lyrics I've
order 1
You'll have a lot more rows in your Phrases table, but it will be a lot easier to work with.
Also, as a final, biased, piece of advice: check into Ruby on Rails. I started out learning PHP and wished I would have learned Ruby on Rails earlier in my career. There are a lot of ways that Ruby on Rails makes it easy for a beginner to get started programming.