Lession 1: Project Setup & Environment

📘 Introduction

In this first lesson, we prepare the development environment for our CRUD project: Student Manager App. Students will create the project folder structure, install Bulma CSS, set up the MySQL database(e.g. XAMPP), and build the initial PHP MySQLi procedural connection file. To get the most out of this short course, download and install VScode and XAMPP on your computer. This foundation is required for all future lessons.

📁 Step 1: Create Project Folder

Create a new folder named student_manager and add the following structure:

student_manager/
    index.php
    db.php
    assets/
        bulma.min.css

🎨 Step 2: Add Bulma CSS

Download Bulma CSS from CDN and save it inside the assets folder.

https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css

Rename the file to bulma.min.css.

🗄️ Step 3: Create MySQL Database

Open phpMyAdmin and create a new database named student_manager.

Table: students

🔌 Step 4: Create Database Connection File

Create a file named db.php and add the following code:

<?php
$host = "localhost";
$user = "root";
$pass = "";
$db   = "student_manager";

$conn = mysqli_connect($host, $user, $pass, $db);

if(!$conn){
    die("Connection failed: " . mysqli_connect_error());
}
?>

🧠 Syntax Explanation

• mysqli_connect() — connects to MySQL using procedural style.
• die() — stops execution if connection fails.
• $conn — connection resource used for all queries.

🧪 Exercise

Create the folder structure and database. Then open index.php and write:

<?php include 'db.php'; ?>
<h1>Connection Successful</h1>

If you see the message, your connection works.