We were so busy preparing that I had to put off writing on this blog, hoping that once we get settled in I can go back to this. But nothing could have prepared us for what will happen next.

Without going into details, we had 2 house transfers, my wife took a bunch of exams, I did some interviews, lots of travels, 2 championships, sports fests, social events, and more social events. We were never really ready for all that but hey, we just soaked it all in and managed!

My wife passed all her exams and has been a certified UK RN for almost a year now. While I on the other hand continued working part-time for a company in New Zealand.  I also got lucky and passed all interviews/exams for a full-time scholarship from UK’s Department for Education. My course is about to end in a month’s time and along with it a possible job alignment right away.

While all that is happening, I received the best news I have ever received in my life. We now have a baby on the way!

Who knew all of these were possible in such a short time? Everything happened so fast but none of that would have happened if we didn’t have the courage to leave our somewhat comfy life at home.  Looking back we wouldn’t have done it any other way. As Steve Jobs once said, “You can only connect the dots looking back. So you have to trust that the dots will somehow connect in your future”. 

This is only our first step and it certainly won’t be our last. Looking to connect more dots next year especially now that we planted our feet firmly here in the UK.

A water bottle at the store cost $1.
The same bottle at a hotel is $3.
At an airport $5.

Same bottle, same brand. The only thing that changed is the place.

If ever you feel unappreciated, worthless, or undervalued remember that each place gives a different value to the same things.

The post 2022, the year we connected some dots appeared first on Chief of Stack.

Here’s the GitHub repo for all the code below, you can clone it for easier deployment. https://github.com/chiefofstack/docker-boilerplate

What is Docker and what are we going to create anyway?

“Docker is a tool designed to make it easier to create, deploy, and run applications by using containers. Containers allow a developer to package up an application with all of the parts it needs, such as libraries and other dependencies, and ship it all out as one package.”
– opensource.com

In a nutshell, we can think of Docker as a lightweight virtual machine that can be easily deployed across any environment together with all the configurations. This guarantees that your application will run precisely how it’s intended whether it is in production, staging or in a development environment.

That’s it, we will create service containers for our entire stack. Let’s get started!

Step 1. Install Docker Desktop

If you are a Windows user, download and install Docker for Windows using this link. Docker Desktop has a built in tool called docker-compose which we will utilize to link our services/containers together.

“Compose is a tool for defining and running multi-container Docker applications. With Compose, you use a YAML file to configure your application’s services. Then, with a single command, you create and start all the services from your configuration.”
– docker.com

Note that you need WSL 2 configured on your Windows machine before you can install this app.

Step 2:  Create individual containers for each of our services

Cd into your project directory and run the following commands in your terminal (for this example I used /home/myuser/Sites/awesomeproject.com). these are basically all the files/folders that we need:

$ touch docker-compose.yml
$ touch Dockerfile
$ mkdir src
$ mkdir mysql
$ mkdir nginx
$ touch nginx/default.conf

Your file structure should look like this.

Edit docker-compose.yml and define our networks

version: '3'
networks:
    laravel: 

Next we define the services we will use for our stack. For NGINX add the following code, this will make the server accessible through port 1010. We also mapped the configuration file to default.conf file found in our nginx folder.:

services:
    nginx:
        image: nginx:stable-alpine
        container_name: nginx_awesomeproject.com
        ports:
            - "1010:80"
        volumes:
            - ./src:/var/www/html
            - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
        depends_on:
            - php
            - mysql
            - phpmyadmin
        networks:
            - laravel

Then edit nginx/default.conf and add the following code:

server {
    listen 80;
    index index.php index.html;
    server_name localhost;
    error_log /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /var/www/html/public;
    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }
    location ~ \.php$ {
        try_files $uri = 404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass php:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
}

For PHP edit docker-composer.yml again and add the following code. Like the NGINX service above, we prepend the service name php_ for our container_name, used a unique port 1000 so it doesn’t interfere with other local ports in our system and linked it to our container using the ‘laravel’ network. We also added a custom docker file ‘Dockerfile’:

   php:
        build:
            context: .
            dockerfile: Dockerfile
        container_name: php_awesomeproject.com
        volumes:
            - ./src:/var/www/html
        ports:
            - "1000:9000"
        networks:
            - laravel

Edit Dockerfile and add the following code, this will install php: 7.4-fpm-alpine and also install php extensions.

FROM php:7.4-fpm-alpine
RUN docker-php-ext-install pdo pdo_mysql

For MySQL add the following to docker-composer.yml. Here we defined the MySQL credentials that we will use in our Laravel installation. And just like with the previous two service, we linked them up using the “laravel” network

    mysql:
        image: mysql:5.7.22
        container_name: mysql_awesomeproject.com
        restart: unless-stopped
        tty: true
        ports: 
            - "1306:3306"
        volumes:
            - ./mysql_awesomeproject.com:/var/lib/mysql
        environment:
            MYSQL_DATABASE: homestead
            MYSQL_USER: homestead
            MYSQL_PASSWORD: secret
            MYSQL_ROOT_PASSWORD: secret
            SERVICE_TAGS: dev
            SERVICE_NAME: mysql
        networks:
            - laravel

There you go, if all you want is a basic LEMP stack you can skip to the next step. But in order to make our dev environment even more complete I recommend you go ahead and install the following tools.

