Categories
Visual Basic 6.0

Information System

Information System in Visual Basic 6.0 and MS Access 2007 back end. It is used in an office to register, update and delete client information. System also can generate Monthly and Yearly Reports like Expiry Passport, No Passport, No Insurance and Beneficiary and Client List Report.

System Password: admin

Developed by my friend

Johnny Paragas
Larry Emol

If you want to get source code, please click Download Code button on below link. For more information about the system. You can contact me @ Email – larrydaveemol@gmail.com

Let me know what you need just leave a message/comment and I will do my very best to make that happen. I hope this codes will help you. Enjoy Coding!

  • 42
    Shares
Categories
JavaScript Templating NodeJS

CRUD app with Node, Express , and MySQL

I would like to share my CRUD (Create, Read, Update and Delete) with Node, Express framework, MySQL and I’m using EJS view engine to manage HTML code .

Prerequisites

to get started follow this article for installation https://medium.com/@bhanushali.mahesh3/creating-a-simple-website-with-node-js-express-and-ejs-view-engine-856382a4578f

Creating the Database Table

Execute SQL Dump file

-- phpMyAdmin SQL Dump
-- version 4.8.5
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Apr 17, 2020 at 08:40 AM
-- Server version: 10.1.38-MariaDB
-- PHP Version: 7.1.27

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `db_vue_product`
--

-- --------------------------------------------------------

--
-- Table structure for table `products`
--

CREATE TABLE `products` (
  `id` int(11) NOT NULL,
  `namex` varchar(255) NOT NULL,
  `category` varchar(100) NOT NULL,
  `qty` varchar(255) NOT NULL,
  `stock` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Dumping data for table `products`
--

INSERT INTO `products` (`id`, `namex`, `category`, `qty`, `stock`) VALUES
(150, '1st Product', 'category 1', '4', 'In Stock'),
(151, '2nd Product', 'category 12', '0', 'Out of stock'),
(186, '3rd Product', 'category 3', '22', 'In Stock'),
(187, '4th Products', 'wwd', '2', 'In Stock');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `products`
--
ALTER TABLE `products`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `products`
--
ALTER TABLE `products`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=188;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Server.

const createError = require('http-errors');
const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const path = require('path');


const { doProduct, getHomePage } = require('./routes/api');
const port = 2000;

const db = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'db_angular_product'
});

// connect to database
db.connect((err) => {
  if (err) {
    throw err;
  }
  console.log('Connected to database');
});
global.db = db;

const app = express();

// configure middleware
app.set('port', process.env.port || port); // set express to use this port
app.set('views', __dirname + '/views'); // set express to look in this folder to render our view
app.set('view engine', 'ejs'); // configure template engine
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json()); // parse form data client
app.use(express.static(path.join(__dirname, 'public'))); // configure express to use public folder


// routes for the app
app.get('/', getHomePage);
app.get('/api/:id/:action', doProduct);
app.post('/api/:action', doProduct);


app.get('/search', function (req, res) {
  db.query('SELECT * from products where namex like "%' + req.query.key + '%"',
    function (err, result) {
      if (err) throw err;
      res.render('index.ejs', {
        page: 'proghubsterzeak.com', menuId: 'home', products: result, title: "Add New Product"
      });
    });
});


// catch 404 and forward to error handler
app.use(function (req, res, next) {
  next(createError(404));
});

