Angular, PHP & Mysql

Angular is one of the famous frameworks to build rich and user-friendly front-end apps. It is based on TypeScript that is extended from JavaScript. Angular currently backed by a giant company - Google has a large community of passionate web developers.

Angular was built around the concept of resuable components and a collection of libraries to build scalable web applications.

Angular uses two-way data binding. Data changed in UI or view (html) reflect changes in state data of a component and vice versa.


You will learn to build a simple full stack web application - Product Admin with Angular, PHP, and Mysql. We build front-end app with Angular and back-end APIs with PHP and Mysql.

The sample project allows a visitor to register and login. An authorized user will be able to list products, insert, update, and delete products. You find the demo of the project here: Product Admin with Angular, PHP, and Mysql


Before we start, check if you have installed NPM (Node Package Manager), and VSC editor. Visit the link Download NPM & VSC Editor to download and install the tools. Also, i recommend to install XAMPP to host PHP web APIs and manage Mysql database on your local development machine.

Comments

Post a Comment

Popular posts from this blog

APIs to Upload form data with file in PHP & MYSQL

Image
In the earlier tutorial, you learnt to filter products by id and by name, limit the number of rows to return, and count products . In this tutorial, we will create more APIs to upload product form data with image file, and to delete products from MYSQL database. The uploaded files are stored in local storage (uploads folder). Open Controllers/ProductController.php file to add three more methods to handle product inserting, updating, and deleting. In PHP, form data submitted from a client app is available in $_POST variable and uploaded files will be in $_FILES variable.  In the addProduct() and updateProduct() methods, we simply get data from the POST variable and insert or update the data to MYSQL database using Prepared Statements.  To save the uploaded files to local storage, use move_uploaded_file() method. The deleteProduct() required one parameter - pid to delete a product by its id from the database. ......................... public function addProduct() { tr...
Read more

Create Angular App & SideBar

Image
In the earlier tutorials, you learnt to create APIs in PHP with MYSQL database and Phinx, do authentication with JWT, and protect APIs. Now you learn to create Angular client/front-end app to access the APIs. After completing the Angular tutorials, you build a full stack web application using Angular, PHP, and MYSQL. Let start the first part of Angular tutorials by creating an Angular app and add side bar menu to the app. Create angcli14 folder in a drive of your choice. Enter the angcli14 and execute the following command to install Angular Cli version 14.0.0. angcli14>npm install @angular/cli@14.0.0 Then run the command below to create ang14-client Angular app. angcli14>ng new ang14-client After the project finishes its initialization, enter the ang14-client folder, and execute the command below to run the app. ang14-client>ng serve By default Angular launches the app on port 4200. So you can access the app on your local machine via http://localhost:4200 Let install followin...
Read more

PHP Mysql Database Migration Using Phinx

 In this tutorial, you will learn to do Mysql database migration with Phinx . You will be able to create tables, add/alter table fields, and insert sample data to Mysql database. I recommend you to install XAMPP. It comes with Apache, Mysql and PhpMyAdmin to manage databases.  This tutorial assumes you already read the previous tutorial: PHP Routing & Restful APIs . In the api folder, run the command below to add Phinx to the project: composer require robmorgan/phinx Then, you need to create Phinx configuration file by the command: ./vendor/bin/phinx init The command created phinx.php configuration file in api folder. Modify the content of phinx.php file below to add credential information to connect to Mysql database on your local machine. <?php return [ 'paths' => [ 'migrations' => '%%PHINX_CONFIG_DIR%%/db/migrations' , 'seeds' => '%%PHINX_CONFIG_DIR%%/db/seeds' ], 'environments' =...
Read more