Week 16 - Study Week

Study Week...
Exam will be on 4th May..
Million thanks to Dr.Zaida for teaching us...
& Good Luck to all my friend...

week 15 - Using Delete & Update Behaviors

Using Delete & Update Behaviors
( appropriate for administrator page where the admin can delete certain users or updating information on users)


Before using Delete and Update behavior, we have to use the RecordSet behavior first.
Steps:
1. Create a page to view back the data of all the registered users. Insert form first OK.
2. Add a Delete and Updating buttons / texts in the page.
3. Use RecordSet and Repeat Region.
4. Create a Delete Page. In the Delete Page, view back the information of the user based on the RecordSet. Add a Delete button.
5. Use a Delete Behavior.
> Name of the form
> Name of the RecordSet
6. Highlight the Delete button / text and use Go To Detail Page or Go To Related Page behavior to link the asp file to the Delete Page to view back the detail information of the user.


For update behavior, continue these steps:
1. Create an Update Page. Insert form first OK.
2. Use RecordSet and Repeat Region.
3. In the Page, insert Text Field for each field.
4. View back the information of the user based on the RecordSet by arranging the behavior from Bindings into the related field:
5. Add an update button.
6. Use update behavior.
7. Highlight the Update button / text and use Go To Detail Page or Go To Related Page behavior to link the asp file to the update Page to view back the detail information of the user.

Week 14 - INTEGRATING SECURITY

Activity 1: Integrating Security into an Application

1. Create a form.

2. Create a table in a database.
3. Type a few username and password for testing.
4. Close your database file and view back your dreamweaver file.
5. Save the file. Make sure your connection is working.
6. Click Server Behavioes > User Authentication > Log In User
7. Select the correct form and connection.
8. Make sure you select the correct table and also the correct fields for username and password.
9. Select also the html or ASP file for If Login Succeeds and If Login Fails.
10. For Restrict Access Based, just select Username and Password.
11. Click OK. Test your application.
12. Try to create the Logout Page.


Activity 2: Integrating Security into an Application with Registration Page

1. Create a table in a database to hold all the data from the registration page. Don't forget to set a Premiary Key to the id variable or username variable.
2. The registration page should ask information such as Name, Username, Password.
3. Text Field for password has to set up as password.
4. Use Insert Record bahavior.
5. No need to view back the registration information. Therefore, don't use RecordSet bahavior.
6. Create another ASP file for login page.
7. Use Login Behavior and please use a same table (that holds registration information) for the username and password.

Activity 3: Go To Related Page and Go To Detail Page


1. Create a page to view back the data of all the registered users.
2. Use RecirdSet and Repeat Region.
3. Highlight one user and Go To Detail Page or Go To Related Page Behavior to link the asp file to the file that view back the detail information of the user.
4. Prepare the detailed file by viewing back the detail information of the user. Create another RecordSet and filter it based on it. Please use this new RecordSet.

Set Up User Table and New Login Page

The first step to creating a login page is to make a table of users. To create this table, use the follow phpMyAdmin code:
Create Table users (username varchar(20) NOT Null default “,password varchar(20) NOT Null default “);
Next, open up Dreamweaver and open a new HTML page, titled “login.php”. Connect this page to your database. If your connection is successful, the application window should show the details of your table. While you are still in the “login.php” page, locate the word “Common” on your top navigation bar. When “Common” is clicked, a drop down menu will appear. From this menu, select “Application”. Next, select the last icon on the navigation bar and click “Log In User”.

Complete Login Table Fields

When “Log In User” is selected, a pop-up box will appear that allows you to fill in the details of your website login form. The first section of the pop-up box will have you fill in basic information about your login page. The second section will have you fill in details about your database. The third section will act as a redirection based on the table structure of your database.
If a successful connection is made between your login page and database, this information will be displayed in the “Validate using connection” area. The last section of the pop-up box titled “Restrict access based on”, should have the choice “Username and password” checked only. Once you are finished completing the form, click “OK”.

Check the Script and Save to Computer

To check to see if your script is in the proper place, go to “Applications” and then click the link titled “Server Behaviors”. Your script name should be found in this panel. To edit this script anytime, simply double click. Save the “login.php” file to your computer, then upload to your website. Re-check the database to be sure that all information entered was correct.