We will configure Artisan, the command-line interface included with Laravel. It provides a number of helpful commands for your use while developing your application.:

    artisan:
        build:
            context: .
            dockerfile: Dockerfile
        container_name: artisan_awesomeproject.com
        volumes:
            - ./src:/var/www/html
        depends_on:
            - mysql
        working_dir: /var/www/html
        entrypoint: ['/var/www/html/artisan']
        networks:
            - laravel

We will add Composer, a dependency manager for PHP:

    composer:
        image: composer:latest
        container_name: composer_awesomeproject.com
        volumes:
            - ./src:/var/www/html
        working_dir: /var/www/html
        depends_on:
            - php
        networks:
            - laravel

Next we add Node Package Manager. NPM is a package manager for JavaScript.

    npm:
        image: node:13.7
        container_name: npm_awesomeproject.com
        volumes:
            - ./src:/var/www/html
        working_dir: /var/www/html
        entrypoint: ['npm']
        networks:
            - laravel

I also love to use PHPMyAdmin, a free and open source administration tool for MySQL and MariaDB.

    phpmyadmin:
        image: phpmyadmin/phpmyadmin
        container_name: phpmyadmin_awesomeproject.com
        restart: always
        depends_on:
            - mysql
        ports:
            - 1011:80
        environment:
            PMA_HOST: mysql
            PMA_USER: root
            PMA_PASSWORD: secret            
            PMA_ARBITRARY: 1
        networks:
            - laravel

Your docker-compose.yml file should look like this. 

With this file we were able to link our containers using the network “laravel”, added volumes to each of our containers and defined the images to be used when we run it later. Those images are available from the Docker library. We were also able to install tools necessary for a better Laravel development experience.

Step 3: Run the containers and access it locally 

In your terminal run the following in your project folder, this will build and run the containers all in one go. Note that Artisan will fail to run but we will solve that on the next step:

~ docker-compose up -d --build

To test, run this command to list all running containers:

~ docker ps/

You can then check http://localhost:1010 to see if the NGINX server is properly running, right now we don’t have a placeholder index.html there so it will naturally return a 404 error

To be able to see the database go to http://localhost:1011, where you will see PHPMyAdmin

You can connect to mysql through the terminal as well with this code:

~ docker-compose exec mysql mysql -u root -p

Lastly, you can take the containers down using the following commands:

~ docker-compose down

Final Step: Install Laravel and test the tools

If you’ve gone this far you would’ve encountered an error when we ran the artisan container earlier. It’s because we do not have Laravel installed in the /src folder yet. We will do that now,  cd into your /src folder and run the following composer command:

~ composer create-project laravel/laravel .

Configure the .env file to match the MySQL credentials we defined earlier in docker-compose.yml. Your .env file should look like this.

To install a Laravel package using Composer run the following command (we’ll install Socialite for this example):

~ docker-compose run --rm composer require laravel/socialite

Let’s now test how to compile assets:

~ docker-compose run -rm npm run dev

Let’s test Artisan by issuing a migrate command:

~ docker-compose run -rm artisan migrate

Go back to your browser to test the Laravel installation:

Bonus Step:

I edited my Linux .bashrc file and added “dcr” as an alias for “docker-compose run -rm” command.

This will make it easier to run the tools using the following shorthand “dcr npm run dev”, “dcr artisan migrate”, “dcr composer install”. 

SOURCES:
https://opensource.com/resources/what-docker
https://docs.docker.com/compose/

The post Easily create a local Laravel development environment with Docker in Windows appeared first on Chief of Stack.

We are going to build a basic AJAX CRUD app from scratch using only PHP, MySQL and jQuery AJAX. CRUD is an acronym for Create, Read, Update, Delete. Basic operations that are at the heart of all web apps.

We will use Bootstrap for the layout and utilize other jQuery plugins for the UI.

But first, the file structure.

/db – The directory that has all the server and database related files 

1. env.php – environment settings for database, server and miscellaneous display options
2. generate-db.php – creates a database based on the details set in the env. file
3. create-table.php -creates a table based on the details set in the env. file
4. connect-db.php – global include for databases connection

/api – The directory that has all endpoint related files 

1. create.php – all the code and mySQL statements for inserting records
2. delete.php – all the code and mySQL statements  for deleting records
3. index.php – all the code and mySQL statements  for showing rows based on the current page
4. update.php – all the code and mySQL statements  for updating records

/js/index.js – The file that handles all page events 

1. displayBookList() – displays the initial list of all books with pagination
2. displayPageEntries() – displays books for the current page
3. refreshList(data) –  universal function to refresh the content of the table, takes in data.
4. View book – has all the code to display a record
5. Create book – code to add a new record
6. Edit book  – all the code to fill in the edit form with current data
7. Update book – code to update a record

 /index.php – Is the main file that contains all elements, our app will use modal windows to display the forms. 

Let’s start.

Step 1: Take care of the database. These files are for global use but create-table.php and generate-db.php are used only once.

.env.php 

<?php
// Database info
$server = "localhost";
$user = "root";
$pass = "";
$db_name = "awesomedb";
$table_name = "books";

// Server URL
$url = "http://localhost/";

$display_rows = 10;

?>

generate-db.php 

<?php
include_once("env.php");

// Create connection
$connection = new mysqli($server, $user, $pass);

// Check connection
if ($connection->connect_error) {
    die("ERROR: Could not connect " . $connection->connect_error);
}

// Create new database
$sql = "CREATE DATABASE `$db_name`";

