Complete Guide on JavaScript Frameworks for Frontend Development

You don’t need to be tech-savvy to understand the concept of web and app development. We live in an increasingly technological world, and so it’s only normal to adapt to all the new changes.

Even if you don’t have the slightest idea about how web development works, we can lay it out for you. We all surf through the internet and watch things unfold, and you might know that everything runs smoothly because of programming.

Our computers need commands and a language to do all the tasks. So, that is how you get what you need. However, to paint a better picture for you, here’s a little introduction:

What is JavaScript?

So, mostly we have all seen how different web pages work, and different programming languages are responsible for everything. For instance, you see HTML and CSS that provide the format and style for websites.

However, JavaScript is a text-based language that is mainly responsible for creating interactive elements of a web page that help users take action. You log onto a website and see pop-ups, a sign up for a newsletter, a web form, compelling graphics, or anything moving around; that is because of JavaScript.

It has a lot of benefits because to stand out from the crowd; you need dynamic content that tempts your readers to engage with it. Today, everything is about making the user’s experience more positive and refreshing, so JavaScript is ideal for taking your web development up a notch. You can add any responsive elements you want to target any specific audience and boost your online traffic through JavaScript. Web developers are the reason behind us aimlessly surfing through different websites each day. You come across various styles, themes, sign up or log out buttons, required fields to check out a web page, all of this is done with the help of web developers.

For instance, it can be used in apps for small businesses, and you can create a catchy login button and have it do the job. Web developers create exciting features in web and mobile apps so you can have a memorable experience, and JS is behind it all.

What is the JavaScript Framework?

So, imagine you need to create a software or any application; you will need a step-by-step plan to accomplish this. That’s where frameworks come in handy because they are the blueprints of any app you want to build. It will help you gather everything you are going to need and help web developers achieve what they want.

Now, your application framework won’t do the job for you, but instead, it will help you using programs and libraries to create something that fulfils all your needs. JavaScript Framework is just a collection of different code libraries related to JavaScript.

It helps you save time and effort by providing you structure and assembling everything for you. You can reuse the same JavaScript code to create basic features for your applications. The frameworks help you add a little something to existing web pages instead of developing something new from scratch.

Frontend JavaScript Frameworks

There are two kinds of web and mobile app developers; backend and frontend. Now, the backend web developers are responsible for running the app, and frontend developers are responsible for how the app would work on its users’ devices.

There has been a lot of improvement and advancement in the tech and web development domain, so people no longer rely on HTML and CSS.

Nowadays, web applications can perform any task like paying a 2D/3D video, filling out required boxes, and engaging with the users. The whole world of all these new possibilities was introduced by Frontend JavaScript Frameworks that help your visitors stay hooked to the screen.

It is an application full of tactics that programmers can use to their advantage to create attention-grabbing and smooth web and mobile apps. It is all about making everything more convenient for you.

Why Do We Need the JS Frameworks?

Fundamentally, JavaScript Frameworks help achieve the following:

• Give you all you require to make a web application
• Furnish clients with formats to fabricate normal pieces of your web applications
• Address an approach to make parts including directing, collecting information, structures, and static pages

You can’t just get by using catchy headlines and ads, you need to get your audience to engage with your content, and Frontend Web Development helps you build the most accessible user interface. JavaScript Frameworks are a high-level programming language, so they come with improved responsiveness.

1. Top JavaScript Frameworks

Following are by far the most commonly utilized JavaScript Frameworks:

1. React.js

This framework has been used for both Facebook and Instagram. It helps immensely with any kind of data management and lets you integrate with the rest of the code libraries. If you’re a web developer looking for something that helps you break down any code into little fragments, then the React.js framework is ideal for you.

2. Vue.js

Vue.js is the least complex option out of most of the JS frameworks. You can use it to create any kind of application because it has such a small size, so you can have all the features you want. Most web developers demand diversity when it comes to frameworks, and Vue.js will help you out in any department.

3. Angular

The angular framework gives you a wide platform and to explore any versatility you want. You can get several numbers activities done at the same time without facing any hassles.

Takeaway- A Definitive Guide on How Frontend JavaScript Frameworks Work

If you feel like you’re lost in the world of programming and coding, hopefully, this guide will help you out. It’s important to understand the basics and learn closely before you dive into the world of JavaScript frameworks.

You will need to choose the right type of framework for the kind of frontend development you wish to do, so make a wise choice. You can always opt for a framework that fulfils your criteria and then switches to another one for your project.

Author Bio:

Arslan Hassan is an electrical engineer with a passion for writing, designing, and anything tech-related. His educational background in the technical field has given him the edge to write on many topics. He occasionally writes blog articles for Apcelero.

Vue.js Autocomplete Textbox using PHP Mysql

In this PHP and Vue.js tutorials, We are going to learn how to use Ajax live search for build Autocomplete feature using Vue JS in PHP application with Mysql database. Here We will learn How to make an autocomplete component using Vue.js with PHP script and Mysql Database.