Week 13 - How to make a guestbook to using Dreamweaver...

Please click below address for the tutorial..


http://version2.andrewkendall.com/pages/learning/tutorials/phpandmysql/guestbook/2.setup_dreamweaver_site.php


1. Create new databases using Ms.Access (asp) or phpmyadmin (php).


2. Make a new site in dreamweaver.
- go to site > new site > name your site > choose server technology (ASP vbscript/php mysql)
- choose folder to store your files
- test URL


3. Connecting to a database file.
- Click on the plus (+) and select custom connection string at database tab in application
property.
- type connection name and string.
- testing server


4. Create a register page



5. Inserting data to a database (using recordset)

Open the "MySQL Connection" window

• Configure the MySQL Connection window by giving the connection name of your choice, the MySQL server name, user name and password (if available) and then select a database existent on the server; as the server I am using runs on the local machine I inserted localhost with the default user root and no password. Also, I have previously created a database entitled test with a table inside.

Configure the "MySQL Connection" window

Select the desired database

• By accessing Window>Bindings or by pressing Ctrl+F10, open the Bindings panel. By using the plus-like icon, create a Recordset (Query).

Open the "Recordset" window

• Configure the recordset in the Recordset window; you have to give it a name, to select a connection with a database (or click on Define to create a new one), to select a table from the database and define a query. Click on Test to see how the table content is displayed.

Configure the "Recordset" window

Week 12 - Go To Detail Page & Go To Related Page

Create a link to open a related page (ASP, JSP)

You can create a link that opens a related page and that passes existing parameters to that page. The server behavior is only available when using the ASP or JSP server models.
Before adding a Go To Related Page server behavior to a page, make sure the page receives form or URL parameters from another page. The job of the server behavior is to pass these parameters to a third page. For example, you can pass search parameters received by a results page to another page and save the user from entering the search parameters again.
Also, you can select text or an image on the page to serve as the link to the related page, or you can position your pointer on the page without selecting anything, and the link text is inserted.

1. In the Go To Related Page box, click Browse and locate the related page file. If the current page submits data to itself, enter the current page’s file name.
2. If the parameters you want to pass were received directly from an HTML form using the GET method, or are listed in the page’s URL, select the URL Parameters option.
3. If the parameters you want to pass were received directly from an HTML form using the POST method, select the Form Parameters option.
4. Click OK. When the new link is clicked, the page passes the parameters to the related page using a query string

WEEK 11 - PHP

PHP is a server-side scripting language.

---

What You Should Already Know

Before you continue you should have a basic understanding of the following:

• HTML/XHTML
• JavaScript

If you want to study these subjects first, find the tutorials on ourHome page.

---

What is PHP?

• PHP stands for PHP: Hypertext Preprocessor
• PHP is a server-side scripting language, like ASP
• PHP scripts are executed on the server
• PHP supports many databases (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC, etc.)
• PHP is an open source software
• PHP is free to download and use

What is a PHP File?

• PHP files can contain text, HTML tags and scripts
• PHP files are returned to the browser as plain HTML
• PHP files have a file extension of ".php", ".php3", or ".phtml"

What is MySQL?

• MySQL is a database server
• MySQL is ideal for both small and large applications
• MySQL supports standard SQL
• MySQL compiles on a number of platforms
• MySQL is free to download and use

PHP + MySQL

• PHP combined with MySQL are cross-platform (you can develop in Windows and serve on a Unix platform)

Why PHP?

• PHP runs on different platforms (Windows, Linux, Unix, etc.)
• PHP is compatible with almost all servers used today (Apache, IIS, etc.)
• PHP is FREE to download from the official PHP resource: www.php.net
• PHP is easy to learn and runs efficiently on the server side

Where to Start?

To get access to a web server with PHP support, you can:

• Install Apache (or IIS) on your own server, install PHP, and MySQL
• Or find a web hosting plan with PHP and MySQL support

PhpMyAdmin Tutorial

PhpMyAdmin is web base software used for creating and maintaining MySQL databases. This tutorial is designed to get you starting with the basics of phpMyAdmin.
You can access your MySQL account using phpMyAdmin using the link provided to you --something like below where my-domain.ca is your domain name

http://www.my-domain.ca/phpmyadmin/

