Styling PHP very proving difficult

Question

I have a form where a user will type in there Reference Number to check the status of their in enquiry:

Example: A user will navigate to this webpage: http://www.cdreporting.co.uk/ajax/search2.html

They then type in their Reference: "1" or "2" , "3" etc...whatever number they were allocated which then displays a brief record.

but i'm unable to format the data that is displayed. I wish to have the reference number a diferrent colour, wish to create line breaks, underline emails addresses. but i'm unsure how to do this with my current .php code

How do I edit each field such as email? so i can change font etc..? with only the "Reference" field stated in the php code:

   <?php
   $q=$_GET["q"];

  $xmlDoc = new DOMDocument();
  $xmlDoc->load("cd_catalog.xml");

  $x=$xmlDoc->getElementsByTagName('Reference');

  for ($i=0; $i<=$x->length-1; $i++) {
  //Process only element nodes
  if ($x->item($i)->nodeType==1) {
  if ($x->item($i)->childNodes->item(0)->nodeValue == $q) {
  $y=($x->item($i)->parentNode);
 }
 }
 }

$cd=($y->childNodes);

for ($i=0;$i<$cd->length;$i++) {
//Process only element nodes
if ($cd->item($i)->nodeType==1) {
echo("<b>" . $cd->item($i)->nodeName . ":</b> ");
echo($cd->item($i)->childNodes->item(0)->nodeValue);
echo("<br>");
}
}
?> 

The fields from this code currenty display:

Reporter: Test1 REFERENCE: 1 Submission: 2014-11-08T00:00:00 Status: Pending Officer: Name1 Email: test@email.com Telephone: 0113 1234

Also i'm notsure why REFERENCE is UPPERCASE either, I know we have to your attribute but i'm unsure on how to apply them to the php code as i dont know how to reference each individual field.

---

Big thank for taking the time to help.

I have a XML File: http://www.cdreporting.co.uk/ajax/cd_catalog.xml which the php refers to.

When someone time enters a reference number data from the XML is displayed. on the XML there is a email field which i would like to display differently i.e change of font colour. how would I do this within the php code I have? I know I can use CSS but where in my php code would you apply it to the email field?.

basically styling each field from my xml

---

Wow Manys thank yet again...unfortunatly this is very confusing for me. leaving a CSS Styling aside and going back to my php code.

is possible for the php to display each field within the php e.g.

if ($cd->item($i)->nodeType==1) {
echo("<b>" . $cd->item($i)->nodeName . ":</b> ");
if ($cd->item($i)->nodeName == "**REFERENCE**") {
    echo '<span class="reference">'.$cd->item($i)->childNodes->item(0)->nodeValue. '</span>';
} else {
    echo($cd->item($i)->childNodes->item(0)->nodeValue);
}
echo("<br>");

if ($cd->item($i)->nodeType==1) {
echo("<b>" . $cd->item($i)->nodeName . ":</b> ");
if ($cd->item($i)->nodeName == "**Reporter**") {
    echo '<span class="reference">'.$cd->item($i)->childNodes->item(0)->nodeValue. '</span>';
} else {
    echo($cd->item($i)->childNodes->item(0)->nodeValue);
}
echo("<br>");

if ($cd->item($i)->nodeType==1) {
echo("<b>" . $cd->item($i)->nodeName . ":</b> ");
if ($cd->item($i)->nodeName == "**Submission**") {
    echo '<span class="reference">'.$cd->item($i)->childNodes->item(0)->nodeValue. '</span>';
} else {
    echo($cd->item($i)->childNodes->item(0)->nodeValue);
}
echo("<br>");

if ($cd->item($i)->nodeType==1) {
echo("<b>" . $cd->item($i)->nodeName . ":</b> ");
if ($cd->item($i)->nodeName == "**Email**") {
    echo '<span class="reference">'.$cd->item($i)->childNodes->item(0)->nodeValue. '</span>';
} else {
    echo($cd->item($i)->childNodes->item(0)->nodeValue);
}
echo("<br>");

does the above look right? can i edit each field to change font or add a line break?

Answer 1

You will need some CSS, similar to this:

.reference {color: blue;}

Then revise your PHP to check for the node name being "REFERENCE" and emit the necessary markup to invoke the CSS:

//Process only element nodes
if ($cd->item($i)->nodeType==1) {
echo("<b>" . $cd->item($i)->nodeName . ":</b> ");
if ($cd->item($i)->nodeName == "REFERENCE") {
    echo '<span class="reference">'.$cd->item($i)->childNodes->item(0)->nodeValue. '</span>';
} else {
    echo($cd->item($i)->childNodes->item(0)->nodeValue);
}
echo("<br>");

You can style the other fields (nodes) in the same way, including line breaks and other formatting. Look into PHP's switch operator if you want to style a lot of them.

As far as "REFERENCE" being uppercase, your link shows it's in the XML that way. You can use another if statement to emit something like "Reference" if necessary, or correct what's getting stored in the XML.

Now that I've thought about this a bit, if you name your CSS styles the same as the XML node names, you can style every item pretty easily. You make the styles alike or different depending upon how you write your CSS.

   //Process only element nodes
    if ($cd->item($i)->nodeType==1) {
      $class = strtolower($cd->item($i)->nodeName);
      echo("<b>" . $cd->item($i)->nodeName . ":</b> ");
      echo "<span class=\"$class\">".$cd->item($i)->childNodes->item(0)->nodeValue. '</span>';
      echo("<br>");
   }

This takes the node name, forces it to lowercase using strtolower and then assigns it to $class. The <span> element then uses $class as the class name. Whatever you've written in the CSS for that class name will be applied as the style.

You can apply the same idea to style the name names, but you'll need different class names. So, something like: <span class=\"nn-$class\">" would apply the class nn-reference to the node name for reference.

In some cases you may want to use <div> rather than <span> for block-level formatting. You'll have to decide and modify your code accordingly.

Note: I haven't tested the code above; I'd need the XML to do that. There may be small syntax errors, but the idea is correct.