Mankato BLC Synology NAS using File Station Project

Mankato BLC Synology NAS using File Station Project

 

It is using HTML and CSS to make a movie review website.



The files tmnt.html and move.css are starter files. HW2-Files.zip contains the media elements and files needed for this project.



For part I of this project, you will upload your solution in a folder called HW2 to the BLC Synology NAS using File Station.



HW3 is a continuation of HW2 and adds PHP into the mixture of required elements. This assignment does require the use of PHP file IO and array functions; it does NOT require and should not use HTML / PHP forms. (We have not covered forms yet.)



The files are movie.php and movie.css. You should NOT need to modify movie.css from HW2. So use movie.css, but you it should work as is. Basically your creating a dynamic PHP file to replace the static HTML file in HW2. This page will show review and information for many different films, not just TMNT. 



Read the HWAssign3 Movie Review PDF for the details. You will also find a zip file with all the movie files (titled moviefiles.zip). For this, part II of this project, you will upload your solution in a folder called HW3 to the BLC Synology NAS using File Station.



Jot down questions for class and be prepared to start coding ASAP the week of February 15.74 attachmentsSlide 1 of 74




attachment_1attachment_1
attachment_2attachment_2
attachment_3attachment_3
attachment_4attachment_4
attachment_5attachment_5
attachment_6attachment_6
attachment_7attachment_7
attachment_8attachment_8
attachment_9attachment_9
attachment_10attachment_10
attachment_11attachment_11
attachment_12attachment_12
attachment_13attachment_13
attachment_14attachment_14
attachment_15attachment_15
attachment_16attachment_16
attachment_17attachment_17
attachment_18attachment_18
attachment_19attachment_19
attachment_20attachment_20
attachment_21attachment_21
attachment_22attachment_22
attachment_23attachment_23
attachment_24attachment_24
attachment_25attachment_25
attachment_26attachment_26
attachment_27attachment_27
attachment_28attachment_28
attachment_29attachment_29
attachment_30attachment_30
attachment_31attachment_31
attachment_32attachment_32
attachment_33attachment_33
attachment_34attachment_34
attachment_35attachment_35
attachment_36attachment_36
attachment_37attachment_37
attachment_38attachment_38
attachment_39attachment_39
attachment_40attachment_40
attachment_41attachment_41
attachment_42attachment_42
attachment_43attachment_43
attachment_44attachment_44
attachment_45attachment_45
attachment_46attachment_46
attachment_47attachment_47
attachment_48attachment_48
attachment_49attachment_49
attachment_50attachment_50
attachment_51attachment_51
attachment_52attachment_52
attachment_53attachment_53
attachment_54attachment_54
attachment_55attachment_55
attachment_56attachment_56
attachment_57attachment_57
attachment_58attachment_58
attachment_59attachment_59
attachment_60attachment_60
attachment_61attachment_61
attachment_62attachment_62
attachment_63attachment_63
attachment_64attachment_64
attachment_65attachment_65
attachment_66attachment_66
attachment_67attachment_67
attachment_68attachment_68
attachment_69attachment_69
attachment_70attachment_70
attachment_71attachment_71
attachment_72attachment_72
attachment_73attachment_73
attachment_74attachment_74




UNFORMATTED ATTACHMENT PREVIEW



