Hello, if you have any need, please feel free to consult us, this is my wechat: wx91due
Project 1. Dynamic Website
Requirements:
You are required to construct a personal dynamic web site with using PHP, MySQL, CSS, JavaScript, cookies, sessions, and authentication. This project will help you understand how to build a full-stack web application and integrate various technologies. The purpose of this web site is to share GPS tracks, photos, and videos with your friends about your trip to provide a rich user experience. For example, you may tell your trip in the web site using digital map.
Objectives
1. Learn how to use PHP for server-side scripting.
2. Understand how to interact with a MySQL database.
3. Implement user authentication (registration and login).
4. Utilize cookies and sessions for state management.
5. Style your application using CSS and JavaScript for interactivity.
Part 1: Trip Data Collection
Using GPS software and trip organizer provided to record your activities of your local/foreign trip for your leisure. The requirements of input data are attached in Appendix. Moreover, a manual diary log book is provided to fill in the information of your activities in your trip. In your trip, travel activities including “Start Point”, “End Point” and transportation are included in your trip. A questionnaire is also provided to finish after the trip.
Part 1A. Inbound Trip:
Ask your friends or relatives to install Trip tracking software and record one or more than one inbound trip (start recording the track outside of Macau, go in Macau for travel. Stop recording tracks after leaving Macau). Take some photos using mobile phone.
Part 1B. Outbound Trip:
Ask your friends or relatives to install Trip tracking software and record one or more than one outbound trip (start recording the track before leaving Macau, go out of Macau for travel (e.g. Hong Kong, Mainland China or Taiwan). Stop recording tracks after leaving Macau). Take some photos using mobile phone during the trips.
Mobile App:
Open GPX Tracker - The GPS-Logger (iphone)
https://www.youtube.com/shorts/dcytRsdtKgc
myTracks - The GPS-Logger (iphone)
Geocorder (iphone),
户外追踪 (android) http://shouji.baidu.com/software/10908.html
My track (android – google play), (Delete)
我的足迹 (android for mobile phone in China)2
http://apk.hiapk.com/html/2013/03/1272603.html?module=256&info=N2IWWbON% 2BY8%3D
gps 定 位 户 外 足 迹
http://apk.hiapk.com/html/2013/06/1560675.html?module=256&info=ZwBwAHMA
OSMTracker (android)
Install https://f-droid.org/packages/net.osmtracker/
https://www.youtube.com/watch?v=8GSEhx9AQnQ
https://www.youtube.com/watch?v=37-lilNEyOU
*** All above do not need to use data services. Please ensure SWITCHING OFF
roaming data services.
Part 2: Procedures of Creating Dynamic Webpage
You may follow the following procedures:
1. Decide a title for the web site.
2. Consider the content of the web site.
3. Collect the information, such as, photos, music, content text, etc.
4. Plan the web site structure. (structure of the content)
5. Plan the organization structure. (structure of the files)
6. Design layout plan for each page.
7. Edit the web pages using Dreamweaver and test the local web site.
8. Upload the web site to the MPU server. (I:\Terence\ Business Computing with Internet Applications\COMP2140-xxxxx\Project1)
Project Description
You will develop a Trip Journey Sharing application that allows users to register, log in, and share their travel experiences, including GPS tracks, photos, and videos. Users will be able to create, view, update, and delete their journey posts.
Requirements
1. Setup (MySQL Chapters 2, 8-9)
• Create a MySQL database named trip_journey.
• Design the following tables:
o users: to store user information (id, username, password, email).
o journeys: to store journey posts (id, user_id, title, description, created_at).
o media: to store media files associated with journeys (id, journey_id, type, file_path).
2. User Registration (Form Handling, Chapters 12 - 13)
• Create a registration form that allows users to sign up.• Validate user inputs (username, password, email) on both client and server sides.
• Store user information securely (use password hashing).
3. User Authentication (Authentication, Chapters 13)
• Implement a login form for users to access their accounts.
• Validate credentials against the database.
• Use sessions to maintain the logged-in state across different pages.
4. Journey Management (PHP & MySQL, Chapters 3-7, 8-9)
• Create a dashboard displaying all journeys posted by the logged-in user.
• Implement CRUD (Create, Read, Update, Delete) functionalities for journeys:
o Allow users to create new journey posts with title, description, and associated media files (GPS tracks, photos, videos).
o Use a form to upload GPS track files (in GPX format), photos, and videos.
o Display all journey posts in a user-friendly format, possibly on an interactive map (using a library like Leaflet.js or Google Maps API).
5. Media Management (PHP, Chapters 3-7)
• Allow users to upload multiple media files (photos and videos) associated with each journey.
• Store uploaded files securely and display them in the journey details.
• Implement a way to show GPS tracks on a digital map.
6. Cookies and Sessions (Cookies and Sessions, Chapters 13)
• Use cookies to remember user preferences (e.g., preferred layout or display settings).
• Use sessions to keep users logged in while they navigate through the site.
7. User Interaction (Javascript, Chapters 14-17)
• Implement features for users to comment on each other's journeys.
• Allow users to like or bookmark journeys they find interesting.
8. Frontend Design (Javascript, Chapters 14-17)
• Style your application using CSS for a visually appealing layout.
• Use JavaScript for client-side validation and enhancing user interactions (e.g., dynamic updates).
Additional Requirements:
1. Your web site must include some elements created using HTML5 and PHP 8 (e.g. video and Audio).
2. Your web site must contain at least 6 web pages. If a photo album is used, the album will only be counted as one page.
3. To prove the originality of the materials, additional information/evidence may be required on case-by-case basis.
Bonus:
Bonus marks can be obtained as follows:
1. Additional functions of website not mentioned above. For example,
a. Games
b. Augmented Reality / Virtual Reality
c. Communication functions (similar to chat room in whatsapp/wechat)
d. Students can suggest some functions
The bonus mark of each additional function is 5 marks. All bonus marks are justified in acceptance of above offers in accordance with lecturer. Maximum bonus marks = 20.
Submission:
Part 1: Web site
1. Travel Data Set: Each student submits their own copy of the following (each student submit 2 trip information):
1a1. GPX / KML file
1a2. Manual Diary Log Book (xls file) & Fill “Latitude, Longitude, Elevation” in
Manual Diary Log Book
1a3. Questionnaire
2. All website pages and other coding with video / photos and so on.
2a. A folder containing all your project files (PHP scripts, CSS files, JavaScript files).
2b. A SQL file with the database schema and sample data. (upload to the MPU server I:\Terence\Business Computing with Internet
Applications\ COMP2140-xxxxx\Project\your_student_no), you are also required to archive the files of the web site.
Grading policy:
30%
Content for Part 1
10%
Content / Data of Website (Part 2)
20%
Functionality (Part 2)
20%
User Interface Design of Website (Part 2)
20%
Code Quality and Organization of Website (Part 2)
Date of Submission:
Part 1a GPX Submission: February 19
Final Submission: 26 March
Group:
Individual Assignment Appendix:
PHP varaibles
1. User Management
• registerUser($username, $password, $email): Registers a new user and stores their information securely in the database.
• loginUser($username, $password): Authenticates the user and starts a session.
• logoutUser(): Ends the user session and clears any session data.
• getUserInfo($userId): Retrieves user information for profile display.
2. Journey Management
• createJourney($userId, $title, $description): Creates a new journey entry in the database.
• updateJourney($journeyId, $title, $description): Updates an existing
journey entry.
• deleteJourney($journeyId): Deletes a journey entry from the database.
• getUserJourneys($userId): Retrieves all journeys posted by a specific user.
• getJourneyDetails($journeyId): Retrieves detailed information about a specific journey, including media files.
3. Media Management
• uploadMedia($journeyId, $mediaType, $filePath): Handles the upload of media files (photos, videos, GPS tracks) and stores their paths in the database.
• getMediaForJourney($journeyId): Retrieves all media files associated with a specific journey.
• deleteMedia($mediaId): Deletes a specific media file from the database and the server.
4. GPS Track Management
• parseGPXFile($filePath): Parses a GPX file to extract GPS track data for display on a map.
• getGPSDataForJourney($journeyId): Retrieves GPS track data associated with a specific journey.
5. User Interaction
• addComment($journeyId, $userId, $comment): Allows users to comment on journeys.
• getCommentsForJourney($journeyId): Retrieves all comments associated with a specific journey.
• likeJourney($journeyId, $userId): Allows users to like a journey.
• getLikesForJourney($journeyId): Retrieves the number of likes for a specific journey.
6. Cookies and Sessions
• setUserPreference($preferenceKey, $preferenceValue): Saves user
preferences in cookies.
• getUserPreference($preferenceKey): Retrieves user preferences from cookies.
Class Assignment
Objective:
You are required to do classwork using Dreamweaver. The purpose is to ensure the students know and apply dynamic website programming.
Tasks
Students should follow the instructions in the reference book of Dreamweaver and by the lecturer.
Date of Submission:
Students should submit this class assignment a week after the lecturer covers the particular chapters. Late submission is not acceptable.