POSTMAN DOCS

https://documenter.getpostman.com/view/24626304/2sAYBUDXqC

Output Link

https://angular-api-activity.web.app/user

Github:

https://github.com/thirdygayares/angular-api

API endpoint:

https://testsvfcb.pythonanywhere.com

Project Directory

Step 1: Setup Angular Project

https://software-engineer.thirdygayares.com/angular-create-components-modules-and-routes

Step 2: Create Components and Services

https://software-engineer.thirdygayares.com/angular-create-components-modules-and-routes

https://software-engineer.thirdygayares.com/angular-services

Step 3: Create User Model

user.ts

export interface User {
  user_id?: number;
  user_uuid?: string;
  email?: string;
  username?: string;
  password?: string;
  role?: string;
  created_at?: string;
  updated_at?: string;
}

Step 4: Set Up the API Service

user.service.ts

import {HttpClient} from "@angular/common/http";
import {User} from "../model/user";
import {Injectable} from "@angular/core";

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private apiUrl = 'https://testsvfcb.pythonanywhere.com/users/';

  constructor(private http: HttpClient) {}

  getUsers() {
    return this.http.get<User[]>(this.apiUrl);
  }

  getUserById(userUUId: string | undefined) {
    return this.http.get<User>(`${this.apiUrl}/${userUUId}`);
  }

  createUser(user: User) {
    return this.http.post<User>(this.apiUrl, user);
  }

  updateUser(userUUId: string | undefined, user: User) {
    return this.http.put<User>(`${this.apiUrl}/${userUUId}`, user);
  }

  deleteUser(userUUId: string | undefined) {
    return this.http.delete(`${this.apiUrl}/${userUUId}`);
  }
}

Step 5: Implement User Component

user.component.ts

import {UserService} from "../../services/user.service";
import {Component, OnInit} from "@angular/core";
import {User} from "../../model/user";
import {NgForm} from "@angular/forms";

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  users: User[] = [];
  selectedUser: User | null = null;

  constructor(private userService: UserService) {}

  ngOnInit(): void {
    this.getUsers();
  }

  getUsers() {
    this.userService.getUsers().subscribe({
      next: (data) => this.users = data,
      error: (err) => console.error(err)
    });
  }

  createUser(form: NgForm) {
    if (form.invalid) {
      alert('Please fill out all the fields correctly.');
      return;
    }

    const user: User = {
      ...form.value,
      role : 'user'
    };

    this.userService.createUser(user).subscribe({
      next: () => {
        this.getUsers();
        form.reset();
        alert('User created successfully');
      },
      error: (err) => {
        console.error(err);
        alert('There was an error creating the user. Please check the console.');
      },
    });
  }

  updateUser(userUUId: string | undefined, user: User) {
    if (!userUUId) {
      alert('User ID is required');
      return;
    }

    const newName = prompt('Enter new username:', user.username || '');
    const newEmail = prompt('Enter new email:', user.email || '');
    const newPassword = prompt('Enter new password:', user.password || '');
    const newRole = prompt('Enter new role:', user.role || '');

    if (!newName || !newEmail || !newPassword || !newRole) {
      alert('Update canceled. All fields are required.');
      return;
    }

    const updatedUser: User = {
      username: newName,
      email: newEmail,
      password: newPassword,
      role: newRole,
    };

    this.userService.updateUser(userUUId, updatedUser).subscribe({
      next: () => {
        alert('User updated successfully');
        this.getUsers();
      },
      error: (err) => {
        console.error(err);
        alert('Failed to update user');
      },
    });
  }

  deleteUser(userUUId: string | undefined) {
    this.userService.deleteUser(userUUId).subscribe({
      next: () => this.getUsers(),
      error: (err) => console.error(err)
    });
  }

  viewUserDetails(userUUId: string | undefined) {
    this.userService.getUserById(userUUId).subscribe({
      next: (data) => {
        const userDetails = `
        Details for ${data.username}:
        User ID: ${data.user_id}
        User UUID: ${data.user_uuid}
        Email: ${data.email}
        Role: ${data.role}
        Created At: ${data.created_at}
        Updated At: ${data.updated_at}

      `;
        alert(userDetails); // Show the details in a browser alert
      },
      error: (err) => console.error(err)
    });
  }

}

Step 6: Create HTML Template

user.component.html

<p>Manage Users</p>
<section>
  <form #userForm="ngForm" (ngSubmit)="createUser(userForm)">
    <input
      type="text"
      name="email"
      ngModel
      placeholder="Email"
      required
      #email="ngModel"
    />
    <div *ngIf="email.invalid && email.touched">Email is required</div>

    <input
      type="text"
      name="username"
      ngModel
      placeholder="Username"
      required
      #username="ngModel"
    />
    <div *ngIf="username.invalid && username.touched">Username is required</div>

    <input
      type="password"
      name="password"
      ngModel
      placeholder="Password"
      required
      minlength="6"
      #password="ngModel"
    />
    <div *ngIf="password.invalid && password.touched">
      Password is required and must be at least 6 characters
    </div>

    <button type="submit" [disabled]="userForm.invalid">Create User</button>
  </form>

</section>

<section>
  <table border="1" class="table table-striped">
    <thead>
    <tr>
      <th>Id</th>
      <th>Username</th>
      <th>Email</th>
      <th>Actions</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let user of users">
      <td>{{ user.user_uuid }}</td>
      <td>{{ user.username }}</td>
      <td>{{ user.email }}</td>
      <td>
        <button (click)="viewUserDetails(user.user_uuid)">View Details</button>
        <button (click)="updateUser(user.user_uuid, { email: 'new-email@example.com', username: 'new-username', role: 'new-role' })">Update</button>
        <button (click)="deleteUser(user.user_uuid)">Delete</button>
      </td>
    </tr>
    </tbody>
  </table>
</section>

STEP 7: Add Global Style

styles.css

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  max-width: 1200px;
  margin: 0 auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  padding: 20px;
  margin: 20px 0px;
}

table, th, td {
  border: 1px solid black;
  padding: 5px;
}

table th {
  background-color: #f2f2f2;
}

table td button {
  background-color: #980000;
  color: white;
  padding: 10px 20px;
  margin: 5px 10px;
}

table td button:hover {
  background-color: #0c92ff;
}

nav {
  display: flex;
  align-items: center;
  color: white;
  gap: 10px;
  padding: 20px 0px;
  margin: 20px 0px;
}

nav a {
  color: blue;
  text-decoration: none;
  font-weight: bold;
}

nav a:hover {
  color: darkblue;
}


form{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}

form input, form select {
  padding: 10px;
  border: 1px solid #ccc;
}

form button {
  padding: 10px 20px;
  background-color: #980000;
  color: white;
  border: none;
}

form button:hover {
  background-color: #0c92ff;
}

output:

POSTMAN DOCS

https://documenter.getpostman.com/view/24626304/2sAYBUDXqC

Output Link

https://angular-api-activity.web.app/user

Github:

https://github.com/thirdygayares/angular-api

Output:

ERD Credit from Group OnlineQuizPlatformSVFC

as you can see, we are successfully created the quiz_db

Step 1: MySQL Table Creation

Create the required tables using MySQL CREATE TABLE statements. Here is the SQL to create these tables:

1. User Table

CREATE TABLE User (
    user_id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(50) NOT NULL,
    email VARCHAR(100) UNIQUE NOT NULL,
    password VARCHAR(255) NOT NULL,
    role ENUM('teacher', 'student') NOT NULL,
    createdAt DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updatedAt DATETIME NULL ON UPDATE CURRENT_TIMESTAMP
);

2. Quiz Table

CREATE TABLE Quiz (
    quiz_id INT PRIMARY KEY AUTO_INCREMENT,
    title VARCHAR(100) NOT NULL,
    description TEXT NOT NULL,
    quiz_code VARCHAR(20) UNIQUE NOT NULL,
    teacher_id INT,
    duration INT NOT NULL,
    createdAt DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updatedAt DATETIME NULL ON UPDATE CURRENT_TIMESTAMP,
    FOREIGN KEY (teacher_id) REFERENCES User(user_id)
);

3. Question Table

