First assignment-- front-end and back-end separation contacts programming

Project Directory

1. Introduction

   • Task Description
   • Git Repository Link

2. PSP Table

3. Basic Functions

   • Add
   • Modify
   • Delete

4. Design and Implementation Process

   • Front-end Development
   • Back-end Development
   • Database

5. Functional Structure Diagram

6. Code Explanation

   • Front-end Code
   • Back-end Code

7. Personal Journey and Learnings

Introduction

Task Description

This assignment emphasizes the creation of a contact management application that highlights the separation between front-end and back-end technologies. The application should incorporate essential features for adding, updating, and removing contacts, with all data stored in a back-end database. Students are free to select any visualization technology, provided that the architecture adheres to the requirement of separating front-end and back-end components.

Project Significance

• Separation of Front-end and Back-end: By using front-end technologies (HTML, CSS, JS) and back-end technologies (PHP), learn how to achieve front-end and back-end interaction and understand their relationship.

• Enhancing Programming Skills: Apply programming knowledge in a real project to improve coding abilities and problem-solving skills.

• Implementing Basic Functions: Master the specific implementation of CRUD operations (Create, Read, Update, Delete) by managing user information.

• Understanding the Web Development Process: Gain a deep understanding of the request-response model and learn how to handle user input and return data.

• Mastering Data Storage: Learn how to manage user data on the back-end (e.g., using a database) and display it on the front-end.

• Personal Project Management: Develop the ability to complete projects independently and enhance self-management and time management skills.

Git Repository Link

• Front-end:https://github.com/Kirsten619/456.git

• Back-end:https://github.com/Kirsten619/123.git

PSP Table

• Total Actual Time: 27.5 hours
• Total Estimated Time: 36 hours

Basic Functions

Add

Modify

Delete

Design and Implementation Process

Requirement Analysis:

• Identified core functionalities needed for the contacts management system: adding, modifying, and deleting contacts.
• Considered user interface requirements and interaction flows for a smooth user experience.

Implementation:

Front-end Development

In front-end development, I used HTML, CSS, and JavaScript. Here’s what I did:

• User Interface Design:

  • Built the basic page structure using HTML, including forms and a contact list display.
  • Created an input form with fields for name, phone number, location, and notes to facilitate user input.

• Styling:

  • Used CSS to add styles to the form and list, enhancing user experience and making the interface more visually appealing and user-friendly.

• Dynamic Interaction:

  • Implemented JavaScript for interaction with the back end:
    • Adding Contacts: Used AJAX to send POST requests to the back end with user input data.
    • Modifying Contacts: Enabled the functionality to populate the form with selected contact information for direct editing.
    • Deleting Contacts: Added delete buttons in the contact list, sending DELETE requests via AJAX.

• Data Display:

  • On page load, used AJAX to fetch all contact information and dynamically generate the contact list for easy viewing.

Back-end Development

In back-end development, I used PHP and MySQL for data processing. Here’s what I did:

• Data Reception and Processing:

  • Created PHP scripts to handle requests from the front end, processing different operations (adding, modifying, and deleting contacts).

• Adding Contacts:

  • Received POST requests from the front end, extracted name, phone number, location, and notes, and inserted them into the MySQL database.

• Modifying Contacts:

  • Handled PUT requests to read the contact information to be modified, found the corresponding record in the database, and updated the information.

• Deleting Contacts:

  • Processed DELETE requests to remove specified contact records from the database based on contact ID.

• Querying Contacts:

  • Created GET request handlers to query all contact information from the MySQL database and return it in JSON format to the front end.

Database

In terms of database management, I used MySQL for data storage. Here’s what I did:

• Database Design:
  • Created a table named contacts with the following fields:
    • id (primary key, auto-increment)
    • name (contact name)
    • phone (contact phone number)
    • location (contact location)
    • notes (additional notes)
• Data Management:
  • Ensured the database structure was reasonable to support subsequent add, delete, and modify operations, maintaining data integrity and consistency.
• Data Operations:
  • Interacted with the database during add, modify, and delete operations to ensure each action correctly reflected in the database.

Functional Structure Diagram

Code Explanation

• Front-end Code

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-image: url('pic.jpg');
  background-size: cover;
}

.container {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.form-container {
  margin-bottom: 20px;
}

input {
  margin-right: 10px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 8px 12px;
  background-color: #14ab65;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #14ab65;
}

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

th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f2f2f2;
}

• Code Interpretation