if($connection->query($sql) === TRUE){
    echo "Database created successfully";
} else {
    echo "ERROR: Unable to execute $sql. " . $connection->error;
}

// Close connection
$connection->close();

?>

create-table.php 

<?php
include_once("connect-db.php");

// Create new table
$sql = "CREATE TABLE `$table_name` (
            id INT(10) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
            title VARCHAR(191) NOT NULL,
            author VARCHAR(191) NOT NULL,
            published_date DATE,
            last_modified TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
            status ENUM('active', 'pending', 'deleted')
        )";

if($connection->query($sql) === TRUE){
    echo "Table '".$table_name."' created successfully";
} else {
    echo "Error creating table: " . $connection->error;
}
 
// Close connection
$connection->close();

?>

connect-db.php 

<?php
include_once("env.php");

// Create connection
$connection = new mysqli($server, $user, $pass, $db_name);

// Check connection
if ($connection->connect_error) {
    die("ERROR: Could not connect " . $connection->connect_error);
}
 

?>

Step 2: Prepare the endpoints. These files run the mySQL queries for the operations. This is where the magic actually happens.

create.php 

<?php
require_once('../db/connect-db.php');

// Add new record
$sql = "INSERT INTO `$table_name` ( `title`, `author`, `published_date`) VALUES ( '".$_POST['title']."', '".$_POST['author']."', '".$_POST['published_date']."')";
$result = $connection->query($sql);

// Return value
$sql = "SELECT * FROM $table_name ORDER BY id DESC LIMIT 1";
$result = $connection->query($sql);
$data = $result->fetch_assoc();
echo json_encode($data);
?>

index.php 

<?php
require_once('../db/connect-db.php');
 
$page = (isset($_GET["page"])) ? $_GET["page"] : 1;
$start_from = ($page-1) * $display_rows;

// Get all rows for selected page
$sql = "SELECT * FROM $table_name ORDER BY id DESC LIMIT $start_from, $display_rows";
$result = $connection->query($sql);
while($row = $result->fetch_assoc()){
    $json[] = $row;
}
$data['data'] = $json;

// Get total count of all books
$sql = "SELECT COUNT(*) AS total FROM $table_name";
$result = $connection->query($sql);
$values = mysqli_fetch_assoc($result);
$data['total'] = $values['total'];

// Return books
echo json_encode($data);
?>

update.php 

<?php
require_once('../db/connect-db.php');

// Update record
$sql = "UPDATE `$table_name` SET `title` = '".$_POST['title']."', `author` = '".$_POST['author']."', `published_date` = '".$_POST['published_date']."' WHERE `id` = ".$_POST['id']."";
$result = $connection->query($sql);

// Return value
$sql = "SELECT * FROM $table_name WHERE `id` = '".$_POST['id']."'";
$result = $connection->query($sql);
$data = $result->fetch_assoc();
echo json_encode($data);
?>

delete.php 

<?php
require_once('../db/connect-db.php');
$id  = $_POST["id"];

// Delete record
$sql = "DELETE FROM $table_name WHERE id = '".$id."'";

if($connection->query($sql) === TRUE){
    echo json_encode([$id]);
} else {
    echo "Error deleting record " . $connection->error;
}

// Close connection
$connection->close(); 
?>

Step 3: Design the user interface. Page elements like lists, pagination, buttons and modal windows allows for user interaction. We used a few jQuery plugins to improve  the UI like twbsPagination, bootstrap-validator, jQueryUI and toast to display notifications 

index.php 

