Share Square is a website which allow its member to share any kind of information. Register members can create a post to share their information. Members can also interact with each other through comment, rating, messaging etc.

Admin of website can manage all information on the system including but not limited to member's post related information, account information, role, category etc.

Currently, the system support on web and android. Some feature has been completed. Many other features are under developing

Setup laravel framework for the project. Configure the Voyager plugin to function the admin site of the website. With supporting of Voyager plugin, the admin site can manage CRUD for all model in database. Need to implement model class in project source code Then do some configuration in Voyager in order to create CRUD feature for the database model.

The Voyager also support create the dynamic menu system which return the json of dynamic menu. The Front side of website can consume that json and manipulate with html to create dynamic menu.

Create data migrate to all tables in database and create all table seeder to generate testing data for the project.

• app/all model class
• composer.json

• Setup laravel project
• Laravel Database migration
• Laravel Database seeder, and Data factory
• Setup plugin for laravel project
• Understand and use the Voyager plugin

Create common layout and side menu bar which is applied for features of login user

The common layout is utilized the blade master template

The side menu bar is developed by using Vue.js which consumes the menu json collection that is configured in Voyager feature

• app/Menu.php
• public/css/profile.css
• public/js/slide-menu-bar.js
• resources/js/components/user_menu.vue
• resources/views/dashboard/navbar.blade.php
• resources/views/dashboard/sidebar.blade.php
• resources/views/layouts/user-master.blade.php

• Understand blade template and laravel layout management
• Understand bootstrap
• Understand Vuejs component.

The dashboard present some statistic information about user's posts as following

1. Total posts, views, and ratings
2. The monthly post chart
3. The monthly statistic chart of all comments, rating, and views
4. The summary of rating statistic

Upon login, the dashboard show the statistic of current year. User can select another year by the dropdown box on the top of page.

The charts are generated by using consoletvs/charts plugin

1. Go to http://kientran.herokuapp.com/
2. Login with email: [email protected] - pass: 123456
3. The website will navigate to user dashboard

1. Router
   • routes/web.php
2. Support class
   • app/Charts/UserChart.php
   • app/Helpers/helpers.php
3. Controller
   • app/Http/Controllers/User/UserDashboardController.php
4. Model
   • app/Post.php
   • app/Comment.php
   • app/PostView.php
   • app/Rating.php
5. View
   • resources/views/user/dashboard.blade.php

• Laravel Security
• Laravel Route
• Eloquent Model, Model Relationship, Query
• Laravel View
• consoletvs/charts plugin

The list page present different kind of posts of current user.

1. Draft Post: The post is created but has not published.
2. Pending Post: The post is published and waiting for approval for publishing
3. Public Post: The post is visible to all member of system
4. Closed Post: The post is set as private which can only view by post owner.

The user can only view those information after login

1. Go to http://kientran.herokuapp.com/
2. Login with email: [email protected] - pass: 123456
3. On the slide menu bar, select appropriate menu for each type of post.

1. Router
   • routes/web.php
2. Support class
   • app/Helpers/helpers.php
3. Controller
   • app/Http/Controllers/User/MyPostController.php
4. Model
   • app/Post.php
   • app/Comment.php
   • app/Favorite.php
   • app/PostView.php
   • app/Rating.php
5. View
   • resources/views/user/post-list.blade.php

• Laravel Security
• Laravel Route
• Eloquent Model, Model Relationship, Query
• Laravel View
• Bootstrap css

Create several api endpoint which allow mobile application can access post information

• Retrieve a list of different type of post such as public, pending, closed, draft and favorite.
• Retrieve the post detail information
• Retrieve list of image belong to a post
• Retrieve the post attribute key-value pair
• Retrieve the rating of post
• Retrieve all comments of the post
• Retrieve post' viewing information
• Retrieve statistic information related to all post of current user.
• Change the status of a post
• Add comment to a post
• Rating for a post
• Add a view to a post when a user view the post detail.