// error handler
app.use(function (err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

// set the app to listen on the port
app.listen(port, () => {
  console.log(`Server running on port: ${port}`);
});

module.exports = app;

Web API Controller

The Web API Controller consists of the following three Action methods.
– Add and Update Product
– Delete Product

module.exports = {
  getHomePage: (req, res) => {
    let query = "SELECT * FROM `products` ORDER BY id ASC";
    db.query(query, (err, result) => {
      if (err) {
        res.redirect('/');
      } else {
        message = '';
        res.render('index', {
          page: 'proghubsterzeak.com', menuId: 'home', products: result, message: message, title: "Add New Product"
        });
        // console.log(result[0].id);
      }
    });
  },

  doProduct: (request, response) => {
    let productId = request.params.id;
    let message = '';
    let update_id = request.body.update_id;
    let namex = request.body.namex;
    let category = request.body.category;
    let qty = request.body.qty;

    let action = request.params.action;

    switch (action) {
      case "add":

        let nameQuery = "SELECT * FROM `products` WHERE namex = '" + namex + "'";

        db.query(nameQuery, (err, result) => {
          if (err) {
            return response.status(500).send(err);
          }
          if (result.length > 0) {
      
            message = 'Product already exists';
            response.render('index.ejs', {
              page: 'proghubsterzeak.com', menuId: 'home', products: result, message: message, title: "Add New Product"
            });
          } else {

            let query = "INSERT INTO `products` (namex, category, qty) VALUES ('" +
              namex + "', '" + category + "', '" + qty + "')";
            db.query(query, (err, result) => {
              if (err) {
                return response.status(500).send(err);
              }
              response.redirect('/');
            });

          }
        });

        break;

      case "edit":

        let query = "UPDATE `products` SET `namex` = '" + namex + "', `category` = '" + category + "', `qty` = '" + qty + "' WHERE `products`.`id` = '" + update_id + "'";
        db.query(query, (err, result) => {
          if (err) {
            return response.status(500).send(err);
          }
          response.redirect('/');
        });

        break;

      case "delete":

        let deleteUserQuery = 'DELETE FROM products WHERE id = "' + productId + '"';

        db.query(deleteUserQuery, (err, result) => {
          if (err) {
            return response.status(500).send(err);
          }
          response.redirect('/');
        });

        break;

    }
  },
};

Creating Product Page

This is the main page of the app which contains a table to display a list of all the products, modal form to add and Update product record to the database.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Welcome | <%= page %></title>
<meta name="active-menu" content="<%= menuId %>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.min.css">
</head>

<body>
  
  <header>
  <nav class="navbar navbar-light bg-light">
    <span class="navbar-text">
      <a href="https://proghubsterzeak.com/">https://<%= page %></a>
    </span>
  </nav>
</header>

  <section id="my-app">
    <div class="container">
      <div class="row my-5">
        <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#Productform">Add
          Product</button>
        <div class="ml-auto">

          <input class="form-control typeahead" spellcheck="false" autocomplete="off" name="typeahead" type="text" />
        </div>
      </div>
      <div class="row">
        <div class="table-responsive">
          <% include table %>
        </div>
      </div>
    </div>

  </section>
  <% include modal %>
  
      <script src="./assets/jquery/jquery.min.js"></script>
<script src="./assets/bootstrap/js/bootstrap.bundle.js"></script>
<script src="./assets/ejs/ejs.min.js"></script>
<script src="./assets/js/typeahead.js"></script>
<script>
  $(document).ready(function () {
    $('input.typeahead').typeahead({
      name: 'typeahead',
      remote: 'search?key=%QUERY',
      limit: 10
    });

    $('#myProductTable').on('click', '.edit', function () {
      var product_id = $(this).attr('data-id');
      var product_name = $(this).attr('data-name');
      var product_qty = $(this).attr('data-qty');
      var product_category = $(this).attr('data-category');
      $('#Productform form').attr('action', 'api/edit');
      $('#Productform').modal('show');
      $('#my-modal-title').html('Update Product');
      $('#Productform form .btn').html('Update Product');
      $('.product_name').val(product_name);
      $('.product_qty').val(product_qty);
      $('.product_category').val(product_category);
      $('.product_id').val(product_id);
    })
  });
</script>
</body>


</html>
<% if (products.length > 0) {%>
<table id="myProductTable" class="table-product table table-bordered table-striped">
  <thead class="thead-product">
    <tr>
      <th style="width:5%">No.</th>
      <th>Name</th>
      <th style="width:15%">Category</th>
      <th style="width:5%">Quantity</th>
      <th style="width:15%">Status</th>
      <th style="width:18%">Action</th>
    </tr>
  </thead>
  <tbody>
    <% products.forEach((product, index) => { %>
    <tr>
      <td><%= product.id %></td>
      <td><%= product.namex %></td>
      <td><%= product.category %></td>
      <td><%= product.qty %></td>
      <% if (product.qty > 10) {%>
      <td><span class="badge badge-success">In Stock</span></td>
      <% } else if (product.qty <= 10 && product.qty > 0) { %>
      <td><span class="badge badge-primary">ALmost Sold Out</span></td>
      <% } else { %>
      <td><span class="badge badge-warning">Out Of Stock</span></td>
      <% } %>
      <td>
        <div class=" buttons text-center">
          <a href="javascript:void(0);" data-id="<%= product.id %>" data-name="<%= product.namex %>"
            data-category="<%= product.category %>" data-qty="<%= product.qty %>"
            class="btn btn-sm btn-info edit">Edit</a>
          <a href="/api/<%= product.id %>/delete" class="btn btn-sm btn-danger delete">Delete</a>
        </div>
      </td>
    </tr>
    <% }) %>
  </tbody>
</table>
<% } else { %>
<p class="text-center">No product found...</p>
<% } %>

If you want to get complete source code, please click Download Code button on below link. For more information about the system. You can contact me @ Email – larrydaveemol@gmail.com

Let me know what you need just leave a message/comment and I will do my very best to make that happen. I hope this codes will help you. Enjoy Coding!

Categories
HTML/CSS

Personal Data Sheet

HTML/CSS Code for Personal Data Sheet Form with Bootstrap

Creating Personal Data Sheet

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Personal Data Sheet</title>
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="table-responsive p-3">
		<form action="">
			<table id="pds-table">

				<tbody class="table-header">
					<tr>
						<td colspan="12" class="h5"><i><b>CS Form No. 212</b></i></td>
					</tr>
					<tr>
						<td colspan="12" class="align-top" style="max-height: 12px;">
							<i><b>Revised 2017</b></i>
						</td>
					</tr>
					<tr>
						<td colspan="12" class="text-center"><h1><b>PERSONAL DATA SHEET</b></h1></td>
					</tr>
					<tr>
						<td colspan="12"><i><b>WARNING: Any misrepresentation main in the Personal Data Sheet and the Work Experience Sheet shall cause the filing of administative/criminal case/s against the person concerned.</b></i></td>
					</tr>
					<tr>
						<td colspan="12"><i><b>READ THE ATTACHED GUIDE TO FILLING OUT THE PERSONAL DATA SHEET (PDS) BEFORE ACCOMPLISHING THE PDS FORM</b></i></td>
					</tr>
					<tr>
						<td colspan="9">Print legibly. Tick appropriate boxes ( <input type="checkbox" checked> ) ad use seperate sheet if necessary. Indicate N/A if not applicable. <b>DO NOT ABBREVIATE.</b></td>
						<td colspan="1" style="border:1px solid#000b;background:#757575;width:8%;"><small>1. CS ID No.</small></td>
						<td colspan="2" class="text-right" style="border:1px solid #000;width:20%;"><small>(Do not fill up. For CSC use only)</small></td>
					</tr>
				</tbody>

				<tbody class="table-body">
					<tr>
						<td colspan="12" class="text-white separator">I. PERSONAL INFORMATION</td>
					</tr>
					<tr>
						<td colspan="1" class="s-label border-bottom-0">
							<span class="count">2.</span> SURNAME
						</td>
						<td colspan="11"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label border-0"><span class="count"></span> FIRST NAME</td>
						<td colspan="9"></td>
						<td colspan="2" class="align-top"><small>NAME EXTENSION (JR.,SR)</small></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label border-0"><span class="count"></span> MIDDLE NAME</td>
						<td colspan="11"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label border-bottom-0">
							<span class="count">3.</span> DATE OF BIRTH<br>
							<span class="count"></span> (mm/dd/yyyy)
						</td>
						<td colspan="5"></td>
						<td colspan="3" class="s-label align-top border-bottom-0">
							<span class="count">16.</span> CITIZENSHIP
						</td>
						<td colspan="3">
						</td>
					</tr>
					<tr>
						<td colspan="1" class="s-label border-0"></td>
						<td colspan="5"></td>
						<td colspan="3" class="s-label align-top border-0 text-center small">
							If holder of dual citizenship,
						</td>
						<td colspan="3">
						</td>
					</tr>
					<tr>
						<td colspan="1" class="s-label"><span class="count">4.</span> PLACE OR BIRTH</td>
						<td colspan="5"></td>
						<td colspan="3" class="s-label align-top border-0 text-center small"> please indicate the details.</td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label"><span class="count">5.</span> SEX</td>
						<td colspan="5"></td>
						<td colspan="3" class="s-label align-top border-0"></td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label border-bottom-0"><span class="count">6.</span> CIVIL STATUS</td>
						<td colspan="5"></td>
						<td colspan="2" class="s-label align-top border-bottom-0 small">
							<span class="count">17.</span> RESIDENTIAL ADDRESS
						</td>
						<td colspan="2"></td>
						<td colspan="2"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label border-top-0"><span class="count"></span></td>
						<td colspan="5"></td>
						<td colspan="2" class="s-label align-top border-0"></td>
						<td colspan="2"></td>
						<td colspan="2"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label"><span class="count">7.</span> HEIGHT (m)</td>
						<td colspan="5"></td>
						<td colspan="2" class="s-label align-top border-0"></td>
						<td colspan="2"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label"><span class="count">8.</span> WEIGHT (kg)</td>
						<td colspan="5"></td>
						<td colspan="2" class="s-label border-0 text-center">
							ZIP CODE
						</td>
						<td colspan="4"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label"><span class="count">9.</span> BLOOD TYPE</td>
						<td colspan="5"></td>
						<td colspan="2" class="s-label border-bottom-0"><span class="count">18.</span> PERMANENT ADDRESS</td>
						<td colspan="2"></td>
						<td colspan="2"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label"><span class="count">10.</span> GSIS ID NO.</td>
						<td colspan="5"></td>
						<td colspan="2" class="s-label border-0"></td>
						<td colspan="2"></td>
						<td colspan="2"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label"><span class="count">11.</span> PAG-IBIG NO.</td>
						<td colspan="5"></td>
						<td colspan="2" class="s-label border-0"></td>
						<td colspan="2"></td>
						<td colspan="2"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label"><span class="count">12.</span> PHILHEALTH NO.</td>
						<td colspan="5"></td>
						<td colspan="2" class="s-label text-center border-0">ZIP CODE</td>
						<td colspan="4"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label"><span class="count">13.</span> SSS NO.</td>
						<td colspan="5"></td>
						<td colspan="2" class="s-label"><span class="count">19.</span> TELEPHONE NO.</td>
						<td colspan="4"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label"><span class="count">14.</span> TIN NO.</td>
						<td colspan="5"></td>
						<td colspan="2" class="s-label"><span class="count">20.</span> MOBILE NO.</td>
						<td colspan="4"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label"><span class="count">15.</span> AGENCY EMPLOYEE NO.</td>
						<td colspan="5"></td>
						<td colspan="2" class="s-label"><span class="count">21.</span> EMAIL ADDRESS (if any)</td>
						<td colspan="4"></td>
					</tr>
				</tbody>

				<tbody class="table-body">
					<tr>
						<td colspan="12" class="text-white separator">II. FAMILY BACKGROUND</td>
					</tr>
					<tr>
						<td colspan="1" class="s-label border-bottom-0">
							<span class="count">22.</span> SPOUSE SURNAME
						</td>
						<td colspan="5"></td>
						<td colspan="3" class="s-label">
							<span class="count">23.</span> NAME of CHILDREN (Write full name and list all)
						</td>
						<td colspan="3" class="s-label text-center" style="width: 18%;">DATE OF BIRTH (mm/dd/yyyy)</td>
					</tr>
					<tr>
						<td colspan="1" class="s-label border-0">
							<span class="count"></span> FIRST NAME
						</td>
						<td colspan="4"></td>
						<td colspan="1" class="align-top s-label">
							<small>
								NAME EXTENSION (JR.,SR)
							</small>
						</td>
						<td colspan="3"></td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label border-0">
							<span class="count"></span> MIDDLE NAME
						</td>
						<td colspan="5"></td>
						<td colspan="3"></td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label">
							<span class="count"></span> OCCUPATION
						</td>
						<td colspan="5"></td>
						<td colspan="3"></td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label">
							<span class="count"></span> EMPLOYER/BUSINESS NAME
						</td>
						<td colspan="5"></td>
						<td colspan="3"></td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label">
							<span class="count"></span> BUSINESS ADDRESS
						</td>
						<td colspan="5"></td>
						<td colspan="3"></td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label">
							<span class="count"></span> TELEPHONE NO.
						</td>
						<td colspan="5"></td>
						<td colspan="3"></td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label border-bottom-0">
							<span class="count">24.</span> FATHER'S SURNAME
						</td>
						<td colspan="5"></td>
						<td colspan="3"></td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label border-0">
							<span class="count"></span> FIRST NAME
						</td>
						<td colspan="4"></td>
						<td colspan="1" class="align-top s-label">
							<small>
								NAME EXTENSION (JR.,SR)
							</small>
						</td>
						<td colspan="3"></td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label border-0">
							<span class="count"></span> MIDDLE NAME
						</td>
						<td colspan="5"></td>
						<td colspan="3"></td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label border-bottom-0">
							<span class="count">25.</span> MOTHERS MAIDEN NAME
						</td>
						<td colspan="5"></td>
						<td colspan="3"></td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label border-0">
							<span class="count"></span> SURNAME
						</td>
						<td colspan="5"></td>
						<td colspan="3"></td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label border-0">
							<span class="count"></span> FIRST NAME
						</td>
						<td colspan="5"></td>
						<td colspan="3"></td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label border-0">
							<span class="count"></span> MIDDLE NAME
						</td>
						<td colspan="5"></td>
						<td colspan="6" class="s-label text-danger text-center"><i><b>(Continue on seperate sheet if necessary)</b></i></td>
					</tr>
				</tbody>

				<tbody class="table-body">
					<tr>
						<td colspan="12" class="text-white separator">III. EDUCATIONAL BACKGROUND</td>
					</tr>
					<tr class="text-center">
						<td colspan="1" class="s-label border-bottom-0">
							<span class="count">26.</span>
							<span class="d-block text-center">LEVEL</span>
						</td>
						<td colspan="4" class="s-label border-bottom-0">
							NAME OF SCHOOL<br>(Write in full)
						</td>
						<td colspan="2" class="s-label border-bottom-0">
							BASIC EDUCATION/DEGREE/COURSE<br>
							(Write in full)
						</td>
						<td colspan="2" class="s-label border-bottom-0">
							PERIOD OF ATTENDANCE
						</td>
						<td colspan="1" class="s-label border-bottom-0">HIGHEST LEVEL/UNITS EARNED<br>(If not graduated)</td>
						<td colspan="1" class="s-label border-bottom-0">YEAR GRADUATED</td>
						<td colspan="1" class="s-label border-bottom-0">SCHOLARSHIP/<br>ACADEMIC<br>HONORS<br>RECEIVED</td>
					</tr>
					<tr class="text-center" style="margin-top: -20px;">
						<td colspan="1" class="s-label border-top-0"></td>
						<td colspan="4" class="s-label border-top-0"></td>
						<td colspan="2" class="s-label border-top-0"></td>
						<td colspan="1" class="s-label">From</td>
						<td colspan="1" class="s-label">To</td>
						<td colspan="1" class="s-label border-top-0"></td>
						<td colspan="1" class="s-label border-top-0"></td>
						<td colspan="1" class="s-label border-top-0"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label">
							<span class="count"></span> ELEMENTARY
						</td>
						<td colspan="4"></td>
						<td colspan="2"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label">
							<span class="count"></span> SECONDARY
						</td>
						<td colspan="4"></td>
						<td colspan="2"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label">
							<span class="count"></span> VOCATIONAL/<br>
							<span class="count"></span> TRADE COURSE
						</td>
						<td colspan="4"></td>
						<td colspan="2"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label">
							<span class="count"></span> COLLEGE
						</td>
						<td colspan="4"></td>
						<td colspan="2"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
					</tr>
					<tr>
						<td colspan="1" class="s-label">
							<span class="count"></span> GRADUATE STUDIES
						</td>
						<td colspan="4"></td>
						<td colspan="2"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
					</tr>
				</tbody>

				<tbody class="table-body">
					<tr>
						<td colspan="12" class="text-white separator bg-transparent text-danger text-center">
							<i>(Continue on seperate sheet if necessary)</i>
						</td>
					</tr>
					<tr>
						<td colspan="1" class="text-center"><i><b>SIGNATURE</b></i></td>
						<td colspan="6"></td>
						<td colspan="2" class="text-center"><i><b>DATE</b></i></td>
						<td colspan="3"></td>
					</tr>
				</tbody>

				<!-- End of Page 1 -->

				<tbody class="table-body">
					<tr>
						<td colspan="12" class="text-white separator">IV.  CIVIL SERVICE ELIGIBILITY</td>
					</tr>
					<tr class="text-center">
						<td colspan="5" class="s-label border-bottom-0" style="width:30%">
							<span class="count float-left">27.</span>
							CAREER SERVICE/ RA 1080 (BOARD/ BAR) UNDER SPECIAL LAWS/ CES/ CSEE
							BARANGAY ELIGIBILITY / DRIVER'S LICENSE
						</td>
						<td colspan="1" class="s-label border-bottom-0">RATING<br>(If Applicable)</td>
						<td colspan="2" class="s-label border-bottom-0">DATE OF EXAMINATION / CONFERMENT</td>
						<td colspan="2" class="s-label border-bottom-0">PLACE OF EXAMINATION / CONFERMENT</td>
						<td colspan="2" class="s-label border-bottom-0">LICENSE<br>(if applicable)</td>
					</tr>
					<tr class="text-center">
						<td colspan="5" class="s-label border-top-0"></td>
						<td colspan="1" class="s-label border-top-0"></td>
						<td colspan="2" class="s-label border-top-0"></td>
						<td colspan="2" class="s-label border-top-0"></td>
						<td colspan="1" class="s-label">NUMBER</td>
						<td colspan="1" class="s-label">Date of Validity</td>
					</tr>
					<tr>
						<td colspan="5"></td>
						<td colspan="1"></td>
						<td colspan="2"></td>
						<td colspan="2"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
					</tr>
					<tr>
						<td colspan="5"></td>
						<td colspan="1"></td>
						<td colspan="2"></td>
						<td colspan="2"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
					</tr>
					<tr>
						<td colspan="5"></td>
						<td colspan="1"></td>
						<td colspan="2"></td>
						<td colspan="2"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
					</tr>
					<tr>
						<td colspan="5"></td>
						<td colspan="1"></td>
						<td colspan="2"></td>
						<td colspan="2"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
					</tr>
				</tbody>

				<tbody class="table-body">
					<tr>
						<td colspan="12" class="text-white separator bg-transparent text-danger text-center">
							<i>(Continue on seperate sheet if necessary)</i>
						</td>
					</tr>
				</tbody>

				<tbody class="table-body">
					<tr>
						<td colspan="12" class="text-white separator">
							V.  WORK EXPERIENCE<br>
							<small><i>(Include private employment.  Start from your recent work) Description of duties should be indicated in the attached Work Experience sheet.</i></small>
						</td>
					</tr>
					<tr class="text-center">
						<td colspan="1" class="s-label border-bottom-0" style="width: 20%;">
							<span class="count float-left">28.</span>
							INCLUSIVE DATES<br>(mm/dd/yyyy)
							
						</td>
						<td colspan="5" class="s-label border-bottom-0">
							POSITION TITLE<br>
							Write in full/Do not abbreviate)
						</td>
						<td colspan="2" class="s-label border-bottom-0">
							DEPARTMENT/AGENCY/OFFICE/COMPANY<br>
							(Write in full/Do not abbreviate)
						</td>
						<td colspan="1" class="s-label border-bottom-0">MONTHLY<br>SALARY</td>
						<td colspan="1" class="s-label border-bottom-0"><small>SALARY/ JOB/ PAY<br>GRADE (if applicable)& STEP  (Format "00-0")/ INCREMENT</small></td>
						<td colspan="1" class="s-label border-bottom-0">STATUS OF<br>APPOINTMENT</td>
						<td colspan="1" class="s-label border-bottom-0">GOV'T SERVICE<br>
							<small>(Y/ N)</small></td>
					</tr>
					<tr>
						<td colspan="1" class="p-0">
						<table class="w-100 border-0">
							<tbody class="border-0">
								<tr class="text-center">
									<td class="s-label border-0 border-bottom-0" style="width: 50%;">From</td>
									<td class="s-label border-top-0 border-right-0 border-bottom-0" style="width: 50%;">To</td>
								</tr>
							</tbody>
						</table>
						</td>
						<td colspan="5" class="s-label border-top-0"></td>
						<td colspan="2" class="s-label border-top-0"></td>
						<td colspan="1" class="s-label border-top-0"></td>
						<td colspan="1" class="s-label border-top-0"></td>
						<td colspan="1" class="s-label border-top-0"></td>
						<td colspan="1" class="s-label border-top-0"></td>
					</tr>
					<tr>
						<td colspan="1" class="p-0">
						<table class="w-100 border-0">
							<tbody class="border-0">
								<tr>
									<td class="border-0 border-bottom-0" style="width: 50%;"></td>
									<td class="border-top-0 border-right-0 border-bottom-0" style="width: 50%;"></td>
								</tr>
							</tbody>
						</table>
						</td>
						<td colspan="5"></td>
						<td colspan="2"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
					</tr>
					<tr>
						<td colspan="1" class="p-0">
						<table class="w-100 border-0">
							<tbody class="border-0">
								<tr>
									<td class="border-0 border-bottom-0" style="width: 50%;"></td>
									<td class="border-top-0 border-right-0 border-bottom-0" style="width: 50%;"></td>
								</tr>
							</tbody>
						</table>
						</td>
						<td colspan="5"></td>
						<td colspan="2"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
					</tr>
					<tr>
						<td colspan="1" class="p-0">
						<table class="w-100 border-0">
							<tbody class="border-0">
								<tr>
									<td class="border-0 border-bottom-0" style="width: 50%;"></td>
									<td class="border-top-0 border-right-0 border-bottom-0" style="width: 50%;"></td>
								</tr>
							</tbody>
						</table>
						</td>
						<td colspan="5"></td>
						<td colspan="2"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
					</tr>
					<tr>
						<td colspan="1" class="p-0">
						<table class="w-100 border-0">
							<tbody class="border-0">
								<tr>
									<td class="border-0 border-bottom-0" style="width: 50%;"></td>
									<td class="border-top-0 border-right-0 border-bottom-0" style="width: 50%;"></td>
								</tr>
							</tbody>
						</table>
						</td>
						<td colspan="5"></td>
						<td colspan="2"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
					</tr>
				</tbody>

				<tbody class="table-body">
					<tr>
						<td colspan="12" class="text-white separator bg-transparent text-danger text-center">
							<i>(Continue on seperate sheet if necessary)</i>
						</td>
					</tr>
					<tr>
						<td colspan="1" class="text-center"><i><b>SIGNATURE</b></i></td>
						<td colspan="6"></td>
						<td colspan="2" class="text-center"><i><b>DATE</b></i></td>
						<td colspan="3"></td>
					</tr>
				</tbody>

				<!-- End of Page 2 -->

				<tbody class="table-body">
					<tr>
						<td colspan="12" class="text-white separator">VI. VOLUNTARY WORK OR INVOLVEMENT IN CIVIC / NON-GOVERNMENT / PEOPLE / VOLUNTARY ORGANIZATION/S</td>
					</tr>
					<tr class="text-center">
						<td colspan="6" class="s-label border-bottom-0">
							<span class="count float-left">29.</span> NAME & ADDRESS OF ORGANIZATION<br>
							(Write in full)
						</td>
						<td colspan="2" class="s-label border-bottom-0">INCLUSIVE DATES</td>
						<td colspan="1" class="s-label border-bottom-0">NUMBER OF HOURS</td>
						<td colspan="3" class="s-label border-bottom-0">POSITION / NATURE OF WORK</td>
					</tr>
					<tr class="text-center">
						<td colspan="6" class="s-label border-top-0"></td>
						<td colspan="1" class="s-label">From</td>
						<td colspan="1" class="s-label">To</td>
						<td colspan="1" class="s-label border-top-0"></td>
						<td colspan="3" class="s-label border-top-0"></td>
					</tr>
					<tr>
						<td colspan="6"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="6"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="6"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="6"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="3"></td>
					</tr>
				</tbody>

				<tbody class="table-body">
					<tr>
						<td colspan="12" class="text-white separator bg-transparent text-danger text-center">
							<i>(Continue on seperate sheet if necessary)</i>
						</td>
					</tr>
				</tbody>

				<tbody class="table-body">
					<tr>
						<td colspan="12" class="text-white separator">VI. VOLUNTARY WORK OR INVOLVEMENT IN CIVIC / NON-GOVERNMENT / PEOPLE / VOLUNTARY ORGANIZATION/S<br>
							<small><i>(Start from the most recent L&D/training program and include only the relevant L&D/training taken for the last five (5) years for Division Chief/Executive/Managerial positions)</i></small>
						</td>
					</tr>
					<tr class="text-center">
						<td colspan="6" class="s-label border-bottom-0">
							<span class="count float-left">30.</span> TITLE OF LEARNING AND DEVELOPMENT INTERVENTIONS/TRAINING PROGRAMS<br>
							(Write in full)
						</td>
						<td colspan="2" class="s-label border-bottom-0">INCLUSIVE DATES</td>
						<td colspan="1" class="s-label border-bottom-0">NUMBER OF HOURS</td>
						<td colspan="1" class="s-label border-bottom-0">Type of LD ( Managerial/ Supervisory/Technical/etc)</td>
						<td colspan="2" class="s-label border-bottom-0">CONDUCTED/ SPONSORED BY<br>(Write in full)</td>
					</tr>
					<tr class="text-center">
						<td colspan="6" class="s-label border-top-0"></td>
						<td colspan="1" class="s-label">From</td>
						<td colspan="1" class="s-label">To</td>
						<td colspan="1" class="s-label border-top-0"></td>
						<td colspan="1" class="s-label border-top-0"></td>
						<td colspan="2" class="s-label border-top-0"></td>
					</tr>
					<tr>
						<td colspan="6"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="2"></td>
					</tr>
					<tr>
						<td colspan="6"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="2"></td>
					</tr>
					<tr>
						<td colspan="6"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="2"></td>
					</tr>
					<tr>
						<td colspan="6"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="2"></td>
					</tr>
					<tr>
						<td colspan="6"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="1"></td>
						<td colspan="2"></td>
					</tr>
				</tbody>

				<tbody class="table-body">
					<tr>
						<td colspan="12" class="text-white separator bg-transparent text-danger text-center">
							<i>(Continue on seperate sheet if necessary)</i>
						</td>
					</tr>
				</tbody>
				
				<tbody class="table-body">
					<tr>
						<td colspan="12" class="text-white separator">VIII.  OTHER INFORMATION</td>
					</tr>
					<tr class="text-center">
						<td colspan="4" class="s-label">
							<span class="count float-left">31.</span> SPECIAL SKILLS and HOBBIES
						</td>
						<td colspan="4" class="s-label">
							<span class="count float-left">32.</span> NON-ACADEMIC DISTINCTIONS / RECOGNITION<br>(Write in full)
						</td>
						<td colspan="4" class="s-label">
							<span class="count float-left">33.</span> MEMBERSHIP IN ASSOCIATION/ORGANIZATION<br>(Write in full)
						</td>
					</tr>
					<tr>
						<td colspan="4"></td>
						<td colspan="4"></td>
						<td colspan="4"></td>
					</tr>
					<tr>
						<td colspan="4"></td>
						<td colspan="4"></td>
						<td colspan="4"></td>
					</tr>
					<tr>
						<td colspan="4"></td>
						<td colspan="4"></td>
						<td colspan="4"></td>
					</tr>
					<tr>
						<td colspan="4"></td>
						<td colspan="4"></td>
						<td colspan="4"></td>
					</tr>
				</tbody>

				<tbody class="table-body">
					<tr>
						<td colspan="12" class="text-white separator bg-transparent text-danger text-center">
							<i>(Continue on seperate sheet if necessary)</i>
						</td>
					</tr>
					<tr>
						<td colspan="4" class="text-center"><i><b>SIGNATURE</b></i></td>
						<td colspan="3"></td>
						<td colspan="1" class="text-center"><i><b>DATE</b></i></td>
						<td colspan="4"></td>
					</tr>
				</tbody>

				<!-- End of Page 3 -->

				<!-- Q1 -->
				<tbody class="table-body question-block">
					<tr>
						<td colspan="12" class="separator"></td>
					</tr>
					<tr>
						<td colspan="7" class="s-label border-bottom-0">
							<span class="count">34.</span> Are you related by consanguinity or affinity to the appointing or recommending authority, or to the<br>
							<span class="count"></span>chief of bureau or office or to the person who has immediate supervision over you in the Office,<br>
							<span class="count"></span>Bureau or Department where you will beapppointed,<br>
						</td>
						<td colspan="2">
							
						</td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="7" class="s-label">
							<span class="count"></span>a. within the third degree?<br>
						</td>
						<td colspan="2"></td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="7" class="s-label">
							<span class="count"></span>b. within the fourth degree (for Local Government Unit - Career Employees)?
						</td>
						<td colspan="2"></td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="7" class="s-label">
						</td>
						<td colspan="2">If YES, give details:</td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="7" class="s-label"></td>
						<td colspan="5"></td>
					</tr>
				</tbody>

				<!-- Q2 -->
				<tbody class="table-body question-block">
					<tr>
						<td colspan="7" class="s-label border-bottom-0">
							<span class="count">35.</span> a. Have you ever been found guilty of any administrative offense?
						</td>
						<td colspan="2">
							
						</td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="7" class="s-label"></td>
						<td colspan="5">If YES, give details:</td>
					</tr>
					<tr>
						<td colspan="7" class="s-label"></td>
						<td colspan="5"></td>
					</tr>
					<tr>
						<td colspan="7" class="s-label">
							<span class="count"></span> b. within the fourth degree (for Local Government Unit - Career Employees)?
						</td>
						<td colspan="2" style="border-top-width: 1px !important;"></td>
						<td colspan="3" style="border-top-width: 1px !important;"></td>
					</tr>
					<tr>
						<td colspan="7" class="s-label"></td>
						<td colspan="5">If YES, give details:</td>
					</tr>
					<tr>
						<td colspan="7" class="s-label"></td>
						<td colspan="2">Date Filed:</td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="7" class="s-label"></td>
						<td colspan="2">Status of Case/s:</td>
						<td colspan="3"></td>
					</tr>
				</tbody>

				<!-- Q3 -->
				<tbody class="table-body question-block">
					<tr>
						<td colspan="7" class="s-label border-bottom-0">
							<span class="count">36.</span> Have you ever been convicted of any crime or violation of any law, decree, ordinance or regulation by any court or tribunal?
						</td>
						<td colspan="2"></td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="7" class="s-label"></td>
						<td colspan="5">If YES, give details:</td>
					</tr>
					<tr>
						<td colspan="7" class="s-label"></td>
						<td colspan="5"></td>
					</tr>
				</tbody>

				<!-- Q4 -->
				<tbody class="table-body question-block">
					<tr>
						<td colspan="7" class="s-label border-bottom-0">
							<span class="count">37.</span> Have you ever been separated from the service in any of the following modes: resignation,<br>
							
							
						</td>
						<td colspan="2"></td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="7" class="s-label">
							<span class="count"></span> retirement, dropped from the rolls, dismissal, termination, end of term, finished contract or phased<br>
						</td>
						<td colspan="5">If YES, give details:</td>
					</tr>
					<tr>
						<td colspan="7" class="s-label">
							<span class="count"></span> out (abolition) in the public or private sector?
						</td>
						<td colspan="2"></td>
						<td colspan="3"></td>
					</tr>
				</tbody>

				<!-- Q5 -->
				<tbody class="table-body question-block">
					<tr>
						<td colspan="7" class="s-label border-bottom-0">
							<span class="count">38.</span> a. Have you ever been a candidate in a national or local election held within the last year (except Barangay election)?
						</td>
						<td colspan="2"></td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="7" class="s-label">
							<span class="count"></span><br>
						</td>
						<td colspan="2">If YES, give details:</td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="7" class="s-label">
							<span class="count"></span> b. Have you resigned from the government service during the three (3)-month period before the last
						</td>
						<td colspan="2"></td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="7" class="s-label">
							<span class="count"></span> election to promote/actively campaign for a national or local candidate?
						</td>
						<td colspan="2">If YES, give details:</td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="7" class="s-label"></td>
						<td colspan="2"></td>
						<td colspan="3"></td>
					</tr>
				</tbody>

				<!-- Q6 -->
				<tbody class="table-body question-block">
					<tr>
						<td colspan="7" class="s-label border-bottom-0">
							<span class="count">39.</span> Have you acquired the status of an immigrant or permanent resident of another country?
						</td>
						<td colspan="2">
							
						</td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="7" class="s-label">
						</td>
						<td colspan="2">if YES, give details (country):</td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="7" class="s-label">
						</td>
						<td colspan="2"></td>
						<td colspan="3"></td>
					</tr>
				</tbody>

				<!-- Q7 -->
				<tbody class="table-body question-block">
					<tr>
						<td colspan="7" class="s-label border-bottom-0">
							<span class="count">40.</span> Pursuant to: (a) Indigenous People's Act (RA 8371); (b) Magna Carta for Disabled Persons (RA<br>
							<span class="count"></span> 7277); and (c) Solo Parents Welfare Act of 2000 (RA 8972), please answer the following items:
						</td>
						<td colspan="2">
							
						</td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="7" class="s-label">
							<span class="count"></span>a. Are you a member of any indigenous group?<br>
						</td>
						<td colspan="2"></td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="7" class="s-label">
							<span class="count"></span><br>
						</td>
						<td colspan="2">If YES, please specify:</td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="7" class="s-label">
							<span class="count"></span>b. Are you a person with disability?
						</td>
						<td colspan="2"></td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="7" class="s-label">
						</td>
						<td colspan="2">If YES, please specify:</td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="7" class="s-label">
							<span class="count"></span>c. Are you a solo parent?
						</td>
						<td colspan="2"></td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td colspan="7" class="s-label"></td>
						<td colspan="2">If YES, please specify:</td>
						<td colspan="3"></td>
					</tr>
				</tbody>

				<!-- End of Page 4 -->

				<tbody class="table-body">
					<tr>
						<td colspan="8" class="s-label">
							<span class="count">41.</span> REFERENCES <span class="text-danger">(Person not related by consanguinity or affinity to applicant /appointee)</span>
						</td>
						<td colspan="4" rowspan="5" class="p-5">
							<table class="w-75 mx-auto border-0">
								<tbody class="border-0">
									<tr>
										<td class="text-center p-3">ID picture taken within the last  6 months3.5 cm. X 4.5 cm(passport size)With full and handwrittenname tag and signature overprinted nameComputer generated or photocopied picture is not acceptable</td>
									</tr>
									<tr>
										<td class="border-0 text-muted lead text-center">PHOTO</td>
									</tr>
								</tbody>
							</table>
						</td>
					</tr>
					<tr class="text-center">
						<td colspan="4" class="s-label">NAME</td>
						<td colspan="2" class="s-label">ADDRESS</td>
						<td colspan="2" class="s-label">TEL. NO.</td>
					</tr>
					<tr>
						<td colspan="4"></td>
						<td colspan="2"></td>
						<td colspan="2"></td>
					</tr>
					<tr>
						<td colspan="4"></td>
						<td colspan="2"></td>
						<td colspan="2"></td>
					</tr>
					<tr>
						<td colspan="8">
							<span class="count">42.</span> I declare under oath that I have personally accomplished this Personal Data Sheet which is a true correct and<br><span class="count"></span> complete statement pursuant to the provisions of pertinent laws, rules and regulations of the Republic of the<br><span class="count"></span> Philippines. I authorize the agency head / authorized representative t verify validate the contents stated herein.<br><span class="count"></span> I agree that any misrepresentation made in this document and its attachments shall cause the filing of<br><span class="count"></span> administrative/criminal case/s against me.
						</td>
					</tr>
					<tr>
						<td colspan="12" class="border-0 p-0">
							<table class="border-0 w-100">
								<tbody class="border-0">
									<tr>
										<td colspan="4" class="border-0 p-3" style="width: 38.5%;">
											<table class="border-0 w-100">
												<tbody>
													<tr>
														<td class="s-label py-2">Government Issued ID(i.e.Passport, GSIS, SSS, PRC, Driver's License, etc.)<br>                               PLEASE INDICATE ID Number and Date of Issuance</td>
													</tr>
													<tr>
														<td style="width: 30%;">Government Issued ID:</td>
													</tr>
													<tr>
														<td style="width: 30%;">ID/License/Passport No.:</td>
													</tr>
													<tr>
														<td style="width: 30%;">Date/Place of Issuance:</td>
													</tr>
												</tbody>
											</table>
										</td>
										<td colspan="4" class="border-0 p-3" style="width: 38.5%;">
											<table class="border-0 w-100">
												<tbody class="border-0 text-center">
													<tr>
														<td class="py-4"></td>
													</tr>
													<tr>
														<td class="s-label"><small>Signature (Sign inside the box)</small></td>
													</tr>
													<tr>
														<td></td>
													</tr>
													<tr>
														<td class="s-label"><small>Date Accomplished</small></td>
													</tr>
												</tbody>
											</table>
										</td>
										<td colspan="4" class="border-0 p-3">
											<table class="border-0 w-100">
												<tbody class="border-0">
													<tr>
														<td class="py-5"></td>
													</tr>
													<tr>
														<td class="s-label text-center">Right Thumbmark</td>
													</tr>
												</tbody>
											</table>
										</td>
									</tr>
								</tbody>

								<tbody class="table-body">
									<tr>
										<td colspan="12" class="text-center py-2">
											SUBSCRIBED AND SWORN to before me this <input type="text" class="border-top-0 border-left-0 border-right-0" style="width: 25%;"> , affiant exhibiting his/her validly issued government ID as indicated above.
										</td>
									</tr>
									<tr>
										<td colspan="12" class="py-5">
											<table class="w-25 mx-auto">
												<tbody>
													<tr>
														<td class="py-5"></td>
													</tr>
													<tr>
														<td class="s-label text-center">Person Administering Oath</td>
													</tr>
												</tbody>
											</table>
										</td>
									</tr>
								</tbody>

							</table>
						</td>
					</tr>
				</tbody>

				<!-- End of References -->

			</table>
		</form>
	</div>
</body>
</html>

Customize The Style

#pds-table {
    width: 100%;
    max-width: 9in;
    margin: 0 auto;
    border: 2px solid #000;
}
#pds-table td:not(.separator) {
    font-size: 10px;
    border-color: #000;
    height: 20px; /* For Visual Purposes */
}
#pds-table tbody {
    border: 1px solid #000;
}
#pds-table tbody:not(.table-header) td {
    border: 1px solid #000;
}
#pds-table .separator {
    font-size: 12px;
    font-style: italic;
    font-weight: 600;
    background-color: #757575;
    border-top-width: 2px !important;
    border-bottom-width: 2px !important;
}
#pds-table td.s-label {
    background-color: #dddddd;
    width: 20%;
}
#pds-table td .count {
    display: inline-block;
    width: 1.32em;
    text-align: center;
}
.table-body.question-block td {
    font-size: 13px !important;
}
.table-body.question-block tr td:first-child {
    border-bottom-width: 0px !important;
    border-top-width: 0px !important;
}
.table-body.question-block tr td:not(:first-child) {
    border-width: 0px !important;
}
.table-body.question-block tr td:nth-child(2) {
    padding-left: 15px;
}

