Dreamweaver MX Tutorial Episode 2

Description

DREAMWEAVER MX Episode 2 Tutorial Step 1 : Create Virtual Directories in IIS 5.1 • Normally, plain html or client-side script (such as Javascript) is executed by the browser. If you want connectivity to a database, you have to use server-side script (in our tutorial we are using ASP) which as the name suggests, processed by a web server. • If you are using Windows XP or Windows 2000, IIS is probably installed already in your PC. IIS is the web server which is required for processing any server side scripts. Just follow these steps. • If your operating system is Windows 98 or ME, you cannot use IIS but you must have PWS installed. To configure PWS refer to the additional notes. • Click Start, point to Programs, double click to open Administrative Tools, and then double click Internet Services Manager (or Internet Information Services). Suhaimi Dreamweaver MX Tutorial : Episode 2 Page 1 • Expand the server name (click the plus (+) sign). • In the left pane, right-click Default Web Site, point to New, and then click Virtual Directory. • Click Next. In the second screen of the Virtual Directory Creation Wizard, type an alias, or name, for the virtual directory (such as DCS5245), and then click Next. • In the third screen, click Browse. Locate the content folder that you ...

Informations

• Publié par: Sakeb
• Nombre de lectures: 45
• Langue: English

Extrait

pEisdo e

D R E A M W E A V E R     M X   Tutorial     Step 1 : Create Virtual Directories in IIS 5.1   •   Normally, plain html or client-side script (such as Javascript) is executed by the browser. If you want connectivity to a database, you have to use server-side script (in our tutorial we are using ASP) which as the name suggests, processed by a web server. •   If you are using Windows XP or Windows 2000, IIS is probably installed already in your PC. IIS is the web server which is required for processing any server side scripts. Just follow these steps. •   If your operating system is Windows 98 or ME, you cannot use IIS but you must have PWS installed. To configure PWS refer to the additional notes. •   Click Start , point to Programs , double click to open Administrative Tools , and then double click Internet Services Manager (or Internet Information Services) .

 

             

Suhaimi

Dreamweaver MX Tutorial : Episode 2

Page 1

2 

                                                                                                 

Suhaimi

) sign). Site , point to New , and then click Virtual

•  Click Next . In the second screen of the Virtual Directory Creation Wizard, type an alias, or name, for the virtual directory (such as DCS5245), and then click Next .

•  In the third screen, click Browse . Locate the content folder that you created to hold the content. Click Next .

Dreamweaver MX Tutorial : Episode 2 Page 2

                                                                                               

Suhaimi

•  In the fourth screen, select Read, Run scripts (such as ASP) and Write . Make sure that the other check boxes are cleared. Click Next and a summary page will appear. Click Finish to complete the wizard.

•  For ASP content, you may want to confirm that an application was created. Your virtual directory should be visible here.

•  Open your Internet Explorer and type http://localhost/DCS5245/  (depends on your virtual directory alias). •   If your IIS configurations has been done correctly, you should see your webpage loaded into the browser.

Dreamweaver MX Tutorial : Episode 2 Page 3

Step 2 : Edit Site Definition in Dreamweaver.   •   Dreamweaver is capable of developing a web application integrated to a database to a certain extend. Basic feature such as Login page, Insert, Update or Delete Records can be done easily without having knowledge in writing ASP code. •   However to create a really web application with advance features, you need to write the code yourself. Remember, Dreamweaver is just a tool to speed up development process. •   Before we start, we need to edit the site definition we did yesterday to enable us to insert ASP scripts. • Click Sites > Edit Sites.     •   Choose your site name and click Edit   button.   •   You do not need to change anything   in the first screen. Click Next button.                                                                                      

Suhaimi

•  In the third screen choose Yes. Select ASP VBScript as the server technology.  •   Click Next. •   In the fourth screen make sure the first option is selected which is edit and test locally. •   Click Next.

•  In this screen, type http://localhost/ followed by the virtual directory alia set earlier. •   Don’t forget to clic button to make sure Dreamweaver can communicate with your web server.   If you receive the message shown • below means it is working.   Click Next. •   Click Done. • •   Click Done button again.

Dreamweaver MX Tutorial : Episode 2

Page 4