<?php require_once("db/env.php"); ?>
<!doctype html>
<html lang="en">
    <head>
        <!-- Meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

        <!-- JS -->
        <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.2/jquery.twbsPagination.min.js" integrity="sha512-frFP3ZxLshB4CErXkPVEXnd5ingvYYtYhE5qllGdZmcOlRKNEPbufyupfdSTNmoF5ICaQNO6SenXzOZvoGkiIA==" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js"></script>
	    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
        <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">

        <!-- Custom JS  -->
        <script type="text/javascript">
            var url = "<?php echo $url; ?>";
            var display_rows = "<?php echo $display_rows; ?>";

            $(function(){
                $("#published_date").datepicker({ dateFormat: 'yy-mm-dd' });
                $("#published_date_edit").datepicker({ dateFormat: 'yy-mm-dd' });
            });
        </script>

        <!-- API JS files -->
        <script src="js/index.js"></script>

        <title>Trial Project for Worker Bee TV - Submitted by Jay Acab chiefofstack.com </title>
    </head>
    <body>
        <div class="container">
            <div class="row mt-4">
    		    <div class="col-lg-12">
    		        <div class="float-left">
    		            <h2>Books</h2>
    		        </div>
    		        <div class="float-right">
        				<button type="button" class="btn btn-success" data-toggle="modal" data-target="#create-book">
        					Add New Book
        				</button>
    		        </div>
    		    </div>
    		</div>

    		<table class="table table-bordered table-striped text-muted text-center mt-3">
    			<thead>
    			    <tr>
        				<th>Date Published</th>
        				<th>Author name</th>
                        <th>Book Title</th>
        				<th>Action</th>
    			    </tr>
    			</thead>
    			<tbody>
    			</tbody>
    		</table>

    		<ul id="pagination" class="pagination-sm"></ul>
        </div>

        <!-- View Book Modal -->
        <div id="view-book" class="modal"  tabindex="-1" role="dialog" aria-labelledby="modalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <div>
                            <h4 class="modal-title float-left" id="modalLabel">Book Information</h4>
                        </div>
                        <div>
                            <button type="button" class="close float-right" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        </div>
                    </div>
                    <div class="modal-body">
                        <form id="view-book-form" data-toggle="validator" action="api/create.php" method="POST">
                            <div class="form-group">
                                <label class="control-label" for="title">Title:</label>
                                <p id="title_view" name="title" class="font-weight-bold" /></p>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="author">Author:</label>
                                <p id="author_view" name="author"  class="font-weight-bold"/></p>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="published_date">Date Published:</label>
                                <p id="published_date_view" name="published_date" class="font-weight-bold" /></p>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="id">ID:</label>
                                <p id="id_view" name="id" class="font-weight-bold" /></p>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Create Book Modal -->
        <div id="create-book" class="modal"  tabindex="-1" role="dialog" aria-labelledby="modalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <div>
                            <h4 class="modal-title float-left" id="modalLabel">Add a Book</h4>
                        </div>
                        <div>
                            <button type="button" class="close float-right" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        </div>
                    </div>
                    <div class="modal-body">
                        <form id="create-book-form" data-toggle="validator" action="api/create.php" method="POST">
                            <div class="form-group">
                                <label class="control-label" for="title">Title:</label>
                                <input type="text" id="title" name="title" class="form-control" data-error="Please enter book title." required />
                                <div class="help-block with-errors text-danger"></div>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="author">Author:</label>
                                <input type="text" id="author" name="author" class="form-control" data-error="Please enter the name of the author." required>
                                <div class="help-block with-errors text-danger"></div>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="published_date">Date Published:</label>
                                <input type="text" id="published_date" name="published_date" class="form-control" data-error="Please enter the date when the book was published." required autocomplete="off">
                                <div class="help-block with-errors text-danger"></div>
                            </div>
                            <div class="form-group mt-4">
                                <button type="submit" class="btn submit-book btn-success">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Edit Book Modal -->
        <div id="edit-book" class="modal"  tabindex="-1" role="dialog" aria-labelledby="modalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <div>
                            <h4 class="modal-title float-left" id="modalLabel">Edit Book</h4>
                        </div>
                        <div>
                            <button type="button" class="close float-right" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        </div>
                    </div>
                    <div class="modal-body">
                        <form id="edit-book-form" data-toggle="validator" action="api/update.php" method="put">
                            <input type="hidden" id="id" name="id" class="edit-id">
                            <div class="form-group">
                                <label class="control-label" for="title_edit">Title:</label>
                                <input type="text" id="title_edit" name="title" class="form-control" data-error="Please enter book title." required />
                                <div class="help-block with-errors text-danger"></div>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="author_edit">Author:</label>
                                <input type="text" id="author_edit" name="author" class="form-control" data-error="Please enter the name of the author." required>
                                <div class="help-block with-errors text-danger"></div>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="published_date_edit">Date Published:</label>
                                <input type="text" id="published_date_edit" name="published_date" class="form-control" data-error="Please enter the date when the book was published." required autocomplete="off">
                                <div class="help-block with-errors text-danger"></div>
                            </div>
                            <div class="form-group mt-4">
                                <button type="submit" class="btn submit-book-edit btn-success">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </body>
</html>

Step 4: Handle the events. This file brings your page to life. It connects page events to the endpoints to complete the operation.

index.js 

