Creating an EC site where you can search for products

Can Mojolicious and Perl really meet the functionality and development efficiency needed to start up a business?

First of all, why not create a simple web application called an EC site that allows you to register products, display product lists, and search for products?

You can experience developing a product search app using Mojolicious and Perl using your Windows or Mac OS.

It takes about 30 minutes to 1 hour to launch the Web application for the first time.

Let's make a simple EC site. Create a site where you can register products, update and delete information, and search for products. Creating an EC site can be applied even when creating other types of websites.

You can create your own web shop by taking pictures of things around you. What kind of shopping site can I make?

Let's start creating an EC site right away. This page explains how to set up a website for product search in the development environment and display it.

Build a web development environment on Windows or Build a web development environment on macOS > It is assumed that you are doing it.

For Windows, start msys2. For macOS, launch the terminal.

Web application template creation

The first task when you first start creating an EC site is to create a template for your web application. Mojolicious provides commands for creating templates.

Create the name of your web application according to the following rules. The first letter is an uppercase alphabet, and the second and subsequent letters are lowercase. At Mojolicious startups, I would like to name it "My shop" which means "my shop".

To create a template for your web application, use the following command. You can decide the part of the name by yourself.

Try running the following command from the command line and pressing Enter.

#Create a web application template with the name "Myshop"
mojo generate app Myshop

The generated directories and files are output as shown below.

  [mkdir] / home / kimoto / labo / tmp / myshop / script
  [write] / home / kimoto / labo / tmp / myshop / script / myshop
  [chmod] / home / kimoto / labo / tmp / myshop / script / myshop 744
  [mkdir] / home / kimoto / labo / tmp / myshop / lib
  [write] /home/kimoto/labo/tmp/myshop/lib/Myshop.pm
  [exist] / home / kimoto / labo / tmp / myshop
  [write] /home/kimoto/labo/tmp/myshop/myshop.conf
  [mkdir] / home / kimoto / labo / tmp / myshop / lib / Myshop / Controller
  [write] /home/kimoto/labo/tmp/myshop/lib/Myshop/Controller/Example.pm
  [mkdir] / home / kimoto / labo / tmp / myshop / t
  [write] /home/kimoto/labo/tmp/myshop/t/basic.t
  [mkdir] / home / kimoto / labo / tmp / myshop / public
  [write] /home/kimoto/labo/tmp/myshop/public/index.html
  [mkdir] / home / kimoto / labo / tmp / myshop / templates / layouts
  [write] /home/kimoto/labo/tmp/myshop/templates/layouts/default.html.ep
  [mkdir] / home / kimoto / labo / tmp / myshop / templates / example
  [write] /home/kimoto/labo/tmp/myshop/templates/example/welcome.html.ep

Note that the web application name was capitalized at the beginning, but the directory name is lowercase, such as "myshop".

Launching a web application

Let's launch the web application right away.

First of all, go to the web application directory "myshop".

cd myshop

Now let's use the ls command to display the file. Use the -l option for a more detailed view.

ls -l

It will be displayed in the following manner.

drwxrwxr-x 3 kimoto kimoto 4096 Nov 21 08:21 lib
-rw-rw-r-- 1 kimoto kimoto 62 Nov 21 08:21 myshop.conf
drwxrwxr-x 2 kimoto kimoto 4096 Nov 21 08:21 public
drwxrwxr-x 2 kimoto kimoto 4096 Nov 21 08:21 script
drwxrwxr-x 2 kimoto kimoto 4096 Nov 21 08:21 t
drwxrwxr-x 4 kimoto kimoto 4096 Nov 21 08:21 templates

I will briefly explain each directory and file.

lib --module directory

It is used to store Perl modules that make up the Web application in lib. A module is a component that makes up a program.

myshop.conf --configuration file

myshop.conf is a web application configuration file.

public --public file

Public is used to store static files such as images, CSS and JavaScript.

script

Contains Perl scripts for launching web applications.

t

"T" is a directory for storing web application tests.

templates

"Templates" is used to store the template file of the web application. To change the screen you see from your browser, modify the files in it.

Launching a web application

Let's start the web application. Use Mojolicious's "morbo" command to launch a web application. In the argument of morbo, specify the startup script of the Web application stored in the script directory.

morbo script / myshop

The following is displayed and the web application is launched.

Server available at http://127.0.0.1:3000

Launch IE, Chrome, Firefox or Safari, enter the URL displayed above in the URL field, and press Enter. You can copy the characters on the command line by left-clicking and dragging.

When the following characters are displayed on the screen, the web application has been successfully launched.

Welcome to the Mojolicious real-time web framework!

Congratulations. You are now at the starting line of web development!

From here, we will grow the EC site by adding images of products.

Perl Web App Development Tutorial