The index.html file is structured with several key components: it includes input fields for entering a contact's name, phone number, location, and notes, as well as "Add" and "Save" buttons to submit the form. A table displays the list of all contacts. Additionally, css.css is an optional stylesheet that can be customized to enhance the webpage's appearance according to user preferences. The front-end system interacts with the back end via AJAX, utilizing several main interfaces: a POST request to api.php?action=add for adding contacts, another POST request to api.php?action=edit for editing existing contacts, a POST request to api.php?action=delete for deleting contacts, and a GET request to api.php?action=get to retrieve all contact information from the database.

• Back-end Code

<?php

header("Content-Type: application/json; charset=UTF-8");

$servername = "localhost";
$username = "root"; 
$password = "root"; 
$dbname = "contacts"; 

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$action = $_GET['action'] ?? null;

switch ($action) {
    case 'add':
        $姓名 = $_POST['姓名'];
        $手机号 = $_POST['手机号'];
        $归属地 = $_POST['归属地'];
        $备注 = $_POST['备注'];
        $stmt = $conn->prepare("INSERT INTO contacts (姓名, 手机号, 归属地, 备注) VALUES (?, ?, ?, ?)");
        $stmt->bind_param("ssss", $姓名, $手机号, $归属地, $备注);
        $stmt->execute();
        echo json_encode(["success" => true]);
        break;

    case 'edit':
        $姓名 = $_POST['姓名'];
        $手机号 = $_POST['手机号'];
        $归属地 = $_POST['归属地'];
        $备注 = $_POST['备注'];
        $stmt = $conn->prepare("UPDATE contacts SET 手机号=?, 归属地=?, 备注=? WHERE 姓名=?");
        $stmt->bind_param("ssss", $手机号, $归属地, $备注, $姓名);
        $stmt->execute();
        echo json_encode(["success" => true]);
        break;

    case 'delete':
        $姓名 = $_POST['姓名'];
        $stmt = $conn->prepare("DELETE FROM contacts WHERE 姓名=?");
        $stmt->bind_param("s", $姓名);
        $stmt->execute();
        echo json_encode(["success" => true]);
        break;

    case 'get':
        $result = $conn->query("SELECT * FROM contacts");
        $contacts = [];
        while ($row = $result->fetch_assoc()) {
            $contacts[] = $row;
        }
        echo json_encode($contacts);
        break;

    default:
        echo json_encode(["error" => "Invalid action"]);
        break;

}

$conn->close();
?>

• Code Interpretation

The Contacts Management System is a simple application that allows users to add, edit, delete, and view contact information. Built using PHP and MySQL, the front end utilizes HTML and JavaScript for interaction with the back end. Key functionalities include adding contacts by entering their name, phone number, location, and notes, editing existing contacts, deleting saved contacts, and displaying all contacts in a table format. The technology stack consists of HTML, CSS, and JavaScript for the front end, with PHP for the back end and MySQL for database management. Additionally, create a database named contacts and a table within it, structured as follows:

CREATE TABLE contacts (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    phone VARCHAR(50) NOT NULL,
    location VARCHAR(100),
    notes TEXT
);

Personal Journey and Learnings

During the development process, I encountered several challenges. First, the design and implementation of the front end left me feeling confused. Especially when using JavaScript for dynamic interactions, the process of debugging and troubleshooting often consumed a significant amount of my time. Additionally, working with PHP and MySQL for back-end data interaction made me realize the crucial importance of proper database design and the correctness of SQL statements. Several times, improper SQL syntax led to issues with data retrieval and storage, prompting me to reflect on the need for greater attention to detail when writing code. Another challenge was effectively managing the project structure. Initially, I did not adequately plan the file structure, which made maintaining functionality difficult. This highlighted the importance of good code organization and project management habits.

On a technical level, this assignment allowed me to delve deeper into using HTML, CSS, and JavaScript to create intuitive and visually appealing user interfaces. With HTML, I was able to effectively structure the web pages, and by utilizing CSS, I enhanced the aesthetic appeal of the interface. Furthermore, the introduction of JavaScript enabled me to implement dynamic interactions on the web pages, improving the overall user experience. In the back end, I mastered how to effectively process and store data using PHP and MySQL. The flexibility of PHP allowed me to write scripts that handle user requests and interact with the MySQL database, ensuring data accuracy and security. I gained a deep understanding of the implementation of Create, Update, Delete operations, including how to create new contacts, modify existing contact information, delete unnecessary contacts, and query and display all contact information.

This assignment provided me with a deeper understanding of front-end and back-end interactions and made me recognize the importance of good documentation and comments for future maintenance and code upgrades. Overall, this individual project not only enhanced my technical skills but also strengthened my ability to work independently and manage my time effectively. Faced with challenges, I learned how to effectively seek solutions and optimize workflows. These experiences will lay a solid foundation for my future studies and career development. I look forward to applying the knowledge I've gained to practical applications in future projects as I continue to explore the vast field of software engineering.