Mojolicious Tutorial

Use static files such as CSS with Mojolicious

This time, let's create a web application that uses static files. Place the static files in a directory called public in the directory where the scripts are located. Create a directory called css and place a file called common.css in it. 

#Directory structure
app.cgi
public / css / common.css

Below is the script that loaded the CSS. You can see that the heading is red.

I'm loading CSS using the stylesheet function. 

#! / usr / bin / perl

Setting the library path to load #Mojolicious
use FindBin;
use lib "$FindBin::Bin / lib";

Using #Mojolicious::Lite
use Mojolicious::Lite;

use utf8;

# DBD::SQLite version
use DBD::SQLite;
my $sqlite_unicode
  = $DBD::SQLite::VERSION> 1.26
  ?'sqlite_unicode'
  :'unicode';

#Module for database
use DBI;

#Connect to database
my $database = app->home->rel_file('app.db');
my $dbh = DBI->connect(
  "dbi: SQLite: dbname = $database",
  undef,
  undef,
  {RaiseError => 1, PrintError => 0, AutoCommit => 1,
  $sqlite_unicode => 1}
);

#Create table
$dbh->do(<< "EOS");
create table if not exists entry (
  id INTEGER PRIMARY KEY, id INTEGER PRIMARY KEY,
  message message
);
EOS

# top page
get'/' => sub {
  my $self = shift;

  my $sth = $dbh->prepare(<< "EOS");
select message from entry order by id desc;
EOS

  $sth->execute;

  my $rows = [];
  while (my $row = $sth->fetchrow_hashref) {
    push @$rows, $row;
  }

  $self->render(rows => $rows);
} =>'index';

#Data registration
post'/ register' => sub {
  my $self = shift;

  my $param = $self->req->params->to_hash;
  my $message = $param->{message} ||'';

  if ($message) {
    my $sth = $dbh->prepare(<< "EOS");
insert into entry (message) values ​​(?);
EOS
 
    $sth->execute($message);
  }
    
  $self->redirect_to('/');
};;

#Start application
app->start;

__DATA__

@@index.html.ep
<html>
  <head>
    <meta http-equiv = "Content-type" content = "text / html; charset = UTF-8">
    <%= stylesheet'/css/common.css'%>
    <title> Message board with just one word </title>
  </head>
  
  <h1> Message board with just one word </h1>
  <body>
    <form method = "post" action = "<%= url_for'/ register'%>">
      <div> message <input type = "text" name = "message"> </div>
      <div> <input type = "submit" value = "submit"> </div>
    </form>
    <div>
      %foreach my $row (@$rows) {
        <div> <%= $row->{message}%> </div>
        <hr>
      %}
    </div>
  </body>
</html>

(Reference) FindBin

Using the while statement, we are fetching rows from the database table line by line.

Performance issues

When testing in a local environment, the built-in web server dispatches static files such as CSS so there are no performance issues. On the other hand, Sakura's rental server uses a protocol called CGI to start web applications. A protocol called CGI launches one process for one access. The process of starting a process is very time consuming, so dispatching static files with CGI will result in noticeable performance degradation.

Can you solve this problem? I can do it. Use an Apache module called mod_rewrite to have Apache dispatch instead when a static file is about to be launched as CGI.

To do this, use a file called .htaccess. First on Windows 

htaccess.txt

Please prepare the file. Next, write the rules for mod_rewrite. 

RewriteEngine on
RewriteRule ^ (. *) / ([^ /] +). Cgi / (. *) \. ([0-9a-zA-Z] +) $$1 / public / $3. $4 [L]

This is a setting that considers files with extensions such as .css and .js as static files and dispatches static files under public to Apache.

Put this file under www of Sakura rental server 

.htaccess

Please change the file name to and place it. This prevented a significant performance drop when using static files.

You can see that the CSS is applied and the heading is red. Perl is a very good language that makes it very easy for modern web frameworks to run on Sakura's rental server Lite Plan.

Associated Information

Perl Club