170
社区成员




Course For This Assignment | 2401_MU_SE_EE308FZ |
---|---|
FZU ID /Name | 832201114 陈欣蕾 |
MU ID | 22126937 |
Assignment Requirements | Design a front-end and back-end separation contact |
Objectives of This Assignment | Contact management including adding, modifying and deleting |
Cloud Link | http://60.204.237.201:8888/ |
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.
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.
Front-end:https://github.com/Kirsten619/456.git
Task | Actual Time(hours) | Estimated Time(hours) | Description |
---|---|---|---|
Requirement Analysis | 1 | 1 | Clarify project requirements and define basic functions and design approach. |
Technical Preparation | 4 | 5 | Learn relevant technologies (PHP, MySQL, HTML, CSS, JavaScript). |
Database Design and Setup | 2 | 3 | Design database tables and create structure for storing contact information. |
Front-end Development | 8 | 10 | Use HTML and CSS to build the user interface; implement dynamic interactions with JavaScript. |
Back-end Development | 8 | 11 | Write back-end logic using PHP and interact with MySQL for data management. |
Implement Features | 1 | 1 | Implement Create, Update, and Delete operations for contact information. |
Function Testing and Debugging | 0.5 | 0.5 | Test all features and debug code to ensure stable system performance. |
Documentation Writing | 2 | 3 | Write project documentation, including user guides and technical details. |
Final Check and Optimization | 1 | 1.5 | Conduct final checks on code and functionality, make necessary optimizations. |
Total | 27.5 | 36 | Organize project files and submit the assignment on time. |
In front-end development, I used HTML, CSS, and JavaScript. Here’s what I did:
User Interface Design:
Styling:
Dynamic Interaction:
Data Display:
In back-end development, I used PHP and MySQL for data processing. Here’s what I did:
Data Reception and Processing:
Adding Contacts:
Modifying Contacts:
Deleting Contacts:
Querying Contacts:
In terms of database management, I used MySQL for data storage. Here’s what I did:
contacts
with the following fields:id
(primary key, auto-increment)name
(contact name)phone
(contact phone number)location
(contact location)notes
(additional notes)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;
}
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.
<?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();
?>
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
);
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.