Lab 2: Project Structure
Instructions:
In this lab, you will learn how to pull your project from the repository to your local machine.
You will also learn how to set up the project structure and start working on your project.
Follow the instructions below to complete the lab.
Pulling your project
At this point you should have a team already created and a project assigned to you. If you do not have a
project assigned to you, please contact your instructor.
To start working on your project, you will need to pull the project from the repository to your local machine.
Since we are using XAMPP, you will need to pull the project to the xampp/htdocs folder.
To pull the project, you will need to use the command line. Open the command line and navigate to the htdocs
folder.
The default location of the htdocs folder is as follows:
- Windows: C:/xampp/htdocs
- Mac: /Applications/XAMPP/xamppfiles/htdocs
- Linux: /opt/lampp/htdocs
The git clone command is used to create a copy of the repository on your local machine.
The syntax for the git clone command is as follows:
$ cd C:/xampp/htdocs $ git clone https://github.com/the-repository-url
where the-repository-url is the URL of the repository you want to clone.
In our case, you can find the URL of the repository by going to the Ensia-AI organization on
GitHub and look for the repository that has been assigned to you. This repository should have the same name as
your project.
Windows
If you are using Windows, you can use GitHub Desktop to clone the repository.
GitHub Desktop is a graphical user interface for Git that makes it easier to work with repositories.
To download GitHub Desktop, go to the following website:
https://desktop.github.com/
To clone the repository using GitHub Desktop, follow these steps:
- Open GitHub Desktop.
- Click on the "File" menu and select "Clone repository".
- In the "Clone a repository" window, enter the URL of the repository you want to clone.
- Click on the "Clone" button.
- Choose the location where you want to clone the repository.
- Click on the "Clone" button.
- Wait for the repository to be cloned.
- Once the repository is cloned, you can start working on your project.
At this point, you should have the project cloned to your local machine. You can now start working on your project.
The structure of a project
When you start working on a project, it is important to have a clear structure for your project.
A good project structure will help you organize your files and folders in a way that makes it easy to find
what you need.
In this section, we will discuss the structure of a typical web project.
Unless you are working with a specific framework or tool that has its own structure, you are free to organize
your project in any way you like.
A typical web project will have the following structure:
- index.php - The main PHP file for the project. This file is usually the entry point for the project and contains the content that will be displayed to the user.
-
assets - A folder that contains all the assets used in the project, such as images,
fonts, and JavaScript files.
- CSS - A folder that contains the CSS files for the project. CSS files are used to style the HTML content.
- JS - A folder that contains the JavaScript files for the project. JavaScript files are used to add interactivity to the project.
- Images - A folder that contains the images used in the project.
- Fonts - A folder that contains the fonts used in the project.
-
Components - Depending on the way you divide the worklload among your team members, you may
assign each member a specific component to work on. For example, if you are working on a website that has a
header, footer, and main content area, you may assign one team member to work on the header, another team
member
to work on the footer, and another team member to work on the main content area. Each team member will be
responsible for creating the HTML, CSS, and JavaScript files for their component.
The PHP files for the components can be stored in a folder called components.
Example
Let's build a page that has a header, footer, and main content area.
The header will contain the site logo and navigation links.
The footer will contain the copyright information.
The main content area will contain the main content of the page.
To build this page, we will create the following files:
- index.php - The main PHP file for the project. This file will contain the HTML content for the page.
-
assets - A folder that contains all the assets used in the project.
- CSS - A folder that contains the CSS files for the project.
- JS - A folder that contains the JavaScript files for the project.
- Images - A folder that contains the images used in the project.
- Fonts - A folder that contains the fonts used in the project.
-
Components - A folder that contains the PHP files for the components.
- header.php - The PHP file for the header component.
- footer.php - The PHP file for the footer component.
- main.php - The PHP file for the main content area component.
The header.php file will contain the following code:
<header> <h1>Site Logo</h1> <nav> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact</a> </nav> </header>
The footer.php file will contain the following code:
<footer> <p>Copyright © 2021</p> </footer>
The main.php file will contain the following code:
<main> <h2>Main Content</h2> <p>This is the main content of the page.</p> </main>
The index.php file will contain the following code:
<?php include 'components/header.php'; ?> <?php include 'components/main.php'; ?> <?php include 'components/footer.php'; ?>
The advantage of using this structure is that it allows you to work on different parts of the project
independently.
Each team member can work on their component without interfering with the work of other team members.
To use a component that another team member is working on, you can include the PHP file for that component in
the page you are working on.
For example, if you are working on the main content area and you need to use the header component, you can
include the header.php file in the main.php file.
This way, you can work on your component without having to wait for other team members to finish their work.
In addition, this structure makes it easy to update the project. If you need to make changes to a component,
you can do so without affecting the rest of the project.
Load your website
To load your website, you need to start the Apache server in XAMPP.
To start the Apache server, open the XAMPP control panel and click on the "Start" button next to Apache.
Once the Apache server is started, open a web browser and go to the following URL:
http://localhost/your-project-name
where your-project-name is the name of the folder where you cloned the project.
For example, if you cloned the project to a folder called "my-project", you would go to the following URL:
http://localhost/my-project
This will load the index.php file in your project and display the content of the page.
If you do not have an index.php file, nothing will be displayed.
To test your website, you can create an index.php file with some content and load it in the browser.
For example, add the following code to the index.php file:
<h1>Hello, world!</h1>
Save the file and reload the page in the browser. You should see the text "Hello, world!" displayed on the
page.
You can now start working on your project and build your website.
If you have any questions or need help, please contact your instructor.
Good luck!