STARRING:Patrick Stewart Mako Sarah Michelle Gellar Kevin Smith DIRECTOR:Kevin Munroe RATING:PG THEATRICAL RELEASE:Mar 23, 2007 MOVIE SYNOPSIS:After the defeat of their old arch nemesis, The Shredder, the Turtles have grown apart as a family. MPAA RATING:PG, for animated action violence, some scary cartoon images and mild language RELEASE COMPANY:Warner Bros. RUNTIME:90 mins GENRE:Action/Adventure, Comedies, Childrens, Martial Arts, Superheroes, Ninjas, Animated Characters BOX OFFICE:$54,132,596 LINKS:The Official TMNT Site 1 TMNT 2007 33 1 The script feels like it was computer generated. This mechanical presentation lacks the cheesy charm of the three live action films. ROTTEN Steve Rhodes Internet Reviews 1 It stinks! ROTTEN Jay Sherman (unemployed) 1 Internet Programming Assignment 2: Movie Review Part I This assignment is about CSS and HTML for layout, positioning, and the CSS box model. You will create files for a fake movie review web site named Rancid Tomatoes for the film TMNT. Turn in the following files by uploading them to the your web space on the BLC Synology NAS using File Station. • tmnt.html • movie.css, the stylesheet for tmnt.html You will recreate the page below. Your page must match the appearance specified in this document. We do not expect you to produce a pixel-perfect page that exactly matches this image. But your page should follow the styles specified in this document and match the look, layout, and behavior shown here as closely as possible. We will provide you a skeleton of tmnt.html with the page contents, but no page sections or styles. The only modifications you should make are to divide it into sections using div/span tags and add id and class attributes. You should also replace the last two "YOUR REVIEW HERE" reviews with text of your choice. (You are also allowed to add the HTML necessary to enable the "favorites icon" or "favicon" specified on the next page.) Our next assignment, Movie Review Part II, will build on the code you write in this assignment. The screenshots in this document were taken on Windows in Firefox, which may differ from your system. Copyright © Marty Stepp / Jessica Miller, licensed under Creative Commons Attribution 2.5 License. All rights reserved. Appearance Details: All images on the page and mentioned in the following text are hosted on the web with the following file names. banner.png overview.png bannerbg.png background.png rottenbig.png rbg.png fresh.gif rotten.gif critic.gif The page's title is TMNT - Rancid Tomatoes . The page has a "favorites icon" ("favicon") of rotten.gif. The page background is background.png. Page text uses 8pt font, using Verdana, Tahoma, or any sans-serif font on the system. The page body has no margin or padding, so its contents stretch to the very edge of the browser window. The top of the page is an image banner. The center of this banner is banner.png. Behind this banner bannerbg.png repeats horizontally across the length of the page. Each image is 50px tall. (Hint: To make the banner stretch to the edges of the page, use the bannerbg.png as the background image of a block element that is behind banner.png.) Underneath the image banner is a centered heading containing the movie name and year in a 24pt bold font. The preferred fonts for this heading are Tahoma, Verdana, or any sans-serif font available on the system. The text in the header has a "shadow" located 3px right and 3px down from the original text, using the color #999999. Below the main heading is the page's overall content area, with an overall 33% rating for the film, several critics' reviews, and an overview of the film at right. Taken together this content occupies 800px in width and is centered horizontally within the page. If the page resizes horizontally, this 800px section should move dynamically so that it remains centered horizontally on the page. This overall section has a 4px gray solid border with a 20px round radius and should be sized large enough to contain all of its contents. (Hint: See textbook section 4.3 on making contents fit.) In the overall area there is a 560px-wide left section for the "rotten" 33% rating and the critics' reviews of the film. The section is topped by a smaller section containing a large "rotten" image (rottenbig.png), vertically aligned to be even with the bottom of the text around it. Behind this the image rbg.png repeats horizontally across the entire length of the section. Each of these images is 83px tall. This is followed by the 33% overall rating for the film, which is shown in a 48pt red bold font. Below the 33% overall rating, there are two columns of reviews. The columns each occupy 47% of the width of the overall left-center section of the page. There is a horizontal spacing of 2% between the columns and neighboring content. (Hint: See textbook section 4.3.4 on multi-column layouts but avoid the new column-* CSS3 properties.) Each review is a box with a quote about the movie, in bold 8pt font. The quote box has a background color of #E8DC9B, and a gray border, 2px thick with a 10px round radius. 8px separate the quote box's content from its border. Each box has an icon (fresh.gif or rotten.gif) for whether the reviewer liked or disliked the movie on the left side of the quote box, with 5px separating it from text to its right. Text wraps around the images as needed. The reviewer's personal information follows under the quote box, including: the reviewer's name; and the publication in italic. A reviewer icon (critic.gif) is shown to the left of the text, with 5px of horizontal space separating it from the Copyright © Marty Stepp / Jessica Miller, licensed under Creative Commons Attribution 2.5 License. All rights reserved. text. There is 20pt of vertical space between reviews. (Hint: Paragraphs in movie reviews should be made large enough to contain all their content, including any floating content. See textbook section 4.3.3 on making contents fit into a container.) The top eight reviews should be as shown, but you should change the last two to hold any text that you like. To the right of the critics' reviews is a General Overview section of the page with a list of information about the movie, with a background color of #A2B964. This section is 250px wide, with 10pt between the edge of the section and the text of the list. Its text appears in an 8pt font of Arial or any sans-serif font available on the system. You may assume that the general overview section will always be taller than the section of reviews to its left. The section includes a definition list (using dl, dt, and dd elements) about the movie such as its stars and director. Each term is bolded and has 10pt of vertical separation between it and the element that precedes it. The bottom of this section contains a list of links about the movie. The list should be shown without bullets or indentation. Below the reviews is a bar of centered text indicating reviews "(1-10) of 88", with a background color of #A2B964. It is placed directly next to surrounding content. 5px separate the edge of its text and the element's own outer edge. The page's bottom right corner has links to the W3C validators. These images should remain fixed in the page's bottom-right corner, even after scrolling. The images should appear as 50% opaque, halfway transparent. All other style elements on the page are subject to the preference of the web browser. Implementation and Grading: Submit your assignment online to the new class Synology NAS as shown in class. You can view your pages on the Synology NAS by going to the following URL with your web directory name (i.e. Perry-Web). See an example below. http://lundhome.synology.me/FName-Web/ (insert your first name in place of FName) We strongly recommend that you use the development tools on this assignment. Chrome includes an "Inspect" tool.) See this 4-minute video. Using it to inspect elements will help you find problems with the box model and your styles. We suggest using the "Layout" tab at bottom right to see the box model settings for particular elements. Microsoft Edge (Chromium version) is similar (see video). Firefox and Safari have similar developer tools. For full credit, your page must use valid HTML5 and successfully pass the W3C HTML5 validator. Do not express style information in the HTML, such as inline styles or presentational HTML tags such as b or font. Express all stylistic information on the page using CSS defined in movie.css. The majority of the points for this assignment will be for the movie.css file. For full credit, your style sheet must successfully pass the W3C CSS validator. Part of your grade comes from expressing your CSS concisely and without unnecessary or redundant styles. For example, the two main columns of reviews share many (if not all) styles in common, so you should not specify those styles twice in your CSS file. As another example, if the page uses the same color or font family for multiple elements, group those elements into a single CSS rule, so that it would be possible to change the page's color/font by modifying a single place in the CSS. Use context selectors to avoid needing to apply classes and IDs to large numbers Copyright © Marty Stepp / Jessica Miller, licensed under Creative Commons Attribution 2.5 License. All rights reserved. of elements. Limit the use of absolute and fixed positioning on this assignment. Do not use HTML or CSS constructs past Chapter 4 of the textbook, and do not use HTML tables. Format your HTML and CSS to be as readable as possible, similarly to the examples from class. Place a comment header in each file with your name, section, a brief description of the assignment, and the file's contents. Properly use whitespace and indent your HTML and CSS code as shown in class. To keep line lengths manageable, do not place more than one block element on the same line or begin a block element past the 100th character on a line. For reference, our solution has roughly 130 lines of CSS (85 "substantive"), but you do not need to match this exactly. Part of your grade will also come from successfully uploading your files to the Synology NAS web server. You should place your files into your public web space in a subdirectory named HW2, so that it is possible to navigate to your page in the browser. Copyright © Marty Stepp / Jessica Miller, licensed under Creative Commons Attribution 2.5 License. All rights reserved. Internet Programming Assignment 3: Movie Review Part Deux For this assignment you will write PHP code for movie review pages much like your TMNT page from Assignment 2. Your PHP code will allow you to generate reviews for a variety of movies using the same code. Turn in these files: !"movie.php, the PHP code to produce review pages for movies !"movie.css, the stylesheet for movie.php (probably does not need to be modified from HW2 version) We do not expect you to produce a pixel-perfect page that exactly matches our images. But your page should follow the styles specified in this document and match the look, layout, and behavior shown here as closely as possible. The overall page looks the same as it did in the previous assignment. The difference is that the page might show reviews and information for a film other than TMNT. For example, the following output shows The Princess Bride: To make things simpler, the page's title should now always be just "Rancid Tomatoes". From the course website you will download a .ZIP archive of input files for many movies, described on the next page. Unzip this file into the same directory as your HW3 files, so that the files will be located in relative paths such as tmnt2/info.txt and princessbride/overview.png. Your code should assume these are the relative paths to use. (Don't put them in a moviefiles/ folder. Put each film's folder, such as tmnt2/ or mortalkombat/, directly in your hw3 folder.) The page uses the same images as HW2, with two minor changes. The tmnt.html page showed rottenbig.png next to its 33% rating. But now some films have high overall ratings. Any film whose rating is 60% or above should show freshbig.png, shown at right. Also overview.png has moved, since each movie has its own overview image. Link to all of the "fixed" images using their full absolute URLs, not relative ones. The overview Copyright © Marty Stepp / Jessica Miller, licensed under Creative Commons Attribution 2.5 License. All rights reserved. images are the one exception; since these now come from the support ZIP file and reside in the folder with the movie's information, link to these using a relative path such as "tmnt2/overview.png". All style elements not described here should be as specified in HW2 or subject to the preference of the web browser. The screenshots in this document were taken on Windows in the latest version of Firefox, which may differ from your system. Appearance Details: Your movie.php page will show reviews of different movies based upon a query parameter named film that is passed from the browser to the page in its URL. The value of this variable should be a string representing the movie to display. The browser will request your page with a URL such as the following: movie.php?film=princessbride Your PHP code can store this parameter's into a variable using code such as the following: $movie = $_GET["film"]; All of your PHP code should use this parameter's value, and you should never hard-code particular movie names. Your code may assume that the browser has properly supplied this parameter and has given it a valid value. You may assume that the movie exists and has a corresponding folder of valid input data and images. You do not have to handle the case of a missing or empty film parameter, a value that contains bad characters, a value of a movie that is not found, etc. Based upon the movie name variable's value, display a review of that film. Each film is stored in a directory named the same as your query parameter. For example, the film princessbride stores its files in a folder named princessbride/ . The files associated with each movie are the following. You may assume that the files exist and are valid at all times. !"info.txt, a file with three lines of information about the film: its title, year, and overall rating percentage. The information is used as the page heading and overall red movie rating number. Here's an example file: The Princess Bride 1987 95 !"overview.txt, a file with information to be placed in the General Overview section of your page. Each pair of neighboring lines contains the title and value for one item of information, to be displayed as a definition list term (dt) and its description (dd). The number of lines in the file varies from movie to movie. Example: STARRING:Cary Elwes, Robin Wright, Andre the Giant, Mandy Patinkin DIRECTOR:Rob Reiner PRODUCER:Arnold Scheinman, Rob Reiner SCREENWRITER:William Goldman ... Copyright © Marty Stepp / Jessica Miller, licensed under Creative Commons Attribution 2.5 License. All rights reserved. !"overview.png, an image to display at the top of the General Overview section. This is the movie poster for the film, such as the one shown at right. !"review1.txt, review2.txt, ..., files containing information for each review of the film. Each review file contains exactly four lines: The review, a fresh/rotten rating, the reviewer's name, and the publication. For example, review1.txt might store the following: One of Reiner's most entertaining films, effective as a ... FRESH Emanuel Levy emanuellevy.com o Different



Do you similar assignment and would want someone to complete it for you? Click on the ORDER NOW option to get instant services at essayloop.com