In this tutorial, we will build simple application for demonstrate the example of Autocomplete in Vue.js using PHP and Mysql. We will use Axios package for send Ajax request to fetch data from Mysql table.

As a web developer, we have already familiar with functionality of Ajax Live Dynamic Search or Autocomplete feature for search activity. In current scenario we all have made search on Google search engine or Youtube and any other social media website on internet, then we have seen like search with autocomplete. This type of live search or Autocomplete feature has been made by using Ajax technology, which will provide you search result or search query suggestion, which will be related with search query which you have entered in search textbox.

For make Ajax live search or Autocomplete feature for your website, there are many tools like jQuery UI or Typeahead etc. are available for create Autocomplete feature for your website. But here we will use Vue.js will be used with PHP script and Mysql database for build Autocomplete textbox. Here we have use Vue.js library for build Autocomplete feature, this is because Vue.js has component instance, by using Vue.js component, we can make HTML template which we can reuse in Vue.js application again and again.

So, in this article we will create ajax search autocomplete using Vue.js PHP Mysql and for this we will Axios package for use the functionality of ajax. Ajax is required for create Autocomplete feature, this is because it will fetch data from Mysql database without refresh of web page. So, in this post, we will make ajax autocomplete search with Vue.js using PHP with Mysql database. Below you can find complete source of Vue.js autocomplete from Mysql database using PHP.

View Demo

Source Code

Mysql Database

--
-- Database: `testing`
--

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

--
-- Table structure for table `apps_countries`
--