CREATE TABLE Question (
    question_id INT PRIMARY KEY AUTO_INCREMENT,
    quiz_id INT NOT NULL,
    question_text TEXT NOT NULL,
    question_type ENUM('MCQ', 'True/False', 'Short Answer', 'Multimedia') NOT NULL,
    createdAt DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updatedAt DATETIME NULL ON UPDATE CURRENT_TIMESTAMP,
    FOREIGN KEY (quiz_id) REFERENCES Quiz(quiz_id)
);

4. Option Table (For MCQ Questions)

CREATE TABLE OptionTable (
    option_id INT PRIMARY KEY AUTO_INCREMENT,
    question_id INT NOT NULL,
    option_text VARCHAR(255) NOT NULL,
    is_correct BOOLEAN NOT NULL DEFAULT 0,
    FOREIGN KEY (question_id) REFERENCES Question(question_id)
);

5. Answer Table

CREATE TABLE Answer (
    answer_id INT PRIMARY KEY AUTO_INCREMENT,
    question_id INT NOT NULL,
    student_id INT NOT NULL,
    answer_text TEXT,
    submitted_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (question_id) REFERENCES Question(question_id),
    FOREIGN KEY (student_id) REFERENCES User(user_id)
);

6. Result Table

CREATE TABLE Result (
    result_id INT PRIMARY KEY AUTO_INCREMENT,
    quiz_id INT NOT NULL,
    student_id INT NOT NULL,
    score DECIMAL(5, 2) NOT NULL,
    submitted_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (quiz_id) REFERENCES Quiz(quiz_id),
    FOREIGN KEY (student_id) REFERENCES User(user_id)
);

Adding Data with Foreign Key Rule

To add data with foreign key constraints, let's add some data into the User and Quiz tables, making sure the foreign key rules are respected.

-- Insert into User table
INSERT INTO User (name, email, password, role) VALUES 
('John Doe', 'john.doe@example.com', 'password123', 'teacher'),
('Jane Smith', 'jane.smith@example.com', 'pass456', 'student');

-- Insert into Quiz table 
INSERT INTO Quiz (title, description, quiz_code, teacher_id, duration) VALUES
('Math Quiz', 'Basic Algebra', 'MATH101', 10, 60),
('Science Quiz', 'General Science', 'SCI201', 10S, 45);

TIP: we must first define the tables with relationships.

1. Add data on User Table:

INSERT INTO User (name, email, password, role) VALUES
('John Doe', 'john.doe@example.com', 'password123', 'teacher'),
('Jane Smith', 'jane.smith@example.com', 'pass456', 'student'),
('Emily Clark', 'emily.clark@example.com', 'teacherpass', 'teacher'),
('Michael Brown', 'michael.brown@example.com', 'mike123', 'student'),
('Sarah White', 'sarah.white@example.com', 'sarahpass', 'student');

2. Add data on Quiz Table:

INSERT INTO Quiz (title, description, quiz_code, teacher_id, duration) VALUES
('Math Quiz', 'Basic Algebra', 'MATH101', 1, 60),
('Science Quiz', 'General Science', 'SCI201', 1, 45),
('English Quiz', 'Grammar Basics', 'ENG301', 1, 30),
('History Quiz', 'World War II', 'HIST401', 8, 50),
('Physics Quiz', 'Mechanics', 'PHY501', 8, 40);

3. Add data on Question Table:

INSERT INTO Question (quiz_id, question_text, question_type) VALUES
(8, 'What is 2 + 2?', 'MCQ'),
(9, 'What is the chemical symbol for water?', 'MCQ'),
(10, 'Identify the verb in the sentence.', 'True/False'),
(11, 'When did World War II start?', 'Short Answer'),
(12, 'What is Newton’s second law?', 'MCQ');

4. Add data on Option Table (For MCQs):

INSERT INTO OptionTable (question_id, option_text, is_correct) VALUES
(6, '4', 1),
(6, '5', 0),
(7, 'H2O', 1),
(7, 'O2', 0),
(8, 'F = ma', 1);

5. Add data on Answer Table:

INSERT INTO Answer (question_id, student_id, answer_text) VALUES
(1, 2, '4'),
(2, 2, 'H2O'),
(3, 4, 'True'),
(4, 5, '1939'),
(5, 4, 'F = ma');

6.Add data on Result Table:

INSERT INTO Result (quiz_id, student_id, score) VALUES
(8, 2, 90.5),
(9, 2, 85.0),
(10, 9, 75.0),
(11, 10, 88.0),
(12, 9, 95.0);

1. Check global username:

    git config --global user.name
   

   

2. Check global email:

    git config --global user.email
   

   

   Set a specific email and username

   To set a specific email and username for the current project only in Git, you can configure Git at the repository level using the following commands. This allows you to use a different identity for a particular project without affecting your global Git configuration.

   Step 1: Navigate to Your Project Directory

   Open your terminal or command prompt and navigate to the directory of your project:

    cd open_source\keriderya
   

   Step 2: Set Local Git Username and Email

   To set the username and email for this specific project, use the following commands:

   1. Set the email for the current project:

       git config user.email "gayaresthird@gmail.com"
      

      

   2. Set the username for the current project:

       git config user.name "Thirdy Gayares"
      

      

Step 3: Verify the Local Configuration

To verify that the username and email are set correctly for the current project, run:

    git config --local --list

You should see something like:

    user.name=Thirdy Gayares
    user.email=gayaresthird@gmail.com

Explanation:

• git config --local modifies the .git/config file within the current project. This ensures that the changes only affect the current project and do not alter the global settings.

• Global settings can be checked by running git config --global --list, which contains the default username and email for all repositories unless overridden by local settings.

This way, Git will use the specified email and username for commits made in this project.

1. Open PowerShell as Administrator:

• Press the Windows Key, type PowerShell, right-click on Windows PowerShell, and select Run as administrator.

2. Run the installation command:

Copy and paste the following command into the PowerShell window, then press Enter:

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

3. Wait for the installation:

The script will download and install Chocolatey on your system. It might take a few moments.

4. Verify the installation:

Once installed, verify that Chocolatey is working by typing the following command in PowerShell:

choco -v

This should display the version of Chocolatey if the installation was successful.

Now, Chocolatey is enabled, and you can use it to install packages on your Windows system.

.env File

A .env file stores environment variables such as API keys, database credentials such as HOST , password and username, and other configuration values that are essential for running your application. Instead of hardcoding these sensitive values directly in your codebase, you store them in the .env file and reference them using environment variables in your code.

For example:

DATABASE_URL=mysql://user:password@localhost/db_name
SECRET_KEY=my_secret_key

Using environment variables ensures that sensitive data isn't exposed directly in the source code. This makes your application more secure and easier to configure across different environments (development, testing, production) by simply updating the .env file without changing the source code itself.

.gitignore File

The .gitignore file tells Git which files or directories should not be tracked in the version control system. Since .env files contain sensitive data, it’s important to include .env them in .gitignore to prevent it from being committed and pushed to public repositories like GitHub or Gitlab, bitbucket, where it could be exposed to others.

A typical .gitignore file that excludes the .env file looks like this:

# Ignore .env file
.env

If you’ve accidentally committed your .env file to your Git repository, you should remove it from tracking using:

git rm --cached .env

And then push the changes again to make sure the file is removed from the version control history​

Why Use Them Together?

1. Security: By storing sensitive information in .env and ensuring it is ignored via .gitignore, you reduce the risk of exposing your secrets, like API keys and passwords, to public repositories.

2. Flexibility: Each developer or environment (development, staging, production) can have its own .env file with different configurations, making it easier to manage different setups without modifying the code.

3. Best Practices: It’s a widely accepted best practice to include an .env.example file in the repository that acts as a template for others to create their own .env file. This way, the structure of environment variables is shared, but the sensitive values themselves are kept private.

Alternatives and Best Practices

While .env files are widely used, as your project scales, it might be beneficial to look into secret management tools like AWS Secrets Manager or Hashicorp Vault for storing and managing sensitive data securely. These tools add an additional layer of protection by encrypting your secrets and controlling access through permissions

In conclusion, using .env and .gitignore files correctly helps to maintain security and proper project structure, protecting sensitive information from being exposed.

REF.

DEV CommunityDEV Community

Expanded Explanation:

1. Purpose and Functionality

