Website Building

Here is the project we were talking about. Start by reading the document called Final Project. You are going to design a website, choice of your own. Instructions are in the document in more details. There are 2 check points. I need the Checkpoint 1 by March 30th. The rest, checkpoint 2 and the project itself, i need by the deadline set for this post. Thank you very much and good luck.

REMEMBER! I NEED THE CHECKPOINT 1 BY MARCH 30TH!!!

MARCH 30TH CHECKPOINT 1 IS DUE!!!

Check-Point 1 – Final Project CSIT 337 Spring 2024
Check Point 1
Prepare a document (Word or pdf) that include the following
1. The team name, ALL team members’ names, and name of team leader.
2. The name of your web site
3. The purpose, motivation, and description of your web site
4. Describe meeting plan of how, where, and when your team meets.
5. The draft layout of your web sites (site map), or diagram like MVC diagram, to show all the
components of your web pages.
6. Description of how many front pages (Views: These pages that interact with users), and their
purposes. What technologies will be used for these views (JavaScript, Bootstrap, CSS, xml, or
just pure HTML, etc.)
7. Wireframes screen shots that describe your View pages.
You can use any editing tool like Paint, MS Word to draw your View pages.
You may use hand drawing but this is not recommended (try be professional) and you will
lost points if you do.
Here are some useful links and software you may download in order to create UX wire
frames easily.
a. Difference between UI and wireframe
https://www.quora.com/What-is-the-difference-between-UI-and-wireframe
b. free wireframe tools
https://www.mockplus.com/blog/post/free-quick-wireframe-tools
https://www.creativebloq.com/wireframes/top-wireframing-tools-11121302/2
c. Mockflow
https://www.mockflow.com/pricing/
d. Frame box
http://framebox.org/
e. Pencil Project (free wireframe tool)
http://pencil.evolus.vn/Default.html
f. Pencil project youtube demo among many others

