Contact Book - Combined

Warning

This assignment is only for students enrolled in Server-Side Web Development and Web Applications and are choosing to do the combined version of the Contact Book assignment.

Objective

Use what you learned about React, React Router, and Laravel to create a contact book web application, which allows a user to see and search through all contacts, add new contacts, and edit and delete existing contacts.

Project Setup

1. Clone the Repository

Clone this repository from GitHub and use the provided file to complete the assignment.

NOTE

If you are using Valet, save your repository in the Sites directory

NOTE

If you are using Laragon, save your repository in the {laragon}/www directory.

2. Create a Database

To create a database using phpMyAdmin, complete the following instructions.

1. Open phpMyAdmin at http://phpmyadmin.test (macOS) or http://localhost/phpmyadmin (Windows)
2. Log in to phpMyAdmin using the root username and password
3. Click the Databases tab
4. In the Create database form, enter contact_book for the database name.
5. Click the Create button

3. Install Laravel Dependencies

Install Laravel dependencies using composer

Using the terminal, navigate to the cloned repository directory and enter the following command:

composer install

4. Create Environment File

In the project, find the .env.example file. Rename the file to be .env. Update the .env file to point to the contact_book database.

Save the file.

5. Generate Key

Using the terminal, enter the following command:

php artisan key:generate

6. Test the site

In the browser, go to: http://contact-book-username.test

NOTE

If you are using Laragon, you will need to click the reload button in the Laragon window. This should automatically create a friendly URL for your Laravel project.

NOTE

If you are using Laragon and your friendly URL is not working, the following solution may work for you.

In the Laragon window, go to Menu > Apache > sites-enabled > your current laravel site

This will open a file in Notes++. From there, you will need to changes two lines, the DocumentRoot (line 2) and the <Directory> (line 5). In both lines, update the URL to include /public/ at the end.

7. Run the Migration Files

Use the provided migration files to create the database tables for the project.

In the terminal, enter the following command:

php artisan migrate

While this will create several tables, only the contacts table will be used.

8. Create Models and Controllers

A Model and Controller will need to be created for the new table added in the previous step.

To create a Model and Controller, run the following command:

php artisan make:model Contact -c

9. Setup React

A Vite project has been pre-installed into the repository and can be found in the frontend directory. The project only includes a base Vite project for React. So additional libraries, like React Router and Bootstrap, will need to be installed.

To install the dependencies and complete the setup of Vite, run the following command:

cd frontend
npm run install

To install React Router, run the following command:

npm install react-router-dom

To install Bootstrap, run the following command:

npm install bootstrap

10. Start Vite Server

During development, React and Laravel will run on different servers, and the Vite server will need to be started manually.

To start the Vite server, run the following command:

npm run dev

Requirements

1. Create a contact book web application that uses the React framework and the React Router extension for the frontend using the Laravel Framework and a MySQL database as a RESTful API.
2. On the contact book's start view, contacts should be displayed alphabetically by the last name.
3. A search box should be available to filter contacts by their first and last name.
4. Clicking on a contact's name should display the contact's details view. The view should display all the information about the contact.
5. A new contact form should be available. Submitting the form should create a new contact in the web application and the MySQL database. When the operation is complete, the application should display the contact's details view.
6. An edit contact form should be available. Submitting the form should update a contact in the web application and the MySQL database. When the operation is complete, the application should display the contact's details view.
7. A delete contact button should be available. Clicking the button should remove the contact in the web application and the MySQL database. When the operation is complete, the application should display the contact book's start view.
8. The contact book application should be intuitive and easy to use and visually appealing. Students may use any open-source framework or library to assist in the UI of the application.

Rubric

Criteria	Pts
Successfully display contacts alphabetically by last name	5
Successfully implement search functionality	5
Successfully display a contact's details when contact's name is clicked	5
Successfully adds a new contact when the new contact form is submitted	5
Successfully updates a contact when the edit contact form is submitted	5
Successfully remove a contact when the delete button is clicked	5
Successfully implements React Router	5
Provides an appealing and intuitive user experience	15
Total	50