week 14: finish the project and project report

Finally, I finished the whole project report today. I should say the study experience in DMT is quite interesting and useful. I really learned a lot which I did not know when just taking those programming subjects. Thanks for the lecturer and tutors. And I also appreciate my peer learners who gave me many valuable advices and ideas.

Hope to see you in the other subjects, cheers!

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:

Week9: database

In this week's lecture, we get some basic knowledge about Database, including SQL language and MySql server.

This is the exercise of week 7 which is a guestbook implemented by php and mysql:
http://www-student.it.uts.edu.au/~jjliu/dmt/gb.php

JQuery

What is Jquery ?

"jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. It was released in January 2006 at BarCamp NYC by John Resig" (Wikipedia).

Jquery Sandard

It's free, open source software (Wikipedia).

Is JQuery used widely?

Yes! Microsoft and Nokia have announced plans to bundle jQuery on their platforms, Microsoft adopting it initially within Visual Studio for use within Microsoft's ASP.NET AJAX framework and ASP.NET MVC Framework whilst Nokia will integrate it into their Web Run-Time platform (Wikipedia).

How to use JQuery?

Some amazing examples of JQuery can be found here: Tutorials:Live Examples of jQuery

References:

• http://jquery.com


• Wikipedia

week8: JavaScript

This week, we learned Javascript, a client side script, which is used to build dynamic website features. Because I planned to put a photo album in my own project, this week's practice, which is to create a photo gallery by JavaScript, seems quite useful for me.

Here is the page of this week's exercise: JavaScript photo gallery

Last week, I created a photo gallery by a free php script which I found from Internet. This photo album looks much fancier than the lab exercise. Therefore, maybe I will choose to use this photo gallery in my project.

Here is the page of PHP photo gallery: PHP photo gallery

An error of the guest book in week 7 practical exercises

Today, I tried to add the guest book which is in the week 7 practical exercises to my project. However, I found a problem that when I wanted to change the page of the guest book to see other messages, it did not work.

I read through the php script and found the bug which is the php program has not the syntax to get the value of the attribute "offset" passed by the URL.

If you add the following syntax into your php script, the problem will solve and then you can see the messages on different pages.

PHP photo album

According to my project plan, I m gonna add a photo album into my website. Thanks for google, I finally found a great free script which use both javascript and PHP to implement a quite fancy photo album. I have added this script into my project:


I have to say PHP and javascript really enable web design dynamic and full of magic.

php:lecture reflection

In this week's lecture, we learned a sever-side programming scripts: php. PHP is quite a magic technology because it allows website users dynamically interact with the web pages such as making comment and logging in the authenticated pages. I planed to try to use the Guestbook which was introduced in this lab in my own project.

My draft Micro&Macro analysis

Finally finish my Micro&Macro analysis draft. Through this assignment, I got a broad and specific view of the technologies which I want to learn and use in my project.

My Micro and Macro analysis

Now, it's time to start my project!

My project website css layout

I have used XHTML and CSS to build a template page of my project. I really feel css is quite efficient for setting layout of the page.

That's my template page: http://www-student.it.uts.edu.au/~jjliu/dmt/index.html

CSS: make unstrutured cite ordered

The lecture of this week is what I really want to learn: make the page layout using CSS.

Before this lecture, when I wanted to design a web-based interface, the first way coming into my mind was using tables. Actrually, tables are quite easy to control for me because the sturcture showed in the code is just the way when viewing in the web browsers. After this lecture, I have decided to give up tables and use CSS instead! Maybe it's a little hard for me to control the CSS code since all the layout codes are stored in the CSS style tags or other CSS files. However, it makes the main code quite clean and furthermore, it's reusable and with more other features.

I cannot waite to use CSS and XHTML to build my website right now.

Basic rules for changing HTML to XHTML

Recently, I am reading the articles about XHTML and trying to find its standard and difference from HTML. Here is a quite good article which talks about the basic rules of XHTML. There are nine basic rules:

1. Use All Lowercase Tags All tags must be written in lowercase letters. No longer is it allowable to write <HTML>, from now on it will be written <html>.
   

   
   

