Josue Daniel Bustamante - Agnostic Language Developer

Building a Simple POS System With CodeIgniter (PHP Framework)

Wed, 21 Oct 2020 23:00:00 +0000

On the latest post I made this project using just PHP and JS, but, on this post I’m gonna show you how I make the same project (A simple POS System) but this time using CodeIgniter (Yes, the PHP framework), if you want to see all the project completed or just get the code, you can find it on this GitHub repository (Just click the link).

Requirements

An IDE or Text editor, if you need some recommendation, please see Visual Studio Code (Available for Mac, Linux and Windows)
- This is just required if you want to create the project step by step or modify the files.
Composer Installed
- Yes, you also need to review the CodeIgniter Requirements
A database instance, including their user.
- You can use MySQL, PostgreSQL or any other database supported by CodeIgniter

Some Notes Before Start

You can run the project using
```
$ php spark serve
```
All the documentation for CodeIgniter 4 is available here.
All of the code for this project is available on the Github Repository.

Some screenshots

Let’s start!

.env

On this file we need to add some details on the environment that we’re working, configurations that we can update on every machine to work on that specific machine without tounching the app. So, on this file and this case we going to set 1 flag for development purposes and the details for the database. If you don’t know how to start with this file, you can copy the file called env that comes with CodeIgniter base project, name that file as .env on the root folder of your project

First, we need to set our project on development mode, so we need to add this line to our .env file.

CI_ENVIRONMENT = development

Also, we need to setup our database on this file, so, you can add this next lines and update the values with your own details.

database.default.hostname = localhost
database.default.database = pos
database.default.username = pos
database.default.password = pos
database.default.DBDriver = MySQLi

Model

On this part, we need to create the model (our database structure) and we need to update some files and create some others.

app/Database/Migrations/2020-10-21-013804_products.php

For this process we’re gonna use the CodeIgniter Migration Process. Note: On my case the file has this name, on your case, you can and maybe need to change it. The numbers on the file are a date on Timestamp and is declared as YYYY-MM-DD-HH-II-SS. If you need more information about this, see the section Migration file names.

On this case I’m gonna build my table with just 4 fields.

product_id The Primary Key (PK) for each product, Integer with maximum 5 digits.
product_name The name of the product, VARCHAR of maximum 100 characters.
product_image The name of the icon or image for each product, VARCHAR of maximum 200 characters.
product_value The value for each product, with maximum 10 digits and additional 2 decimal digits.

Here is my code for this migration file.

<?php namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class Products extends Migration {
  protected $DBGroup  = 'default';

  public function up() {
    $this->forge->addField([
      'product_id'      =>  [
        'type'            =>  'INT',
        'constraint'      =>  5,
        'unsigned'        =>  true,
        'auto_increment'  =>  true,
      ],
      'product_name'    =>  [
        'type'            =>  'VARCHAR',
        'constraint'      =>  '100',
      ],
      'product_image'   =>  [
        'type'            =>  'VARCHAR',
        'constraint'      =>  '200',
      ],
      'product_value'   =>  [
        'type'            =>  'FLOAT',
        'constraint'      =>  '10,2',
      ],
    ]);
    $this->forge->addKey('product_id', true);
    $this->forge->createTable('products');
  }
  public function down() {
    $this->forge->dropTable('products');
  }
}

app/Models/ProductsModel.php

Let’s create this file where we going to set up our Products table, on this way we can expose our table to the CodeIgniter ORM. Feel free to update the table variable to your table, the primaryKey yo your PK, and the allowedFields for your fields on the table.

<?php namespace App\Models;

use CodeIgniter\Model;

class ProductsModel extends Model {
  protected $DBGroup        = 'default';

  protected $table          = 'products';
  protected $primaryKey     = 'product_id';

  protected $returnType     = 'array';
  protected $allowedFields  = ['product_name', 'product_image', 'product_value'];

  protected $useTimestamps  = false;
}

app/Controllers/Migrate.php

This file is needed for launch the latest migrate file.

<?php namespace App\Controllers;

use CodeIgniter\Controller;

class Migrate extends Controller {
  public function index() {
    $migrate = \Config\Services::migrations();
    
    try {
      $migrate->latest();
    } catch (\Throwable $e) {
      throw new \Exception( 'Migration failed' );
    }
  }
}

After creating this file, we need to run the migration to our database. For this process, we need to run the next command into our terminal.

$ php spark migrate

Now we have our database created, updates and ready to be used into our CodeIgniter development.

Templating

Yes, We’re gonna use some files with code that we use frequently to use as templates, on this case, just the header and the footer

app/Views/templates/header.php

The only thing that is important to explain here is the <?= esc($title); ?> part. We’re escaping any character and the $title variable is comming from our Controllers.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POS - <?= esc($title); ?></title>
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>

You probably saw the link to our css on this file. You can create this file now, or wait until we can reach that point. If you want to create the file now, you can create the file: public/css/style.css.

app/Views/templates/footer.php

    <footer>
      <div class="environment">
        <p>Page rendered in {elapsed_time} seconds</p>
        <p>Environment: <?= ENVIRONMENT ?></p>
      </div>
    </footer>
  </body>
</html>

Product Controller

app/Controllers/Products.php

Here we need to create 2 paths, you can see each one as functions.

The index page of the application and also the view to list all the products.
The create page for products

<?php namespace App\Controllers;

use App\Models\ProductsModel;
use CodeIgniter\Controller;

class Products extends Controller {
  // The index page of the application and also the view to list all the products.
  public function index( $page = 'create' ) {
    // We check if the file that contains the view for this page exists
    // If not exists we launch an Exception
    if ( !is_file( APPPATH . '/Views/products/' . $page . '.php' ) ) {
      throw new \CodeIgniter\Exceptions\PageNotFoundException( $page );
    }

    // Let's create the title for this page
    // This is where we generate the title that is added on the header.php file
    $data['title']  = 'Create New Product';

    // Let's import and echo'ing the header, the view for this page and the footer
    echo view('templates/header', $data);
    echo view('products/' . $page, $data);
    echo view('templates/footer', $data);
  }

