AdrianJ217 has asked for the wisdom of the Perl Monks concerning the following question:

Hi, the code below is a cgi file and I am having problems displaying the image and style from an external css file. The code is in lines 18-28 and I'm not sure what I am doing wrong. I would appreciate any help.

#!/usr/bin/perl -w
use strict;
use DBI;
use CGI;
use CGI::Carp('fatalsToBrowser');

my $query = new CGI;
print $query->header();
my $my_database = "TrypSnoDB";
my $localhost = "localhost";
my $dsn = "DBI:mysql:$my_database:$localhost";
my $db_user_name = "adrian";
my $db_password = "temp_pass";
my $dbh = DBI->connect("DBI:mysql:database=TrypSnoDB;host=localhost;my
+sql_socket=/private/software/mysql/mysql.sock","adrian","temp_pass", 
+{'RaiseError' => 1});

print "<html>\n";
print "<head>\n";
print "<title>Welcome to the T. Brucei snoRNA Database</title>\n";
print "<link type='text/css' rel='stylesheet' href='/public_html/style
+.css'>\n";
print "</head>\n";
print "<body>\n";
print "<h1>Trypanosomatid snoRNA Database</h1>\n";   
print "<img class='my_images' src='/public_html/tb_pic1.png'>\n";
print "</body>\n";
print "</html>\n";


if ($query->param('submit1')){
    my $orig_sno = $query->param('snorna1');
    my $family = $query->param('family1');
    my $query_type = $query->param('target_option1');
    my $target = $query->param('target_name1');
    if ($orig_sno eq "Trypanosoma brucei") {
        $orig_sno = 1;
    }
    elsif ($orig_sno eq "Leishmania major") {
        $orig_sno = 7;
    }
    elsif ($orig_sno eq "ALL") {
        $orig_sno = "1 or ST.org_id=7";
    }
    if ($family eq "ALL") {
        $family = "'C/D' or ST.family='H/ACA'";
    }
    else {
        $family = "'$family'";
    }
    if ($target ne "ALL") {
        $family = "$family and T.target_name='$target'";
    }
    my($db_query,$common_tar,$exp_ver_sno,$exp_ver_tar,$total);
    $db_query = "SELECT ST.sno_name,T.target_name,T.location,T.base_pa
+ir,SM.annotated_seq FROM sno_Table ST,sno_Modifications SM,Targets T 
+WHERE ST.sno_id=SM.sno_id and SM.mod_id=T.target_id and (ST.org_id=$o
+rig_sno) and (ST.family=$family)";
    $common_tar="and T.target_id in(SELECT T.target_id FROM sno_Table 
+ST,sno_Modifications SM,Targets T WHERE ST.sno_id=SM.sno_id and SM.mo
+d_id=T.target_id group by T.target_id having count(*)=2) order by T.l
+ocation desc";
    $exp_ver_sno="and ST.exper_ver='Y'";
    $exp_ver_tar = "and T.exp_ver='Y'";
    if ($query_type eq "snoRNAs with common targets") {
        $db_query=$db_query.$common_tar;
    }
    elsif ($query_type eq "Experimentally verified snoRNAs") {
        $db_query=$db_query.$exp_ver_sno;
    }
    elsif ($query_type eq "snoRNAs with experimentally verified target
+s") {
        $db_query=$db_query.$exp_ver_tar;
    }
    elsif ($query_type eq "ALL"){
        $db_query=$db_query;
    }    
    my $sth = $dbh->prepare($db_query);
    $sth->execute();
    my$total = $sth->rows; 
        print "<table border=1>\n
    <tr>
        <th>snoRNA</th>\n
        <th>Target Name</th>\n
        <th>Target Location</th>\n
        <th>Target Base Pair</th>\n
        <th>Annotated Sequence</th>\n
    </tr>\n";
    while (my@row = $sth->fetchrow_array()){
        my$sno_name = $row[0];
        my$tar_name = $row[1];
        my$tar_loc = $row[2];
        my$tar_bp = $row[3];
        my$annotated_seq = $row[4];
        print "<tr>\n<td>$sno_name</td><td>$tar_name</td><td>$tar_loc<
+/td><td>$tar_bp</td><td>$annotated_seq</td></tr>\n";
    }
    print "<tr>
        <th>TOTAL</th>\n
        <th>$total</th>\n
    </tr>\n";
    print "</table>";
}

