semi project is an introductory course that introduces us to the basic services needed to host manage and access a secure website you will learn about back end and front end technology
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (4.89 MB, 66 trang )
<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">
<b> ASSIGNMENT 1 FRONT SHEET</b>
<b>Unit number and title</b>
</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">1
</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3"><b>❒</b>
<b>Summative Feedback: </b><b>❒</b>
<b>Resubmission Feedback:</b><b>Signature & Date:</b>
</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">2
</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">1.3 Use case Diagram... 8
II. System Designs... 16
1. Site Map... 16
1. Entity Relationship Diagram (ERD)... 17
III. Wireframes and specific explanation... 19
IV. About of website... 29
</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">3
</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">Table of Figure
Figure 1:use case... 9
Figure 2:erd 1... 20
Figure 3:erd 2... 20
Figure 4:home page 1... 22
Figure 5:home page 2... 23
Figure 6:sign in... 24
Figure 7:sign up... 26
Figure 8:car rentals 1... 26
Figure 9:car rentals 2... 27
Figure 10:attraction 1... 28
Figure 11:attraction 2... 29
Figure 12:airport taxis... 30
Figure 13:home page... 31
</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">4
</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">A. Introduction
Semi-Project is an introductory course that introduces us to the basic services needed to host, manage, and access a secure website. You will learn about back-end and front-end technology. This is my personal report. The following report will include the following sections:
+ User requirements+ System design+ Perform.
</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">5
</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">B. Body of ReportI. User Requirements.1.1 Functional Requirements
- These are the functional requirements that our website must meet the needs of users:
+ Reservation function: The website allows customers to make hotel reservations easily and conveniently. Usershave the ability to search and view detailed information about hotels, including prices, amenities, reviews and reviews from past customers.
+ Order management: Booking.com has the function of recording and storing information about customer orders. The web application can store details of check-in date, check-out date, number of guests, contact information and other special requests of the customer.
+ Safe and convenient payment: Booking.com provides a safe and convenient way to pay customers. The site supports various payment methods, including credit cards, bank transfers, and other popular online payment services.
+ Booking Confirmation and Receipt: After the customer completes the booking process, the web application will provide a detailed booking confirmation, including information about the customer, check-in date, check-out date, room type booked, total cost and selected payment method. In addition, the app also provides
</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">6
</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">detailed receipts to customers, including the customer's name, list of ordered items, the cost of each item, and the total payment amount.
+ Transaction Statistics: Booking.com should provide weekly, monthly, and yearly transaction statistics. This allows management to see total bookings, revenue, and other related metrics for specific time periods.+ Customer support: Booking.com provides a customer support channel to deal with issues, questions, or
complaints from customers. The direct contact function or online support will help customers interact and receive quick support from the customer care team.
- Here are some necessary and pragmatic cases for our Booking.com website:
+ When a customer makes a reservation, their booking information will be recorded using our web application. This includes information on check-in, check-out dates, number of guests, contact information and other special requests.
+ Our web application is capable of handling customer communication efficiently and quickly. This ensures that any changes, adjustments or cancellations are handled accurately and in a timely manner.
+ Once the customer completes the payment, the website will provide a detailed receipt to the customer. This receipt should include the customer's name, a list of items purchased, the total cost of each item, and the total amount paid.
+ Our website will provide transaction statistics by week, month, and year. This helps management track revenue, total bookings, and other important metrics to analyze and evaluate business performance.1.2 Non-Functional Requirements.
+ Performance: The system needs to meet performance requirements, including fast page load times, handling
</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">user requests quickly, and responding to multiple users at once without interruption.
7
</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">+ Security: The system must comply with high security standards to protect customers' personal information, ensure transaction safety and prevent unauthorized access.
+ Scalability: Booking.com needs to be able to scale the system to accommodate the increased user load and scale the business in the future without compromising on performance.
+ User Interface: The interface of Booking.com websites and applications should have a user-friendly, use and intuitive design that helps users find information and perform operations easily and conveniently.
</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">easy-to-8
</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17"><b>1.3 Use case Diagram</b>
<small>Figure 1:use case</small>
a. UC01 (Login)
</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">9
</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">Name Login Code UC01
Description Allow actor login to the system
Pre−condition The actor has an account
Post condition Go to the homepage with the corresponding role
Main Flow: login successfully
From any screen, the actor selects Login
Load page Login
Enter the required information.
</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">10
</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">Validation input information
Edit (if a wrong password or username).
Load the main page
b. UC02 (Register)
Description Actor provides information to create an account to access the system
Pre−condition The actor has an account
Post condition Register successfully!
</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">11
</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">Main Flow: add new user successfullyFrom any screen, the actor selects Register
Load page Register
Enter the required information.
Validation input informationEdit (if a wrong password or username).
Load the main page
c. UC03 (Logout)
Description Actor stops accessing the system.
</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">12
</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">Actor User/admin Trigger Actor click button [log out] on the main page
Pre-condition User has logged in accountPost condition Logout successfully!
Main Flow: login successfully
From any screen, the actor selects Logout
Load the main page
</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">13
</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">d. UC04 (Search)
Description This use case describes the process of searching for booking options on the booking website. Users can enter search criteria such as location, check-in date, and check-out date to find suitable hotels or accommodations based on their needs.
Pre-condition The booking website has been loaded.
Post condition The user is presented with a list of available options matching the search criteria.
Main Flow:
</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">14
</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">User enters search criteria, such as location, check-indate, and check-out date.
User submits the search request.
System validates the search criteria.System retrieves and presents a list of available options based on the search criteria.User reviews the list of available options.
User selects a desired option from the list.
System displays detailed information about the selected option.
e. UC05 (Booking)
Description This use case describes the process of making a reservation on the booking website. Users can select a hotel, choose a room, provide reservation details, and complete the booking process.
</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30">15
</div><span class="text_page_counter">Trang 31</span><div class="page_container" data-page="31">Pre-condition The booking website has been loaded.
Post condition The user successfully makes a reservation and receives a confirmation.
Main Flow:
User searches for hotels by entering search criteria such as location, check-in date, and check-out date. User selects a desired hotel from the search results.
User chooses a specific room type or package from the hotel's available options.
User provides reservation details, including guest names, payment information, and any special requests.User reviews the reservation details and confirms the booking.
System processes the reservation and generates a confirmation.
System displays the reservation confirmation to the user.
</div><span class="text_page_counter">Trang 32</span><div class="page_container" data-page="32">16
</div><span class="text_page_counter">Trang 33</span><div class="page_container" data-page="33">II. System Designs1. Site Map
A sitemap is an outline for your site that helps web search tools in finding, slithering, and ordering the totality of your material. Sitemaps additionally illuminate web crawlers about the most fundamental pages on your site.
</div><span class="text_page_counter">Trang 34</span><div class="page_container" data-page="34">17
</div><span class="text_page_counter">Trang 35</span><div class="page_container" data-page="35">1. Entity Relationship Diagram (ERD).
</div><span class="text_page_counter">Trang 36</span><div class="page_container" data-page="36">18
</div><span class="text_page_counter">Trang 39</span><div class="page_container" data-page="39"><small>Figure 3:erd 2</small>
III. Wireframes and specific explanation
Wireframing is a procedure for planning a site's construction. A wireframe is a graph that shows how data and usefulness on a site ought to be laid up, thinking about client requests and excursions.
- From the get-go in the improvement cycle, wireframes are utilized to assemble the key structure of a page before visual plan and content are added.
</div><span class="text_page_counter">Trang 40</span><div class="page_container" data-page="40">20
</div><span class="text_page_counter">Trang 41</span><div class="page_container" data-page="41">- A wireframe is a website page design that shows what interface parts will be available on significant pages. It's a significant stage in the interface configuration process.
- A wireframe's motivation is to make a visual portrayal of a page from the get-go in a venture so partners and task colleagues might endorse it before the innovative flow starts.
Our website is carefully wireframed with a clear and detailed plan that includes the following pages:Home page
</div><span class="text_page_counter">Trang 42</span><div class="page_container" data-page="42">21
</div><span class="text_page_counter">Trang 44</span><div class="page_container" data-page="44">22
</div><span class="text_page_counter">Trang 45</span><div class="page_container" data-page="45">Sign in page
</div><span class="text_page_counter">Trang 46</span><div class="page_container" data-page="46">23
</div><span class="text_page_counter">Trang 47</span><div class="page_container" data-page="47">Sign up page
</div><span class="text_page_counter">Trang 48</span><div class="page_container" data-page="48">24
</div><span class="text_page_counter">Trang 51</span><div class="page_container" data-page="51">Car rentals page
</div><span class="text_page_counter">Trang 52</span><div class="page_container" data-page="52">26
</div><span class="text_page_counter">Trang 53</span><div class="page_container" data-page="53">Attraction page
</div><span class="text_page_counter">Trang 54</span><div class="page_container" data-page="54">27
</div><span class="text_page_counter">Trang 56</span><div class="page_container" data-page="56">28
</div><span class="text_page_counter">Trang 58</span><div class="page_container" data-page="58">29
</div><span class="text_page_counter">Trang 59</span><div class="page_container" data-page="59">Airport taxis page
</div><span class="text_page_counter">Trang 60</span><div class="page_container" data-page="60">30
</div><span class="text_page_counter">Trang 61</span><div class="page_container" data-page="61">IV. About of website
Booking is the name of my website - an online hotel booking website. If people are busy and do not have time to go to the hotel to make a reservation, they can go to this website to book a room. In addition, the website also allows you to hire a taxi or rent acar to visit the city.
</div><span class="text_page_counter">Trang 62</span><div class="page_container" data-page="62">31
</div><span class="text_page_counter">Trang 64</span><div class="page_container" data-page="64">32
</div><span class="text_page_counter">Trang 65</span><div class="page_container" data-page="65">C. Conclusion
After completing this report, I sketched the website design using a wireframe tool with full features to meet the requirements of users and customers. After the sketch, I proceed to design the website with my brand. In addition, I learned more front-end and back-end, functional and non-functional requirements. I have scheduled a test to determine speed and use it to review your website functionality.
</div><span class="text_page_counter">Trang 66</span><div class="page_container" data-page="66">33
</div>