Step 2 : Replace file extension with .asp   •   ASP scripts will work only if you use .asp files extension. •   Just rename all your .htm files to .asp. ¾   assignment.htm Æ  assignment.asp  ¾   courseinfo.htm Æ  courseinfo.asp  ¾   index.htm Æ indes.asp ¾   lecturer.htm Æ  lecturer.asp  ¾   links.htm Æ links.asp •   Don’t worry about your links because Dreamweaver will update all the links for you. •   When the update links dialog box appear, just click the update button.                                 Step 3 : Download Database   •   Download the Microsoft Access Database from my website and save inside your working folder. (http://www1.mmu.edu.my/~suhaimi2/download.htm)      Step 4 : Creating a register page      •   Our objective here is to create a simple web application where students need to login first before they can access our web pages especially the lecture notes. •   The main reason we put this restriction is they will have to register first before they login and provide all the important information especially their email address or phone number. We can also add other functionality you can imagine but that will require you to have the knowledge of hand coding ASP pages. •   Create new page from template. •   In order for us to insert ASP codes into our web page, we cannot use template the same way we created the pages yesterday. However, we still need the same layout. Therefore, we must make sure that all the links should be working and finalized first. •   Click Modify > Templates > Detach from Template.                   •   All the editable regions will be gone.  

Suhaimi Dreamweaver MX Tutorial : Episode 2 Page 5

                                                                                                 

•  Remove all the links to the lecture notes. Refer to the figure below.

Creating form •   Click the region where you wan o nser e orm. •   Click Insert > Form or click

•  If you want to see whether you have done this correctly. Enable the invisible elements in the Visual Aids.

•  You should see a red dotted box shown below.

•  You should see a red dotted box shown below. •   Insert a table using the settings below. Make sure your table is inside the red dotted box.

Suhaimi

Dreamweaver MX Tutorial : Episode 2 Page 6

                                                                                 

•  Fill the table with text shown below.  

Inserting Textfield •   Click the region where you wan •   Click Insert > Form Objects > Tex e or c e ex eld icon in the Forms tab.

•  Do the same things will all five rows. Refer to the screen below.

•  Click on the first textfield and look at the property inspector.

Textfield Textfield Textfield max name width characters •   Each textfield must have its own unique name. Sometimes you may want to define the maximum characters you can enter in each textfield. This depends on your setting in the database table. Follow the settings below.    Textfield Name Textfield width Max Chars Student ID studentid 10 Password password 8 Name studname 50 50 Email email 50 50 Phone No. phone 10

Suhaimi Dreamweaver MX Tutorial : Episode 2 Page 7

 Inserting Textfield •   Click inside the cell in the last row. •   Click Insert > Form Objects > Button or Click the button icon in the Forms tab.             •   This will automatically insert the Submit button. Insert another button. •   The second button should be the Reset button. To do that, click on the second button and in the property inspector, Click the Reset form option.                         Step 5 : Connecting to the database   •   In the registration form, the Student ID is treated as the username. Before we can the new username, we need to connect to the database first. • Expand the Application panel by clicking on it.                                                       

•  Click on the Databases tab and click on choose on the Choose document typ . •   In the Choose Document type dialog box. Select ASP VBScript. Click OK  

Suhaimi

Dreamweaver MX Tutorial : Episode 2

Page 8

                                                                                               

•  Click on the plus (+) button and select Custom Connection String.

•  Type connin the Connection name box.

 For the connection string, be very careful of the spelling and the blank space. Make sure lower • and uppercase also strictly follow below. “Driver={Microsoft Access Driver (*.mdb)}; DBQ=” & server.MapPath(“/DCS5245/studentdata.mdb”) •   DCS5245 is the virtual directory alias. (yours may be different). •   Click the Using Driver On Testing Server option and click the Test button. If you get the message shown below, you have successfully connected to the database.   

•  In the Application panel click the plus (+) sign near the connection name to expand. • You can view the table and the field names.  

Suhaimi Dreamweaver MX Tutorial : Episode 2 Page 9

•  In the Insert Record dialog box. Choose the connection name (conn). The table name you want to insert the record to (student). Refer to the figure below.  

Step 6 : Inserting Data into the Database   •   Click Server Behavior Tab •   Click the plus (+) sign and select Insert Recor                                                                                          

•  You have to click each line in the Form elements (referring to the textfield name) and select which field you want to insert the data into by selecting the appropriate field name in the column combo box.   •   Click OK when finished. The color of your form may change but don’t worry because, it won’t appear in the browser.   •   Later we are going to create login.asp file before this register page can be fully functioning.  

Suhaimi

Dreamweaver MX Tutorial : Episode 2 Page 10

  Step 7 : Check username   • In our database, the Username is defined as the primary key meaning that, the username must   be unique or no duplicate value. Therefore, we must make sure that before we insert a new username, it will check first whether the username is already exists or not. •   In the Server Behavior panel, click the plus sign. Select User authentication and then select Check Username.                

•  When a dialog box appear, select st id as the Username field and type checkuser.asp.

                              •   The file checkuser.asp doesn’t exist yet. We will create it later. It should display a message when a student try to register using an existing username. •   Save the file as register.asp. You can not view yet as it is not complete. We need to create the checkuser.asp file first.   Step 8 : Creating checkuser file.   •   Create a new page from template. •   Detach the document from template. •   Delete all the lecture notes links. •   Choose a document type (ASP VBScript) • Click the Binding tab in the Application Panel.   •   Click the plus sign and select Request variable.                        

Suhaimi

Dreamweaver MX Tutorial : Episode 2 Page 11