Cookies are commonly used to make the user experience better by remembering things like:

• Login information: Cookies can store session identifiers so users remain logged in to a website even after closing the browser.

• Shopping carts: In e-commerce, cookies allow websites to remember items a user has added to their cart, even if they leave the site and return later.

• User preferences: Cookies help websites remember user preferences, like language settings, theme choices, or regional options, so the user doesn't need to reset them each time they visit.

2. Types of Cookies

There are different types of cookies based on their function and how long they persist:

• Session Cookies: These cookies are temporary and are deleted once the user closes their browser. They are used to maintain state during a browsing session (e.g., remembering items in a cart).

• Persistent Cookies: These cookies remain on a user's device until they expire or are manually deleted. Websites use them to remember login credentials or preferences across visits.

• First-Party Cookies: Set by the website the user is visiting, these cookies are used to manage essential website functionality, such as remembering login status.

• Third-Party Cookies: Set by external domains (often ad networks), these cookies track users across multiple sites for advertising and analytics purposes. They are often used to serve targeted ads.

3. How Cookies Work

When you visit a website, the server sends a cookie to your browser, which might contain:

• A unique user identifier

• Session details

• Expiration dates

• Flags, such as "secure" (ensuring the cookie is sent only over HTTPS)

Once the cookie is set, every time the browser makes a request to the same server (e.g., clicking on a new link or submitting a form), it sends the stored cookie along with the request. This allows the server to recognize the user and customize the experience accordingly.

4. Security Concerns

Cookies can present some privacy and security concerns:

• Tracking and Privacy: Third-party cookies, in particular, are controversial because they enable companies to track users across websites

• Cross-Site Scripting (XSS): If cookies are not properly secured, they can be vulnerable to attacks where hackers inject malicious scripts to steal user data.

• Cross-Site Request Forgery (CSRF): Cookies are used in CSRF attacks, where unauthorized commands are transmitted from a user that the website trusts.