$(document).ready(function() {

/* Initialize the index */
var page = 1;
var current_page = 1;
var total_page = 0;
var display = "list";

/* Display Initial List of Books */
if(display=="list")
    displayBookList();
 
/* View book */
$("body").on("click",".view-book",function(){
    var id = $(this).parent("td").data('id');
    var title = $(this).parent("td").prev("td").text();
    var author = $(this).parent("td").prev("td").prev("td").text();
    var published_date = $(this).parent("td").prev("td").prev("td").prev("td").text();
    display = "details";

    $("#id_view").text(id);
    $("#title_view").text(title);
    $("#author_view").text(author);
    $("#published_date_view").text(published_date);
});

/* Create new book */
$('#create-book-form').on('submit', function(e){
    e.preventDefault();
    var form_action = $("#create-book-form").attr("action");
    var title = $("#title").val();
    var author = $("#author").val();
    var published_date = $("#published_date").val();
    display = "create";

    if(title != '' && author != '' && published_date !=''){
        $.ajax({
            dataType: 'json',
            type:'POST',
            url: url + form_action,
            data:{
                title:title,
                author:author,
                published_date:published_date
            }
        }).done(function(data){
            // Reset Form
            $("#title").val('');
            $("#author").val('');
            $("#published_date").val('');

            // Display new item on the list
            displayPageEntries();

            // Hide modal
            $("#create-book").modal('hide');
            toastr.success('Item Created Successfully.', 'Success Alert', {timeOut: 5000});
        });
    }else{
        alert('All fields are required. Please make sure you fill out all fields correctly.')
    }
});

/* Edit book */
$("body").on("click",".edit-book",function(){
    var id = $(this).parent("td").data('id');
    var title = $(this).parent("td").prev("td").text();
    var author = $(this).parent("td").prev("td").prev("td").text();
    var published_date = $(this).parent("td").prev("td").prev("td").prev("td").text();
    display = "edit";

    $("#title_edit").val(title);
    $("#author_edit").val(author);
    $("#published_date_edit").val(published_date);
    $("#edit-book-form").find(".edit-id").val(id);
});

/* Update book */
$('#edit-book-form').on('submit', function(e){
    e.preventDefault();

    var form_action = $("#edit-book-form").attr("action");
    var title = $("#title_edit").val();
    var author = $("#author_edit").val();
    var published_date = $("#published_date_edit").val();
    var id = $("#edit-book-form").find(".edit-id").val();


    if(title != '' && author != '' && published_date !=''){
        $.ajax({
            dataType: 'json',
            type:'POST',
            url: url + form_action,
            data:{
                id:id,
                title:title,
                author:author,
                published_date:published_date
            }
        }).done(function(data){
            // Reset Form
            $("#title_edit").val('');
            $("#author_edit").val('');
            $("#published_date_edit").val('');

            // Display new item on the list
            displayPageEntries();

            // Hide modal
            $("#edit-book").modal('hide');
            toastr.success('Item Updated Successfully.', 'Success Alert', {timeOut: 5000});
        });
    }else{
        alert('All fields are required. Please make sure you fill out all fields correctly.')
    }

});

/* Delete book */
$("body").on("click",".delete-book",function(){
    var id = $(this).parent("td").data('id');
    $.ajax({
        dataType: 'json',
        type:'POST',
        url: url + 'api/delete.php',
        data:{ id:id }
    }).done(function(data){
        displayPageEntries();
        toastr.success('Item Deleted Successfully.', 'Success Alert', {timeOut: 5000});
    });
});

/* Display initial list of all books with pagination */
function displayBookList() {
    $.ajax({
        dataType: 'json',
        url: url+'api/index.php',
        data: {page:page}
    }).done(function(data){
    	total_page = Math.ceil(data.total/display_rows);
    	current_page = page;
    	refreshList(data.data);


        $('#pagination').twbsPagination({
	        totalPages: total_page,
	        visiblePages: current_page,
	        onPageClick: function (event, pageL) {
	        	page = pageL;

                    displayPageEntries();

	        }
	    });

    });
}

/* Display books for current page*/
function displayPageEntries() {
	$.ajax({
    	dataType: 'json',
    	url: url+'api/index.php',
    	data: {page:page}
	}).done(function(data){
		refreshList(data.data);
	});
}

/* Refresh table list  */
function refreshList(data) {
	var	rows = '';
	$.each(data,function(key,value) {
	  	rows = rows + '<tr>';
	  	rows = rows + '<td>'+value.published_date+'</td>';
	  	rows = rows + '<td>'+value.author+'</td>';
        rows = rows + '<td>'+value.title+'</td>';
	  	rows = rows + '<td data-id="'+value.id+'">';
        rows = rows + '<button data-toggle="modal" data-target="#view-book" class="btn btn-primary btn-sm view-book">View Details</button> ';
        rows = rows + '<button data-toggle="modal" data-target="#edit-book" class="btn btn-primary btn-sm edit-book">Edit Book</button> ';
        rows = rows + '<button class="btn btn-danger btn-sm delete-book">Delete</button>';
        rows = rows + '</td>';
	  	rows = rows + '</tr>';
	});
	$("tbody").html(rows);
}

});

LAUNCH TEST PROJECT

I grouped it into 4 basic steps to make the process of building the app more straight forward. On this test project without using a proper MVC framework (using only PHP, mySQL and jQuery) we have completed an AJAX CRUD app complete with notification and pagination.

This is important because there will be times that a programmer will be limited by the technology he can use and that’s when it pays to know the basics. I hope you enjoyed this tutorial, please share it to someone who might need it. Thanks!

 

The post Basic AJAX CRUD app using PHP, MySQL and jQuery appeared first on Chief of Stack.

First, if I were to design a bus stop I would prioritize commuter experience. Instead of an overpass I would put the access on street level. So commuters won’t have to walk up a flight of stairs and go back down again when riding on and off the buses. Then the new shorter overpass will be for those who want to cross the other side.

This will make it more accessible for everyone especially the elderly and PWDs.  This will also negate the need for escalators, elevators and long footbridge which also increases the safety of the commuters.

 I would also like to retain the right side doors of the buses so we can still maintain global standards (coz they said that doors will be moved to the left side of the buses).

Basically it would be like an extra wide pedestrian lane in EDSA.

Wait what? But wouldn’t it cause inconvenience for private vehicles? Yes, but that will be solved by the second part of my solution, which is a vehicular underpass or tunnel.

This way private vehicles can pass by under the bus stops unimpeded (Buses will remain on street level). Car users won’t mind going through a few tunnels compared to commuters walking up and down flight of stairs.  This system takes into consideration the balance between different types of users.

Sure, this will be costlier but building an overpass with escalators and factoring in its regular maintenance isn’t necessarily cheap.

I don’t really know the figures yet but the tunnel will also feature two U-turn slots for both north bound and south bound vehicles. Which to me, would make the investment more worth it as it will solve traffic problems caused by the recent closure of U-turn slots in EDSA.

We have already built tunnels like the Quezon boulevard and Lagusnilad tunnels in Manila. The only thing left to do is solve the engineering part of the U-turn slots.  If this is feasible, then we have improved 3 user experiences: We have provided an open space – commuter friendly bus stop, a U-turn slot that won’t interfere with the bus way, a shorter pedestrian overpass for those crossing the other side and an unimpeded private vehicle flow. What do you think, is this even technically possible?