  // The create page for products
  public function create() {
    // Import the Model that we built before to use it here.
    // CodeIgniter Model importation into Controller
    $model        = new ProductsModel();

    // Validatiosn for POST data
    $validations  = [
      'product_name'  =>  'required|min_length[5]|max_length[100]',
      'product_image' =>  'required|min_length[5]|max_length[200]',
      'product_value' =>  'required|decimal',
    ];

    // Let's validate the request method is a POST request
    // and validate that all the validations are fine.
    // If two conditions are false, redirect to /products/create/
    if ($this->request->getMethod() === 'post' && $this->validate( $validations )) {
      // Insert the data into the database table
      $model->insert([
        'product_name'  =>  $this->request->getPost('product_name'),
        'product_image' =>  $this->request->getPost('product_image'),
        'product_value' =>  $this->request->getPost('product_value'),
      ]);
      // Redirect to home after successfully insert of the data
      return redirect()->to('/');
    } else {
      $data['title']  = 'Create New Product';
      echo view('templates/header', $data);
      echo view('products/create');
      echo view('templates/footer');
    }
  }
}

Product View

app/Views/products/products.php

This is nearly the same file of the last post. If you want to know more of the code please refeer to the latest post. The only changes for this file are:

Header and footer removed. The content was placed on templating files.
Variable names inside $product object.
Section changes for divs into one global section.
Selectors on javascript that match the changes on the element DOM.
Form action direction, from file to directory path.

<section class="products">
  <div class="products-list">
    <?php
      foreach ( $products as $key => $product ) { ?>
        <div class="product" data-index="<?php echo $product['product_id']; ?>" data-name="<?php echo $product['product_name']; ?>" data-value="<?php echo $product['product_value']; ?>">
          <img src="./images/<?php echo $product['product_image']; ?>" alt="<?php echo $product['product_name']; ?>">
          <p class="product-name"><?php echo $product['product_name']; ?></p>
          <p class="product-value"><?php echo $product['product_value']; ?></p>
        </div>
      <?php
      }
    ?>
  </div>
  <div class="bill">
    <div class="bill-products">
      <h2>Productos</h2>
    </div>
    <div class="bill-client">
      <form method="POST" action="/bill">
        <div class="hidden">
          <label for="products">Products</label>
          <input type="text" name="products" id="products" placeholder="Products" value="">
        </div>
        <div>
          <label for="name">Name</label>
          <input type="text" name="name" id="name" placeholder="Client Name">
        </div>
        <div>
          <label for="id">ID</label>
          <input type="text" name="id" id="id" placeholder="Client ID">
        </div>
        <div>
          <input type="submit" value="Print">
        </div>
      </form>
    </div>
  </div>
</section>

<script>
  (function() {
    let products = document.querySelectorAll('section.products > .products-list > .product');
    let billProducts = document.querySelector('section.products > div.bill > .bill-products');
    let productsInput = document.querySelector('section.products > div.bill #products');

    productsInput.value = '';
    
    products.forEach( product => {
      product.addEventListener( 'click', function( e ) {
        let index = e.srcElement.dataset.index;
        let name = e.srcElement.dataset.name;
        let value = e.srcElement.dataset.value;

        let p = document.createElement('p');
        p.innerHTML = name + ' - $' + value;
        billProducts.appendChild( p );

        if ( productsInput.value == '' ) {
          productsInput.value += index;
        } else {
          productsInput.value += ',' + index;
        }
      });
    });
  })();
</script>

app/Views/products/create.php

Page with just a form that is the starting point of creation for each file. The name and id attributes need to match the name of the elements added on validations on the Products Controller.

<section class="create-product">
  <h2>Create New Product</h2>

  <!-- This is the place to show any validation error -->
  <?= \Config\Services::validation()->listErrors(); ?>

  <form action="/products/create" method="post">
    <div class="form-control">
      <!-- This is included to control CSRF attacks. -->
      <?= csrf_field() ?>
    </div>
    <div class="form-control">
      <label for="product_name">Product Name</label>
      <input required type="text" name="product_name" id="product_name" placeholder="Product Name">
    </div>
    <div class="form-control">
      <label for="product_image">Product Image</label>
      <input required type="text" name="product_image" id="product_image" placeholder="Product Image Name">
    </div>
    <div class="form-control">
      <label for="product_value">Product Name</label>
      <input required type="text" name="product_value" id="product_value" placeholder="Product Value">
    </div>
    <div class="form-control">
      <input type="submit" name="submit" value="Create Product" />
    </div>
  </form>
</section>

Bill Controller

app/Controllers/Bills.php

Now we need to create the Controller for our Bills, on this case we don’t need to insert any data to our database, but we need to retrieve some data.

<?php namespace App\Controllers;

use App\Models\ProductsModel;
use CodeIgniter\Controller;

class Bill extends Controller {
  public function index( $page = 'bill' ) {
    // We check if the file that contains the view for this page exists
    // If not exists we launch an Exception
    if ( !is_file( APPPATH . '/Views/bills/' . $page . '.php' ) ) {
      throw new \CodeIgniter\Exceptions\PageNotFoundException( $page );
    }

    // We check if this is a POST request, otherway we send the user to the index (Products page).
    if ($this->request->getMethod() === 'post' ) {
      // Import the Model that we built before to use it here.
      // CodeIgniter Model importation into Controller
      $model  = new ProductsModel();

      // Let's format the data that we want to send to our View
      $data   = [
        // The title of the page
        'title'     =>  'Bill',
        // The details that are comming into the POST request from Products page
        'bill'      =>  [
          'client_name'   =>  $this->request->getPost('name'),
          'client_id'     =>  $this->request->getPost('id'),
          // We create an Array from the string that we're getting from the user
          'products_ids'  =>  explode( ',', $this->request->getPost('products') ),
        ],
        // Search the products on the database that the user request on their bills
        // Also, just one instance of each element
        'products'  =>  $model->find( array_unique( explode( ',', $this->request->getPost('products') ) ) ),
      ];

      // Let's import and echo'ing the header, the view for this page and the footer
      echo view('templates/header', $data);
      echo view('bills/' . $page, $data);
      echo view('templates/footer', $data);
    } else {
      return redirect()->to('/');
    }
  }
}