CREATE TABLE `apps_countries` (
  `id` int(11) NOT NULL,
  `country_code` varchar(2) NOT NULL DEFAULT '',
  `country_name` varchar(100) NOT NULL DEFAULT ''
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

--
-- Dumping data for table `apps_countries`
--

INSERT INTO `apps_countries` (`id`, `country_code`, `country_name`) VALUES
(1, 'AF', 'Afghanistan'),
(2, 'AL', 'Albania'),
(3, 'DZ', 'Algeria'),
(4, 'DS', 'American Samoa'),
(5, 'AD', 'Andorra'),
(6, 'AO', 'Angola'),
(7, 'AI', 'Anguilla'),
(8, 'AQ', 'Antarctica'),
(9, 'AG', 'Antigua and Barbuda'),
(10, 'AR', 'Argentina'),
(11, 'AM', 'Armenia'),
(12, 'AW', 'Aruba'),
(13, 'AU', 'Australia'),
(14, 'AT', 'Austria'),
(15, 'AZ', 'Azerbaijan'),
(16, 'BS', 'Bahamas'),
(17, 'BH', 'Bahrain'),
(18, 'BD', 'Bangladesh'),
(19, 'BB', 'Barbados'),
(20, 'BY', 'Belarus'),
(21, 'BE', 'Belgium'),
(22, 'BZ', 'Belize'),
(23, 'BJ', 'Benin'),
(24, 'BM', 'Bermuda'),
(25, 'BT', 'Bhutan'),
(26, 'BO', 'Bolivia'),
(27, 'BA', 'Bosnia and Herzegovina'),
(28, 'BW', 'Botswana'),
(29, 'BV', 'Bouvet Island'),
(30, 'BR', 'Brazil'),
(31, 'IO', 'British Indian Ocean Territory'),
(32, 'BN', 'Brunei Darussalam'),
(33, 'BG', 'Bulgaria'),
(34, 'BF', 'Burkina Faso'),
(35, 'BI', 'Burundi'),
(36, 'KH', 'Cambodia'),
(37, 'CM', 'Cameroon'),
(38, 'CA', 'Canada'),
(39, 'CV', 'Cape Verde'),
(40, 'KY', 'Cayman Islands'),
(41, 'CF', 'Central African Republic'),
(42, 'TD', 'Chad'),
(43, 'CL', 'Chile'),
(44, 'CN', 'China'),
(45, 'CX', 'Christmas Island'),
(46, 'CC', 'Cocos (Keeling) Islands'),
(47, 'CO', 'Colombia'),
(48, 'KM', 'Comoros'),
(49, 'CG', 'Congo'),
(50, 'CK', 'Cook Islands'),
(51, 'CR', 'Costa Rica'),
(52, 'HR', 'Croatia (Hrvatska)'),
(53, 'CU', 'Cuba'),
(54, 'CY', 'Cyprus'),
(55, 'CZ', 'Czech Republic'),
(56, 'DK', 'Denmark'),
(57, 'DJ', 'Djibouti'),
(58, 'DM', 'Dominica'),
(59, 'DO', 'Dominican Republic'),
(60, 'TP', 'East Timor'),
(61, 'EC', 'Ecuador'),
(62, 'EG', 'Egypt'),
(63, 'SV', 'El Salvador'),
(64, 'GQ', 'Equatorial Guinea'),
(65, 'ER', 'Eritrea'),
(66, 'EE', 'Estonia'),
(67, 'ET', 'Ethiopia'),
(68, 'FK', 'Falkland Islands (Malvinas)'),
(69, 'FO', 'Faroe Islands'),
(70, 'FJ', 'Fiji'),
(71, 'FI', 'Finland'),
(72, 'FR', 'France'),
(73, 'FX', 'France, Metropolitan'),
(74, 'GF', 'French Guiana'),
(75, 'PF', 'French Polynesia'),
(76, 'TF', 'French Southern Territories'),
(77, 'GA', 'Gabon'),
(78, 'GM', 'Gambia'),
(79, 'GE', 'Georgia'),
(80, 'DE', 'Germany'),
(81, 'GH', 'Ghana'),
(82, 'GI', 'Gibraltar'),
(83, 'GK', 'Guernsey'),
(84, 'GR', 'Greece'),
(85, 'GL', 'Greenland'),
(86, 'GD', 'Grenada'),
(87, 'GP', 'Guadeloupe'),
(88, 'GU', 'Guam'),
(89, 'GT', 'Guatemala'),
(90, 'GN', 'Guinea'),
(91, 'GW', 'Guinea-Bissau'),
(92, 'GY', 'Guyana'),
(93, 'HT', 'Haiti'),
(94, 'HM', 'Heard and Mc Donald Islands'),
(95, 'HN', 'Honduras'),
(96, 'HK', 'Hong Kong'),
(97, 'HU', 'Hungary'),
(98, 'IS', 'Iceland'),
(99, 'IN', 'India'),
(100, 'IM', 'Isle of Man'),
(101, 'ID', 'Indonesia'),
(102, 'IR', 'Iran (Islamic Republic of)'),
(103, 'IQ', 'Iraq'),
(104, 'IE', 'Ireland'),
(105, 'IL', 'Israel'),
(106, 'IT', 'Italy'),
(107, 'CI', 'Ivory Coast'),
(108, 'JE', 'Jersey'),
(109, 'JM', 'Jamaica'),
(110, 'JP', 'Japan'),
(111, 'JO', 'Jordan'),
(112, 'KZ', 'Kazakhstan'),
(113, 'KE', 'Kenya'),
(114, 'KI', 'Kiribati'),
(115, 'KP', 'Korea, Democratic People\'s Republic of'),
(116, 'KR', 'Korea, Republic of'),
(117, 'XK', 'Kosovo'),
(118, 'KW', 'Kuwait'),
(119, 'KG', 'Kyrgyzstan'),
(120, 'LA', 'Lao People\'s Democratic Republic'),
(121, 'LV', 'Latvia'),
(122, 'LB', 'Lebanon'),
(123, 'LS', 'Lesotho'),
(124, 'LR', 'Liberia'),
(125, 'LY', 'Libyan Arab Jamahiriya'),
(126, 'LI', 'Liechtenstein'),
(127, 'LT', 'Lithuania'),
(128, 'LU', 'Luxembourg'),
(129, 'MO', 'Macau'),
(130, 'MK', 'Macedonia'),
(131, 'MG', 'Madagascar'),
(132, 'MW', 'Malawi'),
(133, 'MY', 'Malaysia'),
(134, 'MV', 'Maldives'),
(135, 'ML', 'Mali'),
(136, 'MT', 'Malta'),
(137, 'MH', 'Marshall Islands'),
(138, 'MQ', 'Martinique'),
(139, 'MR', 'Mauritania'),
(140, 'MU', 'Mauritius'),
(141, 'TY', 'Mayotte'),
(142, 'MX', 'Mexico'),
(143, 'FM', 'Micronesia, Federated States of'),
(144, 'MD', 'Moldova, Republic of'),
(145, 'MC', 'Monaco'),
(146, 'MN', 'Mongolia'),
(147, 'ME', 'Montenegro'),
(148, 'MS', 'Montserrat'),
(149, 'MA', 'Morocco'),
(150, 'MZ', 'Mozambique'),
(151, 'MM', 'Myanmar'),
(152, 'NA', 'Namibia'),
(153, 'NR', 'Nauru'),
(154, 'NP', 'Nepal'),
(155, 'NL', 'Netherlands'),
(156, 'AN', 'Netherlands Antilles'),
(157, 'NC', 'New Caledonia'),
(158, 'NZ', 'New Zealand'),
(159, 'NI', 'Nicaragua'),
(160, 'NE', 'Niger'),
(161, 'NG', 'Nigeria'),
(162, 'NU', 'Niue'),
(163, 'NF', 'Norfolk Island'),
(164, 'MP', 'Northern Mariana Islands'),
(165, 'NO', 'Norway'),
(166, 'OM', 'Oman'),
(167, 'PK', 'Pakistan'),
(168, 'PW', 'Palau'),
(169, 'PS', 'Palestine'),
(170, 'PA', 'Panama'),
(171, 'PG', 'Papua New Guinea'),
(172, 'PY', 'Paraguay'),
(173, 'PE', 'Peru'),
(174, 'PH', 'Philippines'),
(175, 'PN', 'Pitcairn'),
(176, 'PL', 'Poland'),
(177, 'PT', 'Portugal'),
(178, 'PR', 'Puerto Rico'),
(179, 'QA', 'Qatar'),
(180, 'RE', 'Reunion'),
(181, 'RO', 'Romania'),
(182, 'RU', 'Russian Federation'),
(183, 'RW', 'Rwanda'),
(184, 'KN', 'Saint Kitts and Nevis'),
(185, 'LC', 'Saint Lucia'),
(186, 'VC', 'Saint Vincent and the Grenadines'),
(187, 'WS', 'Samoa'),
(188, 'SM', 'San Marino'),
(189, 'ST', 'Sao Tome and Principe'),
(190, 'SA', 'Saudi Arabia'),
(191, 'SN', 'Senegal'),
(192, 'RS', 'Serbia'),
(193, 'SC', 'Seychelles'),
(194, 'SL', 'Sierra Leone'),
(195, 'SG', 'Singapore'),
(196, 'SK', 'Slovakia'),
(197, 'SI', 'Slovenia'),
(198, 'SB', 'Solomon Islands'),
(199, 'SO', 'Somalia'),
(200, 'ZA', 'South Africa'),
(201, 'GS', 'South Georgia South Sandwich Islands'),
(202, 'ES', 'Spain'),
(203, 'LK', 'Sri Lanka'),
(204, 'SH', 'St. Helena'),
(205, 'PM', 'St. Pierre and Miquelon'),
(206, 'SD', 'Sudan'),
(207, 'SR', 'Suriname'),
(208, 'SJ', 'Svalbard and Jan Mayen Islands'),
(209, 'SZ', 'Swaziland'),
(210, 'SE', 'Sweden'),
(211, 'CH', 'Switzerland'),
(212, 'SY', 'Syrian Arab Republic'),
(213, 'TW', 'Taiwan'),
(214, 'TJ', 'Tajikistan'),
(215, 'TZ', 'Tanzania, United Republic of'),
(216, 'TH', 'Thailand'),
(217, 'TG', 'Togo'),
(218, 'TK', 'Tokelau'),
(219, 'TO', 'Tonga'),
(220, 'TT', 'Trinidad and Tobago'),
(221, 'TN', 'Tunisia'),
(222, 'TR', 'Turkey'),
(223, 'TM', 'Turkmenistan'),
(224, 'TC', 'Turks and Caicos Islands'),
(225, 'TV', 'Tuvalu'),
(226, 'UG', 'Uganda'),
(227, 'UA', 'Ukraine'),
(228, 'AE', 'United Arab Emirates'),
(229, 'GB', 'United Kingdom'),
(230, 'US', 'United States'),
(231, 'UM', 'United States minor outlying islands'),
(232, 'UY', 'Uruguay'),
(233, 'UZ', 'Uzbekistan'),
(234, 'VU', 'Vanuatu'),
(235, 'VA', 'Vatican City State'),
(236, 'VE', 'Venezuela'),
(237, 'VN', 'Vietnam'),
(238, 'VG', 'Virgin Islands (British)'),
(239, 'VI', 'Virgin Islands (U.S.)'),
(240, 'WF', 'Wallis and Futuna Islands'),
(241, 'EH', 'Western Sahara'),
(242, 'YE', 'Yemen'),
(243, 'ZR', 'Zaire'),
(244, 'ZM', 'Zambia'),
(245, 'ZW', 'Zimbabwe');

--
-- Indexes for dumped tables
--

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

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `apps_countries`
--
ALTER TABLE `apps_countries`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=246;

index.php

<!DOCTYPE html>
<html>
  <head>
    <title>Vue.js Autocomplete Textbox with PHP Mysql</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <br />
    <br />
    <div class="container" id="autocomplete_app">
      <h3 align="center">Vue.js Autocomplete Textbox with PHP Mysql</h3>
      <br />
      <br />
      <br />
      <div class="row">
        <div class="col-md-3">

        </div>
        <div class="col-md-6">
          <auto-complete></auto-complete>
        </div>
        <div class="col-md-3">

        </div>
      </div>
    </div>
  </body>
</html>

<script>

  Vue.component('auto-complete', {
    template:`
    <div>
      <input type="text" placeholder="Enter Country name..." v-model="query" @keyup="getData()" autocomplete="off" class="form-control input-lg" />
      <div class="panel-footer" v-if="search_data.length">
        <ul class="list-group">
          <a href="#" class="list-group-item" v-for="data1 in search_data" @click="getName(data1.country_name)">{{ data1.country_name }}</a>
        </ul>
      </div>
    </div>
    `,
    data:function(){
      return{
        query:'',
        search_data:[]
      }
    },
    methods:{
      getData:function(){
        this.search_data = [];
        axios.post('fetch.php', {
          query:this.query
        }).then(response => {
          this.search_data = response.data;
        });
      },
      getName:function(name){
        this.query = name;
        this.search_data = [];
      }
    }
  });

  var application = new Vue({
    el:'#autocomplete_app'
  });

</script>

fetch.php

<?php

//fetch.php;

$connect = new PDO("mysql:host=localhost; dbname=testing", "root", "");

$received_data = json_decode(file_get_contents("php://input"));

$data = array();

if($received_data->query != '')
{
 $query = "
 SELECT country_name FROM apps_countries 
 WHERE country_name LIKE '%".$received_data->query."%' 
 ORDER BY country_name ASC 
 LIMIT 10
 ";

 $statement = $connect->prepare($query);

 $statement->execute();

 while($row = $statement->fetch(PDO::FETCH_ASSOC))
 {
  $data[] = $row;
 }
}

echo json_encode($data);

?>

Check Username or Email Availability using Vue.js with PHP

In this Vue.js tutorial, we will make PHP script for implement username or email live check for registration feature using Vue.js with Axios package for send Ajax request. This functionality is very common and it is required feature for most of the websites which is available online. If in your website, you have give login rights to user by entering their username or email and password, and get access into websites. Then at that time their username or email address must be unique. For this things when user has come into your websites for new account registration, then at that time we have to check username or email is available for registration or not for prevent duplicate registration with same username or email address.

For this problem, In this tutorial, we will use Vue.js with PHP script for check username of email already exists in our Mysql database or not. If Username or email is already exists then at that time we have stop user registration process by displaying message like particular email or username is already registered in our system try with different username or email address, and it will notify to the user regarding email address or username is already used by some another person before submitting of registration form data. Now in your mind one question will arise, how to check email ID or username exist or not in database, for this we will use Ajax with Vue.js and PHP script. When user has type something in username or email textbox then Vue.js will send Ajax request to PHP script with query like for search particular username or email address already exists in Mysql database.

This we can done when User has create account in our website, so while user enters their username or email id then Vue.js will triggered Ajax call and it will send request to PHP script at server side to check the availability status of email address or username. At PHP script, it will matches user data which they have enter with data available in Mysql database and it will send back response to Ajax request with availability of Username or email address which will be display on web page by using Vue.js without refresh of web page. So checking of availability of Email Address or Username of the user at the time registration is the best way to prevent duplicate registration in our web application. So from this tutorial, you can learn how to check email id or username availability of user from database, this things here we will use Ajax with Vue.js and PHP script. Below you can find the complete source code of how to check availability of the username or email address using ajax and Vue.js in PHP.

View Demo

Source Code

Mysql Database

--
-- Database: `testing`
--

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

--
-- Table structure for table `tbl_login`
--

CREATE TABLE `tbl_login` (
  `id` int(11) NOT NULL,
  `first_name` varchar(100) NOT NULL,
  `last_name` varchar(100) NOT NULL,
  `gender` varchar(30) NOT NULL,
  `email` varchar(200) NOT NULL,
  `password` varchar(200) NOT NULL,
  `address` text NOT NULL,
  `mobile_no` varchar(15) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_login`
--

INSERT INTO `tbl_login` (`id`, `first_name`, `last_name`, `gender`, `email`, `password`, `address`, `mobile_no`) VALUES
(1, 'John', 'Smith', 'male', 'johnsmith@gmail.com', '$2y$10$vgo3NI5w5cLB74E4B2sdVuKwdSpJL/EAeKSUdevkc/j3zl0sJAf5i', 'test address', '9632587410');

--
-- Indexes for dumped tables
--

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

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_login`
--
ALTER TABLE `tbl_login`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;

index.php

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Live Username Or Email Availability using Vue.js in PHP</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 </head>
 <body>
  <div class="container" id="registerApp">
   <br />
   <h3 align="center">Live Username Or Email Availability using Vue.js in PHP</h3>
   <br />
   <div class="panel panel-default">
    <div class="panel-heading">
     <h3 class="panel-title">Register</h3>
    </div>
    <div class="panel-body">
     <div class="form-group">
      <label>Enter Your Email</label>
      <input type="text" v-model="email" class="form-control input-lg" :class="class_name" @keyup="check()" />
      <span :class="[dynamic_class ? 'success' : 'danger']">{{ message }}</span>
     </div>
     <div class="form-group">
      <label>Enter Your Password</label>
      <input type="password" v-model="password" class="form-control input-lg" />
     </div>
     <div class="form-group" align="center">
      <button type="button" :disabled="is_disable" class="btn btn-info btn-lg">Register</button>
     </div>
    </div>
   </div>
  </div>
 </body>
</html>

<style>
.success
{
 font-weight: bold;
 color:#009933;
 background-color: #ccffcc;
 border:1px solid #009933;
}

.danger
{
 font-weight: bold;
 color:#ff0000;
 background-color: #ffe6e6;
 border:1px solid #ff0000;
}
</style>

<script>

var application = new Vue({
 el:'#registerApp',
 data:{
  email:'',
  dynamic_class:true,
  message:'',
  password:'',
  is_disable:false,
  class_name:''
 },
 methods:{
  check:function(){
   var email = application.email.trim();
   if(email.length > 2)
   {
    axios.post('action.php', {
     email:email
    }).then(function(response){
     if(response.data.is_available == 'yes')
     {
      application.dynamic_class = true;
      application.message = 'This Email is Available for Registration';
      application.is_disable = false;
      application.class_name = 'success';
     }
     else
     {
      application.dynamic_class = false;
      application.message = 'This Email is already registred';
      application.is_disable = true;
      application.class_name = 'danger';
     }
    });
   }
   else
   {
    application.message = '';
    application.class_name = '';
    application.dynamic_class = true;
    application.is_disable = false;
   } 
  }
 }
});

</script>

action.php

<?php

//action.php

$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");

$received_data = json_decode(file_get_contents("php://input"));

$data = array();

if($received_data->email != '')
{
 $is_available = 'yes';

 $query = "
 SELECT * FROM tbl_login 
 WHERE email = '".$received_data->email."'
 ";

 $statement = $connect->prepare($query);

 $statement->execute();

 $total_row = $statement->rowCount();

 if($total_row > 0)
 { 
  $is_available = 'no';
 }

 $data = array(
  'is_available'  => $is_available
 );
}

echo json_encode($data);

?>

If you like this tutorial and you have found that this tutorial helpful then please don't forget to share this tutorial.

Instant Ajax Search with PHP and Vue.js

We all know Real time searching feature is required functionality in any web based application or website. For this things, here in this post we will try to cover topic like How can we make Live Data search application by using Vue.js with PHP script and Mysql database. For example if you have build any enterprise level application in PHP and if you have use Vue.js then after that time you have to filter data then at that time live data search filter feature is used for search data without refresh of web page.

Now you have one question arise How to make Instant Ajax Search application with PHP and Vue. Then by using Vue.js library you can also make real time search application build by using ajax. In Vue.js library you can use Axios package for send Ajax request. So by using this package you can easily send Ajax request for build Live data search application with Vue JS and PHP script. Below you can find the step by step process for build VueJS Live search filter with PHP.

For use Vue.js with PHP script, first we need to include VueJS library file in file which you can find below.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Vue.js Live Data Search with PHP & Mysql</title>
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>

After this in HTML code part, we have to define one id attribute to any tag in which Vue.js can be used. If we have define id attribute then that inner HTML tag will be used by Vue.js library and outside HTML content will not be affect by Vue js.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Vue.js Live Data Search with PHP & Mysql</title>
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div class="container" id="searchApp">

                </div>
       </body>
</html>

View Demo

For make live search feature, first we have define textbox for enter search query. In textbox we have write v-model directive, by using this directive we can get the value of this textbox. And for instant search, here we have use @keyup directive. So, when we have type something then it will called fetchData() function for search data from mysql database using Vue.js and PHP.

<input type="text" class="form-control input-sm" placeholder="Search Data" v-model="query" @keyup="fetchData()" />

For display data on web page, here we have define one HTML table. For fill HTML table with data, here we have use v-for loop directive. At the time of searching of data and then it has not found data from Mysql database. So at that time we want to display no data found message on web page. For this here we have define one table row tag with no data found message, this tag will be visible if v-if="nodata" directive value is true, otherwise that message will not be display on web page.

<table class="table table-bordered table-striped">
							<tr>
								<th>First Name</th>
								<th>Last Name</th>
							</tr>
							<tr v-for="row in allData">
								<td>{{ row.first_name }}</td>
								<td>{{ row.last_name }}</td>
							</tr>
							<tr v-if="nodata">
								<td colspan="2" align="center">No Data Found</td>
							</tr>
						</table>

index.php

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Vue.js Live Data Search with PHP & Mysql</title>
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div class="container" id="searchApp">
			<br />
			<h3 align="center">Vue.js Live Data Search with PHP & Mysql</h3>
			<br />
			<div class="panel panel-default">
				<div class="panel-heading">
					<div class="row">
						<div class="col-md-9">
							<h3 class="panel-title">Sample Data</h3>
						</div>
						<div class="col-md-3" align="right">
							<input type="text" class="form-control input-sm" placeholder="Search Data" v-model="query" @keyup="fetchData()" />
						</div>
					</div>
				</div>
				<div class="panel-body">
					<div class="table-responsive">
						<table class="table table-bordered table-striped">
							<tr>
								<th>First Name</th>
								<th>Last Name</th>
							</tr>
							<tr v-for="row in allData">
								<td>{{ row.first_name }}</td>
								<td>{{ row.last_name }}</td>
							</tr>
							<tr v-if="nodata">
								<td colspan="2" align="center">No Data Found</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

<script>

var application = new Vue({
	el:'#searchApp',
	data:{
		allData:'',
		query:'',
		nodata:false
	},
	methods: {
		fetchData:function(){
			axios.post('action.php', {
				query:this.query
			}).then(function(response){
				if(response.data.length > 0)
				{
					application.allData = response.data;
					application.nodata = false;
				}
				else
				{
					application.allData = '';
					application.nodata = true;
				}
			});
		}
	},
	created:function(){
		this.fetchData();
	}
});

</script>

For search data from Mysql database, here we have use PHP script. In this example here we have make action.php this file has been received Ajax request for search data from Mysql database.

In this file, first we have make database connection. After making database connection, it has been received data from Ajax request which has been send by using Axios package, so it has been received data in json format. So by using json_decode() function it has been converted into PHP array object.

Then after in this PHP scrilt file, it has check any search query has been received or not. If any search query has been received then it will filter data and send to Ajax request. But it has not received any search query then it will return all data to Ajax request. Below you ca find complete PHP script for search or filter mysql data.

action.php

<?php

//action.php

$connect = new PDO("mysql:host=localhost; dbname=testing", "root", "");

$received_data = json_decode(file_get_contents("php://input"));

$data = array();

if($received_data->query != '')
{
	$query = "
	SELECT * FROM tbl_sample 
	WHERE first_name LIKE '%".$received_data->query."%' 
	OR last_name LIKE '%".$received_data->query."%' 
	ORDER BY id DESC
	";
}
else
{
	$query = "
	SELECT * FROM tbl_sample 
	ORDER BY id DESC
	";
}

$statement = $connect->prepare($query);

$statement->execute();

while($row = $statement->fetch(PDO::FETCH_ASSOC))
{
	$data[] = $row;
}

echo json_encode($data);

?>

This is complete step by step process for building Live data search application by using Vue.js with PHP script. So, try this code in your own computer and test it, it is working or not and have you learn something new from our web tutorial or not.

Dynamic Dependent Dropdown in Vue.js using PHP

In this post, We will show you how to create dynamic dependent select box using Vue.js with PHP script. For learn the concept of dynamic dependent dropdown feature, here we will use the basix example of country, state and city select box. Here we will make dynamic dependent select box with VueJS using PHP and Mysql table with Axios package for send Ajax request.

Mostly, Dynamic Dependent dropdown box is used to fill auto-populated dropdown list on dynamic dependent data. So, when we have select one select box data, then child dropdown box will fetch data from database and filled into dependent select box. This type of functionality mostly used for filled country, state, city example or category, sub-category form data. But here we will use Country, state and City example for make dynamic dependent dropdown using VueJS and PHP scropt. So, when in this example when use has been select country then state select box data will be fetch from database and fill state select box option with selected country state, and this same process for city select box also. Below you can find step by step process for build dynamic dependent dropdown in Vue.js with PHP.

For make dynamic dependent select box here we have make two file.

index.php
action.php

Database

First you have to create Mysql database in your local phpmyadmin and then after run following SQL script, it will make country, state and city table in mysql database.

--
-- Database: `country_state_city`
--

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

--
-- Table structure for table `city`
--

CREATE TABLE `city` (
  `city_id` int(11) NOT NULL,
  `state_id` int(11) NOT NULL,
  `city_name` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `city`
--

INSERT INTO `city` (`city_id`, `state_id`, `city_name`) VALUES
(1, 1, 'New York city'),
(2, 1, 'Buffalo'),
(3, 1, 'Albany'),
(4, 2, 'Birmingham'),
(5, 2, 'Montgomery'),
(6, 2, 'Huntsville'),
(7, 3, 'Los Angeles'),
(8, 3, 'San Francisco'),
(9, 3, 'San Diego'),
(10, 4, 'Toronto'),
(11, 4, 'Ottawa'),
(12, 5, 'Vancouver'),
(13, 5, 'Victoria'),
(14, 6, 'Sydney'),
(15, 6, 'Newcastle'),
(16, 7, 'City of Brisbane'),
(17, 7, 'Gold Coast'),
(18, 8, 'Bangalore'),
(19, 8, 'Mangalore'),
(20, 9, 'Hydrabad'),
(21, 9, 'Warangal');

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

--
-- Table structure for table `country`
--

CREATE TABLE `country` (
  `country_id` int(11) NOT NULL,
  `country_name` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `country`
--

INSERT INTO `country` (`country_id`, `country_name`) VALUES
(1, 'USA'),
(2, 'Canada'),
(3, 'Australia'),
(4, 'India');

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

--
-- Table structure for table `state`
--

CREATE TABLE `state` (
  `state_id` int(11) NOT NULL,
  `country_id` int(11) NOT NULL,
  `state_name` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `state`
--

INSERT INTO `state` (`state_id`, `country_id`, `state_name`) VALUES
(1, 1, 'New York'),
(2, 1, 'Alabama'),
(3, 1, 'California'),
(4, 2, 'Ontario'),
(5, 2, 'British Columbia'),
(6, 3, 'New South Wales'),
(7, 3, 'Queensland'),
(8, 4, 'Karnataka'),
(9, 4, 'Telangana');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `city`
--
ALTER TABLE `city`
  ADD PRIMARY KEY (`city_id`);

--
-- Indexes for table `country`
--
ALTER TABLE `country`
  ADD PRIMARY KEY (`country_id`);

--
-- Indexes for table `state`
--
ALTER TABLE `state`
  ADD PRIMARY KEY (`state_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `city`
--
ALTER TABLE `city`
  MODIFY `city_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=22;

--
-- AUTO_INCREMENT for table `country`
--
ALTER TABLE `country`
  MODIFY `country_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;

--
-- AUTO_INCREMENT for table `state`
--
ALTER TABLE `state`
  MODIFY `state_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10;

View Demo

index.php

In this file, we have already included Vue.js library and axios package link. In this file we have to create three select box for select country, state and city data and by using Vue.js script we will convert into dynamic dependent dropdown select box. For dynamic fillled select box with option data here we have make Vue method, which will send Ajax request to php script for fetch data from Mysql database and received data in json format. After this by using v-for directive it will fill select box with option data.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dynamic Dependent Select Box in Vue.js using PHP</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  
 </head>
 <body>
  <div class="container" id="dynamicApp">
   <br />
   <h3 align="center">Dynamic Dependent Select Box in Vue.js using PHP</h3>
   <br />
   <div class="panel panel-default">
    <div class="panel-heading">Select Data</div>
    <div class="panel-body">
     <div class="form-group">
      <label>Select Country</label>
      <select class="form-control input-lg" v-model="select_country" @change="fetchState">
       <option value="">Select Country</option>
       <option v-for="data in country_data" :value="data.country_id">{{ data.country_name }}</option>
      </select>
           </div>
           <div class="form-group">
      <label>Select State</label>
      <select class="form-control input-lg" v-model="select_state" @change="fetchCity">
       <option value="">Select state</option>
       <option v-for="data in state_data" :value="data.state_id">{{ data.state_name }}</option>
      </select>
           </div>
           <div class="form-group">
      <label>Select City</label>
      <select class="form-control input-lg" v-model="select_city">
       <option value="">Select City</option>
       <option v-for="data in city_data" :value="data.city_id">{{ data.city_name }}</option>
      </select>
           </div>
    </div>
   </div>
  </div>
 </body>
</html>

<script>

var application = new Vue({
 el:'#dynamicApp',
 data:{
  select_country:'',
  country_data:'',
  select_state:'',
  state_data:'',
  select_city:'',
  city_data:''
 },
 methods:{
  fetchCountry:function(){
   axios.post("action.php", {
    request_for:'country'
   }).then(function(response){
    application.country_data = response.data;
    application.select_state = '';
    application.state_data = '';
    application.select_city = '';
    application.city_data = '';
   });
  },
  fetchState:function(){
   axios.post("action.php", {
    request_for:'state',
    country_id:this.select_country
   }).then(function(response){
    application.state_data = response.data;
    application.select_state = '';
    application.select_city = '';
    application.city_data = '';
   });
  },
  fetchCity:function(){
   axios.post("action.php", {
    request_for:'city', 
    state_id:this.select_state
   }).then(function(response){
    application.city_data = response.data;
    application.select_city = '';
   });
  }
 },
 created:function(){
  this.fetchCountry();
 }
});

</script>

action.php

All PHP script has been write in this file, In this file, first we have make database connection and then after it has received Ajax request data in json format and converted into PHP Array object. After it check request for fetch data from which table, and then after it will make query and execute and fetch data from Mysql table and store in Array. Lastly for send this data to Ajax request in json format.

<?php

//action.php

$connect = new PDO("mysql:host=localhost;dbname=country_state_city", "root", "");

$received_data = json_decode(file_get_contents("php://input"));

if($received_data->request_for == 'country')
{
 $query = "
 SELECT * FROM country 
 ORDER BY country_name ASC
 ";
}

if($received_data->request_for == 'state')
{
 $query = "
 SELECT * FROM state 
 WHERE country_id = '".$received_data->country_id."' 
 ORDER BY state_name ASC
 ";
}

if($received_data->request_for == 'city')
{
 $query = "
 SELECT * FROM city 
 WHERE state_id = '".$received_data->state_id."' 
 ORDER BY city_name ASC
 ";
}

$statement = $connect->prepare($query);

$statement->execute();

while($row = $statement->fetch(PDO::FETCH_ASSOC))
{
 $data[] = $row;
}

echo json_encode($data);


?>

So, From this post, you can learn how to make dynamic dependent dropdown with Vue.js and PHP. Try this source in your local computer and We hope you have learn something new from this our new tutorial.