Using AngularJS with XAMPP
Overview
For those of you are that familiar with PHP/MySQL but not with AngularJS, AngularJS is a Javascript MVC framework developed by Google that lets you build well structured, easily testable, and maintainable front-end applications, but to build a full-blown application, you need a backend. In this series of tutorials, you will learn to code with AngularJS with a PHP/MySQL backend. We will NOT be exploring the basics or fundamentals of AngularJS, PHP, or MySQL. Minimum knowledge and experience is required before proceeding.
If you are new to AngularJS, PHP, or MySQL, please visit each the following links to learn more.
New MySQL Table
Execute the following table creation either in your new database or current database.
XAMPP
Assuming that you have XAMPP installed locally, start your PHP and MySQL servers.
PHP - MySQL Test Connection
The following code will verify if your PHP and MySQL are functioning properly under XAMPP: phptest.php
You should see the list of all columns for users table. The following SQL query is equivalent to the image below:
DESC users;
If everything is in working order, go head and create a new PHP file, config.php, where we will be storing and/or retrieving our MySQL credentials
AngularJS
Let's create a minimal registration form, form.php, where we will be storing/retrieving the user's first name, last name, and username from our MySQL database.
The form will consists of First Name, Last Name, and Username as form inputs.
In the beginning of the file, be sure to include the angular.js source location:
https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"
ng-app and ng-controller are key elements of AngularJS framework. Here
we named it, my-app and userCtrl, in which should correspond to the components in our
app.js file.
The following code is a looping function where it is retrieving a list of our users from our users table starting from the first record.
{{user.fname}}
{{user.lname}}
{{user.username}}
form.php
Next, create our javascript file app.js
Save / Remove Function File
Next, we need a CRUD.php file where we could add and remove the users.
Demo
The finished product should allow you to save and delete users in real-time while still utillzing the AngularJS framework. A live demo is available in the last section of this tutorial.
Verifying in MySQL
Please note that my ID will differ from yours.
Live Demo
Go ahead. Give it a whirl.