This will be the repository for Zest - The Productivity App. Files included would be for the web application that was created through a series of sprints.
Product Owner: Faeldonea, C. F.
In this link, we include the Product Backlog, as well as the Sprint Timeline, Sprint Backlog and Scrum Board for the current sprint.
- The first sprint included the mockup designs for our project.
- It also included the relational model of the database.
- Project now includes the basic Php files.
- Initial design and UI are working.
- Fixed bugs and issues.
- Project now has a good working UI.
- There is uniformity on different pages.
- Tasks are interactive.
- Subjects are interactive.
- Notes are interactive.
- Reminders shown on home page.
- Fixed bugs and issues.
- Project now has an interactive and pleasantly working UI.
- There is now a profile page with working profile themes and avatars.
- There is also a Help Page, with many access points.
- Home page looks different, with new design and features.
- Fixed bugs and issues.
- Home page looks different, with new design and features.
- Created new things in different features.
- Help Page is now fully interactive with pictures and links.
- Fixed all bugs and issues.
- Two (2) New Themes Added
- Forgot Password (Security) Implementation
- "Delete Account" Feature
- Online Database
- Remote Installer
- Changed code for consistency
- Improve Overall UI (esp. Profile and HelpDesk)
- Fixed bugs and issues
- June 24, 2021 (Sprint 6 Review)
- December 23, 2020 (Prototype Presentation)
- November 26, 2020 (Overall UI Consultation #1)
- November 4, 2020 (Wireframe Consultation)
- Carpio, J. (Notebook)
- Faeldonea, C. (Home and other Pages)
- Jinon, J. (Notebook)
- Visto, R. (Subjects)
- Castañeda, J. (Profile, Themes)
- Castañeda, J. (Reminders, Profile, Help/Support)
- Garcia, M. (Subjects)
- Jomoc, G. (Notebook)
- Luciano, K. (Notebook)
- Molina, J. (Tasks, Reminders, Notebook (text editor))
- Rabe, J. (Subjects)
- Zamudio, K. (Login and Registration Pages)
- Castañeda, J. (UI and UX)
- Faeldonea, C. (Bug Hunter)
- Molina, J. (UI and UX)
- Rabe, J. (Bug Hunter)
- To clone the repository on your machine (on Windows, using WSL)
- Make sure XAMPP is running Apache
- Navigate to
xampp\htdocs
- On the navigation bar, type
wsl
- Run the following command:
git clone https://github.com/jvc1019/CMSC128.git
- Open
phpMyAdmin
: http://localhost/phpmyadmin/server_databases.php- Create a new database named
database
withutf8mb4_general_ci
as encoding - Import
database.sql
fromdb/database.sql
. It will generate dummy entries which should not be deleted.
- Create a new database named
- All major components (tasks, notebook, subjects) should be wrapped in a
div
with the classcontainer
. That way, it will be easier to apply color schemes and stylesheets.
<div class="container">
<!-- stuff goes here -->
</div>
-
Stylesheets will affect the basic colors of the the elements inside the
container
class. For example, under a theme called "Blue Marine" located insrc/css
:html { scroll-behavior: smooth; } body { background-image: url("../resources/somethingBlue.jpg"); /* theme image also applies to the tasks, subjects, and notes" */ background-size: cover; background-repeat: no-repeat; } .navbar { background-color: blue; } .container .list-group-item { /* affects Bootstrap lists */ background-color: lightblue; /* something lighter than the bg color of the navbar*/ } .container .card-item { /* affects Bootstrap cards */ background-color: lightblue; /* something lighter than the bg color of the navbar*/ }
-
While a CSS called "Green Sapphire" may look like this:
html { scroll-behavior: smooth; } body { background-image: url("../resources/somethingGreen.jpg"); /* theme image also applies to the tasks, subjects, and notes" */ background-size: cover; background-repeat: no-repeat; } .navbar { background-color: green; } .container .list-group-item { /* affects Bootstrap lists */ background-color: lightgreen; /* something lighter than the bg color of the navbar */ } .container .card-item { /* affects Bootstrap cards */ background-color: lightgreen; /* something lighter than the bg color of the navbar*/ }
-
As much as possible, follow the Bootstrap 4 convention and its built-in classes for layouting elements to avoid huge amounts of CSS and JS files for every page, and to make the UI more consistent.
- If you need a box, you probably need a Bootstrap Card.
- If you need to center your text, you probably need to use the class
text-center
. - More on: https://getbootstrap.com/docs/4.0/components/
- Most components (navbar, tasks, notebook, subjects) should include the
header.php
file at the top. Theheader.php
file contains the<head>
, with the necessary CSS and JS files for cleaner and consistent code.
<?php include("header.php"); ?>
- If you want to access user details, you can include
user_details.php
.
<?php include("user_details.php"); ?>
-
After including
header.php
, only the<body>
, or additionally, the<footer>
needs to be defined. Notice how the<div>
with thecontainer
class is nested inside the body as described in #1. Check outtasks.php
to see how it works.<body> <div class="container"> <!-- stuff goes here --> </div> </body>
- For subcomponents that need database access, you can include
conn.php
. Check outtasks_add.php
to see how it works.
require_once("conn.php");
- To implement notifications, you may use
notification.php
. Check outnotification.php
to see how to use it, and around line 142 ontasks.php
to see a sample implementation. UPDATE: Notifications will now appear at the bottom right of the screen for consistency.
<?php include("notification.php") ?>
spawnNotification();
- There are some useful functions provided by jQuery to shorten your Javascript code, such as
- Selectors by class and id
$("#id_of_element")
-> selects an element by ID, shorter than thedocument.getElementById("id_of_element")
command.$(".class_of_element")
-> selects element(s) by class
$("#id_of_element").click(function)
-> Calls a function when the element is clicked.$("#id_of_element").val()
-> a setter and a getter, when a string argument is insideval()
, the element's value tag is set to the string. If there is no argument, then the value of the element is retrieved.$("#id_of_element").text()
a setter and getter, when an argument is specified, it replaces the text inside the element. Useful for buttons that change text when clicked, for instance
$("#my_Button").click(function (e) { $(this).text("My text is changed"); });
- Selectors by class and id
-
It is recommended to use Visual Studio Code as your text editor as it offers an easy way of resolving merge conflicts. If there's a merge conflict, open the affected file in Visual Studio Code and options such as "accept current change" and "accept incoming change" will be shown.
-
Navigate inside the repository location (
xampp\htdocs\CMSC128
). On the navigation bar, typewsl
- To get the latest version of the repository (needs an internet connection):
git pull
- Switch to a separate branch if you're planning to alter another team member's code, then ask that team member's permission or create a
pull request
before merging/pushing your changes. Do not commit your changes tomain
immediately unless you're only altering your own code. - To add files for staging:
git add file_path
- To commit the changes:
git commit -m message
Note: You can commit even when offline. Do not commit after every little change. - Committing your changes only affects your working tree. To push the changes to the remote repository (needs an internet connection):
git push
. But remember togit pull
orgit fetch
(safer thangit pull
) beforegit push
to lessen the chances of "merge conflicts" 🙈. Must read: Difference ofgit fetch
andgit pull
- To get the latest version of the repository (needs an internet connection):
-
If you want to report bugs or suggest improvements, you can file an issue here: https://github.com/jvc1019/Zest/issues.