2. Nest Elements Correctly HTML will forgive you but XHTML will not. Here is a common problem: <b><i>This is wrong.</b></i>. You may notice in this example that the bold and italic elements overlap. Here is the right way to nest these elements: <b><i>This is right.</i></b>.
   
   

   
   

3. Always UseEnd Tags Every tag must have an end tag. When you start a paragraph you use the <p> tag, when you end a paragraph you must use the </p> tag. Same goes for the <li> tag and all other tags.
   

   
   

4. End Empty Elements Now you're wondering what you should do with elements like the <br> tag, yes you need an end tag for this one too. You can either write it as <br></br> or you can use an alternative. Instead you can write <br /;>. This can be used in both HTML and XHTML so start using it now to get used to it. This feature can be used with other empty tags too such as the <hr> tag.
   
   

   
   

5. Use Quotes for Values When you write something like: <table border=1 bgcolor=red>, you've left something out. Values must be surrounded by quotation marks. The proper way to write this would be: <table border="1" bgcolor="red">.
   

   
   

6. Give Every Attribute a Value Here's where things start to get different. In HTML some attributes have no value. One such attribute is disabled. When using such an attribute you should assign the value of the attribute with the same name at the attribute itself. This is how it would look: disabled="disabled".
   
   

   
   

7. Use Code for Special Characters XHTML can get confused when you use such symbols as < or & inside attribute values. Instead use code to write them. Try these lists of codes to help you: Common Symbols and Less Common Symbols. Instead of writing: <img src=my_picture.gif alt="Me & My Son">; you would write: <img src=my_picture.gif alt="Me &amp; My Son">.
   
   

   
   

8. Use id Insead of name The <a>, <frame>, and <img> elements have an attribute called <name> that is used to specity a location within the HTML page. In XML the <id> attribute is used instead. It's recommended that you start using the <id> attribute now, instead of the <name> attribute. It's not mandatory for now but it will make it easier for you later.
   
   

   
   

9. Separate Styles and Scripts If you are using CSS, JavaScript or another type of language in your Web pages you need to put them in a separate file. Link to them where you want them to show up on your page but keep them separate.

Reference: http://personalweb.about.com/od/basichtml/a/409xhtml.htm

Apache friends: Set web server on your own laptops

I got a great software recently called XAMPP-Apache friends. With this free and small application, you can set the web host on your own computers. Then, even though you cannot access to the uni server or other free web hosts, you can still use this local server to test your server side pages such as php pages.

The link of this software is below:
http://www.apachefriends.org/en/xampp.html

Week4 Practical

We got a php exercise today which asked us to change the format to show the date. After viewing the date commends on http://php.net/date. I actually did it. The most tricky thing I think in this practice is that how to show the word "of" because the letter "o" is a command in date function. I solved the problem by adding a backslash before the letter "o" in order to use its literal meaning after using google to find the solution. Below is my whole php script:



Furthermore, I also paid attention on the php mechanism. When I checked the code of the page which server posted back to me. It shows like this:



Just like Alatair said, the PHP server will automatically interpret the php code and send back a page with normal HTML code. Amazing!

I really learned a lot from this lecture and found php is quite an interesting language. However I still got a question. Could anyone tell me which php command shows what sort of database system is provided by uni host?

Ideas? From others' websites!

According to the project schedule, I am gonna figure out the website structure and style within these two weeks. During these days, I am reading a book called: The website designer's idea book, which is talking about website themes, trends and styles. To be honesty, I feel bored about those theoretical things. What this book attracts me is that it cataloged more than 5000 others' websites. I should say you could really learn a lot from viewing others' work!

As for me, I am planning to design a personal website, so I paid more attention on this kind of websites. Here, I collected several personal websites which I think are very great and interesting.

www.mubashariqbal.com

This website above looks quite professional. I like its banner design very much, pretty interesting.

www.thomasmarban.com

A three-dimensional looking site, cool! I am thinking to make my own site like this.

http://www.brentayers.com/

A cartoon style individual website. Seems also great!

