In this assignment you will gain experience in writing a web application using HTML, CSS, Ajax, and PHP. You will also be retrieving information from your webform and writing it to a file.

Project description

Your job is to design blog software that would allow users to create their own blog. The blog software you design should have at least two pages.

1. The first page, which we will call the Create Post page, allows the user to create a blog entry. In this page display

a. a text area where users can enter text, a text box where users can enter a title for their blog entry,

b. a text box where they can specify tags for the blog entry. Tags are like keywords. They are used associate the content of a blog post with some keywords.

c. initially, empty div element that will hold hints for the tags,

d. submit and reset buttons The action attribute of this form should point to your PHP program.

2. The text box that allows the user to specify tags (1.b above) for the blog entry should use Ajax to automatically display matching options to the keyword that the user is typing. This is similar to the Auto-complete action you see in Google. For example, if the user creates a post about the election process in the United States, and wants to specify the tag election for this blog entry, as they are typing el your program should display election, electricity, elephant as possible options. You can use the Prototype framework (refer to example suggest.html, suggest.js, getHint.php in chap16- examples folder) to implement this functionality.

3. When a user submits their blog entry, the data should be saved to a file by your PHP program.

4. The page that you display to the user after they submit their blog post, which we will call the Blog View page, should save the users POST to a file and display the TITLE, POST, and TAG the user entered on the Create Post page. Also, on this page, include a link to the Create Post page, so the user can navigate to this page if they wish to create another blog entry. Remember, this page should be like a regular HTML page, with appropriate use of the DOCTYPE tag and other HTML tags. Rules of XHTML1.1, such as quoting values of attributes, proper nesting of HTML tags, appropriate use of block and inline tags must be followed.

5. You are expected to create a pleasing blog format. Use CSS for all your formatting styles. The CSS styling is up to you. But, do NOT submit a plain blog with little or no CSS. You are welcome to use any formatting styles to create a pleasing blog. Do not use loud background colors or background images that make the text hard to read on both the Create Post page and the Blog View page.

CREATE POST: An example screenshot of the first page when user enters a blog entry: http://userpages.umbc.edu/~zzaidi1/IS448/hw6/img1.png

BLOG VIEW: An example screenshot of the second page that displays the first blog posts: http://userpages.umbc.edu/~zzaidi1/IS448/hw6/img2.png

What to turn in

Put your final XHTML, Javascript, CSS and PHP files into a directory that will contain your homework 4 files. Call this directory anything you want. Come up with something unique, that others cant guess and gain easy access to your homework files. This directory should be under on GL and should be accessible through your userpages URL.

Submit

o A link to the main page of this assignment, i.e., the XHTML file

o Create a zip file with all the files related to your homework

o Attach this zip file through the Blackboard assignment link.

Grading Total: 25 points

XHTML file that displays the create post text area and use of CSS styles: 5 points

Ajax implementation: 8 points

Successful file creation and writing to the file: 5 points

PHP implementation: 7 points