MySQL

Semester 2 was a whirlwind of diagrams, commands, and the grand finale—a full-stack project that united frontend, backend, and database into a harmonious symphony of code. Here’s the tale of our journey, complete with examples and repositories.

Chapter 1: The Blueprint - ERD and Diagrams

We began with Entity Relationship Diagrams (ERD), the cornerstone of any well-designed database. These diagrams helped us visualize relationships and structure before diving into implementation.

// ERD for a restaurant schema
Customer ---< Order >--- Menu

Chapter 2: Crafting the Schema - Workbench Magic

Using MySQL Workbench, we transformed our ERD into a tangible schema. The restaurant database came to life with tables and relationships.

-- Schema creation
CREATE TABLE Customer (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100),
  email VARCHAR(100)
);
 
CREATE TABLE Menu (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100),
  price DECIMAL(10, 2)
);
 
CREATE TABLE `Order` (
  id INT AUTO_INCREMENT PRIMARY KEY,
  customer_id INT,
  menu_id INT,
  FOREIGN KEY (customer_id) REFERENCES Customer(id),
  FOREIGN KEY (menu_id) REFERENCES Menu(id)
);

Chapter 3: Command Line Chronicles

With schemas in place, we ventured into the MySQL Command Line via XAMPP. Here, we executed queries and managed data directly.

# Accessing the database
mysql -u root -p
USE restoran;
SELECT * FROM Customer;

Chapter 4: SQL vs NoSQL - The Eternal Debate

We explored the differences between SQL and NoSQL, understanding their strengths and use cases.

/* SQL: Structured and relational */
SELECT * FROM Customer WHERE email = 'example@example.com';
 
/* NoSQL: Flexible and document-based */
{
  "_id": "123",
  "name": "John Doe",
  "email": "example@example.com"
}

Chapter 5: The Grand Finale - Full-Stack Integration

The semester culminated in a full-stack project, split into two repositories:

• Frontend Repository: Frontend-ALP-Kelompok1
• Backend Repository: Backend-ALP-Kelompok1

Frontend: TailwindCSS and JavaScript

The frontend was built using HTML, TailwindCSS, and JavaScript. JavaScript acted as the bridge, fetching data from the backend.

// Fetching data from the backend
const fetchData = async () => {
  const response = await fetch('http://localhost:8080/api/customers');
  const data = await response.json();
  console.log(data);
};
fetchData();

Backend: Spring Boot and JPA

The backend was powered by Java Spring Boot, with dependencies like JPA and MySQL JDBC to manage database operations.

// Spring Boot controller
@RestController
@RequestMapping("/api")
public class CustomerController {
 
  @Autowired
  private CustomerRepository customerRepository;
 
  @GetMapping("/customers")
  public List<Customer> getCustomers() {
    return customerRepository.findAll();
  }
 
  @PostMapping("/customers")
  public ResponseEntity<String> addCustomer(@RequestBody Customer customer) {
    customerRepository.save(customer);
    return ResponseEntity.ok("Customer added successfully");
  }
}

Database: Managed by Backend

The database was controlled entirely by the backend using Spring Boot JPA.

-- Example query executed via JPA
INSERT INTO Customer (name, email) VALUES ('John Doe', 'john@example.com');

This project was a testament to the power of collaboration and integration. By splitting responsibilities between frontend and backend repositories, we learned to build scalable and maintainable applications. The MySQL Odyssey was truly a journey worth taking.