CodeIgniter4: First Project and Working with Git and GitHub

Git is a distributed version control system used to track changes in source code during software development. GitHub is a web-based Git repository hosting platform that allows developers to store, manage, and share their code.

Understanding the Version Control system is crucial for team collaboration and good code management. In this module, we will discuss in detail the introduction, configuration, creating a repository, and how to work effectively using branches and remote repositories with Git.

1. Introduction to Git and GitHub

A Version Control System (VCS) is a system that records changes to a file or set of files over time so that you can recall specific versions later.

• Git: A version control system that can be run locally on our computer. Some advantages of Git include efficiency, speed, and allowing flexible workflow management (distributed version control).
• GitHub: A web-based Git hosting service. It adds a user-friendly interface (GUI) and various collaboration features.

With Git and GitHub, we can avoid manual file management which is time-consuming (such as creating file names like revision1, final_revision, etc.).

2. Initial Git Configuration

Before starting, we must set up our identity. Git uses this name and email information on every code line (commit) you make:

git config --global user.name "YourName"
git config --global user.email example@gmail.com

To verify your settings, use:

git config --list

(Note: It is highly recommend to use the same *email as your GitHub/GitLab account to properly register with the system).*

3. Basic Repository Tasks

A repository is your project folder tracked by Git. There are two types of initial actions for a repository:

A. Initialize a New Repository

1. Create a new folder for the project and navigate into that directory:

   mkdir repository-name
   cd repository-name
   

2. Perform the initial initialization of an empty Git repository. This will generate a hidden subdirectory named .git:

   git init
   

3. Add files to the Git Staging Area to track their changes (you can also use the . sign to include all recent files at once):

   git add file-name
   git add .
   

4. Record the modifications along with an informational message using commit. A commit is a way to record a snapshot of the project:

   git commit -m "First commit message"
   

B. Cloning a Repository

If you want to duplicate or contribute to an existing project (remote server), you can copy (clone) it to your local directory:

git clone https://github.com/username/repository-name.git
cd repository-name

Example:

git clone https://github.com/irchamali/calculator.git
cd calculator

4. Concept of Branching

A Branch is an independent line of development. Branches are useful for experimenting with new features or experiments, so they do not interfere with the performance of the main system (main/master branch).

1. Viewing branches and creating a new one:

   git branch
   git branch new-branch-name
   

2. Switching between branches: We can use checkout (classic version) or switch (easier approach in the newer version):

   git checkout new-branch-name
   # or
   git switch new-branch-name
   

3. Merging: After finishing work in the backup branch, you might want to merge it back into the main line (main). Make sure you switch to the main branch first and then perform the merge:

   git checkout main
   git merge new-branch-name
   

5. Working with Remote Repository

A remote repository is a repository located on a server or a hosting service (like Github) so the project can be accessed from anywhere.

1. Adding your Github address (Linking): After creating an empty project via Github Web, you need to link it locally:

   git remote add origin https://github.com/username/repository-name.git
   

2. Fetching changes from Cloud (Fetch/Pull): If a teammate (or collaborator) makes an update on the remote, you must sync the version to your local computer:

   git fetch origin
   git merge origin/main
   

3. Sending (Push) your code: After finishing a new feature and being confident with the commit you recorded locally, you can push it to the cloud (Github):

   git push origin main
   

6. Creating First CodeIgniter4 Project: Calculator

After understanding the basics of Git, let’s apply it to project1 or the CodeIgniter 4 Project that we installed in the previous meeting. We will create a calculator project (simple computation) adopting a basic MVC structure, where the Controller will handle arithmetic operations and the View will render the form along with its final results. First, clone the repository (https://github.com/irchamali/calculator.git) to your local computer. Then enter the cloned directory:

git clone https://github.com/irchamali/calculator.git
cd calculator

There are 3 files inside it, namely .html, .js, and .css. We will move these files into the CodeIgniter 4 structure. The .html file will be moved to the app/Views/v_calculator.php folder. Create an assets folder inside the public/ directory, then the .js and .css files will be moved to the public/assets/ folder.

A. Creating the Controller

First, let’s set up the control center. Create a new file in the app/Controllers/Calculator.php folder:

<?php

namespace App\Controllers;

class Calculator extends BaseController
{
    public function index()
    {
        return view('v_calculator');
    }
}

B. Creating the View

Now create the user interface in the Views section. Create a file v_calculator.php in the app/Views/ folder. We will move the code that is in the .html file into the app/Views/v_calculator.php folder. Here is the code we will use:

<!DOCTYPE html>
<html>
<head>
    <title>Simple Calculator</title>
    <link rel="stylesheet" type="text/css" href="assets/style.css">
</head>
<body>
    <div class="calculator">
        <input type="text" id="display" disabled>
        <div class="buttons">
            <button onclick="clearDisplay()">C</button>
            <button onclick="deleteLast()">DEL</button>
            <button onclick="appendValue('/')">/</button>
            <button onclick="appendValue('*')">*</button>
            <button onclick="appendValue('7')">7</button>
            <button onclick="appendValue('8')">8</button>
            <button onclick="appendValue('9')">9</button>
            <button onclick="appendValue('-')">-</button>
            <button onclick="appendValue('4')">4</button>
            <button onclick="appendValue('5')">5</button>
            <button onclick="appendValue('6')">6</button>
            <button onclick="appendValue('+')">+</button>
            <button onclick="appendValue('1')">1</button>
            <button onclick="appendValue('2')">2</button>
            <button onclick="appendValue('3')">3</button>
            <button onclick="appendValue('.')">.</button>
            <button onclick="appendValue('0')">0</button>
            <button onclick="calculate()">=</button>
        </div>
    </div>
    <script src="assets/script.js"></script>
</body>
</html>

C. Setting up Routes

To ensure the system reads the Calculator Controller when a URL is accessed, let’s adjust the Routes file at app/Config/Routes.php:

$routes->get('/calculator', 'Calculator::index');

Finally, activate your Development Server screen using the php spark serve command, then open your browser to the link http://localhost:8080/calculator. Congratulations! Your simple calculator has been successfully implemented comprehensively using the MVC base framework of CodeIgniter 4.