To mitigate risks, developers use techniques like HTTP-only cookies (which can't be accessed via JavaScript) and secure cookies (which are sent only over HTTPS connections).

5. Regulations and Laws

Due to privacy concerns, many regions have laws governing the use of cookies. For example:

• GDPR (General Data Protection Regulation): In Europe, websites must get explicit user consent before storing cookies, particularly if the cookies track user behavior.

• CCPA (California Consumer Privacy Act): In California, websites must inform users about the data being collected and provide them with the option to opt out.

Cookies are foundational to modern web browsing but must be handled carefully to balance functionality, security, and privacy concerns.

Sources:

• Mozilla MDN Web Docs

• GitGuardian Blog on Secure Cookie Handling

Step 1: Set Up Your Environment

Make sure you have Flutter and Android Studio installed on your machine. You’ll also need an emulator or a connected Android device to test the APK.

• Make sure Android SDK and Android Studio are properly installed.

• Ensure that your Flutter project is working correctly.

You can verify your environment by running:

flutter doctor

Fix any issues reported by flutter doctor before proceeding.

Step 2: Configure Your App for Release

Before exporting the APK, you need to configure your Flutter app for release mode.

1. Update android/app/build.gradle:

   • Open android/app/build.gradle.

   • Locate the buildTypes block and ensure the release block is properly set up. Here's a default release configuration:

    android {
        compileSdkVersion 34

        defaultConfig {
            applicationId "com.example.myapp" //make sure the name is from your company and prohect name
            minSdkVersion 21
            targetSdkVersion 33
            versionCode 1
            versionName "1.0"
        }

        buildTypes {
            release {
                // Shrinks, optimizes, and obfuscates your code by default
                minifyEnabled true
                // Enables ProGuard for code obfuscation (optional)
                proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
            }
        }
    }

Step 4: Build the APK

Now that the project is set up for release, you can generate the APK.

1. Run the Flutter Build Command: Run the following command in the terminal from your project’s root directory:

    flutter build apk --release
   

   This command builds the release APK and stores it in the build/app/outputs/flutter-apk directory.

   

2. Check the APK: The APK will be located at:

    build/app/outputs/flutter-apk/app-release.apk
   

   

Step 5: Test the APK on an Android Device

1. Transfer the APK to your Android device via USB, email, or cloud storage.

   💡

   In my case I use Telegram

2. Open the APK file on your device and install it.

   

   💡

   That’s All! I think this is simply exporting Flutter app to APK, If your Flutter app has many features I think you will encounter some issues but you can simply search for the error or fix soulotion by prompting CHAT GPT xD

1. https://software-engineer.thirdygayares.com/virtual-environment-and-python-package-manager

2. https://software-engineer.thirdygayares.com/how-to-run-python-flask

3. https://software-engineer.thirdygayares.com/data-structure-again

To start,

• Create a Python Virtual Environment

• Activate Virtual Environment

• make sure Flask is installed:

pip install Flask

BLUEPRINT

OUR BLUEPRINT

# TODO: import flask LIBRARY
from flask import Flask, jsonify, request

# call the flask object
app = Flask(__name__)

# create list of dictionaries
students = [{}]

# get method
@app.route('/students', methods=['GET'])
def get_students():

# get method : Get a specific student by ID
@app.route('/students/<int:student_id>', methods=['GET'])
def get_student(student_id):

# put method
@app.route('/students/<int:student_id>', methods=['PUT'])
def update_student(student_id):

# delete method
@app.route('/students/<int:student_id>', methods=['DELETE'])
def delete_student(student_id):

# Dont forget this
if __name__ == '__main__':
    app.run(debug=True)

When Testing the API

• Run the server by executing the Python script:

    python app.py
  

Flask API Code

create app.py

import flask

from flask import Flask, jsonify, request

app = Flask(__name__)

Create a List of Dictionaries

# Sample data: list of students
students = [
    {
        "name": "Juan Carlos",
        "section": "BSIT-4B",
        "id": 1,
        "email": "juan@gmail.com",
        "age": 22
    },
    {
        "name": "Jose Rizal",
        "section": "BSIT-2A",
        "id": 2,
        "email": "jose@gmail.com",
        "age": 21
    },
    {
        "name": "Juan Luna",
        "section": "BSIT-3A",
        "id": 3,
        "email": "juan@gmail.com",
        "age": 20
    },
    {
        "name": "Andres Bonifacio",
        "section": "BSIT-3A",
        "id": 4,
        "email": "andres@gmail.com",
        "age": 20
    },
    {
        "name": "Justin Bieber",
        "section": "BSIT-2A",
        "id": 5,
        "email": "justin@gmail.com",
        "age": 21
    },
    {
        "name": "Michael Jordan",
        "section": "BSIT-4A",
        "id": 6,
        "email": "michael@gmail.com",
        "age": 19
    },
    {
        "name": "Andrew Jordan",
        "section": "BSIT-3A",
        "id": 7,
        "email": "andrew@gmail.com",
        "age": 20
    },
    {
        "name": "Jessa Boe",
        "section": "BSIT-2B",
        "id": 8,
        "email": "jessa@gmail.com",
        "age": 18
    },
    {
        "name": "Ted Talk",
        "section": "BSIT-3B",
        "id": 9,
        "email": "ted@gmail.com",
        "age": 19
    }
]

Get All Student

@app.route('/students', methods=['GET'])
def get_students():
    return jsonify(students)

Get All Students (GET /students): Returns a list of all students in JSON format.

GET STUDENT BY ID

# READ: Get a specific student by ID
@app.route('/students/<int:student_id>', methods=['GET'])
def get_student(student_id):
    student = next((student for student in students if student["id"] == student_id), None)
    if student:
        return jsonify(student)
    else:
        return jsonify({"message": "Student not found"}), 404

Get a Specific Student (GET /students/<id>): Returns details of a student by their id.

ADD STUDENT

@app.route('/students', methods=['POST'])
def add_student():
    new_student = request.get_json()
    new_student['id'] = max(student['id'] for student in students) + 1  # Generate new ID
    students.append(new_student)
    return jsonify(new_student), 201

Add a New Student (POST /students): Accepts student details in JSON format and adds a new student with a unique id.

UPDATE STUDENT

@app.route('/students/<int:student_id>', methods=['PUT'])
def update_student(student_id):
    student = next((student for student in students if student["id"] == student_id), None)
    if student:
        data = request.get_json()
        student.update(data)
        return jsonify(student)
    else:
        return jsonify({"message": "Student not found"}), 404

Update an Existing Student (PUT /students/<id>): Updates the details of a student by their id using JSON data from the request.

# DELETE: Remove a student by ID
@app.route('/students/<int:student_id>', methods=['DELETE'])
def delete_student(student_id):
    student = next((student for student in students if student["id"] == student_id), None)
    if student:
        students.remove(student)
        return jsonify({"message": "Student deleted"})
    else:
        return jsonify({"message": "Student not found"}), 404

if __name__ == '__main__':
    app.run(debug=True)

REMEMBER ADD THIS CODE

if __name__ == '__main__':
    app.run(debug=True)

Delete a Student (DELETE /students/<id>): Deletes a student by their id.

• Using Postman, you can test each endpoint by sending the appropriate requests.

This API provides a simple and clean structure to manage students' data with CRUD operations.

1. Create a New Database

First, log in to MySQL with an admin user (like root) and create the new database.

CREATE DATABASE your_database_name;

2. Create a New User

Next, create a new user (role). This user will have specific permissions later.

CREATE USER 'thirdy'@'localhost' IDENTIFIED BY 'Test@123456';

• Replace 'your_username' with the desired username.

• Replace 'your_password' with a strong password.

3. Grant Permissions to the User

Now, give the user permission to view and edit the database, but restrict delete permissions.

GRANT SELECT, CREATE, INSERT, UPDATE, REFERENCES ON your_database_name.* TO 'thirdy'@'localhost';

This grants:

• SELECT: The ability to view data.

• INSERT: The ability to add data.

• UPDATE: The ability to modify existing data.

The user cannot delete any data because the DELETE privilege is not given.

4. Apply Changes

After granting the permissions, run the following command to apply the changes:

FLUSH PRIVILEGES;

5. Show Grants

SHOW GRANTS FOR 'thirdy'@'localhost';

5. Test the User Permissions

You can log in as the new user and verify that they have the appropriate permissions.

mysql -u thirdy -p

Once logged in, try running SELECT, INSERT, and UPDATE queries. The user should not be able to delete records.

Example

SELECT * FROM your_table; -- Should work

INSERT INTO your_table (column1, column2) VALUES ('value1', 'value2'); -- Should work

UPDATE your_table SET column1 = 'new_value' WHERE id = 1; -- Should work

DELETE FROM your_table WHERE id = 1; -- Should NOT work

If you haven't installed React Router yet, run this command in your project directory:

npm install react-router-dom

2. Set Up Routing in Your React App

First, make sure you have components for your pages:

• LoginPage.tsx

• ServicesPage.tsx

• AboutPage.tsx

Example Code:

2.1 Create Components (If you haven’t already)

LoginPage.tsx

import React from 'react';

const LoginPage: React.FC = () => {
  return <h2>This is the Login Page</h2>;
};

export default LoginPage;

ServicesPage.js

import React from 'react';

function ServicesPage() {
  return <h2>This is the Services Page</h2>;
}

export default ServicesPage;

AboutPage.js

import React from 'react';

const AboutPage: React.FC = () => {
  return <h2>This is the About Page</h2>;
};

export default AboutPage;

4 Create a Separate File for Routes

Create a new file called AppRoutes.tsxnand define all your routes there.

app.routes.tsx

import React from 'react';
import {Route, Routes} from 'react-router-dom';
import LoginPage from "./pages/LoginPage";
import ServicesPage from "./pages/ServicesPage";
import AboutPage from "./pages/AboutPage";

interface RouteProps {
    exact?: boolean;
    path: string;
    component: React.ComponentType<any>;
}


const AppRoutes: React.FC = () => {
    return (
        <Routes>
            <Route path="/login" element={<LoginPage />} />
            <Route path="/services" element={<ServicesPage />} />
            <Route path="/about" element={<AboutPage />} />
            {/* Default route */}
            <Route path="/" element={<LoginPage />} />
        </Routes>
    );
};

export default AppRoutes;

4. Use AppRoutes to App

Now you can import AppRoutes into your main App.tsx file.

App.tsx

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import AppRoutes from './app.routes'; // Import your routes
import { Link } from 'react-router-dom';

const App: React.FC = () => {
  return (
      <div>
        {/* Navigation */}
        <nav>
          <ul>
            <li><Link to="/login">Login</Link></li>
            <li><Link to="/services">Services</Link></li>
            <li><Link to="/about">About</Link></li>
          </ul>
        </nav>

        {/* Render Routes */}
        <AppRoutes />
      </div>
  );
};

export default App;

3. Explanation:

• app.routes.tsx: Contains all your route definitions using the Switch and Route components.

• App.tsx: Now imports and uses the AppRoutes component to manage routing in a more organized and modular way.

5. Default Route (Optional)

You can add a default route to redirect the user to a specific page if they visit the root (/):

<Route exact path="/" component={LoginPage} />

6. Running the App

Start your development server:

npm start

Now, you can navigate to /login, /services, and /about to see each page.

This is a basic routing setup for your React app with login_page, services_page, and about_page.

OUTPUT

TEST:

https://react-router-thirdy.web.app/login

GITHUB:

thirdygayares/react-router (github.com)

Requirements

1. Install Firebase CLI: Ensure you have Node.js installed, then install Firebase CLI by running:

    npm install -g firebase-tools
   

   

2. Login to Firebase: If you haven’t already, log in to your Firebase account using the CLI:

    firebase login
   

   

   ITS AUTOMATIC TO REDIRECT TO YOUR BROWSER. IF NOT COPY THE LINK

3. Firebase Project: Make sure you have a Firebase project set up. You can create one in the Firebase Console: https://console.firebase.google.com/.

Steps to Deploy React App to Firebase Hosting

1. Create a React App (if not already created)

If you don’t already have a React app, create one using create-react-app:

npx create-react-app react-router
cd react-router

2. Initialize Firebase in Your React Project

In your React app’s root directory, run:

firebase init

When running firebase init, you'll be prompted with a few questions:

• Select Firebase Hosting: Use the arrow keys to navigate and space bar to select "Hosting: Configure and deploy Firebase Hosting sites".

  

• Choose a Firebase project: Select the Firebase project you created earlier from the list.

  

  

• Set up a public directory: Type build as the public directory (this is where your React app will be built).

  

• Single-page app: Answer Yes to "Configure as a single-page app (rewrite all URLs to /index.html)?"

• 

• Overwrite existing index.html: If prompted, choose No (Firebase will create its own hosting configurations).

  

3. Build the React App

Before deploying, you need to build your React app. This will create an optimized production build:

npm run build

This command generates a build folder, which contains your entire application optimized for production.

4. Deploy to Firebase Hosting

Once the build is ready, deploy your app to Firebase Hosting by running:

firebase deploy

5. Firebase Hosting URL

After deploying, you will see a specific URL where your app is hosted, like:

Use the Hosting URL to access your live React application.

Useful Firebase Hosting Commands:

• firebase deploy: Deploys your project to Firebase.

• firebase serve: Serves your app locally on a development server (useful for testing Firebase Hosting setup).

Now your React app should be live on Firebase Hosting! You can access it via the URL provided by Firebase, which will look something like

https://react-router-thirdy.web.app.

Github:

https://github.com/thirdygayares/react-router

If you don't have Node.js installed, download it from Node.js. You can verify if you have Node and npm installed by running:

node -v
npm -v

2. Create a New React App with TypeScript

Use the following command to create a new React app using TypeScript:

npx create-react-app react-getting-started --template typescript
cd react-getting-started

This sets up a React project with TypeScript.

3. Start the Development Server

Navigate to the project directory and start the development server:

npm start

This will open the app in your browser at http://localhost:3000.

4. Project Structure with TypeScript

The project structure will look similar to a regular React app, with the main difference being the use of .ts and .tsx files instead of .js:

react-getting-started
├── node_modules
├── public
│   ├── index.html
│   └── ...
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── index.tsx
│   └── ...
├── tsconfig.json
├── package.json
└── ...

• tsconfig.json: This file contains the configuration for TypeScript.

• src/index.tsx: The main entry point for your app.

• src/App.tsx: Your main React component in TypeScript.

5. Basic Example with TypeScript

Open src/App.tsx and modify it to include TypeScript types:

import React from 'react';

interface AppProps {
  message: string;
}

const App: React.FC<AppProps> = ({ message }) => {
  return (
    <div>
      <h1>{message}</h1>
      <p>Welcome to your first React app with TypeScript.</p>
    </div>
  );
};

export default App;

In this example:

• AppProps is an interface that defines the props that the component accepts (message of type string).

• React.FC is the type for functional components.

To use this component, modify src/index.tsx:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App message="Hello, React with TypeScript!" />
  </React.StrictMode>,
  document.getElementById('root')
);