Download the Complete Source Codes. For more information you can contact me @ Email – larrydaveemol@gmail.com

Let me know what you need just leave a message/comment and I will do my very best to make that happen. I hope this codes will help you. Enjoy Coding!

Categories
JavaScript Templating PHP

Minimal Templating with Templater.js

In this application you’ll learn how display data in a table with PHP and MySQL using TemplaterJS it is a tiny JS library for minimal templating.

First we will Create the Database Table

Execute SQL Dump file

-- phpMyAdmin SQL Dump
-- version 4.8.5
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Apr 17, 2020 at 08:40 AM
-- Server version: 10.1.38-MariaDB
-- PHP Version: 7.1.27

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `db_vue_product`
--

-- --------------------------------------------------------

--
-- Table structure for table `products`
--

CREATE TABLE `products` (
  `id` int(11) NOT NULL,
  `namex` varchar(255) NOT NULL,
  `category` varchar(100) NOT NULL,
  `qty` varchar(255) NOT NULL,
  `stock` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Dumping data for table `products`
--

INSERT INTO `products` (`id`, `namex`, `category`, `qty`, `stock`) VALUES
(150, '1st Product', 'category 1', '4', 'In Stock'),
(151, '2nd Product', 'category 12', '0', 'Out of stock'),
(186, '3rd Product', 'category 3', '22', 'In Stock'),
(187, '4th Products', 'wwd', '2', 'In Stock');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `products`
--
ALTER TABLE `products`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `products`
--
ALTER TABLE `products`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=188;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Creating the Connection File

After creating the table, we need to setup your database connection copy and paste the code below in order to connect to the MySQL database server. Let’s create and name it to “database.php” and put the following code inside it.

<?php
    class Database{ 
        private $db_host = 'localhost';
        private $db_name = 'db_angular_product';
        private $db_username = 'root';
        private $db_password = '';
        
        public function dbConnection(){
            try{
                $conn = new PDO('mysql:host='.$this->db_host.';dbname='.$this->db_name,$this->db_username,$this->db_password);
                $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
                return $conn;
            }
            catch(PDOException $e){
                echo "Connection error ".$e->getMessage(); 
                exit;
            } 
        }
    }
?>

Web API Controller

<?php
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Headers: access");
    header("Access-Control-Allow-Methods: POST");
    header("Access-Control-Allow-Credentials: true");
    header("Content-Type: application/json; charset=UTF-8");
    // header("Accept-Encoding", "UTF-8");

    require 'database.php';
    $db_connection = new Database();
    $conn = $db_connection->dbConnection();

    // Raw JSON Parameter
       $data=json_decode(file_get_contents("php://input"));
       
    // Extract the Data Fields
    $action = $data->action;
    switch ($action) 
    {
        case "get_product_list":
            $statement = $conn->prepare("SELECT * FROM products");
            $statement->execute();
            $results=$statement->fetchAll(PDO::FETCH_ASSOC);
            print json_encode($results, JSON_UNESCAPED_UNICODE);
            break;
          }
?>

Creating Simple Page

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Proghubsterzeak</title>
  <link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.min.css">
</head>

<body>

  <header>
    <nav class="navbar navbar-light bg-light">
      <span class="navbar-text">
        <a href="https://proghubsterzeak.com/"> https://proghubsterzeak.com</a>
      </span>
    </nav>
  </header>

  <section id="my-app">
    <div class="container">
      <div class="row py-5">
        <div class="table-responsive">
          <table class="table-product table table-bordered table-striped">
            <thead class="thead-product">
              <tr>
                <th style="width:5%">No.</th>
                <th>Name</th>
                <th style="width:15%">Category</th>
                <th style="width:5%">Quantity</th>
                <th style="width:15%">Status</th>
              </tr>
            </thead>
            <tbody id="get_product">

            </tbody>
          </table>
        </div>
      </div>
    </div>
  </section>

  <script src="./assets/jquery/jquery.min.js"></script>
  <script src="./assets/templater/templater.min.js"></script>
  <script src="./assets/js/script.js"></script>

  <script id="product_list_data" type="text/template">
    <tr>
      <td>{{ id }}</td>
      <td>{{ namex }}</td>
      <td>{{ category }}</td>
      <td>{{ qty }}</td>
      <td><span class="badge badge-default">{{ stock }}</span></td>
    </tr>
  </script>

</body>

</html>

Ajax Request function

$(document).ready(function () {
	var tmpl = $("#product_list_data").html();
	$.ajax({
		method: "POST",
		url: "./library/api.php",
		dataType: 'json',
		contentType: 'application/json',
		data: JSON.stringify({ "action": "get_product_list" }),
		success: function (prodData) {
			$.each(prodData, function (i, product) {
				const template = templater(tmpl);
				$('#get_product').append(template(product));
			});
		}
	});
})

Download the complete source code. For more information about the system. You can contact me @ Email – larrydaveemol@gmail.com

Let me know what you need just leave a message/comment and I will do my very best to make that happen. I hope this codes will help you. Enjoy Coding!

Categories
JavaScript Templating PHP VueJS

VueJS PHP CRUD using Web API

I would like to share my CRUD (Create, Read, Update and Delete) using Web API and VueJS in PHP.

Creating the Database Table

Execute SQL Dump file

-- phpMyAdmin SQL Dump
-- version 4.8.5
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Apr 17, 2020 at 08:40 AM
-- Server version: 10.1.38-MariaDB
-- PHP Version: 7.1.27

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `db_vue_product`
--

-- --------------------------------------------------------

--
-- Table structure for table `products`
--

CREATE TABLE `products` (
  `id` int(11) NOT NULL,
  `namex` varchar(255) NOT NULL,
  `category` varchar(100) NOT NULL,
  `qty` varchar(255) NOT NULL,
  `stock` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Dumping data for table `products`
--

INSERT INTO `products` (`id`, `namex`, `category`, `qty`, `stock`) VALUES
(150, '1st Product', 'category 1', '4', 'In Stock'),
(151, '2nd Product', 'category 12', '0', 'Out of stock'),
(186, '3rd Product', 'category 3', '22', 'In Stock'),
(187, '4th Products', 'wwd', '2', 'In Stock');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `products`
--
ALTER TABLE `products`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `products`
--
ALTER TABLE `products`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=188;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Creating the Connection File

<?php
    class Database{ 
        private $db_host = 'localhost';
        private $db_name = 'db_vue_product';
        private $db_username = 'root';
        private $db_password = '';
        
        public function dbConnection(){
            try{
                $conn = new PDO('mysql:host='.$this->db_host.';dbname='.$this->db_name,$this->db_username,$this->db_password);
                $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
                return $conn;
            }
            catch(PDOException $e){
                echo "Connection error ".$e->getMessage(); 
                exit;
            } 
        }
    }
?>

Web API Controller

The Web API Controller consists of the following three Action methods.
– Get all the records from the Product table
– Add and Update Product
– Delete Product

<?php
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Headers: access");
    header("Access-Control-Allow-Methods: POST");
    header("Access-Control-Allow-Credentials: true");
    header("Content-Type: application/json; charset=UTF-8");
    // header("Accept-Encoding", "UTF-8");

    require 'database.php';
    $db_connection = new Database();
    $conn = $db_connection->dbConnection();

    // Raw JSON Parameter
       $data=json_decode(file_get_contents("php://input"));
       
    // Extract the Data Fields
    $action = $data->action;
    switch ($action) 
    {
        case "get_product_list":

            $statement = $conn->prepare("SELECT * FROM products");
            $statement->execute();
            $results=$statement->fetchAll(PDO::FETCH_ASSOC);
            print json_encode($results, JSON_UNESCAPED_UNICODE);
            break;

        case "AddUpdate":
          
            $id = $data->id;
            $name = $data->name;
            $category = $data->category;
            $qty = $data->qty;
            $action = $data->btnName;
            
            if($qty > 0) {
              $qty_status = 'In Stock';
            } else if($qty < 1) {
              $qty_status = 'Out of stock';
            }

            if ($action =='SAVE') {
                  $statement = $conn->prepare("SELECT * FROM products WHERE id='$id'");
                  $statement->execute();
                  $results=$statement->fetchAll(PDO::FETCH_ASSOC);
                  if ($results > 1) {
                    $statement = $conn->prepare("INSERT INTO products (id, namex, category, qty, stock) 
                    VALUES ('', ?, ?, ?, ?)");
                    $statement->bindParam(1, $name, PDO::PARAM_STR);
                    $statement->bindParam(2, $category, PDO::PARAM_STR);
                    $statement->bindParam(3, $qty, PDO::PARAM_STR);
                    $statement->bindParam(4,$qty_status);
                    $statement->execute();
                   
                  } else {
                  }
  
            } else if ($action =='UPDATE') {
                  $id = $data->id;
                  $statement = $conn->prepare("SELECT * FROM products WHERE id='$id'");
                  $statement->execute();
                  $results=$statement->fetchAll(PDO::FETCH_ASSOC);
                  if ($results > 1) {
                    $statement = $conn->prepare("UPDATE products SET namex=?, category=?, qty=?, stock=? WHERE id=$id");
                    $statement->bindParam(1, $name, PDO::PARAM_STR);
                    $statement->bindParam(2, $category, PDO::PARAM_STR);
                    $statement->bindParam(3, $qty, PDO::PARAM_STR);
                    $statement->bindParam(4,$qty_status);
                    $statement->execute();
                  } else {
                  }
            }
            break;

        case "Delete":
        
            $id=$data->id;

            $statement =$conn->prepare("DELETE FROM products WHERE id = '$id'");
            $statement->execute();
            break;
    }
?>

Creating a Vue instance with the Vue function

const app = new Vue({
	el: "#my-app",
	data: {
		errors: [],
		searchQuery: '',
		products: [],
		id: "",
		name: null,
		category: null,
		qty: null,
		btnName: "SAVE",
		formTitle: "ADD PRODUCT"
	},
	methods: {

		addProduct: function () {
			this.id = "";
			this.name = "";
			this.category = "";
			this.qty = "";
			this.btnName = "SAVE";
			this.formTitle = 'ADD PRODUCT';
		},

		getAllProduct: function () {
			var self = this;
			axios({
				method: "POST",
				url: "./library/api.php",
				dataType: 'json',
				contentType: 'application/json',
				data: JSON.stringify({ "action": "get_product_list" }),
			}).then(function success(response) {
				self.products = response.data
			});
		},

		deleteProduct: function (id) {
			var self = this;
			if (confirm("Are you sure you want to remove it?")) {
				axios({
					method: "POST",
					url: "./library/api.php",
					data: { 'id': id, 'action': 'Delete' }
				}).then(function success(response) {
					self.getAllProduct();
					let message = "Product was successfully deleted";
					self.flashMessage(message, 'success');
				});
			}
		},

		update_data: function (id, name, category, qty) {
			this.id = id;
			this.name = name;
			this.category = category;
			this.qty = qty;
			this.btnName = "UPDATE";
			this.formTitle = 'EDIT PRODUCT';
		},

		InsertUpdateProduct: function (event) {
			var self = this;

			if (this.name === '' || this.category === '' || this.qty === '') {
				this.errors = [];
				if (!this.name) this.errors.push("Product Name required.");
				if (!this.category) this.errors.push("Category required.");
				if (!this.qty) this.errors.push("Quantity required.");
			} else {
				axios({
					method: "POST",
					url: "./library/api.php",
					dataType: 'json',
					contentType: 'application/json',
					data: JSON.stringify({ id: this.id, name: this.name, category: this.category, qty: this.qty, btnName: this.btnName, "action": "AddUpdate" }),
				}).then(function success(response) {
					$('#Productform').modal('hide');
					self.errors.splice(0);
					this.name = "";
					this.category = "";
					this.qty = "";
					this.id = "";
					self.getAllProduct();
					if (self.btnName == 'SAVE') {
						let message = "Product was successfully Added";
						self.flashMessage(message, 'success');
					} else if (self.btnName == 'UPDATE') {
						let message = "Product was successfully Updated";
						self.flashMessage(message, 'success');
					}
				});
			}
		},

		filterItems: function (products) {
			var self = this;
			return products.filter(function (product) {
				let regex = new RegExp('(' + self.searchQuery + ')', 'i');
				return product.namex.match(regex);
			})
		},

		flashMessage: function (message, type = 'success') {
			if (type === 'success') {
				iziToast.success({
					title: 'Success :',
					message: message.charAt(0).toUpperCase() + message.substr(1).toLowerCase(),
					timeout: 4000,
					// theme: 'dark',
					animateInside: true,
					position: 'topRight',
					icon: 'fa fa-heart'
				});
			} else if (type === 'error') {
				iziToast.error({
					title: 'Error :',
					message: message.charAt(0).toUpperCase() + message.substr(1).toLowerCase(),
					timeout: 4000,
					// theme: 'dark',
					animateInside: true,
					position: 'topRight',
				});
			} else if (type === 'info') {
				iziToast.info({
					title: 'Info :',
					message: message.charAt(0).toUpperCase() + message.substr(1).toLowerCase(),
					timeout: 4000,
					// theme: 'dark',
					animateInside: true,
					position: 'topRight',
				});
			} else {
				iziToast.warning({
					title: 'Success :',
					message: message.charAt(0).toUpperCase() + message.substr(1).toLowerCase(),
					timeout: 4000,
					// theme: 'dark',
					animateInside: true,
					position: 'topRight',
				});
			}
		},

	},
	mounted() {
		this.getAllProduct();
	},
});

Creating Product Page

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Proghubsterzeak</title>
  <link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="./assets/izitoast/dist/css/izitoast.min.css">
  <style>
  .warning {
    background-color: rgb(255, 140, 0);
    color: #fff;
  }
  </style>
</head>

<body>

  <header>
    <nav class="navbar navbar-light bg-light">
      <span class="navbar-text">
        <a href="https://proghubsterzeak.com/"> https://proghubsterzeak.com</a>
      </span>
    </nav>
  </header>

  <section id="my-app">
    <div class="container">
      <div class="row my-5">
        <button v-on:click="addProduct();" type="button" class="btn btn-info btn-sm" data-toggle="modal"
          data-target="#Productform">Add
          Product</button>
        <div class="ml-auto">
          <input class="form-control ng-pristine ng-valid" v-model="searchQuery" type="text">
        </div>
      </div>
      <div class="row">
        <div class="table-responsive">
          <table class="table-product table table-bordered table-striped">
            <thead class="thead-product">
              <tr>
                <th style="width:5%">No.</th>
                <th>Name</th>
                <th style="width:15%">Category</th>
                <th style="width:5%">Quantity</th>
                <th style="width:15%">Status</th>
                <th style="width:18%">Action</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(product, index) in filterItems(products)" :key="product.id">
                <td>{{ product.id }}</td>
                <td>{{ product.namex }}</td>
                <td>{{ product.category }}</td>
                <td>{{ product.qty }}</td>
                <td v-if="product.qty > 10"><span class="badge badge-success">In Stock</span></td>
                <td v-else-if="product.qty <= 10 && product.qty > 0"><span class="badge badge-primary">ALmost Sold
                    Out</span></p>
                <td v-else><span class="badge badge-warning">Out Of Stock</span></td>
                <td>
                  <div class=" buttons text-center">
                    <button v-on:click="update_data(product.id, product.namex, product.category, product.qty);"
                      class="btn btn-primary btn-edit btn-sm" type="button" data-toggle="modal"
                      data-target="#Productform">Edit</button>
                    <button v-on:click="deleteProduct(product.id);"
                      class="btn btn-danger btn-delete btn-sm">Delete</button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div id="Productform" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="my-modal-title"
      aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header bg-light">
            <h5 class="modal-title" id="my-modal-title">{{ formTitle }}</h5>
            <button class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <p v-if="errors.length" class="col-12">
            <b>Please correct the following error(s):</b>
            <ul>
              <li v-for="error in errors">{{ error }}</li>
            </ul>
          </p>
          <div class="modal-body">
            <form @submit.stop.prevent="submit">
              <input type="hidden" ng-model="id">
              <div class="form-group">
                <label for="my-input">Product</label>
                <input class="form-control" type="text" v-model="name" placeholder="Product Name" />
              </div>
              <div class="form-group">
                <label for="my-input">Category</label>
                <input class="form-control" type="text" v-model="category" placeholder="Category" />
              </div>
              <div class="form-group">
                <label for="my-input">Quantity</label>
                <input class="form-control" type="number" v-model="qty" placeholder="Quantity" required />
              </div>
              <input name="insert" type="submit" class="btn btn-primary btn-add my-2" v-on:click="InsertUpdateProduct()"
                :value="btnName" />
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>

  <script src="./assets/jquery/jquery.min.js"></script>
  <script src="./assets/bootstrap/js/bootstrap.bundle.js"></script>
  <script src="./assets/izitoast/dist/js/izitoast.min.js"></script>
  <script src="./assets/vue/vue.js"></script>
  <script src="./assets/vue/axios.js"></script>
  <script src="./assets/js/script.js"></script>

</body>

</html>

If you want to get complete source code, please click Download Code button on below link. For more information about the system. You can contact me @ Email – larrydaveemol@gmail.com

Let me know what you need just leave a message/comment and I will do my very best to make that happen. I hope this codes will help you. Enjoy Coding!

Categories
AngularJS JavaScript Templating PHP

AngularJS PHP CRUD using Web API

I would like to share my CRUD (Create, Read, Update and Delete) using Web API and AngularJS in PHP.

Creating the Database Table

Execute SQL Dump file

-- phpMyAdmin SQL Dump
-- version 4.8.5
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Apr 17, 2020 at 08:40 AM
-- Server version: 10.1.38-MariaDB
-- PHP Version: 7.1.27

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `db_angular_product`
--

-- --------------------------------------------------------

--
-- Table structure for table `products`
--

CREATE TABLE `products` (
  `id` int(11) NOT NULL,
  `namex` varchar(255) NOT NULL,
  `category` varchar(100) NOT NULL,
  `qty` varchar(255) NOT NULL,
  `stock` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Dumping data for table `products`
--

INSERT INTO `products` (`id`, `namex`, `category`, `qty`, `stock`) VALUES
(150, '1st Product', 'category 1', '4', 'In Stock'),
(151, '2nd Product', 'category 12', '0', 'Out of stock'),
(186, '3rd Product', 'category 3', '22', 'In Stock'),
(187, '4th Products', 'wwd', '2', 'In Stock');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `products`
--
ALTER TABLE `products`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `products`
--
ALTER TABLE `products`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=188;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Creating the Connection File

<?php
    class Database{ 
        private $db_host = 'localhost';
        private $db_name = 'db_angular_product';
        private $db_username = 'root';
        private $db_password = '';
        
        public function dbConnection(){
            try{
                $conn = new PDO('mysql:host='.$this->db_host.';dbname='.$this->db_name,$this->db_username,$this->db_password);
                $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
                return $conn;
            }
            catch(PDOException $e){
                echo "Connection error ".$e->getMessage(); 
                exit;
            } 
        }
    }
?>

Web API Controller

The Web API Controller consists of the following three Action methods.
– Get all the records from the Product table
– Add and Update Product
– Delete Product

<?php
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Headers: access");
    header("Access-Control-Allow-Methods: POST");
    header("Access-Control-Allow-Credentials: true");
    header("Content-Type: application/json; charset=UTF-8");
    // header("Accept-Encoding", "UTF-8");

    require 'database.php';
    $db_connection = new Database();
    $conn = $db_connection->dbConnection();

    // Raw JSON Parameter
       $data=json_decode(file_get_contents("php://input"));
       
    // Extract the Data Fields
    $action = $data->action;
    switch ($action) 
    {
        case "get_product_list":

            $statement = $conn->prepare("SELECT * FROM products");
            $statement->execute();
            $results=$statement->fetchAll(PDO::FETCH_ASSOC);
            print json_encode($results, JSON_UNESCAPED_UNICODE);
            break;

        case "AddUpdate":
          
            $name = $data->name;
            $category = $data->category;
            $qty = $data->qty;
            $action = $data->btnName;
            
            if($qty > 0) {
              $qty_status = 'In Stock';
            } else if($qty < 1) {
              $qty_status = 'Out of stock';
            }

            if ($action =='SAVE') {
                  $statement = $conn->prepare("SELECT * FROM products WHERE namex='$name'");
                  $statement->execute();
                  $results=$statement->fetchAll(PDO::FETCH_ASSOC);
                  if ($results > 1) {
                    $statement = $conn->prepare("INSERT INTO products (id, namex, category, qty, stock) 
                    VALUES ('', ?, ?, ?, ?)");
                    $statement->bindParam(1, $name, PDO::PARAM_STR);
                    $statement->bindParam(2, $category, PDO::PARAM_STR);
                    $statement->bindParam(3, $qty, PDO::PARAM_STR);
                    $statement->bindParam(4,$qty_status);
                    $statement->execute();
                   
                  } else {
                  }
  
            } else if ($action =='UPDATE') {
                  $id = $data->id;
                  $statement = $conn->prepare("SELECT * FROM products WHERE namex='$name'");
                  $statement->execute();
                  $results=$statement->fetchAll(PDO::FETCH_ASSOC);
                  if ($results > 1) {
                    $statement = $conn->prepare("UPDATE products SET namex=?, category=?, qty=?, stock=? WHERE id=$id");
                    $statement->bindParam(1, $name, PDO::PARAM_STR);
                    $statement->bindParam(2, $category, PDO::PARAM_STR);
                    $statement->bindParam(3, $qty, PDO::PARAM_STR);
                    $statement->bindParam(4,$qty_status);
                    $statement->execute();
                  } else {
                  }
            }
            break;

        case "Delete":
        
            $name=$data->name;

            $statement =$conn->prepare("DELETE FROM products WHERE namex = '$name'");
            $statement->execute();
            break;
    }
?>

Angular Javascript code for register module and create controller.

var app = angular.module("Module_Product", [])

	.controller("Controller_Product", function ($scope, $http, ) {

		/* Load Product*/
		$scope.fetchData = function () {
			$http({
				method: "POST",
				url: "./library/api.php",
				dataType: 'json',
				contentType: 'application/json',
				data: JSON.stringify({ "action": "get_product_list" }),
			}).then(function success(response) {
				$scope.products = response.data;
			});
		};


		/* Insert/Update Product */
		$scope.addData = function () {
			$scope.btnName = "SAVE";
			$scope.formTitle = 'ADD PRODUCT';
			$scope.name = "";
			$scope.category = "";
			$scope.qty = "";
			$scope.stock = "";
		}

		$scope.update_data = function (id, name, category, qty, btnName) {
			$scope.id = id;
			$scope.name = name;
			$scope.category = category;
			$scope.qty = qty;
			$scope.btnName = "UPDATE";
			$scope.formTitle = 'EDIT PRODUCT';
		}

		$scope.InsertUpdateData = function () {
			if ($scope.name == null || $scope.category == null || $scope.qty == null) {
				alert("Please complete the required fields");
			} else {
				$http({
					method: "POST",
					url: "./library/api.php",
					dataType: 'json',
					contentType: 'application/json',
					data: JSON.stringify({ id: $scope.id, name: $scope.name, category: $scope.category, qty: $scope.qty, stock: $scope.stock, btnName: $scope.btnName, "action": "AddUpdate" }),
				}).then(function success(response) {
					$scope.name = "";
					$scope.category = "";
					$scope.qty = "";
					$scope.stock = "";
					$scope.fetchData();
					if ($scope.btnName == 'SAVE') {
						let message = "Product was successfully Added";
						$scope.flashMessage(message, 'success');
					} else if ($scope.btnName == 'UPDATE') {
						let message = "Product was successfully Updated";
						$scope.flashMessage(message, 'success');
					}
				});
			}
		}

		/* Delete Data*/
		$scope.deleteProduct = function (name) {
			if (confirm("Are you sure you want to remove it?")) {
				$http({
					method: "POST",
					url: "./library/api.php",
					data: { 'name': name, 'action': 'Delete' }
				}).then(function success(response) {
					$scope.success = true;
					$scope.error = false;
					$scope.fetchData();
					let message = "Product was successfully deleted";
					$scope.flashMessage(message, 'success');
				});

			}
		}

		/*Flash Message*/
		$scope.flashMessage = function (message, type = 'success') {
			if (type === 'success') {
				iziToast.success({
					title: 'Success :',
					message: message.charAt(0).toUpperCase() + message.substr(1).toLowerCase(),
					timeout: 4000,
					// theme: 'dark',
					animateInside: true,
					position: 'topRight',
					icon: 'fa fa-heart'
				});
			} else if (type === 'error') {
				iziToast.error({
					title: 'Error :',
					message: message.charAt(0).toUpperCase() + message.substr(1).toLowerCase(),
					timeout: 4000,
					// theme: 'dark',
					animateInside: true,
					position: 'topRight',
				});
			} else if (type === 'info') {
				iziToast.info({
					title: 'Info :',
					message: message.charAt(0).toUpperCase() + message.substr(1).toLowerCase(),
					timeout: 4000,
					// theme: 'dark',
					animateInside: true,
					position: 'topRight',
				});
			} else {
				iziToast.warning({
					title: 'Success :',
					message: message.charAt(0).toUpperCase() + message.substr(1).toLowerCase(),
					timeout: 4000,
					// theme: 'dark',
					animateInside: true,
					position: 'topRight',
				});
			}
		}

	});

Creating Product Page

<!DOCTYPE html>
<html lang="en" ng-app="Module_Product">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Proghubsterzeak</title>
  <link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="./assets/izitoast/dist/css/izitoast.min.css">
  <style>
  .warning {
    background-color: rgb(255, 140, 0);
    color: #fff;
  }
  </style>
</head>

<body ng-controller="Controller_Product">

  <header>
    <nav class="navbar navbar-light bg-light">
      <span class="navbar-text">
        <a href="https://proghubsterzeak.com/"> https://proghubsterzeak.com</a>
      </span>
    </nav>
  </header>

  <section>
    <div class="container" ng-init="fetchData()">
      <div class="row my-5">
        <button ng-click="addData();" type="button" class="btn btn-info btn-sm" data-toggle="modal"
          data-target="#Productform">Add Product</button>
        <div class="ml-auto">
          <input class="form-control ng-pristine ng-valid" ng-model="searchKeyword" type="text">
        </div>
      </div>
      <div class="row">
        <div class="table-responsive">
          <table class="table-product table table-bordered table-striped">
            <thead class="thead-product">
              <tr>
                <th style="width:5%">No.</th>
                <th>Name</th>
                <th style="width:15%">Category</th>
                <th style="width:5%">Quantity</th>
                <th style="width:15%">Status</th>
                <th style="width:18%">Action</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="product in products | filter: searchKeyword">
                <!-- <tr ng-repeat="product in products track by $index"> -->
                <td>{{$index+1}}</td>
                <td>{{product.namex}}</td>
                <td>{{product.category}}</td>
                <td>{{product.qty}}</td>
                <td><span class="badge badge-primary" ng-class="{warning: product.qty < 1}"> {{product.stock}}</span>
                </td>
                <td>
                  <div class=" buttons text-center">
                    <button class="btn btn-primary btn-edit btn-sm"
                      ng-click="update_data(product.id, product.namex, product.category, product.qty)" type="button"
                      class="btn btn-info btn-sm" data-toggle="modal" data-target="#Productform">Edit</button>
                    <button class="btn btn-danger btn-delete btn-sm"
                      ng-click="deleteProduct(product.namex);">Delete</button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </section>

  <div id="Productform" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="my-modal-title"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header bg-light">
          <h5 class="modal-title" id="my-modal-title">{{formTitle}}</h5>
          <button class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <input type="hidden" ng-model="id">
            <div class="form-group">
              <label for="my-input">Product</label>
              <input class="form-control" type="text" ng-model="name" placeholder="Product Name" />
            </div>
            <div class="form-group">
              <label for="my-input">Category</label>
              <input class="form-control" type="text" ng-model="category" placeholder="Category" />
            </div>
            <div class="form-group">
              <label for="my-input">Quantity</label>
              <input class="form-control" type="text" ng-model="qty" placeholder="Quantity" />
            </div>
            <input data-dismiss="modal" name="insert" type="submit" class="btn btn-primary btn-add my-2"
              ng-click="InsertUpdateData()" value="{{btnName}}" />
          </form>
        </div>
      </div>
    </div>
  </div>

  <script src="./assets/jquery/jquery.min.js"></script>
  <script src="./assets/bootstrap/js/bootstrap.bundle.js"></script>
  <script src="./assets/izitoast/dist/js/izitoast.min.js"></script>
  <script src="./assets/angular/angular.min.js"></script>
  <script src="./assets/js/script.js"></script>
</body>

</html>

If you want to get complete source code, please click Download Code button on below link. For more information about the system. You can contact me @ Email – larrydaveemol@gmail.com

Let me know what you need just leave a message/comment and I will do my very best to make that happen. I hope this codes will help you. Enjoy Coding!

Categories
PHP

Login with ajax and jQuery

This is a simple login page that use AJAX to create a user-friendly application.

Creating the Database Table

Execute SQL Dump file

-- phpMyAdmin SQL Dump
-- version 4.8.5
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Apr 13, 2020 at 12:00 PM
-- Server version: 10.1.38-MariaDB
-- PHP Version: 7.1.27

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `db_login`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_users`
--

CREATE TABLE `tbl_users` (
  `user_id` int(11) NOT NULL,
  `email` varchar(100) NOT NULL,
  `password` varchar(100) NOT NULL,
  `isadmin` varchar(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_users`
--

INSERT INTO `tbl_users` (`user_id`, `email`, `password`, `isadmin`) VALUES
(1, 'gr@gmail.com', 'admin', '1'),
(2, 'dddd', 'dsadasdddd', ''),
(3, 'ddd', 'ddd', '');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_users`
--
ALTER TABLE `tbl_users`
  ADD PRIMARY KEY (`user_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_users`
--
ALTER TABLE `tbl_users`
  MODIFY `user_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Creating the Connection File

After creating the table, we need to setup your database connection copy and paste the code below in order to connect to the MySQL database server. Let’s create and name it to “db_conn.php” and put the following code inside it.

<?php 
session_start();

$conn=mysqli_connect("localhost", "root", "", "db_login");

if(!$conn){
    die("Error: Failed To Connect Database!");
}
?>

Creating Login Page

First we will prevent user not to redirecting to home page if they are not logging in. We’ve two input box username and password for entering value and we can use AJAX for the submit button with jQuery. We can also use bootstrap for enhancing layout design and Izitoast for awesome looking popups Notification.

<?php
include "db_con.php";

if(isset($_SESSION['USERNAME'])) {
     header("Location: home.php"); // redirects them to homepage
     exit;
}

?>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Proghubsterzeak</title>
  <link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="./assets/izitoast/dist/css/iziToast.min.css">
  <style>
  footer {
    position: absolute;
    width: 100%;
    bottom: 0;
  }
  </style>
</head>

<body class="login" style="height: 100vh;">
  <header>
    <nav class="navbar navbar-light bg-light">
      <span class="navbar-text">
        <a href="https://proghubsterzeak.com/"> https://proghubsterzeak.com</a>
      </span>
    </nav>
  </header>
  <main class="py-5">
    <section>
      <div class="col-lg-4 col-md-4 mx-auto mt-5">
        <form id="loginform" method="post">
          <div class="form-group">
            <label for="my-username">Username</label>
            <input id="username" class="form-control" type="text" name="username">
          </div>
          <div class="form-group">
            <label for="my-password">Username</label>
            <input id="password" class="form-control" type="password" name="password">
          </div>
          <button type="submit" class="btn btn-primary btn-block">LOGIN</button>
        </form>
      </div>
    </section>
  </main>
  <footer class="text-center py-2 bg-light">
    © 2020 Your Site
  </footer>
  <script src="./assets/jquery/jquery.min.js"></script>
  <script src="./assets/izitoast/dist/js/iziToast.min.js"></script>
  <script src="./assets/js/custom.js"></script>
</body>

</html>

Creating jQuery AJAX

AJAX will send request it will pass entered username and password as data. If the user entered valid password and username the response is equal to “success” and redirect to home.php page otherwise show an error message notification.

$(document).on('submit', '#loginform', function (event) {
  event.preventDefault();

  var username = $("#username").val();
  var password = $("#password").val();
  if (username != "" && password != "") {
    $.ajax({
      url: 'login.php',
      type: 'POST',
      data: {
        do_login: "login",
        username: username,
        password: password,
      },
      success: function (response) {

        if (response == "success") {
          iziToast.success({
            title: 'Success',
            message: 'Successfully Login',
            pauseOnHover: true,
            position: 'topRight',
            animateInside: true
          });

          window.location.href = "home.php";
        }
        else {
          iziToast.error({
            title: 'Error',
            message: 'Invalid Email or Password',
            pauseOnHover: true,
            position: 'topRight',
            animateInside: true
          });
        }
      }
    });

  } else {
    iziToast.info({
      title: 'Info',
      message: 'Please Fill All The Details',
      pauseOnHover: true,
      position: 'topRight',
      animateInside: true,
    });
  }

  return false;
});

Check if the users exists in the database table

<?php
  require_once 'db_con.php';
  
  if (isset($_POST['do_login'])){
    $email = $_POST['username'];
    $password = $_POST['password'];

    $query = mysqli_query($conn,"SELECT * FROM `tbl_users` WHERE `email` = '$email' && `password` = '$password'");
    $row = mysqli_num_rows($query);
    $fetch = mysqli_fetch_array($query);

  if($row > 0){
    $uname = $row['email'];
    $_SESSION['USERNAME'] = $uname;
    echo "success";
  }else{
    echo "failed";
  }
  
  }
?>

Create home.php and we’ll prevent user from coming back to login if they are already logged in. Logout button to end user’s session.

<?php 
include('db_con.php');

//Check whether the session variable SESS_MEMBER_ID is present or not
if (!isset($_SESSION['USERNAME']) || (trim($_SESSION['USERNAME']) == '')) {
    header("location: index.php");
    exit();
}

// logout
if(isset($_POST['logout'])){
    session_destroy();
    header('Location: index.php');
}
 ?>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Proghubsterzeak</title>
  <link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.min.css">
  <style>
  footer {
    position: absolute;
    width: 100%;
    bottom: 0;
  }
  </style>
</head>

<body>
  <header>
    <nav class="navbar navbar-light bg-light"><span class="navbar-text">
        <a href="https://proghubsterzeak.com/">https://proghubsterzeak.com</a>
      </span></nav>
  </header>
  <main class="py-5">
    <section>
      <div class="col-lg-4 col-md-4 mx-auto mt-5 text-center">
        <h3>Welcome: <?php echo  $_SESSION['USERNAME']; ?> </h3>
        <p class="text-center">Congratulations ! You've been logged in successfully</p>
        <form action="" method="post">
          <button name="logout" type="submit" class="mt-5 btn btn-primary btn-block">LOGOUT</button>
        </form>
      </div>
    </section>
  </main>
  <footer class="text-center py-2 bg-light">© 2020 Your Site </footer>
</body>

</html>

Download the complete source code. For more information about the system. You can contact me @ Email – larrydaveemol@gmail.com

Let me know what you need just leave a message/comment and I will do my very best to make that happen. I hope this codes will help you. Enjoy Coding!

Categories
JavaScript Templating PHP

Ajax request with Handlebars.js

In this application you’ll learn how use Handlebars.js to render template and display data in a table with PHP and MySQL.

First get the latest file for handlebars here https://www.npmjs.com/package/handlebars

Creating the Database Table

Execute SQL Dump file

-- phpMyAdmin SQL Dump
-- version 4.8.5
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Apr 12, 2020 at 01:28 PM
-- Server version: 10.1.38-MariaDB
-- PHP Version: 7.1.27

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `db_product`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_products`
--

CREATE TABLE `tbl_products` (
  `id` int(11) NOT NULL,
  `name` varchar(200) NOT NULL,
  `sku` varchar(100) NOT NULL,
  `price` varchar(50) NOT NULL,
  `qty` varchar(50) NOT NULL,
  `description` text NOT NULL,
  `availability` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_products`
--

INSERT INTO `tbl_products` (`id`, `name`, `sku`, `price`, `qty`, `description`, `availability`) VALUES
(4, 'Second Item', 'sku-1234', '2000', '456', 'Loerem ipsum ', '120'),
(48, 'First Item', 'sku-122', '20', '1000', 'lorem ipsumssss', '0'),
(49, 'Third item', 'sku-55', '800', '6', 'Sana All', '20');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_products`
--
ALTER TABLE `tbl_products`
  ADD PRIMARY KEY (`id`),
  ADD UNIQUE KEY `id` (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_products`
--
ALTER TABLE `tbl_products`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=50;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Creating the Connection File

After creating the table, we need to setup your database connection copy and paste the code below in order to connect to the MySQL database server. Let’s create and name it to “db_conn.php” and put the following code inside it.

<?php 
    $conn=mysqli_connect("localhost", "root", "", "db_product");

        if(!$conn){
            die("Error: Failed To Connect Database!");
        }
?>

Creating Simple Page

First we will create simple page for our application it contains a script template to display records in a table from the “tbl_products” database table. Copy and paste the code below

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Proghubsterzeak</title>
  <link rel="stylesheet" href="./assets/bootstrap/bootstrap.min.css">
  <style>
  footer {
    position: absolute;
    width: 100%;
    bottom: 0;
  }
  </style>
</head>

<body>
  <header>
    <nav class="navbar navbar-light bg-light">
      <span class="navbar-text">
        <a href="https://proghubsterzeak.com/"> https://proghubsterzeak.com</a>
      </span>
    </nav>
  </header>
  <main class="py-5">
    <script id="product_list_data" type="text/template">
      <tr>
        <td>{{id}}</td>
        <td>{{name}}</td>
        <td>{{sku}}</td>
        <td>{{price}}</td>
        <td>{{qty}}</td>
        <td>{{description}}</td>
        <td>{{availability}}</td>
      </tr>
  </script>

    <section>
      <div class="container">
        <table class="table">
          <table id='load-data' class='table table-striped table-bordered' style='width:100%'>
            <thead class="thead-dark">
              <tr>
                <th>#</th>
                <th>Product Name</th>
                <th>SKU</th>
                <th>Amount</th>
                <th>Quantity</th>
                <th>Description</th>
                <th>Availability</th>
              </tr>
            </thead>
            <tbody id="get_product">
            </tbody>
          </table>
        </table>
      </div>
    </section>
  </main>
  <footer class="text-center py-2 bg-light">
    © 2020 Your Site
  </footer>
  <script src="./assets/jquery/jquery.min.js"></script>
  <script src="./assets/handlebars/handlebars.min.js"></script>
  <script src="./assets/js/render.js"></script>
</body>

</html>

ajax request

$(document).ready(function () {
  var template = $("#product_list_data").html();
  $.ajax({
    url: 'product_list.php',
    dataType: "json",
    success: function (prodData) {

      $.each(prodData, function (i, product) {
        var html = Handlebars.compile(template);
        $('#get_product').append(html(product));
      });

    }
  });
})

Copy and paste the code below and save it as product_list.php. This code will simply retrieve the records from the “tbl_products” table from database and it will return as JSON.

<?php
	require_once 'db_con.php';
	$bacth = array();

	$queryretrieve=mysqli_query($conn,"SELECT * FROM tbl_products");
	$n = mysqli_num_rows($queryretrieve);

	if ($n!=0) {
		while($result = mysqli_fetch_array($queryretrieve)){
			$bacth[] = $result;
	} 
	echo json_encode($bacth);
	}
?>

Download the complete source code. For more information about the system. You can contact me @ Email – larrydaveemol@gmail.com

Let me know what you need just leave a message/comment and I will do my very best to make that happen. I hope this codes will help you. Enjoy Coding!

Categories
JavaScript Templating PHP

Ajax request with Mustache.js

In this application you’ll learn how use mustache.js to render mustache template and display data in a table with PHP and MySQL.

Creating the Database Table

Execute SQL Dump file

-- phpMyAdmin SQL Dump
-- version 4.8.5
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Apr 12, 2020 at 01:28 PM
-- Server version: 10.1.38-MariaDB
-- PHP Version: 7.1.27

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `db_product`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_products`
--

CREATE TABLE `tbl_products` (
  `id` int(11) NOT NULL,
  `name` varchar(200) NOT NULL,
  `sku` varchar(100) NOT NULL,
  `price` varchar(50) NOT NULL,
  `qty` varchar(50) NOT NULL,
  `description` text NOT NULL,
  `availability` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_products`
--

INSERT INTO `tbl_products` (`id`, `name`, `sku`, `price`, `qty`, `description`, `availability`) VALUES
(4, 'Second Item', 'sku-1234', '2000', '456', 'Loerem ipsum ', '120'),
(48, 'First Item', 'sku-122', '20', '1000', 'lorem ipsumssss', '0'),
(49, 'Third item', 'sku-55', '800', '6', 'Sana All', '20');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_products`
--
ALTER TABLE `tbl_products`
  ADD PRIMARY KEY (`id`),
  ADD UNIQUE KEY `id` (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_products`
--
ALTER TABLE `tbl_products`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=50;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Creating the Connection File

After creating the table, we need to setup your database connection copy and paste the code below in order to connect to the MySQL database server. Let’s create and name it to “db_conn.php” and put the following code inside it.

<?php 
    $conn=mysqli_connect("localhost", "root", "", "db_product");

        if(!$conn){
            die("Error: Failed To Connect Database!");
        }
?>

Creating Simple Page

First we will create simple page for our application it contains a data table showing the records from the “tbl_products” database table. We’ll include mustache Autoloader it require mustache to render our templates.

 <?php 
include('src/mustache/Autoloader.php');
Mustache_Autoloader::register();
$entry = new Mustache_Engine;
$product_list_template = file_get_contents('template/product_list.mustache');
?>

 <!DOCTYPE html>
 <html lang="en">

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Proghubsterzeak</title>
   <link rel="stylesheet" href="./assets/bootstrap/bootstrap.min.css">
   <style>
   footer {
     position: absolute;
     width: 100%;
     bottom: 0;
   }
   </style>
 </head>

 <body>
   <header>
     <nav class="navbar navbar-light bg-light">
       <span class="navbar-text">
         <a href="https://proghubsterzeak.com/"> https://proghubsterzeak.com</a>
       </span>
     </nav>
   </header>
   <main class="py-5">
     <section>
       <div class="container">
         <table class="table">
           <table id='load-data' class='table table-striped table-bordered' style='width:100%'>
             <thead class="thead-dark">
               <tr>
                 <th>#</th>
                 <th>Product Name</th>
                 <th>SKU</th>
                 <th>Amount</th>
                 <th>Quantity</th>
                 <th>Description</th>
                 <th>Availability</th>
               </tr>
             </thead>
             <tbody id="get_product">

             </tbody>
           </table>

           <?php echo $entry->render($product_list_template); ?>
         </table>
       </div>
     </section>
   </main>
   <footer class="text-center py-2 bg-light">
     © 2020 Your Site
   </footer>
   <script src="./assets/jquery/jquery.min.js"></script>
   <script src="./assets/mustache/js/mustache.min.js"></script>
   <script src="./assets/js/render.js"></script>
 </body>

 </html>

This is a shorthand Ajax function

$(document).ready(function () {
  var template = $("#product_list_data").html();
  $(function () {
    $.getJSON('product_list.php',
      function (prodData) {

        $.each(prodData, function (i, product) {
          var html = Mustache.render(template, product);
          $('#get_product').append(html);
        });

      });
  });
})

which is equal to

$(document).ready(function () {
  var template = $("#product_list_data").html();
  $.ajax({
    url: 'product_list.php',
    dataType: "json",
    success: function (prodData) {

      $.each(prodData, function (i, product) {
        var html = Mustache.render(template, product);
        $('#get_product').append(html);
      });

    }
  });
})

Copy and paste the code below and save it as product_list.php. This code will simply retrieve the records from the “tbl_products” table from database and it will return to JSON.

<?php
	require_once 'db_con.php';
	$bacth = array();

	$queryretrieve=mysqli_query($conn,"SELECT * FROM tbl_products");
	$n = mysqli_num_rows($queryretrieve);

	if ($n!=0) {
		while($result = mysqli_fetch_array($queryretrieve)){
			$bacth[] = $result;
	} 
	echo json_encode($bacth);
	}
?>

Download the complete source code. For more information about the system. You can contact me @ Email – larrydaveemol@gmail.com

Let me know what you need just leave a message/comment and I will do my very best to make that happen. I hope this codes will help you. Enjoy Coding!

Categories
Visual Basic 6.0

Login with SQL Server Database in Vb6

This is a sample login application that use in your project application system in VB6. Let’s start coding.

Create a Module copy the codes below for database connection in order to connect to the SQL Server database and put the following code inside it.

Option Explicit

'variables for ADODB
Global Connect As New ADODB.Connection

Public Sub SQLDB(adoObj As Adodc, AdoRec As String) 'for SQL Recordsource
'Connection string: workstation id=koroikadb.mssql.somee.com;packet size=4096;user id=xxxxxx;pwd=yyyyyy;data source=koroikadb.mssql.somee.com;persist security info=False;initial catalog=koroikadb
    'Loads the database and provides the database password
    adoObj.ConnectionString = "Provider=sqloledb;user id=;pwd=;Data Source=(local);persist security info=False;Initial Catalog=Tutorial;Trusted_Connection=Yes;"
    
    'Sets the command type to Table
    adoObj.CommandType = adCmdText
    
    'Loads the source table of info
    adoObj.RecordSource = AdoRec

    'refreshes database status
     adoObj.Refresh
End Sub

Sub Main()
On Error Resume Next
Call SQLDB(Form1.Adodc1, "Select * from tblSecurity ")
If Form1.Adodc1.Recordset.RecordCount = 0 Then
    Form1.Adodc1.Recordset.AddNew
    Form1.Adodc1.Recordset.Fields("USERNAME") = "admin"
    Form1.Adodc1.Recordset.Fields("PASSWORD") = "admin"
    Form1.Adodc1.Recordset.Update
End If

Form1.Show
End Sub

After creating module we need to create form to your project and double click the form to enter the code window Copy the code below and paste then save it.

Private Sub Image1_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
Me.Image1.Picture = Me.Image3.Picture
End Sub

Private Sub Image2_Click()
On Error Resume Next
If Me.Text1.Text = "" Or Me.Text2.Text = "" Then
MsgBox "Login and password should not be blank", vbInformation, "Login"
Exit Sub
End If

Call SQLDB(Me.Adodc1, "Select * from tblSecurity where USERNAME='" & Me.Text1.Text & "' and PASSWORD='" & Me.Text2.Text & "'")
If Me.Adodc1.Recordset.Fields("USERNAME") = Me.Text1.Text Then
   MsgBox "Please input correct username and password", vbCritical, "Login"
Else
    Unload Me
    Form2.Show
End If
End Sub

Private Sub Image2_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
Me.Image1.Picture = Me.Picture1.Picture
End Sub

For more information about the system. You can contact me @
Email – larrydaveemol@gmail.com
FB Account – https://www.facebook.com/larrydavelacapagemol

Let me know what you need just leave a message/comment and I will do my very best to make that happen. I hope this codes will help you. Enjoy Coding!