huydung's weblog

I've recently finished the first semester in Aptech - computer education. All I have learned by far in 7 months are C - as a basic programming knowledge, HTML, CSS, JS, Concepts of relational database, MS SQL Server and some ASP. After each semester, students in my class are splited into several groups (3-4 students each) to develop some small projects. Look at what we've learned in first semester and you'll easily understand why almost all the groups decide to develop small websites which give users the ability to read news, order something and send feedback...

During the first semester, I've learned some about Ajax and really like it. But to develop a desktop-like website is never be easy, especially for me, who do not have enough knowledge of XML.

I don't remember exactly how I found extjs.com. But I remember exactly how excited I was when seeing its unbelievable examples. I started to learn EXT by experience nearly 8 hours per day. And the result is not bad at all: I finished the project on time. It took me 1 month. I can not imagine how much time it would take if we had to write every line of code without EXT. So I'd like to express my great gratitude to Jack Slocum and his team, who have developed this great library, and to all EXT users in extjs.com/forum, from whom I have learned so much.

The site has not been available on the web yet. Therefore, there are some screenshots below. Click on the images to see them in full size [800x600], please!

In the homepage, there are links to Top 20 films (ordered by users' ratings), top 15 latest films, and one writing which was voted as the best one of the week. 'North region' contains a toolbar with buttons for some normal functions such as search, view hot films, send feedback, see help, login/logout … 'West region' contains a 'tree menu' holding current user’s favorite films and from that tree, he/she can browse for films by category, title, country and browse for actors by their names as well.

The tab showing the search results was created with the help of Ext.View. In this image, users were browsing all action films using the tree.

Click on any film thumbnail, then it will be selected, and its basic information will be seen in 'nested south region'.

After selecting a film from search results, users can press enter or click on 'preview panel' to go to its page.

Then users can write comments for that film. Delete or edit their own previous comments, or reply others’ ones. In the image below, 'vannessars' was editing his comment for Shrek 3. This function was developed with the help of Ext.form.HtmlEditor.

Here is the result: vannessars’s comment was edited. (5 comments are viewed per page. 'Shrek 3' has 14 comments now and they are viewed in 3 pages.)

Users can also search films using quick-search form. They can search films by their titles, actors, characters, producers, countries, directors …. They can type several keywords and search by 3 methods: Search for information contains all-the-keywords, some-of-the-keywords or the-input-phrase-exactly.

Users can also search for actors by their name. Click on each actor image and the films in which they star are showed.

'Shopping cart' is in 'the East region'. It’s so easy to put a DVD into shopping cart, edit quantity, remove DVD users do not like anymore. 'The East region' can be collapsed any time to save space.

Rollover the green apples and click: you’re rating a film (1-5). When our database increases, users can still get access to their favorite films quickly. They just have to add films to their favorite, and links to those films are always available at the tree in the left side.

Signup form, with 'date picker' for DOB field. I'm so happy with the new 'date picker' in Ext 1.1 beta because users can choose year and month easily. In EXT 1.0, date picker are not so suitable for DOB field



Bài viết gốc: mah 360 blog
Viết vào ngày: 23/07/2007