6. Working with Types

When using TypeScript with React, you'll often work with interfaces or types to define the structure of your components' props, state, and more. For example:

• Props: Define the data that components expect.

• State: Define the internal state of a component.

Github: Repository Link

thirdygayares/react-getting-started (github.com)

Note: Ensure you have typescript globally

npm install -g typescript

How to run?

Example:

tsc array.ts

node array.js

Arrays in TypeScript

An array is a data structure that stores a collection of elements (values), usually of the same type, in a single variable. Arrays allow you to store multiple values in an ordered list and provide easy access using an index.

In TypeScript, arrays can be declared to hold specific types, ensuring type safety. You can store a list of strings, numbers, or any other data types.

Defining an Array in TypeScript

Here's how you can define an array in TypeScript:

1. Array of Numbers:

    let numbers: number[] = [1, 2, 3, 4, 5];
   

2. Array of Strings:

    let shoppingList: string[] = ["milk", "bread", "eggs"];
   

3. Array of Multiple Types (using any):

    let mixedArray: any[] = [1, "apple", true];
   

4. Using Generics (Another way to define arrays):

    let fruits: Array<string> = ["apple", "banana", "orange"];
   

   EXAMPLE: SHOPPINGLIST

    let shoppingList: string[] = ["milk", "chocolate" , "shampoo"];
   
    console.log("List: " + shoppingList);
   

Basic Operations on Arrays (CRUD) in TypeScript

Create (Insert): Adding new items to an array can be done using the push() method:

shoppingList.push("Safeguard");

Accessing Array Elements

You can access elements in an array using their index. The index starts at 0.

plaintext let firstItem = shoppingList[0]; let secondItem = shoppingList[1];

Update: You can modify existing elements by directly accessing them via their index:

shoppingList[1] = "strawberry";

Delete: You can remove elements using splice():

shoppingList.splice(2, 1);  // Removes 1 item at index 2

This is how you use and manipulate arrays in TypeScript for basic operations like creating, reading, updating, and deleting elements.

OBJECT

An object in TypeScript is an instance that contains a set of key-value pairs. These pairs can hold various data types, including scalar values, functions, or even arrays of other objects. (GEEKSFORGEEKS)

SAMPLE OBJECT

shoppingObject.ts

export interface ShoppingObject{
id: number;
name: string;
price: number;
quantity: number;
}

SAMPLE OPERATION IN OBJECT

CREATE DATA IN OBJECT

main.ts

const shoppingObject: ShoppingObject = {
    id: 1,
    name: "test",
    price: 20,
    quantity: 2
};

console.log("List ");
console.log(shoppingObject);

ACCESS SPECIFIC VALUE

main.ts

//Access value
console.log("=====ACCESSSSING=====");
const name: string = shoppingObject.name;
console.log("FETCH_ name: " + name);

UDPATING SPECIFIC VALUE

main.ts

console.log("=====UPDATINGGG=====");

shoppingObject.name = "thirdy";
console.log("UPDATED_ now the object: " );
console.log(shoppingObject);

Array of Objects

Defining interfaces or type, we will provide the property names and their types inside them and assign them as a explicit type the array. (https://www.geeksforgeeks.org/how-can-i-define-an-array-of-objects-in-typescript/#using-the-inbuilt-interfaces-and-type)

sample Array of Object

ShoppingListObj.ts

export interface ShoppingListObj{
  id: number,
  name: string,
  price: number,
  quantity: number
}

1. Create Operation

This function adds a new product to the products array.

main.ts

const shoppingList: ShoppingListObj[] = [];

shoppingList.push({id: 1, name: "test", price: 100, quantity: 5});
shoppingList.push({id: 2, name: "second", price: 100, quantity: 5});

console.log("List ");
console.log(shoppingList);

Explanation:

• Parameter: It accepts a parameter shoppingList of type ShoppingListObj. This represents the new list you want to add.

• Operation: The shopping or cart is added to the shoppingList array using the push() method.

  

2. Read Product

This function fetches a shoppingList by its id.

 const readMyCart = (id: number): ShoppingListObj | undefined => {
       return shoppingList.find(p => p.id === id);
 };

Explanation:

• Parameter: The function accepts productId which is the ID of the product to search for.

• Operation: It uses find() to search through the products array for the product with the matching id.

• Conditional Logging:

  • If the product is found, it logs "Product found" and returns the product.

  • If not found, it logs "Product not found" and returns undefined.

Example of usage:

readProduct(1);  // Tries to find the product with id = 1

This will search for the product with ID 1. If it exists, the product will be logged and returned.

3. updateProduct (Update Operation)

This function updates the fields of a product using its id.

const updateMyCart = (id: number, updatedData: Partial<ShoppingListObj>) => {
        const findIndex = shoppingList.findIndex(p => p.id === id);
        if (findIndex > -1) {
            shoppingList[findIndex] = { ...shoppingList[findIndex],  ...updatedData };
            console.log("UPDATED DATA: ");
            console.log(updatedData);
            console.log("UPDATED LIST: ");
            console.log(shoppingList);
        } else {
            console.log("Product Not Found");
        }
   };

Explanation:

• Parameters:

  • id: The ID of the product to be updated.

  • updatedData: A Partial<ShoppingListObj>, meaning it allows you to pass only the fields you want to update, without needing to provide the whole product.

• Operation:

  • The function uses findIndex() to locate the product in the products array by its id.

  • If the product is found, it updates the fields by using object spread (...) to merge the existing product data with the new updatedData.

Example of usage:

updateMyCart(2, {name: "shampoo"});

This will update the product with ID 2 by setting its name to shampoo

OUTPUT:

4.Delete Operation

This function deletes a product by its id.

 const deleteItem = (id: number) => {
        const findIndex = shoppingList.findIndex(p => p.id = id);
        if (findIndex !== -1){
            const deleteItem = shoppingList.splice(id, 1);
            console.log("Deleted Item: " + deleteItem[0]);
            console.log("UPDATED LIST: ");
            console.log(shoppingList);
        }
 }

Explanation:

• Parameter: It accepts productId, the ID of the product to be deleted.

• Operation:

  • It uses findIndex() to locate the product in the products array.

  • If the product is found, it is removed using splice() (which removes the product at the found index).

  • The deleted product is then logged.

Example of usage:

deleteItem(1);  // Deletes the product with id = 1

This will remove the product with ID 1 from the shoppingList array if it exists.

OUTPUT

AGAIN

• Create: Adds a new product to the list.

• Read: Retrieves a product by its ID.

• Update: Modifies specific fields of a product.

• Delete: Removes a product by its ID.

Each function uses basic array methods (push, find, findIndex, splice) to manipulate the products array and logs the results for clarity.

GITHUB REPOSITORY:

https://github.com/thirdygayares/typescripts-data-structure.git

Why Use Angular Services?

1. Separation of Concerns: Services allow you to offload logic from components. Components are mostly responsible for handling the view, while services deal with application logic, such as retrieving data or handling complex operations. This helps keep your code clean and organized​(Angular)​(Angular).

2. Reusability: Once you define a service, it can be injected and used across multiple components. This avoids repeating the same code in different parts of your application, making it easier to update and maintain​(FreeCodeCamp)​(DEV Community).

3. Dependency Injection: Angular has a built-in Dependency Injection (DI) system, making it easy to use services across different parts of your app. You can inject services directly into your components or other services by declaring them in the constructor and marking them with @Injectable decorator​(DEV Community)​(TekTutorialsHub).

How to Create a Service

1. Define the Service: A service is essentially a class marked with the @Injectable decorator. For example, a simple logging service could look like this:

    import { Injectable } from '@angular/core';
   
    @Injectable({
      providedIn: 'root',
    })
    export class LoggingService {
      log(message: string): void {
        console.log(message);
      }
    }
   

   In this example, the LoggingService logs messages to the console.

2. Injecting the Service: Once your service is created, you can inject it into a component by adding it to the constructor:

    import { Component } from '@angular/core';
    import { LoggingService } from './logging.service';
   
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
    })
    export class AppComponent {
      constructor(private loggingService: LoggingService) {}
   
      logMessage(): void {
        this.loggingService.log('Hello from AppComponent!');
      }
    }
   

   This ensures that the LoggingService can be accessed from within the AppComponent​(Angular)​(FreeCodeCamp).

3. Using Services with Dependency Injection: The providedIn: 'root' setting in the @Injectable decorator makes the service available globally, meaning Angular creates a single instance (singleton) of the service across the entire application​(FreeCodeCamp).

Common Use Cases for Angular Services

• Fetching Data: Services are often used to make HTTP requests to APIs using Angular’s HttpClient. For instance, you can create a service to fetch data from an external API and then share that data across different components.

• State Management: Services can maintain the state of your application (such as user data or configuration settings), ensuring that the state is consistent across different components.

• Logging and Error Handling: Services can handle centralized logging or error reporting, which simplifies the monitoring and debugging of your application​(Angular)​(DEV Community).

Angular services allow you to build modular, scalable, and maintainable applications by organizing business logic into reusable units. By leveraging dependency injection, services reduce code duplication and help keep components focused on managing the view.

EXAMPLE:

Imagine you have a simple app that displays a list of universities. You want to add new universities, edit existing ones, and delete them. While you can handle all the logic in your component, using a service allows you to separate concerns and keep your code organized.

Creating the Component

Now, let's create our Angular component.

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  universityList: string[] = [];
  newUniversity = '';

  ngOnInit(): void {
    // Initialization logic will go here
  }
}

Setting Up the HTML

<h2>Universities</h2>

<h3>Add a New University</h3>
<input placeholder="Enter university name" />
<button>Add University</button>
<br /><br />
<table border="1" cellpadding="5" cellspacing="0">
  <thead>
    <tr>
      <th>#</th>
      <th>University Name</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let university of universityList; let i = index">
      <td>{{ i + 1 }}</td>
      <td>{{ university }}</td>
      <td>
        <button>Edit</button>
        <button>Delete</button>
      </td>
    </tr>
  </tbody>
</table>

OUTPUT:

At this point, the HTML is set up, but the functionality isn't there yet. The buttons don't do anything, and the list doesn't display any data because universityList is not defined.

In this component:

• We declare a universityList array to hold our list of universities.

• We have a newUniversity string to bind to our input field.

• We implement the OnInit interface to perform initialization logic.

1. Generate Service

in angular UniversityService

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UniversityService {
  private universityList: string[] = ["University of the Philippines", "UST"];

  // Fetch all universities
  getUniversities(): string[] {
    return this.universityList;
  }

  // Add a new university
  addUniversity(university: string): void {
    this.universityList.push(university);
  }

  // Update a university by index
  updateUniversity(index: number, newUniversity: string): void {
    if (index >= 0 && index < this.universityList.length) {
      this.universityList[index] = newUniversity;
    }
  }

  // Remove a university by index
  deleteUniversity(index: number): void {
    if (index >= 0 && index < this.universityList.length) {
      this.universityList.splice(index, 1);
    }
  }
}

In this service:

• We have a private universityList array that stores the universities.

• Methods to get, add, update, and delete universities.

• By injecting this service into our component, we can manage the data efficiently.

Connecting the Service to the Component

Now that we have our service, let's use it in our component.

Import the Service

import {UniversityService} from './services/university-service.service';

Inject the Service

Modify the constructor to inject the service:

constructor(private universityService: UniversityService) {}

Initialize the Data

Update the ngOnInit method:

ngOnInit(): void {
  this.universityList = this.universityService.getUniversities();
}

Implementing the Functions

Let's make our buttons functional by implementing the methods for adding, editing, and deleting universities.

Add University

Update the HTML input and button to bind to newUniversity and call addUniversity():

<input [(ngModel)]="newUniversity" placeholder="Enter university name" />
<button (click)="addUniversity()">Add University</button>

In the component:

addUniversity(): void {
  if (this.newUniversity.trim()) {
    this.universityService.addUniversity(this.newUniversity.trim());
    this.newUniversity = '';
  }
}

• We check if the input is not empty.

• Use the service's addUniversity method to add the new university.

• Reset the newUniversity variable to clear the input field.

Edit University

Update the "Edit" button in the HTML:

<button (click)="editUniversity(i)">Edit</button>

In the component:

editUniversity(index: number): void {
  const currentName = this.universityList[index];
  const newName = prompt('Enter new name for the university:', currentName);
  if (newName !== null && newName.trim() !== '') {
    this.universityService.updateUniversity(index, newName.trim());
  }
}

• When "Edit" is clicked, we get the current name and prompt the user for a new name.

• If the user provides a valid name, we update the university using the service.

Delete University

Update the "Delete" button in the HTML:

<button (click)="deleteUniversity(i)">Delete</button>

In the component:

deleteUniversity(index: number): void {
  this.universityService.deleteUniversity(index);
}

Let's put it all together.

app.component.html

<h2>Universities</h2>

<h3>Add a New University</h3>
<input [(ngModel)]="newUniversity" placeholder="Enter university name" />
<button (click)="addUniversity()">Add University</button>
<br /><br />
<table border="1" cellpadding="5" cellspacing="0">
  <thead>
    <tr>
      <th>#</th>
      <th>University Name</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let university of universityList; let i = index">
      <td>{{ i + 1 }}</td>
      <td>{{ university }}</td>
      <td>
        <button (click)="editUniversity(i)">Edit</button>
        <button (click)="deleteUniversity(i)">Delete</button>
      </td>
    </tr>
  </tbody>
</table>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { UniversityService } from './university.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  universityList: string[] = [];
  newUniversity = '';

  constructor(private universityService: UniversityService) {}

  ngOnInit(): void {
    this.universityList = this.universityService.getUniversities();
  }

  addUniversity(): void {
    if (this.newUniversity.trim()) {
      this.universityService.addUniversity(this.newUniversity.trim());
      this.newUniversity = '';
    }
  }

  deleteUniversity(index: number): void {
    this.universityService.deleteUniversity(index);
  }

  editUniversity(index: number): void {
    const currentName = this.universityList[index];
    const newName = prompt('Enter new name for the university:', currentName);
    if (newName !== null && newName.trim() !== '') {
      this.universityService.updateUniversity(index, newName.trim());
    }
  }
}

university.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class UniversityService {
  private universityList: string[] = ['University of the Philippines', 'UST'];

  // Fetch all universities
  getUniversities(): string[] {
    return this.universityList;
  }

  // Add a new university
  addUniversity(university: string): void {
    this.universityList.push(university);
  }

  // Update a university by index
  updateUniversity(index: number, newUniversity: string): void {
    if (index >= 0 && index < this.universityList.length) {
      this.universityList[index] = newUniversity;
    }
  }

  // Remove a university by index
  deleteUniversity(index: number): void {
    if (index >= 0 && index < this.universityList.length) {
      this.universityList.splice(index, 1);
    }
  }
}

OUTPUT

You've built a simple Angular app that uses a service to manage data. Let's recap what we've learned:

• Angular Services: A way to encapsulate and share code across components. They help keep your components lean and focused on the view logic.

• Data Binding: Using [(ngModel)] for two-way data binding between the input field and the component property.

• Event Binding: Using (click) to bind button clicks to component methods.

• Dependency Injection: Injecting the UniversityService into the component's constructor to access its methods.

REF:

Angular.io and FreeCodeCamp.

WEBSITE