When you click on the link above, a dialog box will prompt you for a username and password. This will be the username and password given you when we set it up for you.

Once you log in, a phpMyAdmin screen appears as shown below.

Creating a table in your database
The left-hand frame in phpMyAdmin is used for navigation.You will see your database displayed here (in this case called mydomain). As you create tables, they will show below this.
Click on your database the navigation frame and a new window will appear on the right hand side.

We will create a table in the database, called "people". Use the Create new table feature. Type in the name of the new table into the Name: people, and the number of columns in the table (4) into Fields:. This tutorial is only designed to show you the basic php/MySQL/phpMyAdmin functions. You can delete it using the Drop function. You will want to allow for growth in your table.

Click Go and you should see something like this. The table title now appears with under the database name.


Now enter the names and attributes of our table fields. Enter the following information as above:

Field	Type	Length	Default	Extra
id	int	6	0	auto_increment
name	char	100
telephone	char	50
birthday	char	50

The Length value indicates the maximum allowable length of characters for input. There are many different values that can be set for Type; see further documentation here. The Types specified in this example aren't the most efficient, but just used for the purposes of this exercise. The "id" field, which will be used as a Primary key for this table, has been set to auto_increment, saving you from having to having to type in the next number in sequence when you input records. Set the Default to 0
Once you've entered all the values, click Save. A screen like this will appear.

Congratulations!-You have created your table! The corresponding SQL command for creating these fields is also displayed. This isn't needed but in time you will start to recognise MySql commands
Note that you can use Drop to delete a table or fields.
When you are ready we suggest you check out all of the options on this page.
Inputting data into the table.
Click the tab labeled "Insert" - and another window should appear, like this.

Now type in the details for each of the fields for this record. The "id" column was set to automatically increment so you do not need to enter a number.
Note - if you ever get lost with phpMyAdmin navigation click "Home" in the left hand nav bar and start again.
Now click Save and the record is saved to the people table.
The previous window reappears with the SQL command for the insert. You can keep adding recordsby re-selecting Insert".
For multiple records, you can select the "Insert another new row" radio button on the input form.
When you've finished entering several records into the table, you can check them by clicking on the Browse tab. You can click on individual records for editing or deleting.

You can use the Select tab to refine your display when your database starts grows to many pages of records.
Backup your data
You "don't know what you've got 'til its gone"!
- Click on your database name in the left hand navigation bar
- Click on EXPORT (top tab)
- Highlight the table/s you want to back up
- Select STRUCTURE and DATA radio button
- Select "Enclose table and field names with backquotes"
- Select "Save as file" and "zipped" check boxes
- Click "Go" and a zipped archive file will be generated.
Well done! - you've created a database, a table and fields, entered in a few records, viewed the records, edited and perhaps deleted some of them and practised backing up.

Week 10 - No Class

No Class due to Dr.Zaida on MC

Week 9 - Introduction to ASP

What is ASP?

• ASP stands for Active Server Pages
• ASP is a Microsoft Technology
• ASP is a program that runs inside IIS
• IIS stands for Internet Information Services
• IIS comes as a free component with Windows 2000
• IIS is also a part of the Windows NT 4.0 Option Pack
• The Option Pack can be downloaded from Microsoft
• PWS is a smaller - but fully functional - version of IIS
• PWS can be found on your Windows 95/98 CD

ASP Compatibility

• To run IIS you must have Windows NT 4.0 or later
• To run PWS you must have Windows 95 or later
• ChiliASP is a technology that runs ASP without Windows OS
• InstantASP is another technology that runs ASP without Windows

What is an ASP File?

• An ASP file is just the same as an HTML file
• An ASP file can contain text, HTML, XML, and scripts
• Scripts in an ASP file are executed on the server
• An ASP file has the file extension ".asp"

How Does ASP Differ from HTML?

• When a browser requests an HTML file, the server returns the file
• When a browser requests an ASP file, IIS passes the request to the ASP engine. The ASP engine reads the ASP file, line by line, and executes the scripts in the file. Finally, the ASP file is returned to the browser as plain HTML

What can ASP do for us?

• Dynamically edit, change, or add any content of a Web page
• Respond to user queries or data submitted from HTML forms
• Access any data or databases and return the results to a browser
• Customize a Web page to make it more useful for individual users
• The advantages of using ASP instead of CGI and Perl, are those of simplicity and speed
• Provide security - since ASP code cannot be viewed from the browser
• Clever ASP programming can minimize the network traffic