While I congratulate the government for the success of the EDSA bus way itself, much is left to be desired in terms of commuter experience.  I know there is a MOA already for a overpass concourse that features escalators.

I commend the efforts of the government especially the DOTr, MMDA, DPWH, LTFRB in streamlining the bus routes in and around Metro Manila. Finally, after so many years we have designated bus stops. I hope we can improve the system to the point that we have time of arrival and departure for each bus.

The post EDSA U-turn tunnel and street level bus stop with pedestrian overpass; A design solution to improve UX appeared first on Chief of Stack.

I’m going to cite one of our projects Digest.ph as an example throughout the article. Over a month ago, I was tempted to do a full revamp of our design in order to best accommodate recommendations from Works of Heart (WOH; design and branding experts; one of our mentors from AIM-DBI). But given Digest’s limited time and resources, the best decision was to go for a refresh (more on this below).

Struggles of a start-up website

WOH audited the website and among the comments were to make the copy more bespoke and buttons snappy. They want us to tailor fit the homepage for a specific type of customer. All suggestions were geared towards marketing and making the website convert.

With fresh eyes and their comments in mind, I proceeded to revisit our site and found that they were right – it was bad, LOL. Our homepage was uninspired and unorganized, the color palette has 50 shades of blue and the copy didn’t give clear call to action. People were showed a lot of information without any clear direction where to go.

Digest pivoted three times since the project started, more features were added as the business model got finalized. The homepage UI took a back seat and functionality became the priority. Having no full time graphic artist didn’t help either (though I double as the graphic artist when needed), it became visible that our assets were not coordinated.

I recommended to improve the UI and logo while the company finalizes its branding strategy. But it was a though decision for the company because the priority was on product development… not necessarily on marketing or making the site convert yet.

Breakthrough: Going back to the old prototype.

Luckily I was able to remember my original prototype from a year ago, it already had all the pieces that we needed for a quick refresh. I just had to integrate our primary product and the new logo. If you look at the finished homepage it may look like we did a redesign but since we just brought back some elements from the prototype I will consider it a refresh (borderline redesign :D). Anyway, the new graphical assets were quick adjustments.

This time I wanted to answer the 5 W’s and 1 H of our users. The intro section answers ‘what’ the website is all about and “where” to go to continue (See the “Talk to a Lawyer” heading and the “Let’s go” button). The second section explains ‘how’ it works (See the video explainer). The third section answers ‘why’ users would want to use Digest’s services. The fourth section shows ‘who’ the lawyers are. And finally, the fifth section answers ‘when’ to talk with lawyers (See the “Ok find me a lawyer now” call to action button).

When to do a refresh vs redesign

A refresh is pretty much like trying a new paint in your house. Do it if you want a quick way of highlighting new changes to your business.

• If there’s a new company logo, you may want your color palette and typefaces to match it.
• If there’s a new primary product, you should adjust your promotional content, replace outdated copy, set new call to actions and do on page SEO.
• When you want to improve user experience, you have to guide users to go where you want them to go. This may involve updating the navigation, search filters, modal windows and other combination of elements.

A redesign on the other hand is like a home renovation. It’s like starting from scratch while considering all features already on the site.

• If your website looks dated and content has been stagnant for years, if it doesn’t have a friendly user experience, takes too long to load, it’s your cue to do a redesign.
• If the company underwent a rebrand, you may want to keep your media assets, typefaces, colors, UX and copy current to reflect the new brand personality.
• If the website doesn’t use current tech that increases your site’s probability to convert (Ex. Responsiveness, PWA etc..)
• If you want to integrate marketing technology to track and analyze product performance (Ex. Adding shopping experience to sell and track products will drastically change the look of your website)
• If you are incorporating a new digital strategy whether through content marketing, social media, advertising or other SEO practices, it will require a new strategy for your content and design.

Any time a website is set to be updated it’s almost always because of marketing and conversion. It can be that the company may want to prioritize the visibility of one product, selling a new product, doing a rebrand, introducing a new feature or just improving user experience.

A refresh done consistently over time is often a better approach than a full redesign or revamp. A constantly refreshed website means that it is continuously maintained to keep up to date with the company’s offerings.

The post When to do a website refresh vs redesign; A case study of Digest.ph appeared first on Chief of Stack.

So what really is TTFB? and what affects it? TTFB is the metric to focus on if you want to drastically improve your page load time, technically it is affected by these 3 things:

1. The time it takes for your request to propagate through the network to the web server
2. The time it takes for the web server to process the request and generate the response
3. The time it takes for the response to propagate back through the network to your browser.

In layman’s term, it’s just the time when the first byte of the page arrive (after any redirects). You don’t want to look at a waterfall chart like the one above where the first 3 items took around 6 seconds.

As an engineer, you need to take care of 3 things to be able to improve TTFB:

1. Proper use of a Content Delivery Network (CDN) to reduce latency
2. Use of dynamic cache or page cache to reduce server processing.
3. Compression and minification of web assets to decrease loading

Proper use of a CDN

With a CDN you reduce the physical distance and the number of hops an asset take to reach its destination. For example, the user is from Manila and the server is in New York, a CDN server in between (say Singapore) can deliver a jpeg file faster than the actual server in New York. Cloudflare CDN saves static content to it’s network of servers around the world then serve those cached content from edge servers nearest the next visitor.