The API endpoint is secure by using Laravel Passport. User from mobile app must login to the system through provided login route in order to receive api token. For each request to the api, the user have to add the token to header of request in other to authenticated by backend.

1. Install Postman Rest Tool
2. Create a post request to http://kientran.herokuapp.com/api/login
3. The request body must include two key-value pare as followiing
   • email : [email protected]
   • password: 123456
4. Send the request and get the [api token] in response
5. In subsequence post/get request, include following key-value pairs as follow
   • Accept : application/json
   • Authorization: Bear [api token]

1. Router
   • routes/api.php
2. Support class
   • app/Helpers/helpers.php
3. Controller
   • app/Http/Controllers/Auth/ApiLoginController.php
   • app/Http/Controllers/Api/DashboardController.php
   • app/Http/Controllers/Api/PostApiController.php
4. Model
   • app/Post.php
   • app/Comment.php
   • app/Favorite.php
   • app/PostView.php
   • app/Rating.php
   • app/PostDetail.php
   • app/Image.php
   • app/User.php
5. Resources
   • app/Http/Resources/CommentResource.php
   • app/Http/Resources/ImageResource.php
   • app/Http/Resources/PostCollection.php
   • app/Http/Resources/PostDetailResource.php
   • app/Http/Resources/PostResource.php
   • app/Http/Resources/UserProfileResource.php
6. View
   • Mobile Client

• Laravel Security using Passport to secure API
• Laravel API authentication middelware
• Laravel Route
• Eloquent Model, Model Relationship, Query
• Eloquent composite keys relationship using awobaz/compoships plugin
• Laravel API handling
• Laravel API Resource transformation

Following is step to setup project on local environment:

1. Install Composer : https://getcomposer.org/ .
   Run following comment to make sure you have composer in your environment. Please pay attention on version .
   composer -v .
   Composer version 1.9.0 2019-08-02 20:55:32 .

2. Install NodeJS: https://nodejs.org/en/ .

   • Check version by command node -v
v12.11.1
   • Check laravel is installed by command laravel .
     Laravel Installer 2.1.0

3. Clone the project to a local folder (ex: C:\Project): https://github.com/2019-fall-ite-5330-0na/project-user-interface-sharesquare.git

4. Use command line to go to C:\Project folder cd C:\Project

5. Install Composer Dependencies: composer install

6. Install NPM Dependencies: npm install

7. Generate an app encryption key: php artisan key:generate

8. Create an empty database for our application in MYSQL Database: ex: project

9. In the .env file, Edit database information to connect to the database according to your database configuration. You can file .env file in the project root folder .

   • DB_CONNECTION=mysql
   • DB_HOST=127.0.0.1
   • DB_PORT=3306
   • DB_DATABASE=project
   • DB_USERNAME=root
   • DB_PASSWORD=root

10. Migrate the database: It means create database table in your database based on migrate feature of laravel

• In project folder, run command: php artisan migrate

11. Add dummy data to database:

• In project folder, run command: php artisan db:seed

12. Run the project

• In project folder, run command: php artisan serve

13. Access the website: http://127.0.0.1:8000
14. Access the admin page: http://127.0.0.1:8000/admin (email: [email protected]/pass: password)
15. Enjoy :)

We are working in the project where serveral members will coding and commit contemporarily. As the result, code conflict will happen and one member might overide the code of other member when he commit if we don't have a process of how we commit code to github. Fortunately, github gives us the feature to handle it. Please strickly compliance with following process when working in the project

1. Go to github website of our repository. Create a new branch from the master branch and named with your task name.
2. Go to local environment, pull the repository
3. Switch to your new created branch
4. Coding for your task in your branch
5. Before commit your code: merge the master branch to your branch then test whether your code work normally
6. Commit code to your branch
7. Push the code to github repository
8. Go to github website to create a pull request to merge your branch to the master branch.
9. Assign the pull request to other member of the team for review and merge code.
10. To reviewer, please review the code then -> merge master branch to the branch being merged by the pull request. If there is any conflict, please ask member who created the pull request to resolve the conflict. If there is not any conflict, please merge the pull request.