My learning proposal

Hey everyone, this is my learning proposal, please check it out:
http://www-student.it.uts.edu.au/~jjliu/dmt/10786921-learningProposal.html

It's just a draft edition and still need to be expanded. Welcome your comments!

Week2: Reflection of the lecture

In today's lecture, Alastair introduced some popular technologies which are used in multimedia area. Those protocols or computer languages make the whole website vivid and dynamic.

After the lecture, we were asked to think and design out our own project since we got the whole view of the technologies. I am wondering to start with my project from the basic tools like HTML and CSS. Then, I am gonna try to explore more complicated languages such as php, javascript and AJAX.

Form tomorrow, I plan to read some related materials from library or through the internet. Hopefully, I can figure out the topic of my project and finish the draft proposal within this week.

My starting page of the subject: http://www-student.it.uts.edu.au/~jjliu/dmt/index.html

DMT Start!

The first lecture started today. I am gonna try to design a website about my country's culture.

Throwing exceptions

Handling errors in a system is very important and necessary. In the assignment, throwing exceptions is the way I used to catch the error or check the business rules.

I defined four exceptions by myself: DateException which is used to catch Datetime formation error, CarException and BankExcetpion for business rules' control.

In the realistic coding, I tried to catch those errors in the business logic layer and throw exceptions to the UI tier where those errors will be handled.

For example:
in business logic tier
try{}
catch(DateException){throw new DateException}
in UI tier
try{}
catch(DateException ex){dateLabel.text = ex.message}

Master Page

MasterPage is a good interface for the whole website in .net webpage design. In the assignment, I added a masterpage which connects to all the other pages. In order to refrain from adding same functions on different pages, I put the logout function, show joblist function and a breadcrumb navigation on the masterpage.

It's code of breadcrumb navigation below:

Login page test

I tried to establish a login page using Asp.net. It seems pretty easy to complement this function. I added two textboxes and a submit button in the web page. After inputting the username and password and clicking the login button, system will send the data to the database. Those data will check the login table in the database and then reply the match rows' number which is used to determine the authorization. The codes are below:

protected void loginButton_Click(object sender, EventArgs e)
{
string connectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data source= C:\\Documents and Settings\\Administrator\\桌面\\study temp\\dataset\\dataset\\testdb.mdb;";
string select = "select count(*) from loginTable where username = '" + username.Text + "' and password = '" + password.Text + "'";
OleDbCommand command = new OleDbCommand(select);
OleDbConnection conn = new OleDbConnection(connectionString);
conn.Open();
command.Connection = conn;
string count = command.ExecuteScalar().ToString();
conn.Close();
if (count == "1")
{
Response.Redirect("Default.aspx");

}
else
{
verification.Text = "invalid username or password";
}
}

Although the function is realized, I think it's better to create a new event which includes a cancelEventArgs to cancel the event when the username or password is invalided. I will try to improve the code in recent days.

DataSet and DataGridView

After designing the ZR system, I began to code. It's really tough for me to program the website using c#.net & asp.net as a novice learning . net platform. First day, I got clear about two problems.
event in First was how to connect to the access database and fill the database in a dataset then bind it with the datagridview. The second problem cost me much time which was using the rowdeletingdatagridview to complement the function of deleting a row. That's the code below.

protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
string connectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data source= C:\\Documents and Settings\\Administrator\\桌面\\study temp\\dataset\\dataset\\testdb.mdb;";
string select = "SELECT * FROM customer";
OleDbConnection conn = new OleDbConnection(connectionString);
conn.Open();
OleDbDataAdapter adapter = new OleDbDataAdapter(select, conn);
OleDbCommandBuilder builder = new OleDbCommandBuilder(adapter);
DataSet ds = new DataSet();
adapter.Fill(ds);
int index = e.RowIndex;
ds.Tables[0].Rows[index].Delete();
adapter.Update(ds);
conn.Close();
}

Actually, those codes cannot reflect our design which hope to using four tiers structure to realize the functions. And one problem still need to be solved: how to bind the List with the datagridview.