VIETNAM NATIONNAL UNIVERSITY

INTERNATIONAL SCHOOL
------------

Topic: Directory Listing

SUBJECT : Multimedia design and Web development

Lecturer : Pham Duc Tho
Subject code : INS3064-01
Group H : Hà Vũ Đăng Huy – 20070727
Mai Thị Diệu Linh – 20070739

Hanoi, 2023
Table of Contents
1. Introduction .......................................................................................... 3
2. Problem Statement ............................................................................... 4
3. Brainstorm and research ...................................................................... 5
4. Describe the design process .................................................................. 6
5. Use-case:................................................................................................ 9
6. System Design: .................................................................................... 11
7. Implementation and testing ................................................................. 12
8.Conclusion ............................................................................................ 35
9. Appendix ............................................................................................. 35

2
 1. Introduction

In the dynamic and ever-expanding urban landscapes, cities are often characterized by their
diverse districts, each with a unique personality, culture, and a plethora of culinary and
leisure options. However, the sheer abundance of restaurants and hangout spots across
these districts can be both a blessing and a challenge for individuals seeking the perfect
place to dine or unwind. Navigating through the multitude of choices and discovering
hidden gems becomes a complex task, especially for newcomers or those looking to
explore areas beyond their familiar haunts.

Recognizing this need for guidance in the labyrinth of urban offerings, the idea of creating
a dedicated website to recommend the best restaurants and hangout places in each district
takes center stage. Such a platform aims to serve as a digital compass, providing users with
a curated guide to the city's diverse districts, highlighting the culinary delights and leisure
hotspots unique to each area.

Building this website not only simplifies the decision-making process but also adds a layer
of excitement and discovery to the exploration of the city. Locals can find new favorites in
their own districts, and visitors can venture beyond the well-trodden paths to discover the
city's hidden culinary and leisure treasures. The platform, by showcasing the diversity of
offerings across districts, becomes a bridge connecting people to the rich tapestry of
experiences that the city has to offer.

Objective:

The goal of this topic is to develop a website that serves as a comprehensive and reliable
platform for recommending restaurants and places to hang out in different districts of a
city. The aim is to provide users with a convenient and user-friendly resource that assists
them in making informed decisions about where to dine and spend their leisure time. The
website's objective is to offer a curated selection of establishments, presenting their key
features, customer reviews, and relevant information to help users make choices that align
with their preferences and needs. By providing accurate and up-to-date recommendations,
the goal is to enhance users' experiences by directing them to high-quality dining and
leisure options within each district. Ultimately, the goal of this topic is to create a valuable
online resource that supports users in discovering and exploring the best restaurants and
hangout spots in the city, fostering a positive and enjoyable urban lifestyle.

3
 2. Problem Statement

This project aims to address the challenges faced by those in search of the perfect coffee
hangout spot. Our goal is to create a comprehensive directory, or perhaps a dynamic
online platform, that caters to the diverse needs and preferences of individuals seeking
unique and fulfilling coffee chill-out experiences.

Key pain points we aim to address:

• Information overload: With a plethora of coffee shops available, sifting through
online searches and reviews can be time-consuming and frustrating. Users often
lack a centralized platform that aggregates and filters information based on
specific criteria.
• Lack of personalization: Current coffee shop listings rarely cater to individual.
• Preferences. Filtering options are often limited, failing to account for factors like
atmosphere, amenities (e.g., Wi-Fi, outdoor seating), price range, and even
specific coffee or food preferences.
• Limited discovery: Traditional listings tend to focus on established names and
popular chains, overlooking hidden gems and independent shops that offer unique
experiences.
• Dynamic information: Coffee shop hours, menus, and events can change
frequently. Existing platforms often lack real-time updates, leaving users with
outdated information and potential disappointment.

By tackling these challenges, we hope to empower coffee enthusiasts to discover their

perfect chill-out haven. Our platform/directory will serve as a valuable resource, offering
curated recommendations, personalized search options, and dynamic updates to ensure a
seamless and fulfilling coffee experience.

This project holds the potential to not only simplify coffee-shop exploration but also to
foster a vibrant community of coffee lovers, allowing them to connect, share their
experiences, and discover hidden gems across the city.

4
 3. Brainstorm and research

3.1. Brainstorming involves generating identifying goals and objectives for

building a website that recommends restaurants and places to hang out in different
districts of a city. Here are some potential goals and objectives:
• The goal is to create a user-friendly website with intuitive navigation and
search capabilities that allow users to quickly find recommendations based
on their preferences, location, or specific criteria.
• The website should aim to offer high-quality, curated recommendations,
ensuring that users have access to reliable and trusted information about
restaurants and hangout spots in each district.
• The goal is to improve users' dining and leisure experiences by directing
them to establishments that align with their preferences and needs. The
website should strive to offer personalized recommendations based on
factors such as cuisine type, price range, and ambiance.
• Encourage users to explore different districts within the city by
highlighting unique and diverse dining and hangout options. The objective
is to promote discovery and introduce users to new places they may not
have otherwise known about.
• The website should aim to foster user engagement by allowing them to
contribute through reviews, ratings, and recommendations. Encouraging
user-generated content can enhance the overall community experience and
provide additional insights for other users.

