SPCC Portal

Note: This is an old project that is no longer maintained since 2020.

An electronic grading web application, integrated with a school website, built using Laravel and Bootstrap. A capstone project for the Bachelor's Degree of Information Technology in SPCC - Caloocan.

Getting Started

Pre-requisite

• XAMPP
• NPM
• Git / Git Bash
• Composer
• Familiar with mySQL and PHP

Installation

1. Clone the Repository
2. Setting up a Virtual Host
3. Database Configuration
4. Populating the Database with some dummy data (optional)
5. Check the App

1. Clone the Repository

a. Go to C:/xampp/htdocs

cd 'C:/xampp/htdocs'

b. Clone the Repository

git clone https://github.com/jorenrui/spccweb.git

c. Go to the spccweb directory

cd 'spccweb'

d. Install Dependencies

composer install

2. Setting up a Virtual Host

a. Go to C:/xampp/apache/conf/extra/httpd-vhosts.conf. Edit then save.

# At the bottom of the file

<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs"
    ServerName localhost
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs/spccweb/public"
    ServerName spccweb.me
</VirtualHost>

b. Open Notepad as Administrator. Then Open File: C:/Windows/System32/drivers/etc/hosts. Edit then save.

# At the bottom of the file

127.0.0.1 localhost
127.0.0.1 spccweb.me

3. Database Configuration

a. Run both Apache and mySQL in the XAMPP Control Panel.

b. Go to localhost/phpmyadmin in your browser. Then login and create a database named spcc. In the main directory of spccweb, find .env.example. Open it and update the database information below. After that, save it as .env.

Note

The default credentials for the phpMyAdmin are:

username: root

password:

You can leave the password blank.

APP_NAME='SPCC Caloocan'
...
DB_DATABASE=spcc
DB_USERNAME=myUsername
DB_PASSWORD=myPassword

c. Generate the Application Key

php artisan key:generate

d. Reset the Database if you have already ran the Database Migration at least once, else proceed to the next step.

php artisan migrate:reset

e. Run the Database Migration

php artisan migrate

4. Populating the Database with some dummy data (optional)

a. Populate the Database by running the Database Seeder. A dummy data has been provided.

composer dump-autoload

php artisan db:seed

b. Create a symbolic link:

php artisan storage:link

c. In the root directory of the repository, go to public/img. Copy both cover_images and profile_pictures to public/storage/.

d After that you're all set! You may now use the dummy accounts.

Dummy Accounts

Admin

username: admin

password: secret

Head Registrar

username & password: K002

Registrar

username & password: K003

Faculty (K004-K006)

username & password: K004

Student (042030001-042030006)

username & password: 042030001

5. Check the App

a. Open a browser and go to spccweb.me. Make sure that both Apache and MySQL are running on the XAMPP Control Panel.

b. Try to login.

c. Congrats! You're all set.

Installation with Docker

a. With docker and docker-compose installed just run:

docker compose up -d

b. Install Dependencies:

docker exec -it spccweb-app composer install

c. Copy the env.example to .env and configure database access:

docker exec -it spccweb-app cp .env.example .env

d. Generate the Application Key:

docker exec -it spccweb-app php artisan key:generate

e. Run the Database Migration:

docker exec -it spccweb-app php artisan migrate

f. Populate the Database by running the Database Seeder (if any);

docker exec -it spccweb-app php artisan db:seed

g. Create a symbolic link:

docker exec -it spccweb-app php artisan storage:link

h. In the root directory of the repository, go to public/img. Copy both cover_images and profile_pictures to public/storage/.

i. After that you're all set! You may now use the dummy accounts.

j. Check the app:

• Open a browser and go to localhost:8000

• Try to login.

• Congrats! You're all set.

Built With

Main Techs

• HTML, CSS, JavaScript, PHP and MySQL
• Laravel - The web framework used
• jQuery - JavaScript library
• Bootstrap - CSS Framework

OS Techs

• Argon Laravel Dashboard - Frontend Preset for Laravel
• spatie/laravel-permission - Laravel package to manage user permissions and roles in the database
• select2 - JavaScript plugin for select boxes
• particles.js - JavaScript plugin for particle backgrounds
• quilljs - An API Driven Rich Text Editor
• FooTable - responsive jQuery table plugin