[download]

Replies are listed 'Best First'.
Re: CGI and CSS
by marto (Cardinal) on Mar 04, 2014 at 12:26 UTC

    Does the webserver show that it is serving the css and image file, or does it show a 404? Are you sure the path is correct? Have you enabled your browsers developer tools to help track down what's going wrong?

    On a Perl note I'd suggest you use a template system (HTML::Template/Template) to separate your perl code from the HTML/CSS/JavaScript code. Get the static page working then populate it with your data generated by your perl code. Tutorials->Framework, Templating, and Content Management Systems->HTML::Template Tutorial.

    Update:

    print "</body>\n";
print "</html>\n";

    [download]

    You end the page then print a table. Print the whole page then close the body and html tags.

    You create variables containing database connection details and never use them.

    Validate your HTML.

    Update 2:

    You use data provided user data directly into a SQL query, which can be dangerous. See the DBI documentation on placeholders and bind variables. Also:

[reply]
[d/l]
Re: CGI and CSS
by locked_user sundialsvc4 (Abbot) on Mar 04, 2014 at 13:41 UTC

    To diagnose your immediate problem, use a debugger on your browser to enable you to see exactly what HTML the browser received and exactly what the browser did in response to it.   Also examine the web server’s access and/or error logs.   Generally speaking, content such as CSS and images should be static, served-up directly by the web server without directly involving your program, so the correct operation of the site will depend both upon your Perl programming and the web server configuration for this particular URL.

    Meanwhile, to avoid burying yourself completely in an unmarked grave of Maintenance Hell™, rewrite this program (a) to use an existing web site framework, and (b) learn how to use templates to separate the HTML presentation of your site from the logic which drives it.   A program with a design such as the one you are starting to construct here, will become a noose around your neck in no time at all.

      Thank you. I'm using chrome so I went to the Tools section and then Development Tools and it says "Failed to load resource: the server responded with a status of 404 (Not Found)". This shows up twice and underneath one is the website for the CSS file and the other is for the image, and both are the correct website. I even typed it into the address bar and it gets me to those files. I just don't understand why it's not displaying the image correctly once the cgi is called.

[reply]

        "I just don't understand why it's not displaying the image correctly"

        Clearly the path is not correct in relation to where this file is being served from. If the webserver says 404, the file you're looking for isn't available at the location you have requested. Had you changed the src/href to be the full http address to the file (which you say works) you could see your page working. If you want to make life easy for yourself error logs, debugging ....

        Take the time to learn the basics of the tools you have chosen to work with, Tutorials->CGI Programming->Ovid's CGI Course. Returning invalid HTML is also a sure fire way to confuse matters.

[reply]
Re: CGI and CSS
by McA (Priest) on Mar 04, 2014 at 12:28 UTC

    You generate wrong HTML:

    print "<link type='text/css' rel='stylesheet' href='/public_html/style
+.css'>\n";

    [download]

    You use ' as quote character for attributes but this is wrong. Do it like this:

    print qq|<link type="text/css" rel="stylesheet" href="/public_html/sty
+le.css">\n|;

    [download]

    UPDATE: Now you also know why using a templating engine isn't too bad. ;-)

    UPDATE2: Choroba pointed (Re^2: CGI and CSS) out that I'm wrong and single quotes are allowed for attributes in HTML. I was so sure to "see" the problem that I didn't verify it. That was a mistake. Look at the other comments and recommendations. They are all better than mine. Sorry.

    Regards
    McA

[reply]
[d/l]
[select]
[reply]

        Ohhhhh, very intersting. Am I so wrong? This wouldn't be the first time. I'll have a look.

        UPDATE: Yes, I am. Single quotes around attributes values are allowed.

        Thanks
        McA

[reply]

      Hi, I changed the <link> and the <img> to what you suggested, with print qq but it still doesn't work. What I get is just what is between the h1 tags and also a little square below it where the image is supposed to be

[reply]
        /public_html/style.css this might be wrong , I suspect the root of the site is in public_html/, and the web server looks in there for the files , so you should probably use /style.css
[reply]
Re: CGI and CSS
by thomas895 (Deacon) on Mar 05, 2014 at 07:36 UTC
[reply]

Back to Seekers of Perl Wisdom