PHP Development Archives - Chief of Stack https://www.chiefofstack.com/category/php-development/ Full Stack Creative Works by Jay Acab Thu, 15 Sep 2022 08:41:12 +0000 en hourly 1 https://wordpress.org/?v=6.0.2 https://www.chiefofstack.com/wp-content/uploads/2020/05/cropped-logo-32x32.jpg PHP Development Archives - Chief of Stack https://www.chiefofstack.com/category/php-development/ 32 32 Easily create a local Laravel development environment with Docker in Windows https://www.chiefofstack.com/2021/06/11/easily-create-a-local-laravel-development-environment-with-docker-in-windows/?utm_source=rss&utm_medium=rss&utm_campaign=easily-create-a-local-laravel-development-environment-with-docker-in-windows https://www.chiefofstack.com/2021/06/11/easily-create-a-local-laravel-development-environment-with-docker-in-windows/#respond Fri, 11 Jun 2021 22:00:42 +0000 https://www.chiefofstack.com/?p=2824 This article is meant to be a short walkthrough on how to quickly setup a local development environment using Docker, a better alternative to installing a full LAMP stack such as XAMPP on your machine....

Read More

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

]]> This article is meant to be a short walkthrough on how to quickly setup a local development environment using Docker, a better alternative to installing a full LAMP stack such as XAMPP on your machine. This is not a full tutorial on Docker though, I just find this method works the best for me when developing Laravel apps.

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

What is Docker
Apps and services like PHP can be packaged and deployed easily.
Photo from: docker.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. 

docker-compose.yml

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.

]]> https://www.chiefofstack.com/2021/06/11/easily-create-a-local-laravel-development-environment-with-docker-in-windows/feed/ 0 Basic AJAX CRUD app using PHP, MySQL and jQuery https://www.chiefofstack.com/2021/01/23/basic-ajax-crud-app-using-php-mysql-and-jquery/?utm_source=rss&utm_medium=rss&utm_campaign=basic-ajax-crud-app-using-php-mysql-and-jquery https://www.chiefofstack.com/2021/01/23/basic-ajax-crud-app-using-php-mysql-and-jquery/#comments Sat, 23 Jan 2021 23:33:27 +0000 https://www.chiefofstack.com/?p=2797 The post Basic AJAX CRUD app using PHP, MySQL and jQuery 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.

]]> https://www.chiefofstack.com/2021/01/23/basic-ajax-crud-app-using-php-mysql-and-jquery/feed/ 4 Install PHP 7 and Composer on Windows 10 through Ubuntu in WSL https://www.chiefofstack.com/2020/06/05/install-php-7-and-composer-on-windows-10-through-ubuntu-in-wsl/?utm_source=rss&utm_medium=rss&utm_campaign=install-php-7-and-composer-on-windows-10-through-ubuntu-in-wsl https://www.chiefofstack.com/2020/06/05/install-php-7-and-composer-on-windows-10-through-ubuntu-in-wsl/#respond Fri, 05 Jun 2020 20:01:15 +0000 https://www.chiefofstack.com/?p=2610 A major advantage of using this setup over the more common XAMPP development environment is that with Ubuntu in WSL, the PHP 7 installation will be the 64 bit variant, as opposed to XAMPP where...

Read More

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

]]> A major advantage of using this setup over the more common XAMPP development environment is that with Ubuntu in WSL, the PHP 7 installation will be the 64 bit variant, as opposed to XAMPP where PHP is only available at x86. Using 64bit PHP means more memory for running composer for big projects.

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.

]]> https://www.chiefofstack.com/2020/06/05/install-php-7-and-composer-on-windows-10-through-ubuntu-in-wsl/feed/ 0