AngularServices (thirdy-angular-service.web.app

GITHUB REPO:

https://github.com/thirdygayares/angular-services

The primary purpose of JSON is to facilitate the exchange of structured data. Before JSON became popular, XML (Extensible Markup Language) was the dominant format for this purpose. However, JSON’s simpler, more lightweight structure made it more appealing, especially in web development, where speed and efficiency are crucial​(Hostinger).

One of JSON’s key strengths is its ability to represent complex data structures such as objects and arrays. These structures make it ideal for transmitting structured data over the internet, especially when dealing with APIs and web services. Its ease of use in web communication has led to its widespread adoption, particularly in RESTful APIs​(Software Development Company | Netguru).

JSON Syntax and Structure

JSON has a minimalistic syntax with strict formatting rules that define how data must be represented. Here’s a breakdown of the key elements of JSON syntax:

1. Objects:

   • Represented by curly braces {}.

   • Consist of key/value pairs separated by a colon :.

   • Keys must always be strings enclosed in double quotes.

   • Values can be of various data types, including strings, numbers, booleans, arrays, or even other objects.

Example:

    {
      "firstName": "Thirdy",
      "lastName": "Gayares",
      "age": 25,
      "isStudent": false
    }

2. Arrays:

   • Represented by square brackets [].

   • Contain ordered lists of values, which can be of any JSON data type (string, number, object, array, etc.).

Example:

    {
      "hobbies": ["reading", "swimming", "gaming"]
    }

3. Data Types in JSON: JSON supports the following basic data types:

   • String: Enclosed in double quotes, e.g., "name": "Alice".

   • Number: Can be an integer or a floating-point number, e.g., "age": 30.

   • Boolean: Represents true or false, e.g., "isStudent": false.

   • Array: Ordered lists of values, e.g., "hobbies": ["football", "reading"].

   • Object: A collection of key/value pairs enclosed in curly braces.

   • Null: Represents an empty or null value, e.g., "middleName": null​(Hostinger)​(W3Schools.com).

Key Syntax Rules:

• Keys must always be strings enclosed in double quotes.

• Values can be strings, numbers, booleans, arrays, objects, or null.

• Key/value pairs are separated by a colon :.

• Multiple key/value pairs within an object are separated by commas.

• Arrays are ordered lists of values and can contain mixed data types​(DEV Community).

Use Cases in Web Communication

The most common application of JSON is in web communication, where it is used to send and receive data between a server and a client (such as a web browser). JSON’s lightweight and straightforward structure makes it ideal for these purposes, as it can easily be parsed by both front-end and back-end systems. Here are some major use cases:

1. APIs and Data Exchange:

APIs, particularly RESTful APIs, frequently use JSON as their data exchange format. JSON is favored because it can be easily generated by servers and quickly parsed by web browsers or mobile applications. For instance, when a web application needs to retrieve user information from a remote server, the server often responds with data formatted as JSON. This data can then be displayed to the user in real time.

Example: If you use Twitter’s API to fetch the latest tweets, the response is typically in JSON format, containing details like the tweet text, the user who posted it, and timestamps​(Programiz)​(Software Development Company | Netguru).

2. Asynchronous Data Transfer (AJAX):

JSON is widely used in conjunction with AJAX (Asynchronous JavaScript and XML) to transfer data between the client and server without reloading the entire page. This enables dynamic content updates, such as refreshing news feeds, submitting forms, or fetching data in the background without affecting the user experience.

Example: On an e-commerce website, when a user adds an item to their shopping cart, the action may trigger an AJAX request that sends data in JSON format to the server. The server processes the request and returns the updated cart details, also in JSON format, without reloading the page​(MDN Web Docs)​(freeCodeCamp).

3. Configuration Files:

JSON is also commonly used as a format for configuration files in web and mobile applications. Since JSON is both human-readable and machine-friendly, it’s easy for developers to manually edit configuration files while also allowing the application to parse them for settings during runtime.

Example: Many modern web applications, particularly those built with frameworks like React or Node.js, use JSON files (like package.json) to manage project dependencies and configurations​(Hostinger).

4. Data Persistence:

JSON is used in databases such as NoSQL systems (e.g., MongoDB) to store and retrieve structured data. In these databases, JSON-like formats (BSON for MongoDB) are used to represent and query data. This makes it easier to work with dynamic or unstructured data models, compared to traditional relational databases​(Webflow).

Advantages of JSON in Web Communication:

1. Lightweight: JSON’s minimal syntax makes it less bulky than other formats like XML, leading to faster data transmission and reduced server load.

2. Human-Readable: JSON is easy to read and write, which makes debugging simpler for developers.

3. Language-Agnostic: While JSON was derived from JavaScript, it can be parsed and generated in nearly every modern programming language, making it versatile across platforms​(MDN Web Docs)​(DEV Community).

4. Faster Parsing: In comparison to XML, JSON is easier and quicker to parse, especially in browser environments where JavaScript can natively handle it​(freeCodeCamp)​(Software Development Company | Netguru).

References:

1. MDN Web Docs – Working with JSON​(MDN Web Docs).

2. W3Schools – JavaScript JSON​(W3Schools.com).

3. Hostinger – What Is JSON? Syntax, Examples + Cheat Sheet​(Hostinger).

4. DEV Community – What is JSON and how is it used?​(DEV Community).

5. Netguru – Web Development with JSON​(Software Development Company | Netguru).

6. FreeCodeCamp – JSON for Beginners​(freeCodeCamp).

1. Efficient Data Management with HashMap

HashMap is a key-value pair data structure that allows for quick data retrieval. It’s particularly useful in scenarios where fast access to data is needed.

• Fast Lookups: HashMap provides average time complexity of O(1) for lookups, meaning you can quickly find data based on a key. This is essential in applications where speed is critical, such as when fetching user details or settings.

• Example Scenario: In a messaging app, you can store user information (like usernames and profile pictures) in a HashMap, where the username serves as the key. This allows quick access to user data without searching through a list.

2. Dynamic Data Storage with List (ArrayList)

ArrayList is a flexible data structure that allows for dynamic storage of data. It can grow or shrink as needed, making it ideal for managing collections of items.

• Easy Insertion and Deletion: ArrayList allows for easy addition and removal of items. Though inserting at the end is O(1), inserting or deleting at specific positions can take O(n) time. However, its flexibility makes it suitable for many use cases in Android apps.

• Example Scenario: An e-commerce application can use ArrayList to manage a dynamic shopping cart. Users can add or remove items from their cart, and the ArrayList can easily accommodate these changes.

3. Combining HashMap and List for Enhanced Functionality

In many cases, using both HashMap and ArrayList together can provide powerful solutions:

• Data Organization: For instance, you could use a HashMap to map categories of products to an ArrayList of products within each category. This combination allows for fast access to all products in a specific category while keeping the product list dynamic.

• Example Scenario: In a social media app, you might store user posts in an ArrayList and use a HashMap to keep track of likes or comments associated with each post. This way, you can efficiently manage and display interactions with posts.

4. Problem-Solving and Code Quality

Understanding how to use HashMap and ArrayList improves problem-solving skills and enhances code quality.

• Clearer Code: Using appropriate data structures makes code easier to read and maintain. For example, if you use a HashMap to store user settings, other developers can quickly understand how to access and modify those settings.

Mastering data structures like HashMap and List (ArrayList) is essential for anyone studying Android development with Java. These data structures enhance data management, improve application performance, and foster better coding practices. By investing time in understanding how to use HashMap and ArrayList, you will be better equipped to build efficient and robust Android applications.

Example of LIST Data Structure in Android:

XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:padding="20dp"
    tools:context=".datastructure.list.ImplementList">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="SHOPPING PAGE"
            android:textSize="20sp"
            />


        <EditText
            android:id="@+id/et_items"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:background="@android:color/darker_gray"
            android:hint="Enter Items"
            android:textColor="@color/white"
            android:textColorHint="@color/white"
            android:textSize="30sp"
            android:layout_marginVertical="20dp"
            />

        <Button
            android:id="@+id/btn_submit"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="SUBMIT"
            />

        <Button
            android:id="@+id/btn_all"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="DELETE ALL"
            />


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Check logs for output"
            android:textSize="20sp"
            android:layout_marginVertical="20dp"
            />

        <TextView
            android:id="@+id/txt_output"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Output"
            android:textSize="30sp"
            android:layout_marginVertical="20dp"
            />



        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Type index to delete"
            android:textSize="20sp"
            android:layout_marginVertical="20dp"
            />


        <EditText
            android:id="@+id/et_delete_item"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:background="@android:color/darker_gray"
            android:hint="Enter Index"
            android:textColor="@color/white"
            android:textColorHint="@color/white"
            android:textSize="30sp"
            android:inputType="number"
            android:layout_marginVertical="20dp"
            />

        <Button
        android:id="@+id/btn_delete_index"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="SUBMIT"
        />


    </LinearLayout>






</RelativeLayout>

JAVA

package com.thirdygayares.android_java_datastructures.datastructure.list;

import android.os.Bundle;
import android.util.Log;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import com.thirdygayares.android_java_datastructures.R;

import java.util.ArrayList;
import java.util.List;

public class ImplementList extends AppCompatActivity {

    EditText etItems, etDeleteItem;
    Button btnSubmit, btnDeleteAll, btnDeleteIndex;
    TextView txt_output;

    List<String> shopping_list = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_implement_list);

        etItems = findViewById(R.id.et_items);
        btnSubmit = findViewById(R.id.btn_submit);
        txt_output = findViewById(R.id.txt_output);
        btnDeleteAll = findViewById(R.id.btn_all);
        etDeleteItem = findViewById(R.id.et_delete_item);
        btnDeleteIndex = findViewById(R.id.btn_delete_index);

        btnSubmit.setOnClickListener(v -> {
            String items = etItems.getText().toString();
            shopping_list.add(items);
            Log.d("TAG", "My Shoppint list is" + shopping_list);

            txt_output.setText("My Shoppint list is" + shopping_list);
        });

        btnDeleteAll.setOnClickListener(v -> {
            shopping_list.clear();
            Log.d("TAG", "My Shoppint list is" + shopping_list);
            txt_output.setText("My Shoppint list is" + shopping_list);
        });

        //remove item
        btnDeleteIndex.setOnClickListener(v -> {
            int item = Integer.parseInt(etDeleteItem.getText().toString());
            shopping_list.remove(item);
            Log.d("TAG", "My shopping List after deleting are" + shopping_list);
            txt_output.setText("My Shoppint list is" + shopping_list);
        });

    }
}