3.2. Research process is gathering information about the technology, tools, and
frameworks required to build the system:
• PHP: Hypertext Preprocessor is one of the popular programming languages in
the field of web development and is widely used in building dynamic websites
and web applications.
• Laravel is an open-source web application development framework built on the
PHP programming language.

5
4. Describe the design process

4.1. Design an Entity Relationship Diagram

Figure 1 – Entity Relationship Diagram

Figure 1 shows the entity-relationship diagram (ERD) for a website. This diagram
includes the following entities:
• User: User can be anyone who wants to access the website
• Account: An account is an entity used to identify a user.
• Post: Post is an entity used so users can post articles including titles, categories,
comments, images, ...
• Admin: Manager is the entity used to track data

The diagram also includes the following relationships between entities:

One-to-many relationship:
• A user can have multiple accounts and an account can belong to one user.
• A user can have many posts and a post can be created by one user.
• One manager can have many posts, create and edit many users and one post, 1
user can be created by many managers.

6
4.2. User Story

User Story:
• User - Find Places:
Users want to find places to eat or chill coffee so that I can discover new and interesting
establishments.
Acceptance Criteria:
- The website should have a search feature where I can enter my location or preferred
city.
- The search results should display a list of restaurants and coffee shops in the specified
location.
- The search results should include information such as the name, address, ratings, and
reviews of each establishment.
- Clicking on a search result should provide more detailed information about the
establishment, including photos, menu, and contact details.

• User - Share Experiences:

Users want to post and share their experiences about restaurants and coffee shops so
that I can help others make informed decisions.
Acceptance Criteria:
- I should be able to create a new post by providing a title, description, and optionally
attaching photos.
- When creating a post, I should be able to select the category or type of establishment I
am reviewing (e.g., restaurant, coffee shop).
- I should be able to rate the establishment and provide a detailed review of my
experience.
- My post should be visible to other users on the website, allowing them to read and
engage with it.
- I should be able to edit or delete my own posts if needed.

• Admin - Manage Users:

Admin wants to be able to manage users on the website to ensure the platform's
integrity and security.
Acceptance Criteria:
- The admin should have a dashboard or control panel where they can view and manage
user accounts.
- The admin should be able to view a list of all registered users, including their
usernames, email addresses, and account types.
- The admin should have the ability to delete user accounts if they violate the website's
terms of service or pose a security risk.
- The admin should be able to update user account information if necessary, such as
changing usernames or resetting passwords.

7
 • Admin - Manage Posts:
Admin want to have the authority to manage posts on the website to maintain content
quality and remove inappropriate or spammy content.
Acceptance Criteria:
- The admin should have access to a post management interface that displays all the
posts on the website.
- The admin should be able to view post details, including the title, description, author,
and date created.
- The admin should have the ability to delete posts that violate the website's content
guidelines or are deemed inappropriate.
- The admin should be able to update post information if necessary, such as correcting
errors or modifying categories.

These user stories highlight the main functionalities desired by the target users (users
and admins) in the context of a website where people can find places to eat or chill coffee,
share their experiences, and where admins can manage user accounts and posts.
Implementation of these user stories would enhance the overall user experience, facilitate
information sharing, and help maintain the website's quality and security.

8
5. Use-case:

5.1. List of objects

Objects Main function

1 User People who want to find places to eat or chill coffee and post to
share about their experiences
2 Admin Manager on the website, can delete or update users and posts,
confirm post
Table 1: List of objects

5.2. List of use-case

Use-case Main function

1 Log in Allow users to log in to the website.

The manager logs in to the management interface.

2 Create Post Users and admins can create posts.

Admin can view post information and approve post.

3 Update Post Allows administrators and user to edit information in the post.

4 Delete Allows managers to delete information in the post.

5 Confirm post Administrators have the authority to moderate and control the content
shared by users.

6 Add category Managers have the capability to add new categories for users.

7 Log out User and managers can log out of the system.

Table 2: List of use-case

9
5.3. Draw use-case diagrams

Figure 2 – User case diagram

10
6. System Design:

Site map

Figure 3 – Site map

Figure 3 shows the site map. This sitemap is divided into two main sections: Users and
Admin.
• The user section includes the following:
- Login: Users can log in to the website using their name and password.
- Edit profile: Logged-in users possess the ability to modify their profiles
through the "Edit Profile" feature.
- View all posts: The homepage exhibits posts that the administrator has
reviewed, and users can peruse these articles.
- Create post: Users have the capability to generate posts and make
modifications to their own posts.
• The management section includes the following items:
- Login: Restaurant managers can log in to the admin page using username
and password.
- Post management: Admin can censor all posts, edit or delete posts
- User management: Management can create, update and delete users.