TIP: If you have a static site like a blog or a basic company website, just use the “Cache everything” page rule in Cloudflare. Using that will greatly improve your TTFB even if you only use an economy web host because most requests will be served from the edge cache and won’t actually touch your server. Just make sure to add another page rule to bypass caching of admin and dynamic pages.

Caching and Compression

Content Management Systems (CMS) generate pages on demand through the use of PHP and MySQL server requests. By using dynamic or file cache, commonly accessed pages can be stored in a file (or in memory) to reduce server processing time. You can think of it as the recent calls in your phone’s history, if you want to call someone again you don’t have to go through the trouble of finding that person in your phone book.

In Laravel, I simply run npm run production in my terminal and let Webpack take care of bundling the assets (minifying and compression) and then use my favorite package to cache pages. In WordPress, there’s a lot of plugins to cache pages (I regularly use WP Fastest Cache and WP Super cache plugins). I like WP Fastest Cache because it has options to minimize and compress CSS and JS files automatically. Whatever the framework is, the goal is always to reduce the time it takes for requests to reach users.

Measuring TTFB

To be able to improve your TTFB you have to be able to measure it properly. There are a number of tools to measure site speed and TTFB, one tool that I always use is WebPageTest.org. There you can place your site’s URL and test location (from where you want to simulate the speed) and in less than a minute you will get a detailed waterfall of all resources being loaded on a page.

The post Improving site speed: Time to First Byte (TTFB) appeared first on Chief of Stack.

People think that working from home is straightforward, how hard can it be, you just sit in front of the computer the whole day. Not gonna blame them though, there’s a lot of “get rich quick – work from home” schemes out there, but make no mistake becoming a successful work from home professional is no easy feat. There’s a lot of hurdles to overcome.

Have your own workspace
Can be a room, a cubicle or just a desk, whatever it may be you should treat it as a “safe zone” where you are free from non-work related stuff. Maybe you have a kid who constantly nag you, or you share your room with your annoying sibling, or you probably work in your living room. No matter your situation, your workspace should be sacred. It’s your job to make sure that people around you know that. It’s your chapel, a place where you can think clearly, organize your thoughts and focus on your tasks. No one should be able to disrupt your train of thought, you must impose restrictions, one example can be to require them to ask for your permission to talk to you (drastic but effective) when you are in your space.

Get up and exercise
Being active releases happy hormones and working happy is a success in itself. You will be more creative and it helps you think more clearly. But not all physical activities are the same, just because you sweat doesn’t mean you are exercising (doing household chores doesn’t count). You have to dedicate an hour or two everyday for an actual exercise – bike, yoga, run or body weight training. Commit to a workout plan and soon you will see what a well maintained body does to your thoughts. Another benefit of being active is that it keeps you occupied hence no time for negativity. For me, it gives me time o think of all the positive things I want to accomplish.

Read and learn new things
Keep learning, your knowledge is your edge. Aside from being active physically you should strive to keep your mind active as well – reading books, attending online classes, watching tutorials are great ways to learn new things. Knowledgeable people more often than not give better solutions to client problems and guess what, your boss appreciate workers who have gumption to resolve their their problems. It also show to potential clients that you are open to continued learning if ever a need arise.

Have a schedule.
Have a schedule and follow it religiously. Repetition leads to success. Make your bed @ 6am, run @ 7am, it’s really up to you, completing a task however small it may seem gives you confidence to do the next one which will eventually carry over to your work and so on. But be careful not to overload your day, tweak it little by little to come up with something that works for you. Do, assess, revise, repeat.

Backup Backup Backup.
Have a cloud based backup and one or two external drives. Trust me, this is the best investment you can do for yourself. Better have copies laying around for when the time comes, it will save you tons of hours of work. There were several instances where I lost all my files because I was too complacent that my main machine won’t bug down and my drives won’t be stolen (yeah, burglar/s went in my apartment). I lost all my files and had to start everything from scratch. Have multiple backups, your future self will thank you for it.

Secure your workspace
Aside from software security you also have to deal with physically securing your laptop (whatever your main weapon is) and your backups. This may sound too cautious and that’s what I thought too until the burglar incident. They stole all of my laptops, my backups and in one day all of my life’s work were gone entirely. Remember, you are not working in an office environment where there’s 24/7 security, this is going to be your responsibility. Have a safe if needed.

Legitimize your services
It took me years before I finally decided to legitimize my online services but when I did there was no looking back. Aside from the prestige and benefits of having your own business, all big companies require an official receipt in order to pay your compensation. In order to land big clients you have to be legit. Registering your service as a freelance professional was a complex endeavor, back then the requirements were for brick and mortar businesses, I was moving a lot so that was not really an option for me, but in the last 5 years it has became easier to register yourself as a professional.

Strive for work life integration
For me work life balance is overrated, it’s work life integration that we should be after. It’s not your regular 9 to 5 work day where you can clock out at 5 and leave work behind, you have to be able to come to work at 9, put it on hold for a while (to do private things) and get back an hour later to where you were, this happens several times a day until you are ready to call it a day. It can be weird at first, but integrating work as part of your life is one of the key factors to become successful. The saying “find a job you love and you’ll never work a day in your life” is applicable in this type of setup.

Working from home is a marathon not a sprint, just be patient, be consistent and have the courage to do the small things, pretty soon you will be doing amazing things! Good luck.

The post Tips to make working from home a success during and post pandemic appeared first on Chief of Stack.

Recently one of our projects got too big and I encountered memory allocation error when I ran composer update. I did this as a workaround and fortunately there was no more issues after I’m done