• Use of ArrayList:

  • The app uses an ArrayList<String> named shopping_list to store the names of items added by the user. An ArrayList is a resizable array implementation that allows dynamic storage of elements.

• Dynamic Sizing:

  • As users add items to the shopping list using the etItems input field and the submit button, the ArrayList automatically resizes to accommodate new entries. This is a key advantage of using an ArrayList over a traditional array, which has a fixed size.

• Efficient Access and Modification:

  • The app allows for efficient access to the list of items. When an item is added, it is appended to the end of the list with shopping_list.add(items);. This operation is generally O(1) (constant time), making it efficient.

  • The app also enables deletion of items. When a user specifies an index in etDeleteItem, the corresponding item is removed from the list using shopping_list.remove(item);. This operation takes O(n) time in the worst case, as it may involve shifting elements in the array, but it is still manageable for small to moderate lists.

• Displaying the List:

  • The current contents of the ArrayList are displayed in a TextView (txt_output). Whenever the list is modified (an item is added or removed), the output is updated to reflect the current state of the shopping_list. This direct feedback helps users understand the changes they are making.

• Clear Functionality:

  • The app provides a method to clear the entire list with the btnDeleteAll button. This is achieved using shopping_list.clear();, which removes all elements efficiently.

OUTPUT

Example of HASHMAP Data Structure in Android:

XML CODE

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".datastructure.hashmap.ImplementHashmap">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Student Data"
            android:textSize="20sp"
          />

        <EditText
            android:id="@+id/et_student_id"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            android:padding="20dp"
            android:layout_margin="10dp"
            android:hint="Enter Student ID"
            />



        <EditText
            android:id="@+id/et_student_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            android:padding="20dp"
            android:layout_margin="10dp"
            android:hint="Enter Student Name"
            />

        <EditText
            android:id="@+id/et_course"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            android:padding="20dp"
            android:layout_margin="10dp"
            android:hint="Enter Course"
            />

        <EditText
            android:id="@+id/et_section"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            android:padding="20dp"
            android:layout_margin="10dp"
            android:hint="Enter Section"
            />

        <Button
            android:id="@+id/btn_submit"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="20dp"
            android:text="SUBMIT"
            />

        <TextView
            android:id="@+id/txt_output"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Output"
            android:textSize="30sp"
            android:padding="20dp"
            android:layout_margin="10dp"

            />


    </LinearLayout>


</RelativeLayout>

JAVA CODE

package com.thirdygayares.android_java_datastructures.datastructure.hashmap;

import android.os.Bundle;
import android.util.Log;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;

import com.thirdygayares.android_java_datastructures.R;

import java.util.HashMap;

public class ImplementHashmap extends AppCompatActivity {

    EditText etStudentId, etStudentName, etCourse, etSection;
    Button btnSubmit;
    TextView txtOutput;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_implement_hashmap);
        etStudentId= findViewById(R.id.et_student_id);
        etStudentName= findViewById(R.id.et_student_name);
        etCourse = findViewById(R.id.et_course);
        etSection = findViewById(R.id.et_section);
        btnSubmit = findViewById(R.id.btn_submit);
        txtOutput = findViewById(R.id.txt_output);

        HashMap<String, String> student_hashmap = new HashMap<>();

        btnSubmit.setOnClickListener(v->{

            String studentId = etStudentId.getText().toString();
            String studentName = etStudentName.getText().toString();
            String course = etCourse.getText().toString();
            String section = etSection.getText().toString();

            student_hashmap.put("id", studentId);
            student_hashmap.put("name", studentName);
            student_hashmap.put("course", course);
            student_hashmap.put("section", section);

            Log.d("TAG", "Student Data" + student_hashmap);
            txtOutput.setText("Student Data" + student_hashmap);
        });

    }
}

1. Use of HashMap:

   • The application utilizes a HashMap<String, String> called student_hashmap to store student details. In this context, the keys are strings that represent different attributes (like "id", "name", "course", and "section"), and the values are the corresponding data entered by the user.

2. Key-Value Pairs:

   • Each student's information is stored as key-value pairs:

     • "id" → Student's ID

     • "name" → Student's Name

     • "course" → Student's Course

     • "section" → Student's Section

   • This structure allows for easy retrieval of student information based on specific attributes.

3. Dynamic Data Storage:

   • The HashMap allows the application to store multiple students’ data dynamically. Each time the user submits the form, the latest student details are added to the student_hashmap.

4. Efficient Data Access:

   • HashMap provides constant time complexity (O(1)) for retrieval operations on average. This means that once data is stored, it can be accessed very quickly based on its key.

5. Logging and Display:

   • When the user clicks the submit button, the application logs the current state of the student_hashmap using Log.d, and it updates the TextView (txtOutput) to display the stored student data. This helps in providing instant feedback to the user about the information they just entered.

Benefits of Using HashMap in This App

• Fast Lookups: Using a HashMap allows for quick retrieval of student data based on keys. This is particularly useful when you need to access specific information about a student efficiently.

• Ease of Use: The HashMap API is straightforward, allowing developers to easily add and retrieve entries without worrying about the underlying complexities of data storage.

• Flexibility: A HashMap can dynamically resize as needed, making it suitable for applications that require adding or updating data frequently.

• Organized Data: By using keys for different attributes, the data is well-organized and easily understandable. This structure makes it clear what each piece of data represents.

Example Scenario

If a user enters:

• Student ID: "123"

• Student Name: "John Doe"

• Course: "Computer Science"

• Section: "A"

The student_hashmap would then store:

{
  "id" : "1",
  "name" : "Thirdy",
  "course" : "Computer Science",
  "section" : "CDS"
}

the HashMap is effectively used in this Android application to manage and store student information.

Its ability to handle key-value pairs allows for organized and efficient data management, which enhances the application's functionality and user experience. Understanding how to use HashMap is essential for developing applications that require quick access to various attributes of complex data objects.

HASHMAP OUTPUT

References for Further Reading

1. HashMap in Java - GeeksforGeeks

2. GeeksforGeeks: ArrayList in Java
   GeeksforGeeks - ArrayList

3. Android Developers: Data Storage
   Android Developers