Showing posts with label Student Record System in AngularJS and PHP. Show all posts
Showing posts with label Student Record System in AngularJS and PHP. Show all posts

Saturday, July 15, 2017

Student Record System in AngularJS and PHP


In this article will show how to display and search a student record using AngularJS and PHP. The code is very easy to understand and use.

My email address are the following jakerpomperada@gmail.com and jakerpomperada@yahoo.com.

My mobile number here in the Philippines is 09173084360.

Thank you.







Sample Program Output


Program Listing

index.php


<html ng-app="fetch">
    <head>
    <title>AngularJS and PHP in AngularJS and PHP </title>
      <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
    </head>
    <body>
    <br>
<style>
  body {
  font-family:arial;
  font-weight:bold;
  size:12px;
      background-color:lightblue; 
  
  }
 </style> 
      <div class="row">
        <div class="container">
         <h1>Student Record System in AngularJS and PHP</h1>
<br><br>
          <div ng-controller="dbCtrl">
            Type Student Name or ID Number Here 
<br><br>
<input type="text" ng-model="searchFilter" class="form-control">
<br><br>

            <table class="table table-hover">
                <thead>
                    <tr>
<th>ID</th>                       
   <th>Student Name</th>
                        <th>Course</th>
<th>Email Address</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="students in data | filter:searchFilter"> 
                        <td>{{students.student_id}}</td>
                        <td>{{students.name}}</td>
<td>{{students.course}}</td>
                        <td>{{students.email}}</td>
                    </tr> 
                </tbody>
            </table>
          </div>
        </div>
      </div>
    </body>

    <script>
        var fetch = angular.module('fetch', []);

        fetch.controller('dbCtrl', ['$scope', '$http', function ($scope, $http) {
            $http.get("ajax.php")
                .success(function(data){
                    $scope.data = data;
                })
                .error(function() {
                    $scope.data = "error in fetching data";
                });
        }]);

    </script>

    </html>


ajax.php

<?php
//database settings
$connect = mysqli_connect("localhost", "root", "", "school");

$result = mysqli_query($connect, "select * from students order  by name ASC");

$data = array();

while ($row = mysqli_fetch_array($result)) {
  $data[] = $row;
}
    print json_encode($data);

?>


students.sql

-- phpMyAdmin SQL Dump
-- version 4.6.5.2
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Jul 12, 2017 at 11:51 AM
-- Server version: 10.1.21-MariaDB
-- PHP Version: 5.6.30

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `school`
--

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

--
-- Table structure for table `students`
--

CREATE TABLE `students` (
  `id` int(11) NOT NULL,
  `student_id` varchar(20) NOT NULL,
  `name` varchar(200) NOT NULL,
  `course` varchar(200) NOT NULL,
  `email` varchar(200) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `students`
--

INSERT INTO `students` (`id`, `student_id`, `name`, `course`, `email`) VALUES
(1, '1', 'Bill Gates', 'BS Information Technology', 'bill_gates@yahoo.com.ph'),
(2, '2', 'Digong Duterte', 'BS LAW', 'digong@davao.gov.ph'),
(3, '3', 'Kobe Bryant', 'BS Managerial Accounting', 'kobe@la_lakers.com'),
(4, '4', 'Carina Tan', 'MS Information Technology', 'carina_tan@hotmail.com'),
(5, '5', 'Alma Duterte', 'MAED-IT', 'alma_duterte@lycos.com.ph'),
(6, '6', 'Baste Duterte', 'BS Marine Technology', 'baste@cnn.com.ph'),
(7, '7', 'Jake Pomperada', 'BS Computer Science', 'jakerpomperada@yahoo.com'),
(8, '8', 'Jacob Samuel Pomperada', 'BS Computer Engineering', 'jacob_samuel_pomperada@gmail.com'),
(9, '9', 'Ma. Junallie F. Pomperada,PH.D', 'BS Chemical Engineering', 'alliepomperada@yahoo.com.ph'),
(10, '10', 'Julianna Rae F. Pomperada', 'BS Business Management', 'iyapomperada@live.com');

--
-- Indexes for dumped tables
--

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

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `students`
--
ALTER TABLE `students`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;