If you use software to create your wireframes, then make sure you copy screen shots of those
wireframes and copy to Word file (or pdf file). Do not submit the wireframe files generated from
wireframe tools. Just need to show roughly how your web pages look like. You can even use
Paint program to draw the layout of your pages and copy to the Word file. Or simply draw on
Word program.
What to submit:
A Word or pdf document contains the above items.
Who should submit: Only the team leader is responsible to submit the required
document. I.e., one team one submission.
Where to submit:
Canvas
When to submit:
3/31/2024 before midnight
Check point 2 – Final Project CSIT 337 Spring 2024
Check Point 2
Model and Controller design
Prepare a Word document which contains the following components.
1. List ALL team members’ names
2. How many server side PHP scripts and functions if there are any (you can estimate based on
your design)? For each php file state the file name, its purpose or functionality, and which
page(s) or components it related to. If a php file contains functions then describe the
functionality of each function in this file. (organize all scripts using a Word table is
recommended )
3. Database layout: Database tables and their attributes. Includes table name, column name
and type, primary key etc. Similar to the sql file of my_guitar_shop1.sql will do. Use of a
Word table to illustrate the structures of tables is even better.
What to submit:
A Word or pdf document contains the above items.
Who should submit: Only the team leader is responsible to submit the required
document. I.e., one team one submission.
Where to submit:
Canvas
When to submit:
4/21/2024 before midnight
Final Project CSIT 337 Spring 2024
Team Project
In this project, you will design a fully functional web site. You shall choose your own web site
application.
For example, you might want to do the following among many others:
(1) Design an online e-store to allow customers to do online shopping.
(2) Develop on-line services such as on-line banking system that allow user to do online
transaction.
(3) Develop an online conference registration system.
(4) Develop an online learning system.
(5) Design an online homework handling system like Canvas but in small scale.
(6) Provide online services that require intelligent component such as an expert system
inference engine to help customers’ needs in various applications. For instance, financial
application system which provide an online expert to help investors to allocate money to
various investments.
(7) A MSU social network that link MSU students together, a small scale Facebook
(8) A question-and-answer site for CS student to exchange solutions and ideas on various CS
related topics
(9) A price comparison web site that help users to choose the best quality but reasonable price
on various products
(10) Others that are related to web site design.
Let you instructor know about what your topic is on Check Point 1 due date. Use MVC pattern to
design your web site is encouraged. Use the skills you have acquired so far to develop your web
site.
For the front-end user interface, you can use JavaScript, cascade style sheet, HTM, and Bootstrap.
For the middle tier, you will use PHP. For the back-end data processes, use MySQL as the database
server. For web server, use XAMPP’s Apache. Your project shall be able to be deployed to XAMPP
and can run without any compatible problem. Go to internet to download XAMPP. XAMPP can be
used on both Mac and Windows. It contains Apache web server, and MySql Database server. Make
sure it is portable and make sure all the links you use are relative links and not link to cloud or your
computer folder. It may be connected to some other sites though. For example, if you use images
which are on other web sites. It is recommended to put all images your website use on your own
web site.
The project requires team-work of at least two people and at most four people. Although work as a
team is highly recommended but no more than four people can be in a team. A final written report
is required in order to pass the project. To work alone is discouraged. Talk to your instructor if you
definitively need to work alone due to any hardship.
Notes
1. For copyright concern, you should develop your own web site. Do not copy web site from
the Internet like GitHub. Do not use web site that was designed by you at your work (for it
is copy-righted also). Failure to observe the copy-right issue may fail your grade. Please
direct any comment to your instructor.
2. Implement web pages for general users as well as web pages for administrator. An admin
can login into the system to perform administration work, depends on your application, an
admin can delete an account, remove user, or add new product, delete a product, modify
price, etc.).
3.
Do not use absolute URL path when forwarding unless connect to web pages of other web
sites.
4. There are two check points. The details will be handout separately
Final Project Submission
A. Final project report (a pdf file or word file)
It contains the following
A final report shall contain the following (follow the order; start a new page for each item.)
1. A Title page. Title page must contain the name of the project (website) and name of the
team, and leader of the team, and the names of members of the team. List section number
of each member. If co-leader then list all leaders’ names.
2. Team meeting logs: list how, where, who, and when you meet and describe of meeting
content includes any action item names and status (what). Team leader is responsible to
keep track of all activities and action task status.
3. Contribution sheet: it is a page that describes the contribution of each team members (what
has been done by whom) on this project and the effort percentages. Team leader can include
contribution such as organize meeting, and keep tracking progress etc.
4. A Project summary page that includes project mission statement (the description and
purpose of the project). Can include some Check Point One content here.
5. The Table of content.
6. The UI/UX wireframes. Your original sketch design of all views. You can copy and paste
views of your Check Point One stuff here.
7. User manual. Document that describe the features and how to use your web site.
8. All the programs Source code files (copy and paste here, can skip if your source code files
are too large). If skip, simply say “See attachment”
9. Database schema page.
a. Show structures of your tables of your database – diagrams or tables can do.
b. Copy and paste SQL script file content here.
c. Don’t forget to create a user account and grant necessary privileges so that this
user can access your database in this SQL script file. This user and its password
are used to create PDO in your php source code. Don’t use root user in your
program.
10. Thoroughly test run of your web site. Copy and paste all your test run screen shots, as detail
as possible, to this report. These screen shots will be used as one of the methods to evaluate
the complexity of your web site.
11. A link to your website demonstration video on YouTube. It includes the presentation of
your power point slides and demo of your web site.
B. Zipped folder file which contains all resources of your web site (a .zip file)
Put your web site under a folder of your teamName or yourNname. For example, if your name
is John Smith then put all your program files and all subfolders if there are any into
JohnSmithProjectSource folder. If your team name is called Morning Coffee and then create a
MorningCoffeeProjectSource folder and put all files inside it. Name the default web page of
your site index.php. Put all HTML, CSS, JavaScript, and PHP files, image files, and database
sql file into this folder. Zip this folder into a zipped file
C. PowerPoint slides (ppt or pptx file)
In your power point slides. The slides should contain
• Name of web site and its purpose. The tem members’ names
• List the technologies used (css, html, php, JavaScript, MySql database, etc) to
develop this web site.
• Include the web site architecture which describe how pages are related and interact
with one another.
• List your web site features which are working and key screen shots
•
•
•
List the features that still working on it or did not finish.
What can be improved in the future if give more time.
For partially working website, noted here as well. Partially working website will
receive partial credit.
It is about 15 or more slides, it depends on how complicated your web site is.
D. YouTube Video information page (a pdf or word file)
Create a video that demos your web site. Upload it to YouTube (required). Prepare a one-page
document, and put the YouTube link information and each team members’ names and section
number on it and submit this document to Canvas. You can use zoom or other online tools to
create this video.
Note on your final report to Canvas shall include video link information as well. Submission
of the video file to Canvas along with the final report is optional.
Grading Criteria
•
•
•
•
•
•
•
•
•
Submit all required documents and program files according to the specification
Quality of documents and program files
Components of your project shall include skills you learned from this class: HTML5, CSS,
Javascript, MySql database, PHP scripts. Note use of Bootstrap is considered as using CSS
and JavaScript.
Use of PDO when connect to database.
Overall appearance of your web site.
Successful of developing of the web site (is a working web site; partial credit will be given
to partially worked web site)
PowerPoint slides and video presentation
Peer evaluation
Complexity of your web site: business logic, number of program pages, features of the web
site, etc.
Requirements
Use PHP as server side script language
Use MySql as backend database
Use HTML, CSS, Bootstrap, and JavaScript if needed
Documents of your project
Comment on your code
Prepare a folder and call it YourNameFinalProject which contains Items A, B, C, and D
mentioned above. Zip YourNameFinalProject into YourNameFinalProject.zip
What to submit:
YourNameFinalProject.zip
Who should submit: Only the team leader is responsible to submit the required
zipped file. I.e., one team one submission.
Where to submit:
Canvas
When to submit:
5/5/2024 before midnight