LZYlove / MNJIC

Angular Material Data table and PHP MYSQL App

MNJIC

Angular Material and PHP MYSQL App
[Click here for Video Tutorials !]

Objective:

In this Project, We will build a mobile App for one of our client MNJIC.
We will develop this app for Android devices and will register this on Google Play.

Business Requirement:

MNJIC already has a PHP application using MYSQL database. Client maintain (add,edit and delete) a list of Students IDs, their Names, Scores with Session IDs in PHP.
For their mobile, they only to display a list of merit students information in their app.

Tools:

We will using Angular, Angular Materials Data Table for UI. PHP and MYSQL for backend.
Also, we will try to use Ionic Capactiory new release to create a mobile app from Angular Codebase.
We will also try to use Apache Cordova for the same purpose as a back up plan.

Let's Get Started

I assume you already have a successful Angular Development environment already setup and if not, please visit

Angular Development Environment Setup
Angular Material Setup

Develpment Tasks:

Step 1: Setup Angular App

VSCODE > Terminal > node -v // show current node version installed
npm -v // show current npm version
ng -v // show current Angular-Cli version
ng new MNJIC --routing // create a new ng app
cd MNJIC

Clean up tasks:

copy over favicon.ico in assets/icon directory
update index.html to reflect new favicon.ico changes
update polyfill.json
- In case of using web animations or if you are planning to support older browser versions.
and in case of adding a polyfill, please make sure to npm install related package for chosen polyfill.

update gitignore file

- Please include files/folder which you do not wish to include to Git Repository like < dist > or < node_modules > folder OR environment.ts, environment.prod.ts etc

update Angular-cli.json settings

"prefix": "app"
get rid of "app" prefix, otherwise, this setting will prefix, all selector with this string, like FooterComponent will have selector = app-footer

Step 2: Install Angular Materials

npm install --save @angular/material @angular/cdk @angular/animations hammerjs

Step 3. Include a theme

add this to styles.css or copy this over to assets/css directory

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
ng serve

Step 4. Google Material Icons

< link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" >

---

create custom material module

ng g module shared/custommaterial

copy below content to custom.material.ts file

https://github.com/AmitXShukla/Angular-Material/blob/master/src/app/shared/custommaterial/custommaterial.module.ts

update app.module.ts

to include ElishCustomMaterialModule in IMPORT section
(add to IMPORT section)

Now You have all Angular Material dependencies installed.

---

Define Website Content and requirements

This website will need a top tool bar.

Top tool bar should also include a mat-icon and header/title text for the page being displayed in middle.
At right most side of tool bar, it should include mat-icons for email, settings and social icon for contact.

All mat-icons must have a tool tip displayed

At the bottom of the page, a footer needs to be included.
This footer will have copyright statement and include all navigation links for SEO rendering.

---

Now it's time to add header and footer components
create a new footer

ng g component shared/footer

update footer.html with this text
copyright 2018, [e-mail]

update app.component.html file and include at last
< footer >< /footer >

ng serve

at this point to make sure, app displays footer statement and is running fine.

Open app.component.ts and
Include tool bar code
Include material icons
Fix, person_add mat-icon to include links from social plugin at right

register a new custom svgicon
in case of error, include HttpClientModule

ng g service services/backend

Create a Data Table and get all fields from mock.json
Later will replace this mock.json from backend PHP/MYSQL back

host PHP API Code to support data fetch

fetch PHP data in Angular Material Data Table

Now, we can replace mock-date in json with real PHP API

http://elisheducation.com/MNJIC/connection_api.php?action=f

Include mock-data.json

Include Mat_Data into app.component.html

Feed Mat_Data from data-service

point data-service to php data feed