Powerpoint presenation and demo of working program
Fall 202 2 CIS 525 Date last modifie d: 202 2_12_06 FINAL PROJECT Implementation Your website should have at least the following functionality. Everything in HW8 + HW9 and: 1. Login/logout, Signup / Register, (CRUD) A. Create a new user (if username already exists, error message to user) a. User f orm validation. (email is correct f ormat), username , password, conf irm password b. If there are any errors, your program must highlight the error input and keep the correct inputs. You should not ask a user to “go back” to the previous page or input ev erything again. 2. Proper use of Web APIs (Front End, Back End, DB) – As stated in HW 9 3. Authentication and Authorization f or the API’s – if not logged in, but requires authentication, then do not display page, redirect instead. 4. (OPTIONAL) Use partial page reloading, Asynch (JS with f etch or f etch like properties ) A. When user selects a f ilter (a drop down box, etc.) another objects data should be f iltered but without a f ull page reload. 5. Use public API, look Google maps, etc (but must have at least Google Analytics *) Need to start collecting data asap. *Remember this will show data across time so you want to have at least a f ew weeks worth of data) – data may take up to 24 hours to pro cess. 6. Stale session (20 min, of inactivity), user logged out, (data is not saved) – but f or demo and testing purposes set to 10 secs. 7. (OPTIONAL) Password complexity implementation (check Upper -case, lowercase, at least one number, special symbol, at least 8 char in length) Highly recommended of two or more team members: 8. Inf inite scroll, web page pagination. Highly recommended of three or more team members : 9. Data Integrity (Proof when trying to create duplicate object that should be unique ) 10. Cookies conf irmation (this website uses cookies, proceed?) 11. Forgot password – (use security question and answer) -when creating a new user account. OPTIONAL 1. *two factor au th en tication 2. Use h ttps, or certificate 3. ADA 4. Support Mobile view 5. Dif f erent Permission level (certain webpages visible or certain CRUD) (optional) 6. Print – (Order or Comment -article if Blog) Fall 202 2 CIS 525 Date last modifie d: 202 2_12_06 PROJECT CHECKLIST: Page Layout – All pages – Good use of HTML/CSS/JS for the visual part – should be consistent look and feel. In total around 5 to 8 web pages, use Navigation with Links 1. Home (landing Page) – No Auth required ( Intro /summary of your website ) Should have at least login, about us, contact us, view (your theme) by all (like HW8), by filter (like HW9) Login page • Should have at least: • First and Last Name • Username (unique username) • Password * confirm password – Case Sensitive • (Teams of 2 or more) Password must have at least? 1 uppercase, 1 lowercase, and special characters, rest of letters (at least 8 char long) • (Teams of 3 or more) Security hint (for forgot password) About Us Should be visible without logging in (give basic information to users before they create an account) Contact Us (example of Create record with different data) Should be visible without logging in (adds user input data from contact us to your DB, optional send email instead of only saving in DB) Order page ( related to your Theme page) requires authentication to view Other pages related to your theme (might or might not require authentication) All pages should have title, proof of HTML check and CSS check (w3 validation) Simple SEO implementation (use in head section) ALT tags FavIcon (32 X 32 for web browsers) (256 X 256 for mobile) Consistent format for overall website and for webpages. For example, navigations links on left or top, font types, colors. Spell check Google Analytics * Required. Start collecting Data ASAP. All past imple mentations from HW3, 4 Fall 202 2 CIS 525 Date last modifie d: 202 2_12_06 Final Documentation (NOT LONGER REQUIR ED) SKIP T HIS PAGE Goto Final Presentation Page (NEXT PAGE) The f inal report will consist of two parts: a 20 -40 page paper, and a 20 -25 minute presentation. The f inal paper should take a f orm of a well -written technical paper (good f ormatting) . It should include the f ollowing components: Title page, TOC, clear images where needed and much more detailed than your presentation. 1. Title and Team members names and section, Date, Course, University 2. A web link to your project (publicly accessible) – your demo needs to be to a public URL (not f rom your local computer) . 3. Description of motivations and goals f or the project: what did you build and why is it Interesting to you. 4. System implementation : all Three -tiers, Architecture (technical ), Deployment (hosted) , why did you choose specif ic architecture. 5. Website Navigation (hierarchy) – Also include authentication rules (time out, redirect if not logged in) 6. Detailed description of the design and implementation of the system , A. Each web page sho uld have its own heading section with detailed inf ormation about the webpage: the summary or purpose, the GUI, the Web API, any validation . B. Data model: database schema (relationship diagram) or you can explain in words. C. System components and f unctions: a ctivity diagram, sequence diagram, etc. or explain in web page summary. D. User interf ace design (Header, Footer, Lef t or right, CSS high level overview) E. Document what team member was responsible f or what part of the project 7. Results of a system evaluation: p resent results that show that your system design and implementation meet the initial goals. (online HTML/CSS validator, Debug tools, webpage metrics/perf ormance) 8. Google Analytics, explain results, show dif f erent views by platf orm, by device, etc.) 9. Outstanding Issues or Future plans 10. What did you learn ? Both technically and high level (working with teams, data availability, etc. ) f rom this project? Fall 202 2 CIS 525 Date last modifie d: 202 2_12_06 Final Presentation (PowerPoint or google Slides) Required f or students in sec 001, online students will record the presentation and upload to canvas. Should be around 5 to 10 min f or slides and around 15 to 20 10 min f or live demo (total no more than 25 15 min) Short high -level (try to use short phrases and not paragraphs ) overview of your project bef ore you live demo Topics to include: *** similar to the list f rom the Final Documentation, except summarized version *** o Title and Team members Names, Co urse Name . • A web link to your project (publicly accessible) • Description of motivations and g oals f or the project: what did you build and why is it Interesting to you. • System implementation – high -level architecture • Website Navigation (hierarchy) – Also include authentication rules (time out, redirect if not logged in) • Results of a system evaluati on: present results that show that your system design and • implementation meet the initial goals. (online HTML/CSS validator, Debug tools, webpage metrics/perf ormance) – show 1 page result and if you made changes to imp rove. • Include Google Analytics page. • Outstanding Issues or Future plans • What did you learn ? Both technically and high level (working with teams, data availability, etc. ) f rom this project?
Powerpoint presenation and demo of working program
Kunika Saxena Section – 002 Travel Website Homework 8 Table of Contents Introduction ………………………….. ………………………….. ………………………….. ………………………….. ….. 1 Complete Functionality ………………………….. ………………………….. ………………………….. ………………. 1 The code ………………………….. ………………………….. ………………………….. ………………………….. ………. 2 Installation Issues ………………………….. ………………………….. ………………………….. ………………………. 4 Running Head: TRAVEL WEBSITE HOMEWORK EIGHT 1 Introduction This article explains the get api by reading data from a database. The data read is about tourism attraction sites in America and Canada. The data shows the common sites in these countries and the state/city they are in. W ill use MySQL as a database, PHP MySQLi as our middleware and HTML and CSS as our front -end technology. I decided to use PHP and MySQL because they are powerful technologies and power most websites because of WordPress technology, and I were also not limited to ReactJS and NodeJS. Complete Functionality The following screenshot shows the complete functionality of our common sites page. The page shows common tourist attraction sites found in the United States and Canada. The page shows a table which acts as the frontend and it provides a visually appealing interface and human readable data to the users. Running Head: TRAVEL WEBSITE HOMEWORK EIGHT 2 The code I created a database in MySQL and inserted our data in a table called “traveltbl”. The following screenshot shows our data in the database. The database is our backend, and I will connect the ba ckend with the frontend using PHP Application Programming Interface. Running Head: TRAVEL WEBSITE HOMEWORK EIGHT 3 The following is our PHP code . The code serves as the middleware where it connects the fron tend with the database and the data in the table. 0) { while ($row = mysqli_fetch_assoc ($result )) { $id = $row [“id” ]; $site = $row [“site” ]; $city = $row [“city” ]; $country = $row [“country” ]; echo ” .$id .’ ‘ .$site .’ ‘ .$city .’ ‘ .$country .’ ‘ ; } } else { echo ” No results” ; } ?> Installation Issues There were no installation issues since I had to install a sing le software known as XAMPP and it constitutes of PHP, MySQL server, and the Apache server used to host websites. The following screenshot shows the server with Apache and MySQL servers started. Running Head: TRAVEL WEBSITE HOMEWORK EIGHT 5
Powerpoint presenation and demo of working program
Kunika Saxena Section 002 Travel Website Homework 9 Running Head: TRAVEL WEBSITE CRUD OPERATIONS 1 Table of Contents Website Navigation ………………………….. ………………………….. ………………………….. ………………………….. ……. 2 Website Issues ………………………….. ………………………….. ………………………….. ………………………….. …………… 2 Summary about CRUD Operations ………………………….. ………………………….. ………………………….. …………… 2 Debug ………………………….. ………………………….. ………………………….. ………………………….. …………………….. 24 Homework Summary ………………………….. ………………………….. ………………………….. ………………………….. .. 24 Future Plans ………………………….. ………………………….. ………………………….. ………………………….. ……………. 25 Running Head: TRAVEL WEBSITE CRUD OPERATIONS 2 Website Navigation I have added a folder called config which contains database.php. I have also added the various files that support our CRUD operations. They are create.php, read_one.php, delete.php, and update.php. Website Issues I did not find any issue while implementing the travel website. The implementation went smoothly as depict ed in the next section while showing screenshots of the CRUD operations of the website. Summary about CRUD Operations The website allows creating, reading, updating, deleting of tourist attraction sites from the website. The following screenshot reads all the tourist attraction sites from the database. The page that reads all tourist attraction sites is called attraction sites.php. Running Head: TRAVEL WEBSITE CRUD OPERATIONS 3 You can read, edit, and delete each record by using the respective buttons. The following screenshot shows us adding a new record to the database. We will click on the “Create New Tourist Site” button as shown from the above screenshot. Th e following screenshot shows us a form that will allow us to add a new record. Running Head: TRAVEL WEBSITE CRUD OPERATIONS 4 The following screenshot shows us filling the form with our new record and when we are done, we will click on “Save Site” button. The following screenshot shows that our data has been saved successfully. Running Head: TRAVEL WEBSITE CRUD OPERATIONS 5 The next screenshot shows our data saved in the database. The following screenshot shows us reading one record, the one that I have created. Running Head: TRAVEL WEBSITE CRUD OPERATIONS 6 The next screenshot shows us editing the record that I had created. We will change the country to Netherlands and then show if it is reflected in our database. From the following screenshot we can see that our record has been updated successfully . Running Head: TRAVEL WEBSITE CRUD OPERATIONS 7 The following screenshot shows our record in the database. We can also delete data by clicking the “delete” button depicted in the following screenshot. Running Head: TRAVEL WEBSITE CRUD OPERATIONS 8 After clicking the “Delete” button, we will get a message asking us whether we are you about deleting the record. The following screenshot shows this. Running Head: TRAVEL WEBSITE CRUD OPERATIONS 9 After clicking “OK” the record will be deleted from the database and also removed from the website. Th e following screenshot shows us the success deletion message. From the above screenshot we can also see that the record that had “Netherlands” as a country has been deleted. The following screenshot shows the same from the database. Running Head: TRAVEL WEBSITE CRUD OPERATIONS 10 From the screensh ot above we can see that the record that had “Netherlands” as a country an d an id of 25 has been removed from the database. I added several pages to our website to deal with CRUD operations. The first page is the create.php page. This page helps in creating a single record. It has a form that facilitates the user to create a record. The following screenshot shows the form and th e code. Add a travel site title > Running Head: TRAVEL WEBSITE CRUD OPERATIONS 11 head > < a href =”#” >Colosseum a> li> < a href =”grandcanal.html” >Grand Canal a> li> < a href =”leaningtower.html” >Leaning Tower a> li> < a href =”touristattraction.html” >Tourist Attraction Sites a> li> < a href =”attractionsites.php” >Common Sites a> < a href =”signup.html” >Signup a> li> < a href =”contactme.html” >Contact me a> li> ul> nav > Add tourist attraction site h1 > div > prepare ($query ); // posted values $site =htmlspecialchars (strip_tags ($_POST [‘site’ ])); $city =htmlspecialchars (strip_tags ($_POST [‘city’ ])); $country =htmlspecialchars (strip_tags ($_POST [‘country’ ])); //binding the parameters $stmt ->bindParam (‘:site’ , $site ); $stmt ->bindParam (‘:city’ , $city ); $stmt ->bindParam (‘:country’ , $country ); if($stmt ->execute ()) { echo “Site record was saved successfully.” ; }else { echo “Unable to save th e site record.” ; } }catch (PDOException $exception ){ die (‘ERROR: ‘ .$exception ->getMessage ()); } } Running Head: TRAVEL WEBSITE CRUD OPERATIONS 13 ?> ” method =”post” > Attraction Site td> < input type =”text” name =”site” class =”form -control” /> td> tr> City td> < input type =”text” name =”city” class =”form -control” /> td> tr> Country td> < input type =”text” name =”country” class =”form -control” /> td> tr> td> Back to All Sites a> td> tr> table > Running Head: TRAVEL WEBSITE CRUD OPERATIONS 14 form > div >