Installing IIS 7 on Windows Vista and Windows 7

Before You Begin
Ensure that you have installed one of the editions of Windows Vista or Windows 7 on which IIS 7 is supported before you proceed. Not all IIS features are supported on all editions of Windows Vista and Windows 7. Home Basic and Starter editions include only limited basic features of IIS. To see a list of which features are supported on the edition of Windows you are using, see one of the following:

• Available Role Services in IIS 7.0 (Windows Vista)
• Available Web Server (IIS) Role Services in IIS 7.5 (Windows 7)

Also be sure that you have administrative user rights on the computer. By default, you do not have administrative user rights if you are logged on as a user other than the built-in administrator, even if you were added to the local Administrators group on the computer (this is a new security feature in Windows Server^® 2008 called Local User Administrator). Log on either to the built-in administrator account, or explicitly invoke applications as the built-in administrator by using the runas command-line tool.

Note that you can run runas /user:administrator cmd.exe so that every application you run from that command line will be elevated, eliminating the need to use the runas syntax from that command line.

If you are logged on to an account other than the built-in local administrator account, you may see the following security alert dialog box.

Figure 1: Windows Security (User Account Control)
Installing IIS 7

1. To open the Windows Features dialog box, click Start, and then click Control Panel.

Figure 2: Windows Vista Start menu

2. In the Control Panel, click Programs.

Figure 3: Control Panel Home

3. Click Turn Windows features on or off.

Figure 4: Control Panel install options

4. You may receive the Windows Security warning. Click Allow to continue. The Windows Features dialog box is displayed.

Figure 5: Windows Security dialog box

5. Expand Internet Information Services. Additional categories of IIS features are displayed. Select Internet Information Services to choose the default features for installation.

Figure 6: Windows Features dialog box - IIS

6. Expand the additional categories displayed, and select any additional features you want to install, such as Web Management Tools.

Figure 7: Windows Features dialog box - IIS feature selection

7. If you are installing IIS 7 for evaluation purposes, you may want to select additional features to install. Select the check boxes for all IIS features you want to install, and then click OK to start installation.

Figure 8: Windows Features dialog box - Installation selection

8. The progress indicator appears.

Figure 9: Progress indicator

9. When the installation completes, the Windows Features dialog box closes, and the Control Panel is displayed.

Figure 10: Control Panel Home page

10. IIS 7 is now installed with a default configuration on Windows Vista or Windows 7. To confirm that the installation succeeded, type the following URL into your browser, http://localhost.


Figure 11: Default Web site

11. Next, you can use Internet Information Services Manager to manage and configure IIS. To open IIS Manager, click Start, type inetmgr in the Search Programs and Files box, and then press ENTER.


Figure 12: Default Web Site Home page

If you want to use ASP, Microsoft^® ASP.NET, or PHP, install the modules needed to host these pages; this can be done during the installation of IIS or after the installation is complete.

Use Unattended Setup to Install IIS 7.0
IIS 7.0 can also be installed unattended on Windows Vista. For detailed instructions and scripts, see Using Unattended Setup to Install IIS 7.0.

---

Week 8 - INTRODUCTION TO DREAMWEAVER

Dreamweaver MX is the most dynamic HTML editor available off the shelf. With the help of this HTML Editor you can create powerful web sites that have animations, graphics, and complex scripting. You can create web sites linked with databases and more. Dreamweaver gives you the power of adding components such as flash animated buttons, Mouse rollover scripts, Navigation bar with menu’s and so on. The MX technology is the new state of the art technology devised by Macromedia that integrates, client, tool and server technologies together in order to give your website an extra edge over others.
The advantages of Dreamweaver are:
		Easy to use menus: The Dreamweaver interface provides you with extensive menu driven options with the help of which, you can create powerful, yet complex websites easily and with in no time.
		Supported Technologies: Dreamweaver enables you to use technologies such as PHP, ASP, CFML and more so that you save time and effort spent in creating complex codes for programming.
		Extension Manager: Dreamweaver provides you with an extension manager, with the help of which you can download code snippets and various behaviors from the macromedia website http://www.macromedia.com that helps you to integrate technologies like Shopping carts, Dynamic HTML menus, Javascripts and more.