app/Views/bills/bill.php

This is nearly the same file of the last post. If you want to know more of the code please refeer to the latest post. The only changes for this file are:

Variable names inside $product object.
The map process for each product into the bill

<?php
  $bill['products'] = [];
  $bill['total']    = 0;
  
  // For each product into the bill that is selected by the user...
    // Search the item that contains the index into the products that comes from the database.
    // Add the product from database into the bill products for easy listing.
    // Add the price of the product to the total of the bill.
  foreach ( $bill['products_ids'] as $key => $index ) {
    $product            = array_search( $index, array_column( $products, 'product_id' ) );
    $bill['products'][] = $products[ $product ];
    $bill['total']      = $bill['total'] + $products[ $product ]['product_value'];
  }
?>
<section id="bill-print" class="bill-print">
  <div class="bill-print-header">
    <h1>Fancy Business</h1>
    <p>
      <span>Cra. 49, No. 7 Sur - 50</span>
      <span>Medellín, Antioquia</span>
    </p>
    <p>Telefono: +57 (4) 2619500</p>
    <p><?php echo date('d/m/Y H:i'); ?></p>
  </div>
  <div class="bill-print-user">
    <p class="bill-print-user-name">
      <span>Client:</span>
      <span><?php echo $bill['client_name']; ?></span>
    </p>
    <p class="bill-print-user-id">
      <span>ID:</span>
      <span><?php echo $bill['client_id']; ?></span>
    </p>
  </div>
  <div class="bill-print-products">
    <p>
      <span>Product</span>
      <span>Value</span>
    </p>
    
    <?php foreach ( $bill['products'] as $key => $product ) { ?>
      <p>
        <span><?php echo $product['product_name']; ?></span>
        <span><?php echo $product['product_value']; ?></span>
      </p>
    <?php } ?>
  </div>
  <div class="bill-print-total">
    <p>
      <span>Total:</span>
      <span><?php echo $bill['total']; ?></span>
    </p>
  </div>
</section>
<section class="bill-actions">
  <button id="print">Print</button>
  <button id="new">New</button>
</section>
<script>
  (function() {
    let printButton = document.querySelector('#print');
    let newButton = document.querySelector('#new');
    
    printButton.addEventListener( 'click', function( e ) {
      window.print();
    });
    newButton.addEventListener( 'click', function( e ) {
      window.location = '/';
    });
  })();
</script>

Home Controller (A little update)

app/Controller/Home.php

<?php namespace App\Controllers;

use App\Models\ProductsModel;
use CodeIgniter\Controller;

class Home extends BaseController {
  public function index() {
    // Import the Model that we built before to use it here.
    $model = new ProductsModel();

    // Let's format the data that we want to send to our View
    $data = [
      // Title of the page
      'title'     =>  'Products',
      // Retrieve all the products from database
      'products'  =>  $model->findAll(),
    ];

    // If products is empty or no products are created, let's throw an error asking for a new product.
    // To create a new products is needed to go to /products/create/
    // You can also can change the throw error line and replace it for the next one
      // return redirect()->to('/products/create/');
    if( empty( $data['products'] ) ) {
      throw new \CodeIgniter\Exceptions\PageNotFoundException('Cannot find products. Please create some items before.');
    }

    // Let's import and echo'ing the header, the view for this page and the footer
    echo view('templates/header', $data);
    echo view('products/products', $data);
    echo view('templates/footer', $data);
  }
}

Styling

As I mentioned before… This is nearly the same file of the last post. If you want to know more of the code please refeer to the latest post. The only changes for this file are:

Some selectors update because the DOM updates on Views
Making the form styling general for all the site instead of just one section
Adding the styles for Products Create Page

public/css/style.css

I’m gonna add this file for parts… If you want to get all the file, you can download it from the repository or go to this link directly to the file.

General Styles

body {
  color: #56514B;
  font-family: Helvetica, sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
}
body.bill {
  flex-direction: column;
}

footer {
  background-color: #56514B;
  text-align: center;
}
footer .environment {
  color: #E7E5DD;
  padding: 1.5rem 0 1.5rem;
}
footer .environment p {
  margin: 0;
  padding: 0.3rem 0;
}

Products Page Styles