11
 This sitemap offers a comprehensive outline of the website and its features. It serves
as a valuable resource for users seeking information about the website's functionality and
operation. Additionally, it aids restaurant managers in efficiently overseeing website-
related tasks.

7. Implementation and testing

7.1. Source code

USERS
• Create post
o Create route:

o Create controller in HomeController

12
13
 o Build a blade page to display necessary information so users can fill it
out

• View post (my post):

o Create route

14
o Create controller in Home Controller

15
o Build a blade file so users can view and observe data about their
posts:

16
• Delete post
o Create route

o Create controller in HomeController

o Create a blade file, because the DELETE function is placed inside the
view function to increase user convenience during use

• Update post
o Create route

17
o Create controller in HomeController

o Create a form so users can easily edit and see what they have filled
out

18
• Show blog post

19
 o Create a view file so users can see the content of all posts that have
been posted by other users and approved by admin

• Read more

20
o Create a view so users can see article details compared to the preview
window outside the home page

21
ADMIN
• Create post.
o Build model, database

22
o Use html commands to create forms that contain attributes that users
can see and enter

o Access the web.php file to create a link to the controller so you can
control functions and retrieve user data and logic.

23
 o Declare the file paths of the controllers that will be used in this file

o Returns the original html page

• View post
o Create route

24
o In file Admin Controller

25
• Delete post
o Create route

o Create a controller to handle logic

• Update post
o Create route

26
o Create a controller to handle logic

o Create a blade file to help users easily see and edit content

27
• ACCEPT/REJECT POST

Route

Accept/reject post

28
7.2. Interface

Upon accessing the website, users will encounter the homepage interface, featuring a set
of tools located at the top of the page. The homepage serves as the central hub from
which users can navigate through different sections, access key information, and utilize
the available tools to interact with the website's diverse offerings.

In order to gain access to the website's features and personalized content, individuals are
required to go through the process of creating an account. This involves providing
necessary information such as a unique username, password, and possibly additional
details to establish a user profile. The account creation step not only ensures a secure and
personalized experience for users but also opens up avenues for them to engage with
various functionalities offered on the website. This intentional registration process
enhances both the security.

29
Upon successfully establishing an account, users will proceed to log in to the website,
gaining access to the platform's features that include the ability to view and create posts.
This login step is essential for users to engage with the content-sharing functionalities,
allowing them to not only explore existing posts but also contribute to the platform by
creating and sharing their own content.

After logging in, the user will be returned to the home screen

30
To share a post, users can initiate the process by clicking on the "Create post" button. Following this
action, an interface will appear, providing users with the necessary tools to compose and publish their
posts. This includes options such as crafting a title, adding a comment, specifying a location, and
attaching accompanying photos. The user-friendly interface is designed to facilitate a seamless and
interactive experience, allowing individuals to easily articulate their experiences and contribute engaging
content to the platform.

31
After creating a post and being approved by the admin, the user's post will appear
here and the user can also view other users' posts.

32
Upon selecting the "Read more" option, users will be seamlessly transitioned to a
dedicated page where they can delve into a more in-depth exploration of the
article.

And this is the interface when logging into Admin

33
Administrators have the ability to access a comprehensive overview of all posts,
including detailed information about each individual post. This includes the option
to delete or edit posts, providing a robust content moderation mechanism.
Additionally, administrators possess the authority to either accept or reject posts,
enabling them to ensure that the content aligns with the platform's guidelines and
maintains a high standard of quality.

34
8.Conclusion

In conclusion, the endeavor to build a website dedicated to recommending restaurants

and hangout spots across diverse city districts emerges as a powerful tool for enhancing
urban exploration and fostering community connections. By simplifying the decision-
making process and offering curated insights into each establishment, the platform seeks
to empower individuals to discover the richness of their city's culinary and leisure
offerings. Moreover, the envisioned website holds the potential to transcend its practical
utility and become a dynamic community hub, where users can share experiences,
exchange tips, and collectively contribute to the vibrant tapestry of city life. In an era
where technology plays a pivotal role in shaping our experiences, this initiative becomes
a testament to the positive impact it can have on both individual exploration and
community engagement. As the digital platform evolves, it has the opportunity to
redefine how we connect with our urban environments, celebrating the diversity that
makes each district a unique and integral part of the city's cultural fabric.

9. Appendix

Member Student ID Role Contribute

20070727
Hà Vũ Đăng Huy Coding, Website programming 100%

20070739
Mai Thị Diệu Linh Database of this web, Report, Slide 100%

35