WEEK 7 - INTRODUCTION TO WEB-BASED DEVELOPMENT

What are static and dynamic websites?

STATIC WEBSITE

A static site is a website that is written entirely using HTML. Each web page is a separate document and there are no databases or external files that are drawn upon.
This means that the only way to edit this type of website is to go into each page and edit the HTML. So you would have to do it yourself using a web page editor such as FrontPage or Dreamweaver, or pay your web developer to make updates for you.
There are many static websites on the Internet, you won’t be able to tell immediately if it is static, but the chances are, if the site looks basic and is for a smaller company, and simply delivers information without any bells and whistles, it could be a static website. Static websites can only really be updated by someone with a knowledge of website development. Static websites are the cheapest to develop and host, and many smaller companies still use these to get a web presence.

Advantages of static websites

• Quick to develop
• Cheap to develop
• Cheap to host

Disadvantages of static websites

• Requires web development expertise to update site
• Site not as useful for the user
• Content can get stagnant

DYNAMIC WEBSITE

Dynamic sites on the other hand can be more expensive to develop initially, but the advantages are numerous. At a basic level, a dynamic website can give the website owner the ability to simply update and add new content to the site. For example, news and events could be posted to the site through a simple browser interface. Dynamic features of a site are only limited by imagination. Some examples of dynamic website features could be: content management system, e-commerce system, bulletin / discussion boards, intranet or extranet facilities, ability for clients or users to upload documents, ability for administrators or users to create content or add information to a site (dynamic publishing).
A dynamic website is written using more complex code — such as PHP or ASP — and has a greater degree of functionality. For instance, many dynamic websites can be controlled by a content management system. This means that you will potentially be able to make updates without needing any knowledge of HTML or any website software.
Each page of a dynamic website is generated from information stored in a database or external file. And the content management system that you may use to maintain your website directly modifies this stored information.

Advantages of dynamic websites

• Much more functional website
• Much easier to update
• New content brings people back to the site and helps in the search engines
• Can work as a system to allow staff or users to collaborate

Disadvantages of dynamic websites

• Slower / more expensive to develop
• Hosting costs a little more

Summary

Many sites from the last decade are static, but more and more people are realising the advantages of having a dynamic website. Dynamic websites can make the most of your site and either use it as a tool or create a professional, interesting experience for your visitors.

WEEK 6 - TEXT ENTRY

Tutorial 3 : Personalise your flash games using input & dynamic text boxes
Let's learn how to do it...


1. Open a new file in flash by selecting File > New.

2. Select the Text Box tool from the tool box and draw a text box on the stage.

3. Make sure the properties panel is visible at the bottom of the screen. Let's look through the different options for text in Flash.

4. In step 2, create a text box. Convert the text box to an Input text box. (the type of text box that the person using game/flash)

Click text book > Select the Input text option (from the Text Type drop down Menu)

5. Next, make this box as variable. In variable name cell > enter a name.

6. Ensure the border tool button is selected.

7. Select the Text Tool. Draw another text box on the stage.

8. Select Dynamic Text option from the types menu.

9. In the Variable Name Cell in the properties panel, enter the same name as Input Text box.

    Var  : name

10. Control > Test movie

Below are the outcome of my class activity...

WEEK 5 - B.U.T.T.O.N.S

Week 4 - ACTION SCRIPT

Week 3 - Motion Tween & Shape Tween

MOTION TWEEN 

• Open a new flash file (Ctrl+N). New Document window will appear. Select General panel and choose Type: Flash Document . Press OK.
• If your timeline window is not open, press (Ctrl+Alt+T).
• Now you can see a single Layer called "Layer1" in your timeline Window.

• Select the first frame. Import your image onto stage, upon which you would want to implement motion tween.
  File>Import>Import to Stage, or just press (Ctrl+R).
  Or you can even draw your own object, you can either choose Rectangular tool or Oval tool from the tool box and draw your desired shape.
• Now select your object on the stage and press F8 to convert this image to a Symbol. Convert to Symbol window will pop-up.
  Name your Symbol what ever you like.
  Select Graphic behavior and press OK.
  
  Note: You can create motion tween only on symbols. So any object upon which you would want to implement motion tween, First convert the object to a Symbol.
