Project description: Administration system

Two weeks ago, when I changed my system plan, I planned to add an administration system into my project, which helps me to manage the information in my personal website. Now, it has been finished!

page related: /admin_index.php; admin_news.php; admin_contact.php
CSS file: /css/admin.css
js file: /js/jquery.js

Page description:

1. admin index page


This page is the central page of my administration system. There are mainly three parts in this page. On the top of this page, it's the navigation part which links to different pages in the admin system. In the page content, it firstly shows the date and my newest 10 posted news and received messages. Below that, it is the login panel for the Mysql database of my whole project. I also want to mention the orange button at the right-top corner of this page. It's the button used to log out the administration system.

2. admin news page


When I click the news link at the navigation part in my admin index page, I will be led to the admin news page. Firstly, I can see the detailed information of my posted news, including the title, news content and date. I can choose to delete the news when clicking the "delete" link on the right. At the bottom of the page, it's the "insert message" panel, which is used to add new message on my personal website. Actually, it's an expandable and collapsible panel implemented by Jquery. When I fill the form and admit, the news will be automatically inserted into my database.

3. Admin contact page


Finally, it's the admin contact page. This page is similar as the admin news page but does not have the insert message function, since the messages are left by the web viewers. In this page, I can view all the messages which I have received and delete them if I want.

Since then, I eventually finished the whole project. Maybe there are still many things to be improved, but I should say I really learned a lot from this project. And I hope I can get valuable peer feedback in my demonstration today.

Reference:
http://roshanbh.com.np/2008/03/expandable-collapsible-toggle-pane-jquery.html

Project description: contact page and index page

Page file: /gb.php; /index.php
CSS file: /css/main.css
php file: /ajax_login.php
JavaScript file: /jquery.js;

page screen-shot:
1. Contact page


2. Index page


Page description:
1. Contact page
Last week, I changed my system plan. Contact page should be one of the major changes in my project. Now, this page contains two functions: guest book and address book. Web viewers can leave message to me through this page. Concurrently, they can see my contact method and university address. The guest book function is modified by the subject exercise. Guests' messages will be directly stored into the database, which I can check in my administration pages.

2. Index page
Index page is the most important page for my project. According to my design, there are also two major functions on it. This first one is showing the lasted information about me, including the news, projects and social links. Secondly, I can login to my administration page from my index page.

The authentication function should be the most complicated one in my project. It is implemented by Ajax, php and Jquery. Even though this function is modified by the code which I got from an online tutorial, I really learned a lot about Ajax and Jquery, which help provide quite appealing effects to websites. I think I will further learn those two fantastic technologies in the future.

Reference:
Ajax validation system:http://roshanbh.com.np/2008/04/ajax-login-validation-php-jquery.html

Guest book exercise of DMT

Project description: Photo album

Page file: /photo_ablum.php
CSS file: /css/main.css
/css/photo/ddphpalbum.css
JavaScript file: /css/photo/ddphpalbum.js

page screen-shot:
When website viewer goet to this page, it shows like below.


After the website viewer clicks one picture, he or she can see the whole image:


Description:
Photo album page is the page which allows the website viewers to see all the pictures which I have uploaded on the website. For this function, I adopted an online photo album code which is implemented by javascript and php. All those pictures are directly stored in the server. There is also a paging function for this page. Each page displays nine of my pictures.

Reference:
http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm

Working on the administration function

Because I have changed my system plan and planed to add an administration system in my website, I have to design a new page layout for those new pages. During these days, I am mainly working on this part. In terms of the authentication, I am going to use AJAX and database to implement it, which means I have got one more thing to learn this week. Hopefully, everything can be under control.

Project description: project page

Page file: /my_project.html
CSS file: /css/main.css

page screen-shot:


Description: The project page of my website shows the assignments or projects which I have done in my finished subjects. Website viewers can have a whole idea of what the project is by seeing the project description and project screen-shots on this page. In this page, I did not use any client side or server side scripting language like JavaScript or php. The whole page is implemented by XHTML and CSS.

All my related documentation is now online

Hi all, all my related documentation of this subject is online now. Please check the following link to my subject materials:

Dmt all documentaion

Project description: news page

From now on, I am gonna start to write sth about every finished page in my project. Today, I think I would like to start from the news page.

Page file: /news.php
CSS file: /css/main.css

page screen-shot:


Description: The function of the news page is used to show the news about me. Every website viewer can see a list of page ordered by date. The information displayed on this page is directly from the table called "news" in my database. I also added the paging function for separating all the information by pages. This function is mainly modified by the guestbook exercise.

Week 11 progress

In this week, I am still following the timetable set in my system plan. What I did during this week is blew:

1. Revise the system plan report
After the peer learning, I had received several valuable suggestions. According to the feedback, I revised the system plan report.

2. Make a big change in my project
At start, there is a download function in my project. After my second thought, I think this function seems quite useless. Therefore, I deleted this function and planed to add an administration function instead. This function aims to help me, the owner of the website, to more easily manage the information stored in the database such as news or guest messages.

3. Finish the design of the administration function
This function is used to manage two important tables of my project in the database: the news table and guest message table. After logging in the administration page, I can choose to see the information stored in the database. Furthermore, in the news administration page, I can also insert new news into the database.

4. Change the guest book page of my project
Because I have decided to transfer some functions in my guest book page into the guest book administration page, I have modified the guest book page to suit my new system plan. In this new guest book page, I removed the function which shows all the messages on the page. Instead, the new page has been separated into two parts: a form which is used to leave a message for me, and some contact information about me. Following is two screen-shots of the old and new guest book page. The first one is the old page and the second picture is the new page for comparison:



Next week, I am going to work on the administration part of my project, including the page design and implementation and the admin authentication function.

Revised system plan

Thanks for the peer learning. I got several good suggestions from my group. According to their advices, I have revised the system plan and added more details into it.

Here is the link of my revised system plan: System plan version 2

I hope I can get more comments from my fellows.

Week 11: Guest lecture

In today's lecture, Willims from opera software gave us a great talk about the new technologies. In the lecture, he introduced the two improved standards by W3C, HTML 5.0 and Css 3.0. Those two new technologies really brought several brand new features which make the website design more efficient and simpler.

Furthermore, Willims also mensioned the importance of the web standard. I think in the final project of mine, making the website sticking to the standard would be a necessary part that I focus on.

More posts about HTML 5 and CSS 3 later..

My draft system plan

haha, I finally finished my system plan (draft version). It seems everything is getting interesting. I will try my best to stick to my schedule. And hopefully, it would be a successful project.

Here is the link of my system plan: Draft system plan

Week 10: none teaching week

This week, we have no class. It's a good chance for me to have more time to spend on my project. I finished designing the website and using CSS to build the layout of my site. furthermore, I also added some php and javascript features into my project. It seems that everything was doing well according to the project schedule.

Here are some visual sketch of my project: