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

Angular with PHP & MYSQL to display products list & paging

Image
In the third part of Angular tutorials, you learn to create Angular component and service to display products list from API endpoints, filter products by name and do pagination. Execute command below to create produce service in services folder. The product service is used to count products with search text and retrieve product list with search text and  a range of specified start and limit parameters from API endpoints. The APIs requires a token to authenticate. So, you need to add the token to the request headers. ang14-client>ng generate service services/product services/product.service.ts import { Injectable } from '@angular/core' ; import { HttpClient} from '@angular/common/http' ; import { Observable } from 'rxjs' ; import { map, catchError } from 'rxjs/operators' ; import { HttpHeaders } from '@angular/common/http' ; import { AuthService } from '../services/auth.service' ; import {api_url_root} from "../app.constant
Read more

Angular Upload Form Data & Files

Image
In the previous tutorial, you learnt to create UI to display products list and do pagination . To finish the Angular tutorials to build a simple admin panel, we add functionalities to add products with image files, update and delete existing products from MYSQL database. Execute the following command to create ProductUpload component.  ang14-client>ng generate component ProductUpload product-upload/product-upload.component.ts import { Component, OnInit } from '@angular/core' ; import { ProductService } from '../services/product.service' ; import { AuthService } from '../services/auth.service' ; import { HttpClient } from '@angular/common/http' ; import { ActivatedRoute, Router } from '@angular/router' ; @ Component({ selector : 'app-productupload' , templateUrl : './product-upload.component.html' , styleUrls : [ './product-upload.component.css' ] }) export class ProductUploadComponent implements OnIni
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