• Right now your Symbol is in frame1 of Layer1. Select frame 20 and press F6 to insert a new keyframe.
• Still keeping playhead on frame 20, move your Symbol to any other position other than the present one
• Select any frame between, 2 to 19 and select Motion from the tween pop-up menu in the Property inspector. Now your Layer will look something like the one shown below.

• Now press (Ctrl+Enter) to view your motion tween.

SHAPE TWEEN

• Open a new flash file (Ctrl+N).
  New Document window will appear
  Select General panel and choose Type: Flash Document . Press OK.
• If your timeline window is not open, press (Ctrl+Alt+T).
• Now you can see a single Layer called "Layer1" in your timeline Window.

• Select the first frame. Now go to your working area and draw any object. To start off with, may be you can draw a circle.This is going to be your initial object.
  In the above demonstration, my initial object is a short line.
• Select frame 20 and press F6 to insert a new keyframe.
• Still keeping playhead on frame 20, delete the object present in your working area. Now draw a different object, may be a square.
  In the above demonstration, I have drawn a long line.
• Select any frame between, 2 to 19 and select Shape from the tween pop-up menu in the Property inspector. Now your Layer will look something like the one shown below.

• Now press (Ctrl+Enter) to view your motion tween.

Week 2 - Gradient

1. Open a new flash file by selecting File > New.

2. From the tools at the left of the stage, select the rectangle tool. Draw two rectangles on the stage as shown below.

3. Once you have done that, select the oval tool from the tools menu and draw two circles on the stage as shown below.

4.Now that you have set-up the shapes, we’ll start exploring the different fills we can make using the color mixer.The color mixer should be visible at the top of the panels at the right hand side of the screen. If you can’t see the mixer, select Window > Color Mixer or press Shift + F9

5. Click on the fill inside one of the rectangle you have drawn. In the Color Mixer panel, you should see that this is a solid color. To change it from a solid color to a gradient, select either linear or radial gradient from the drop down menu.

6. When you select either linear or gradient, you will see the default gradient colours. You can customise the gradient by doing the following actions:

- To add more colours move your mouse underneath the gradient bar until you see a plus sign next to your cursor. Click to add a new colour box. You can drag this colour box along the gradient bar until you get the effect you desire. To change the colour of the box, select the colour of your choice from the colour change options.

- To remove colours from a gradient click on the colour box of the colour you don’t want and then drag the colour box downwards until it dissapears.

- To make a colour in the gradient transparent click on the colour box and then change the Alpha Setting from 100% to the level of transparency your require. Note that you probably won’t see the transparency effect until you place the fill over another object on the stage.

7. Create your own gradients now by following the steps above and apply them to your shapes using the fill bucket tool. Once you are confident with making your own radial and linear gradients, make sure each shape has a gradient applied. Your file should look similar to this.

Week 1

1. Open a new flash file by selecting

2. Import the picture you want to trace by selecting File > Import and then selecting the image from it’s location on your computer.

3. Resize the image to a size suitable for tracing by selecting the image
 4. Your image will currently be located on keyframe 1 of layer 1 of the timeline. To be able to trace the image we are going to add another keyframe. To do this, select the frame next to the current keyframe and select Insert>.Keyframe Your timeline will now have two keyframes with the picture appearing in both.
and using the Free Transform tool

5. Click on the second keyframe and then select your image on the stage.Delete the image from the second keyframe by selecting the on your keyboard. Alternatively just cut the image by selecting keyCtrl + x. 


6. Click on the second keyframe in your timeline and click on the onion skintool. This will enable you to see a faint version of your image in the second keyframe.

7. Using the drawing tools of your choice, trace over the faint image in the second keyframe to create your own drawing.

8. Once you are happy with your image, you no longer need the original graphic in your Flash file. Remove it by deleting the first keyframe in the timeline. To do this,Remove Frame

9. You will find that you now just have one keyframe containing the image that you have drawn. This image is now ready to be converted to a symbol, animated or even exported to use in another graphics application.

10. Your final step is to turn the onion skinning off. Click on the Onion Skin Tool button to do this.

This trick is greatly if you aren't really confident at drawing. Just remember to ensure that your image isn't exactly the same as the original.