section.products {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
}
section.products div.products-list {
  flex: 0 0 70%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
section.products div.products-list > div {
  background-color: #E7E5DD;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 1rem;
  position: relative;
  margin: 1rem;
  flex: 0 0 20%;
  text-align: center;
  cursor: pointer;
}
/* Solving click event bug */
section.products div.products-list > div:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
section.products div.products-list > div > img {
  max-height: 5rem;
  max-width: 5rem;
  margin-bottom: 1rem;
}
section.products div.products-list > div > p {
  margin: 0;
  padding: 0;
}

section.products div.bill {
  background-color: #E7E5DD;
  box-sizing: border-box;
  flex: 0 0 30%;
  padding: 2rem;
}
section.products div.bill > .bill-products {
  border-bottom: 1px solid #BDBBAD;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
}
section.products div.bill > .bill-products p {
  margin: 0;
}

Forms Styling

form .hidden {
  display: none;
}
form > div {
  margin-bottom: 0.5rem;
}
form label {
  display: none;
}
form input[type="text"] {
  display: block;
  background: transparent;
  border: 1px solid #BDBBAD;
  border-radius: 5px;
  box-sizing: border-box;
  color: #56514B;
  font-size: 1rem;
  padding: 0.5rem 1.5rem;
  width: 100%;
}
form input[type="submit"] {
  display: block;
  background: #56514B;
  border: 1px solid #56514B;
  border-radius: 5px;
  box-sizing: border-box;
  color: #E7E5DD;
  font-size: 1rem;
  padding: 0.5rem 1.5rem;
  transition: 0.3s ease-in-out;
  width: 100%;
}
input[type="submit"]:hover {
  background: #E7E5DD;
  border: 1px solid #56514B;
  color: #56514B;
}

Create Product Pages Styles

section.create-product {
  background-color: #E7E5DD;
  padding: 2rem;
  min-height: 100vh;
}
section.create-product h2 {
  text-align: center;
}
section.create-product form {
  margin: 2rem auto;
  max-width: 400px;
}

Bill Page Styles

section.bill-print {
  display: block;
  border: 1px solid #56514B;
  box-sizing: border-box;
  margin: 2rem auto;
  max-width: 350px;
  padding: 2rem 1.5rem;
  width: 100%;
}
section.bill-print h1 {
  margin: 0;
}
section.bill-print p {
  margin: 0;
}
section.bill-print p span {
  display: inline-block;
}
section.bill-print .bill-print-user p span:last-of-type,
section.bill-print .bill-print-products p span:last-of-type,
section.bill-print .bill-print-total p span:last-of-type {
  font-weight: bold;
  text-align: right;
  float: right;
}
section.bill-print .bill-print-products p:first-of-type {
  font-weight: bold;
}
section.bill-print .bill-print-header {
  text-align: center;
}
section.bill-print .bill-print-user {
  border-top: 1px solid #56514B;
  border-bottom: 1px solid #56514B;
  margin: 1rem 0;
  padding: 0.5rem 0;
}
section.bill-print .bill-print-total p {
  border-top: 1px solid #56514B;
  margin-top: 1rem;
  padding-top: 0.5rem;
}
section.bill-actions button {
  display: block;
  background: #56514B;
  border: 1px solid #56514B;
  border-radius: 5px;
  box-sizing: border-box;
  color: #E7E5DD;
  font-size: 1rem;
  margin: 1rem auto;
  max-width: 350px;
  padding: 0.5rem 1.5rem;
  transition: 0.3s ease-in-out;
  width: 100%;
}
section.bill-actions button:hover {
  background: #E7E5DD;
  border: 1px solid #56514B;
  color: #56514B;
}

Print Styles

@media print {
  body {
    min-height: unset;
  }
  section.bill-actions {
    display: none;
  }
}

Now all the project is completed. You can run the project using

$ php spark serve

Remember, - All of the code for this project is available on the Github Repository.

Building a Simple POS System With PHP

Fri, 14 Aug 2020 23:00:00 +0000

On this post I’m gonna show you how I make a Simple POS System with PHP and JS, if you want to see all the project completed or just get the code, you can find it on this GitHub repository (Just click the link).

Requirements

A server that support PHP, If you want to try this on your local machine, I recommend to use MAMP for Mac, MAMP for Windows or XAMPP for Linux (XAMPP is also available for Mac and Windows users).
An IDE or Text editor, if you need some recommendation, please see Visual Studio Code (Available for Mac, Linux and Windows)
- This is just required if you want to create the project step by step or modify the files.

Some screenshots

The idea

The idea for this project is to create the POS System on the most simple way, without using any database (DB) and just PHP, Javascript (JS) and CSS (and also one image). So, for this project I decided to go with this folder/files structure.

POS
├── bill.php # The file that shows the bill
├── images # Images folder for the products, (Actually just the hamburguer icon)
│   └── hamburguer.svg
├── index.php # The init file for the project, also, this is the pick page for the products
├── products.php # The file that store the products and their information
└── style.css # The stylesheet for the pages

With this structure on mind we have an idea on how we going build this project. So we gonna start with the products page, this is were we gonna save the info for each product.

Let’s start!

products.php

<?php
  $products = array(
    array( 'name' => 'Product 1', 'image' => 'hamburguer.svg', 'value' => 5000 ),
    array( 'name' => 'Product 2', 'image' => 'hamburguer.svg', 'value' => 3000, ),
    // ... More items here
    array( 'name' => 'Product 9', 'image' => 'hamburguer.svg', 'value' => 2000, ),
  );
?>

This is our flat file database for the products, on this file we create a 2 dimmensions array (one dimmension for the products and the other one for the details of the products). Each product has their name (name), a price (value) and an image name (image) that is located into /images/ folder.

* You just need to follow the structure of each line to add more items to the list.

index.php

On this page we want to have 2 sections, one where we can see the products that we have on products.php and other where we can see the selected products and where we want to proceed to print the bill. So, for this we going to create a little HTML into the PHP file.

You can get/download the image from the GitHub Repository or clicking here

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POS</title>
  </head>
  <body>
    <section class="products">
      <div class="product" data-index="0" data-name="Product 1" data-value="5000">
        <img src="./images/hamburguer.svg" alt="Product 1">
        <p class="product-name">Product 1</p>
        <p class="product-value">5000</p>
      </div>
    </section>
    <section class="bill">
      <div class="bill-products">
        <h2>Productos</h2>
      </div>
      <div class="bill-client">
        <form method="POST" action="./bill.php">
          <div class="hidden">
            <label for="products">Products</label>
            <input type="text" name="products" id="products" placeholder="Products" value="">
          </div>
          <div>
            <label for="name">Name</label>
            <input type="text" name="name" id="name" placeholder="Client Name">
          </div>
          <div>
            <label for="id">ID</label>
            <input type="text" name="id" id="id" placeholder="Client ID">
          </div>
          <div>
            <input type="submit" value="Print">
          </div>
        </form>
      </div>
    </section>
  </body>
</html>

After adding this code into your php file, save the file and go to the browser, you need to see something similar to the next screenshot.

You may think! Well, this is not dynamic, I need to add all the products from my _products.php_ file. Yeah, that is our next step, add all the products dynamically.

So, for this step we need to import or include the products.php into our index.php and that’s the easy way! Just add the following lines to the top of your index.php.

<?php
  @include_once( './products.php' );
?>

After that, we need to touch some of the HTML, precisely the section between <section class="products"> and </section>. We need to change all the HTML that is inside that tags and change for the next PHP (Spoiler: This is a PHP cycle).

<?php
  foreach ( $products as $key => $product ) { ?>
    <div class="product" data-index="<?php echo $key; ?>" data-name="<?php echo $product['name']; ?>" data-value="<?php echo $product['value']; ?>">
      <img src="./images/<?php echo $product['image']; ?>" alt="<?php echo $product['name']; ?>">
      <p class="product-name"><?php echo $product['name']; ?></p>
      <p class="product-value"><?php echo $product['value']; ?></p>
    </div>
  <?php
  }
?>

So, you’re seeing all the products now, and that’s great, but is time for style and make this pretty, isn’t it?. It’s time for CSS!

This is the last change for our index.php (for the moment). We need to import the CSS into our HTML file. Just add the next file into your HTML head tag, after the title tag.

<link rel="stylesheet" href="./style.css">

style.css

Let’s add some style for the body. Just to aggregate some general styles to our project and rewrite some default styling from the browser that we don’t need.

body {
  color: #56514B;
  font-size: 16px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  min-height: 100vh;
}

After this let’s style the products section

/* Making this section of the 70% of the page
    and giving some instructions on how the items need to be show */
section.products {
  flex: 0 0 70%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
/* Let's add some style for each product box */
section.products > div {
  background-color: #E7E5DD;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 1rem;
  position: relative;
  margin: 1rem;
  flex: 0 0 20%;
  text-align: center;
  cursor: pointer;
}
/* Solving click event bug
    This adds a layer upper the button to make sure that
    each time we click the product the JS run's on how is planed */
section.products > div:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
/* Giving maximum size for the images */
section.products > div > img {
  max-height: 5rem;
  max-width: 5rem;
  margin-bottom: 1rem;
}
/* Clearing margins and paddings from text */
section.products > div > p {
  margin: 0;
  padding: 0;
}

If you go to the browser, You need to see something like the screenshot above, now, we need to style the right size of the window, the "bill" section.

/* Making this section of the 30% of the page,
    also giving some background color
    and spacing into the box */
section.bill {
  background-color: #E7E5DD;
  box-sizing: border-box;
  flex: 0 0 30%;
  padding: 2rem;
}
/* Giving some space into the products and the form */
section.bill > .bill-products {
  border-bottom: 1px solid #BDBBAD;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
}
section.bill > .bill-products p {
  margin: 0;
}
/* Let's hide the products input,
    we don't need the user modify by hand this input */
/* _SPOILER: We going to change this value via JS_ */
section.bill form .hidden {
  display: none;
}
/* On the next lines...
    Styling the form, and their components.
    Input texts and buttons (and theis hover action) */
section.bill form > div {
  margin-bottom: 0.5rem;
}
section.bill form label {
  display: none;
}
section.bill form input[type="text"] {
  display: block;
  background: transparent;
  border: 1px solid #BDBBAD;
  border-radius: 5px;
  box-sizing: border-box;
  color: #56514B;
  font-size: 1rem;
  padding: 0.5rem 1.5rem;
  width: 100%;
}
section.bill form input[type="submit"] {
  display: block;
  background: #56514B;
  border: 1px solid #56514B;
  border-radius: 5px;
  box-sizing: border-box;
  color: #E7E5DD;
  font-size: 1rem;
  padding: 0.5rem 1.5rem;
  transition: 0.3s ease-in-out;
  width: 100%;
}
section.bill form input[type="submit"]:hover {
  background: #E7E5DD;
  border: 1px solid #56514B;
  color: #56514B;
}

The result after some styling (a.k.a. CSS): Looks better, isn’t it? Now, I know… This is plain! we need interaction on the client side. Yes! It’s time for some magic and Javascript super powers.

index.php

Let’s add some JS to our index.php, you can add this into one .js file appart or you can add this into script tag at the bottom of the HTML (before body close).

<script>
  // JS Here!
</script>

The code that we need to add is this…

// The browser runs this fuunction after reading it.
(function() {
  // We nee to instance some of the DOM content on our JS
  let products = document.querySelectorAll('section.products > .product');
  let billProducts = document.querySelector('section.bill > .bill-products');
  let productsInput = document.querySelector('section.bill #products');

  // Clearing the products input after browser loads the page
  productsInput.value = '';
  
  // For each product we ask the browser to add the product to the bill and products input 
  products.forEach( product => {
    product.addEventListener( 'click', function( e ) {
      // Getting the info from `data` attributes of the HTML object
      let index = e.srcElement.dataset.index;
      let name = e.srcElement.dataset.name;
      let value = e.srcElement.dataset.value;

      // Create a p tag with the info of the product into bill section
      let p = document.createElement('p');
      p.innerHTML = name + ' - $' + value;
      billProducts.appendChild( p );

      // Add the product id on the products input
        //  If the alue is empty, we just add the index
        //  else, we need to add a , (comma) and after that the index
      if ( productsInput.value == '' ) {
        productsInput.value += index;
      } else {
        productsInput.value += ',' + index;
      }
    });
  });
})();

Now we have our index.php ready! If you click the Print button you may see the url change to bill.php. Now we gonna make that file and finish our project.

bill.php

Now, for this page we want to have 2 sections, one for the bill (that is the content we want to print) and one for the buttons or actions for print and back to the home.

So, we need to create this file with a basic HTML structure, adding also the products.php info to it and the css. Here is the code.

<?php
  @include_once( './products.php' );
?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POS Print</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body class="bill">
    <section id="bill-print" class="bill-print">
      // This is the Bill box
    </section>
    <section class="bill-actions">
      // This is the Actions box
    </section>
  </body>
</html>

If you open that file into your browser you find is empty, but if you inspect the page you find is not, that’s because we don’t have any content yet. So first, we’re going to create the buttons.

For the buttons this is what we need: create 2 buttons, one for print and one for back to home. Add the following code into the section with the bill-action class.

<button id="print">Print</button>
<button id="new">New</button>

Now, let’s add som functionality with some JS for this buttons. As the JS on the index.php page, you can added into the file or into another file. I’m adding this into the same bill.php file into script tag.

(function() {
  let printButton = document.querySelector('#print');
  let newButton = document.querySelector('#new');
  
  printButton.addEventListener( 'click', function( e ) {
    window.print();
  });
  newButton.addEventListener( 'click', function( e ) {
    window.location = './index.php';
  });
})();

If you go to the page, You can see two buttons, with no style and placed on the top left portion of the page.

Let’s place the content to the bill? I’m going to create 4 sections into this bill (a header, a user details, a products details and a total) and all of this info I’m going to added into bill-print section.

So, for the header I’m going to add a business name, an addres, a phone and the time.

<div class="bill-print-header">
  <h1>Fancy Business</h1>
  <p>
    <span>Cra. 49, No. 7 Sur - 50</span>
    <span>Medellín, Antioquia</span>
  </p>
  <p>Telefono: +57 (4) 2619500</p>
  <p><?php echo date('d/m/Y H:i'); ?></p>
</div>

Ps: Yeah, the details of address and phone are real, this is the address and phone for Universidad EAFIT, Medellín Campus

Now, let’s add the user details under this header.

<div class="bill-print-user">
  <p class="bill-print-user-name">
    <span>Client:</span>
    <span><?php echo $_POST['name']; ?></span>
  </p>
  <p class="bill-print-user-id">
    <span>ID:</span>
    <span><?php echo $_POST['id']; ?></span>
  </p>
</div>

As you may notice I’m using here the $_POST variable, this is a Global variable that is populated when we place a POST call to any URL that is using PHP. On this project we’re sending a request POST from the form on index.php to this file. So this is why we are using this variable. JFYI: on other languajes is also present a POST variable with this data, but there you can see it with other name, under another object or with other way to access this data.

Now, Let’s add the products details of the order after the user information. But before we add this part of HTML, let’s consider this. We’re getting an array with just ID’s on the products info, this ID’s represents the position of the element on the $products array into products.php. So we need to get that info for each bill.

So, on the header, after the @include_once and before the php closing we need to add the next code.

$bill = array(
  'products'  =>  array(),
  'total'     =>  0
);

$billProducts = array_map('intval', explode(',', $_POST['products']));
foreach ( $billProducts as $key => $index ) {
  $bill['products'][] = $products[ $index ];
  $bill['total'] = $bill['total'] + $products[ $index ]['value'];
}

Here we are creating a $bill variable, on this we’re going to save each product of the bill and a total value for the bill.

After that, we’re creating an array of Integers from the products input and name it as $billProducts

And finally we’re getting the info for each of the products into $billProducts and pushing the element to the $bill['products'] array and adding the value of each item into the total ($bill['products']).

Now! let’s add the HTML/PHP after the users details

<div class="bill-print-products">
  <p>
    <span>Product</span>
    <span>Value</span>
  </p>
  
  <?php foreach ( $bill['products'] as $key => $product ) { ?>
    <p>
      <span><?php echo $product['name']; ?></span>
      <span><?php echo $product['value']; ?></span>
    </p>
  <?php } ?>
</div>

Here we are using a foreach as a cycle to add each element of the $bill['products'] into the information that we are showing to the user.

Finally let’s add the HTML for the total after the products section, on this one we are using the $bill['total'] to show the total of the bill.

<div class="bill-print-total">
  <p>
    <span>Total:</span>
    <span><?php echo $bill['total']; ?></span>
  </p>
</div>

Now, if you go to the page into your browser you can try the buttons, they’re work good. You can see something link the next screenshot, is so ugly (That’s because we don’t have any style yet).

So, let’s make the last change to this project and we are done. This is the styling process for this last part.

style.css

You may notice the buttons are at the side of the bill, but we need they are showed under the bill. So we need to add this rule. Please review if you have a class on the body of this page called bill (into your bill.php), if you don’t have it, please add it

body.bill {
  flex-direction: column;
}

Now let’s add the code for the bill, the part that we want to print

/* Giving a max width of 350px.
    Centering the content into the middle of the page.
    Giving a border to create a separation of this content
    with the others content into the page. */
section.bill-print {
  display: block;
  border: 1px solid #56514B;
  box-sizing: border-box;
  margin: 2rem auto;
  max-width: 350px;
  padding: 2rem 1.5rem;
  width: 100%;
}
/* Removing margins for h1 and p tags */
section.bill-print h1 {
  margin: 0;
}
section.bill-print p {
  margin: 0;
}
/* We want to show all the span's on the same line of the other */
section.bill-print p span {
  display: inline-block;
}
/* Giving a bold size and floating the text to the right
    to all the second spans into each p tag */
section.bill-print .bill-print-user p span:last-of-type,
section.bill-print .bill-print-products p span:last-of-type,
section.bill-print .bill-print-total p span:last-of-type {
  font-weight: bold;
  text-align: right;
  float: right;
}
/* Giving a bold size for the title of the "table" of products */
section.bill-print .bill-print-products p:first-of-type {
  font-weight: bold;
}
/* Centering all the info into the header */
section.bill-print .bill-print-header {
  text-align: center;
}
/* Creating some style to give the sensation
    of multiple boxes or different content */
section.bill-print .bill-print-user {
  border-top: 1px solid #56514B;
  border-bottom: 1px solid #56514B;
  margin: 1rem 0;
  padding: 0.5rem 0;
}
section.bill-print .bill-print-total p {
  border-top: 1px solid #56514B;
  margin-top: 1rem;
  padding-top: 0.5rem;
}

Now let’s style the buttons that we call bill-actions.

section.bill-actions button {
  display: block;
  background: #56514B;
  border: 1px solid #56514B;
  border-radius: 5px;
  box-sizing: border-box;
  color: #E7E5DD;
  font-size: 1rem;
  margin: 1rem auto;
  max-width: 350px;
  padding: 0.5rem 1.5rem;
  transition: 0.3s ease-in-out;
  width: 100%;
}
section.bill-actions button:hover {
  background: #E7E5DD;
  border: 1px solid #56514B;
  color: #56514B;
}

And finally, we don’t want to print the buttons into the bill, so, we remove that from the impression page.

@media print {
  body {
    min-height: unset;
  }
  section.bill-actions {
    display: none;
  }
}

Now you have a simple POS system.

This is how looks the bill.php page.

And this is how looks the print into a PDF file.

Remember, All of the code for this project you can fint it on the Github Repository.

Categorías en Jekyll y Github sin plugins - Linea por Linea

Mon, 12 Dec 2016 11:00:00 +0000

`_config.yml`

# Collections
# Creating the_categories collection and set the output key
# to true allowing Jekyll to generate files .html for each file
# in _the_categories folder on the permalink destination folder
collections:
  the_categories:
    output: true
    permalink: /blog/category/:name/

# Defaults
# Setting the default layout value with the layout of the 5
# step generated on all the project for the_categories
# type (collection type)
defaults:
  -
    scope:
      path: “”
      type: the_categories
    values:
      layout: category_list

`_the_categories/<filename>.md`

# Setting the slug that is used for jekyll and the
# name that we show to the user on the blog
---
slug: development
name: Development
---

`post.html`

<!-- Save all the block on the categories_content var -->
{% capture categories_content %}
    <!-- Walking through each item on page.categories (categories specified on each post) and site.the_categories (collection) -->
    {% for pcategory in page.categories %}
        {% for scategory in site.the_categories %}
            <!-- Only if the category is present on the post header is generated the html with the collection category info -->
            {% if pcategory == scategory.slug %}
                <span>
                    <a class=“label” href=“{{ scategory.url }}”>{{ scategory.name }}</a>
                </span>
            {% endif %}
        {% endfor %}
    {% endfor %}
{% endcapture %}

<!-- Showing to the user the block generated and saved on categories_content var -->
<div class=“post-categories”>
    <p>Posted in {{ categories_content }}</p>
</div>

`category_list`

<!-- Set the layout as default layout (You can use your custom layout) -->
---
layout: default
---

<!-- If site.categories has info or posts about the current page (page.slug) show info else show and error -->
{% if site.categories[page.slug] %}
    <!-- Get the posts or info from site.categories thata have the actual category based on the slug of the page -->
    {% for post in site.categories[page.slug] %}
        <!— Your themeplate for the post loop goes here —>
        <p class=“post-title”>
            <a href=“{{ post.url | prepend: site.baseurl }}”>{{ post.title }}</a>
        </p>
    {% endfor %}
{% else %}
    <p>There are no posts in this category.</p>
{% endif %}

Categorías en Jekyll y Github sin plugins

Mon, 12 Dec 2016 10:30:00 +0000

Hace unos meses atrás quise incluir las categorías en mi blog para organizar los temas y los posts. Me imagino que ya sabes que desde el núcleo de Jekyll tenemos una integración de Categorías y Etiquetas muy básica en la cual hace falta la vista y el controlador de estas.

Para lograr hacer la integración de las categorías toca recurrir a plugins o a otras formas pero el problema se presenta cuando te ves limitado a que GitHub tiene un lista de plugins para Jekyll permitidos por default.

Intentando hacerlo la primera vez y sin saber esto de la lista blanca de plugins lo logre implementar localmente con un plugin que fácilmente encontré en Github pero me encontré con el problema cuando hice el git push que no cargaba en realidad nada y es en la búsqueda de la solución a esta que me encontré con la lista blanca o de dependencias de Jekyll en Github.

Ahora en mi segunda vez tratando de lograr el objetivo de integrar las Categorías en mi blog me encontré con un post en el blog de minddust que tiene una muy buena integración si solo vas a usar una Categoría para cada post pero cuando piensas usar más de una Categoría se queda corto.

La diferencia entre usar una o multiples categorías se encuentra en el uso de la llave que se quiera usar en los posts.

category la forma singular de la palabra categoría, genera un string del valor.

# Single category
---
title: “Categorías en Jekyll y Github sin plugins”
date: 2016-12-12 11:00:00
category: "development"
---

categories la forma plural de la palabra categoría, genera un array de strings de los valores

# Multiples categories
---
title: “Categorías en Jekyll y Github sin plugins”
date: 2016-12-12 11:00:00
categories: [development, github, jekyll]
---

Para esta integración usaremos los conceptos de colecciones de Jekyll.

Editaremos el archivo _config.yml

# Collections
collections:
  the_categories:
    output: true
    permalink: /blog/category/:name/

# Defaults
defaults:
  -
    scope:
      path: ""
      type: the_categories
    values:
      layout: category_list

Crearemos en el root la carpeta _the_categories
Para cada nueva categoría que se quiera generar hay que crear un archivo markdown en la carpeta que recien creamos (El nombre de archivo debe coincidir con la llave slug del archivo)

---
slug: development
name: Development
---

Añadiremos un poco de lógica a nuestro layout post.html para agregar las etiquetas a nuestro post

{% capture categories_content %}
    {% for pcategory in page.categories %}
        {% for scategory in site.the_categories %}
            {% if pcategory == scategory.slug %}
                <span><a class="label" href="{{ scategory.url }}">{{ scategory.name }}</a></span>
            {% endif %}
        {% endfor %}
    {% endfor %}
{% endcapture %}

<div class="post-categories">
    <p>Posted in {{ categories_content }}</p>
</div>

Añadiremos un nuevo layout category_list para generar una página para cada categoría con sus posts

---
layout: default
---
{% if site.categories[page.slug] %}
    {% for post in site.categories[page.slug] %}
        <p class="post-title"><a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></p>
        <!-- Your themeplate for the post loop goes here -->
    {% endfor %}
{% else %}
    <p>There are no posts in this category.</p>
{% endif %}

Con esto ya tendremos nuestras categorías agregadas a nuestro blog en Jekyll.

Si quieres conocer sobre la lógica y el porque de cada linea de código agregada te invito a ver la continuación de este post.

Lenguajes de la Universidad

Wed, 30 Mar 2016 01:20:00 +0000

Llegue en estos días a la oficina y me encuentro con que una compañera estaba feliz por un post que Ana María Sosa, una amiga mía y compañera había escrito. Ya lo había encontrado en Facebook e incluso encontré que estaba compartido por un amigo pero no había tenido el tiempo de leerlo hasta ese momento en el que mi compañera me hizo leerlo casi que a la fuerza por las maravillas que contaba y la felicidad que notaba por aquí post.

Me senté y me dispuse a leerlo pero encontré que aunque es un muy buen post que narrado desde su experiencia e historia principal tiene mucho hilo que dar pero allí se quedo, pensé que encontraría mas en aquellas palabras pero se quedo corto. Por eso mismo pensé en yo seguirle un poco el hilo.

Antes de comenzar de con todo el tema y mi pensamiento quiero decir que me alegra mucho el avance que ha tenido Ana desde que la conocí hasta ahora que hasta lo ultimo que se es que esta comenzando a hacer ¡Comunidad en Medellín de Mujeres!, es genial poder decir que de Coderise programa del cual soy Director en la ciudad de Medellín podemos rescatar casos de éxito como ella.

Yo básicamente también puedo contar la misma historia de Ana de la Suma debido a que estudie con ella en Coderise y conocía algunas bases de JS desde aquel entonces y también pues seguí en mi camino propio estudiando mas sobre JS y otros lenguajes entonces para mi sentir esa emoción de ver un programa que sumara o hiciera una operación era nula e incluso muchas veces con ejercicios mas avanzados era la misma emoción, nula.

Es cierto que en la universidad siempre nos encontramos unos lenguajes que en realidad en el momento en el mercado no nos han de servir, pero que en cierta forma nos dan las bases para aprender otro lenguajes más. En mi caso yo me encuentro en mi universidad con Lenguajes como Java, C++ y Ruby en las materias de programación pero en las otras materias en las que nos toca programar, codificar o crear algún programa por mas simple que sea muchas veces nos vemos obligados a hacerlo en algún lenguaje como Java.

No soy muy fan de los lenguajes de este estilo pero si me he enamorado de Ruby por su sencillez a demás de que puedo usarlo en el paso a Ruby on Rails e incluso dar un paso simple a aprender Python.

Nada más el otro día me tocaba hacer un ejercicio que el profesor de una materia nos había puesto a hacer y yo sin antes ver los requisitos me lance a hacerlo en Ruby por que no me siento muy cómodo usando Java, lo que paso es que cuando lo termine y fui a enviar el ejercicio me lo pedían en otros lenguajes como Java y Python y ¡Oh sorpresa grata que me lleve!, contando con poco tiempo para enviar el ejercicio debía hacerlo en otro lenguaje. Aunque Java lo aprendi y practique menos de 4 meses atrás no me sentía cómodo usándolo y Python pues ya ni lo conocía por decirlo así por cuestiones de que la practica de este lenguaje estaba oxidada pero aún así me lance a hacerlo en Python pero no cualquiera Python 3 que era totalmente nuevo para mi. ¿La razón de mi decisión? La sintaxis es más fácil de pasar de Ruby a Python que de Ruby a Java y el resultado es que al final logre hacer el ejercicio y enviarlo a tiempo con menos tiempo en el que Java me hubiera gastado hacerlo desde 0.

Así que puedo decir que en realidad para mi en mi humilde opinion me parece que la Universidad nos da lenguajes bases para aprender otros lenguajes, la cuestión no es de que la Universidad nos de todo en bandeja de plata y salir a trabajar de una con esos lenguajes; la cuestión real es comenzar a gastar tiempo en practicar y aprender nuevos lenguajes con las bases que obtenemos en la Universidad por que en realidad lo que hace al profesional no es la enseñanza que se le da, lo que hace al profesional en realidad es la practica y el aprendizaje fuera de los lenguajes que ahora están casi que mandados a recoger.

Ahora no se si como lector te estés preguntando ¿Cual lenguaje debería escoger para comenzar a aprender y a practicar?. Yo no soy quien para decirte cual pero si tomo el trabajo de la comunidad de Desarrollo en Colombia en el mes de Febrero con su encuesta para dar a conocer como esta el trabajo en desarrollo en Colombia y de la cual quiero destacar los datos como los lenguajes más usados, mas bien pagados y los que tristemente no son tan bien pagados que incluso también comparte Ana en su blog.

Lo siguiente que quiero tocar es la historia que ella comentaba de los comentarios de sus compañeros de que les aburría la programación y eso si que lo he visto yo una y otra vez en la Universidad en la que yo estudio, eso si no esta lejos de la realidad pero firmemente creo que eso no es debido a que sean los lenguajes no competitivos o los lenguajes mas aburridos, la realidad es que muchas veces si le debemos eso tanto al estudiando como al profesor. Al estudiante por no poner de su tiempo para practicar y ser mejor y al maestro o profesor por no despertar en el estudiante la pasión por el desarrollo.

Yo le debo la pasión y el amor que le tengo al desarrollo a personas como lo son Julian Duque, Camilo Aguilar, Catherine Lopez y Adrian Estrada que si se toman su papel de maestros y creadores de comunidad muy enserio compartiendo su pasión y es que de ahi viene también el éxito de comunidades como MedellinJS y Colombia Dev que son dirigidas por personas como ellas.