I assume you already have WSL running on your machine, here are the steps I did to install Composer and PHP 7.0.

Install PHP inside Ubuntu

First update the package list.

$ sudo apt-get update

Then just install php 7.0:

$ sudo apt-get install -y php7.0

It may take a while to setup some stuff…

If everything goes well PHP 7.0 will be installed. Verify it by simply running:

$ php -v

Install Composer inside Ubuntu

To install Composer we follow the official instructions here. Run the following commands:

$ php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"

$ php -r "if (hash_file('sha384', 'composer-setup.php') === 'e0012edf3e80b6978849f5eff0d4b4e4c79ff1609dd1e613307e16318854d24ae64f26d17af3ef0bf7cfb710ca74755a') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"

php composer-setup.php

$ php -r "unlink('composer-setup.php');"

Composer is now installed! test it out by running.

$ php composer.phar

You can optionally add composer to your global path to make to make it easier to use.

sudo mv composer.phar /usr/local/bin/compose

Windows Subsystem for Linux was made for developers and offers all the benefits that comes from using a dedicated Linux machine. With WSL you can run your favorite Windows apps and execute Linux commands natively just like how I installed PHP 7 and Composer inside Ubuntu on our Windows 10 PC.

The post Install PHP 7 and Composer on Windows 10 through Ubuntu in WSL appeared first on Chief of Stack.

1. Fluid grids
2. Media queries
3. Flexible images and media

NOTE: This article was originally posted at iStar’s blog, read the full article here

Fluid Grids – Old websites were based on print media like newspapers and magazines. Columns were positioned and displayed in absolute size and position (pixels). Mobile devices changed all this, instead of solely relying on pixels for measurement, responsive design incorporated percentages to the mix to accommodate the growing number of resolutions. Fluid grids or “flexible grid” is the backbone of responsive design. It uses relative sizing to fit content to the device’s screen size. The grids are based on percentages. By basing text size, widths, and margins on percentages, a fixed size can be turned into a size relative to its display space. The name is a little misleading because a grid is not the only thing that makes it flexible, it relies on CSS to position the content.

Media Queries – Also known as breakpoints, it can be used to apply different styles based on what the screen can handle. The website detects the type of device you’re using (resolution/viewport) and correctly displays the content. This can be observed by resizing your desktop browser to different sizes, you will notice how a responsive site adjusts to best display the content. It can be customized to control the width, height, max-width, max-height, device-height, orientation, aspect ratio, etc.

Flexible images and media – Aside from the layout and text, images also needs to respond correctly. This allows your images and other media to load differently for every resolution. It can be achieved through scaling(CSS max-width) or cropping (CSS overflow property). With scaling the media element’s max width can be set at 100 percent so the browser will make it shrink or expand depending on the container. Cropping on the other hand hides portion of the image and still fit it to the container.

There are other things that come into play with responsive design, the above items will get you started and is enough if you know what you are doing. If you would like assistance regarding responsive design or if you are interested with any of our services, please don’t hesitate to contact us, our programmers are always ready to help.

The post 3 most essential principles of responsive design appeared first on Chief of Stack.

NOTE: This article was originally posted at iStar’s blog, read the full article here

Aside from the usual interactivity, usability and social media integration, here are the top 5 basic characteristics your website must have in order to accommodate today’s users.

1. Fast loading speed – Your website needs to load fast. Yeah, call me captain obvious but there is actually a science behind this. Study shows that it takes an average of 3 seconds for a user to scan your page. The user must be able to reach the information he came for within said period so he can decide whether to stay or go. Test your user’s patience and say goodbye to a potential client. A good way to enhance speed is by lazy loading images found below the fold so elements at the top load faster.
2. Well Formatted Content – Your design is important but nowadays (as it should) content is king. A user may take his business elsewhere if he can’t easily reach the information he came for. Consider putting your most important content above the fold to make it easily scan-able.
3. Mobile compatibility / Mobile first – Google now ranks mobile first websites higher in search rankings. Mobile usage has eclipsed desktop this past few years and there is a good chance your potential client is using mobile exclusively. Your website must be responsive to be able to accommodate a wide range of mobile devices. See this previous post about responsive design [link to responsive website article]
4. Cross browser compatibility – With each new browser version come a new interpretation of html/css. For example, back in the old days a transparency effect will be rendered by Firefox and Chrome but will need a different set of code for IE. Modern browsers had come a long way in making sure they comply with standards, which made the browsing experience somewhat consistent across all browsers. However there are still some quirks that may affect your website. Why browsers render differently is a question for the ages, it’s up to you to adapt. Your website must show consistency on all browsers, a line of text on one browser should also render properly on other browsers. That way a potential client can read your information no matter what browser he is using. It’s a delicate balance between features and compatibility, it is recommended to select features that you know is consistent across all browsers.
5. Easy to use forms – Forms are essential on any business websites. It is the main area where users interact with the site and usually where leads come from. Make sure to make your forms easy to use and accessible. Add tooltips and suggestions on important fields if possible, limit the total number of fields and most importantly assign a label for all the fields.

Ensuring your website is effective in delivering content on all types of devices improves your chances of getting a lead to potential clients. Your website is the face of your company and you need to make sure it’s engaging to prevent users from leaving, you did a lot of marketing to get them there, and your next goal should be to get them to stay. Following the above can help make your online presence a success.

The post Top 5 characteristics of an effective website appeared first on Chief of Stack.