WEEK 6

LOGIN ADMIN PAGE

Create File > New > Blank Page > PHP > Create

Insert Form

Insert Table, 2 row and 2 column

Type ‘username’ and ‘password’ at each column

Edit the text field

Put button at the bottom of the table and name the button as Login

Choose submit button at the action

Go to panel server behaviours > Click User Authentication > Click Login User

Connection : dmx

Table : admin

Username : username

Password : password

If success : Go to admin1.php

If fail : Go to admin_fail.php

Choose username, password, access level

Get level from ‘level’

Save this page as ‘admin_login.php’

ADMIN1 VIEW

Create File > New > Blank Page > PHP > Create

Insert Div Text

Insert Table, 2 row and 5 column

Type “view user”, “add user “, ‘delete user”, “update user” and “logout”

Save this file as “admin1.php”

ADMIN2 VIEW

Create File > New > Blank Page > PHP > Create

Insert Div Text

Insert Table, 2 row and 3 column

Type “view user”, “add user” and “logout”

Save this file as “admin2.php”

INSERT RESTRICT ACCESS

Open admin1.php file

Go to server behaviour > Click User Authentication > Restrict Access to Page

Restrict based on username, password and access level

Define

Name: 1 > ok

If access denied go to admin2.php

GO TO DETAIL PAGE

Create > File > New > Blank Page > PHP > Create

Click Layout > Insert Div Text

Type : ADMIN VIEW USER

Go to Panel Binding > Click Recordset

Connection : dmx

Table : register

Click ok

Drag username to the page

Highlight the username that has been dragged > click server behaviour > repeat region

Save the file as “view _user.php”

Highlight again the username > Go to server behaviour > Go to Detail Page > Fill up pop up box

Detail Page : Detail Page

Pass URL parameter : id

Tick both URL parameter and form parameter > click ok

CREATE DETAIL PAGE

File > New > Blank Page > PHP > Create

Layout > Insert Div Text

Type : USER DETAIL

Insert table: 5 row, 2 column

Type userid, surname, firstname, username and password at each column

Go to Panel Binding > Recordset (Query)

Connection : dmx

Table : register

Filter : id

Sort by : id and ascending

Do the drag process “id go to user id column and so on

Create ‘Back” button

Highlight the button and link to ‘view_user.php’

Save the file as ‘detail.php’

Open file admin1.php

Highlight view user > link it to “view_user.php”

Click Save

Open admin_login.php and preview in firefox

UPDATE USER

File > New > Blank Page > PHP > Create

Layout > Insert Div Text

Click Form > Insert Table > Row 5, Column 2

Type username , surname, firstname, username and password. Dont forget to put text field in each column

Insert button > change the value and name it as “Update”

Choose submit form at the action

Save the file as “update_user.php”

Go to Panel Binding > Recordset (query)

Connection : dmx

Table : register

Click ok

Do the drag process as usual and put in the text field

Go to Panel server behaviour > Update record

Connection : dmx

Table : Register

After updating : Go to admin1.php

Save the file

CREATE ADMIN EDIT PAGE

File > New > Blank Page > PHP > Create

Insert Table > 3 column, 2 row

Go to Panel Binding > Recordset Query

Connection : dmx

Table : register

Click ok

Drag username at username column

Highlight the table > Go to server behaviour > Go to detail page >

Detail page : update_user.php

Tick URL parameter

Now open file update_user.php

Go to binding > recordset > filter id > ok

Save the file as “admin_edit.php”

Open admin_edit.php and preview in firefox

DELETE BEHAVIOR

Open Admin_edit.php file

Insert form at Delete Column

Insert button and name it to delete

Put a cursor next to delete button

Go to form > hidden field>

Edit properties bar

Edit to hd_del  and choose id as value

Go to server behaviour > Delete record

Connection : dmx

Table : register

Primary key value : Form variable, hd_del

After deleting go to : admin_edit.php

Click ok

WEEK 5

Assalamualaikum wbt and Hi everyone...

In week 5, we learn on how to develop dynamic web page using PhP. So, as what I did before, here I’ll share the steps and techniques on how to do that.

Install Xampp and stop IIS

First thing to know, in developing web page using PhP, we must have Xampp as a server. We can just download from the internet and install it. After finish install, click at C> Xampp > start button at Module Apache and MySql. But before that we have to click stop button at IIS first.

Figure 1

Figure 2

Run and text localhost

1. Type localhost at URL bar > click security > scroll down until we find http://localhost > click at the URL > setting new password> start log in

Figure 3

Create Table

• Click phpMyAdmin > New Table > type database name “register” > create
• Click register table > type table name "tableone" > set up number of column “5” > go.
• In designing table, I have choose 5 column consist of id, name, username, password and remarks.
• For id, I set up it as primary and auto increment. And for the rest I just set up as text.
• The result of tableone are as Figure 4.

Figure 4

Create New Site

• Open Dreamweaver > click Site > New site >
• Type the name of your site as “myprpjectone” > Next
• Click “Yes, I want to use a server technology” > Next
• Choose PHP MySQL as server technology > Next
• Click “Edit & test locally (my setting server is on this computer)
• Choose folder where you want to store your files or just type C:\xampp\htdocs\myprojectone\
• Test the URL. If success, that means the site has been created. See Figure 5.

Figure 5

Create New Page

• Now is the time for me to create new Page. This page is for user to register before log in to the website.
• File > New > Blank Page >
• Choose Page type as PHP > Create
• Design table and form consist of 4 elements which are Name, Username, Password and Remarks.
• When designing table, we have to personalize a few things in at text field.
• For Password, we have to click password at text field properties.
• For Remarks, we have to choose multiple line at text field properties.
• Dont forget to put register button at the bottom of the table.
• Save and name this page as daftar.php
• The result as at Figure 6

Figure 6

 Create view Page

Repeat the step above for another new page. Save and name the page as “papar.php”

See Figure 7

Figure 7

Make Connection

• Open daftar.php
• Click Database (on Application tool )> My SQL>
• Fill up the box at MySQL connection:-
• i)My SQL server : samb
• ii)User Name : root
• iii)Password : 1234
• iv)Database : register ( we have to choose the database name that we have save in phpMyAdmin before )
• The result as at Figure 8.

Figure 8

5.     Click Test. The ‘success’ box will pop up means that the connection have been done successfully.

How to use Server Behavior

• Open papar.php
• Click server behaviour > recordset
• Choose “samb” at connection and “tableone” at table space.
• Sort id as ascending and then click ok

Figure 9

• Open daftar.php
• Choose server behaviour > insert record
• Choose “ samb” at connection and “ register “ at insert table
• After inserting go to papar.php page

Figure 10

• Open daftar.php
• Highlight the table
• Click server behaviour> repeat region.
• This is for us to view all information that has been key-  in by the user.

I hope that this step can help us in developing dynamic website. I'll share much more techniques and steps in the future. 

Wassalam

WEEK 4

Assalamualaikum wbt

In week 4, Prof. Zaidatun teach us on How to use Active Server Pages (ASP) in Dreamweaver. And in this week we’re giving task to create a Guest Book. Sound interesting right?

But before proceed to the new chapter, Prof. Zaidatun review our last week topic about Web Based Development. She also checked and make sure that we already know the basic skills on Web Based Development. 

We also have been explained about 3 types of link. 

Link to other website, email link and anchor. Anchor can be used to link text in the same page or we can say it has the same function like book mark.

Back to our new task, to create a Guest Book we must have a database. So other than learn on how to use ASP, we also have been introduced by using Microsoft Access.

As we’ve learn in our previous class, ASP can run with Internet Information System (IIS) server. So the first step is to check whether the IIS can work or not.

How to check your IIS?

Click Control Panel > Programs > Programs & Features > Turn Windows Features On or Off

Then click checkbox Internet Information System (IIS)

Click any browser, type localhost at the URL space and wait until the image of appear. 

That’s means your IIS is work! The image of IIS is at below:-

Now we go to the step of creating a new site...

Open the Dreamweaver > Click Site > New Site > name our site (In this task, I named it as “project”)

Then put URL (http://localhost/project/)

Then click Next > Yes > ASP VBScript > Edit & Test Locally (My testing server is on this computer )> Inetpub > wwwroot

*type inetpub \wwwroot\project\

Test URL

Next we can start create a database

Go to Microsoft Access, create new database file at Blank Database. We have to save the file at 

C:/inetpub/wwwroot/data

Create the fields in the table

Setup the connection

To setup the connection we have to be very focus and make sure we follow the flow accordingly.

In the class, we follow the entire step in the handout given by Prof. Zaidatun. Unfortunately, most of us stuck at the step of test the connection. We try to explore the failure for more than 10 times but still same problem appear. 

So I decided to find out the solution. The day after, I went to meet my friend, Mr. Khairi Hassan, IT Officer at UTM. 

I told him my problem and then we start to explore together. After a few trials, we found out that for Windows 7, ASP will not installed by default once you click IIS in the checkbox. 

What I have to do is install it manually and follow the step that also has been discussed in our FB Group.

The steps are as follows :-

Go to start > Control Panel > Administrative Tools > IIS

In the connection panel, select application pools > Select default approach (in the centre panel )

In the action panel, click advanced setting link

In the general setting, set enable 32 bit application to True then click ok.

Now only I know that unlike other Window which apply 64 bits, Windows 7 use 32 bits in setting ASP

Wassalam

WEEK 3

Assalamualaikum wbt...

In Week 3, Dr Asykin teach us on how to create website using Dreamweaver Software. In this class we are using Dreamweaver CS3 but a few friend use CS6 version. I've never use this software before. So i'm a bit excited to know how it work.

Here I'll share a few techniques that I've learned in that class. First thing to know is Dreamweaver have 3 main bar which are Title Bar, Menu Bar and Tool Bar. The picture below will show you the location of these 3 bar.

Below are a few techniques in designing website using Dreamweaver.

Create New Design.

To create a new design, go to File > New > Blank Page > Choose Page Type > Create.

After follow this step, you'll get a blank page for you to design. You can just type anything that you want. As for me I put a text "WELCOME TO MY WEBSITE" . You can also edit the text using Page Properties. Page properties can be found by right click or just go to the bottom of the screen. The picture below show the step of create new design.

After put the text, we can create the design by add some background at the page. In choosing background, we can just Google Images for Background or also can choose background color from the Page Properties. If we use Google Search Images, these are a few tips to remember:-

1. Choose image that have suitable resolution and match with the PC screen. The best resolution is 1024 x 768. 
2. Click to the image that we choose, view image before save to file.If we straight away save before view, the images background will come out as a tiles, not a full images of background.

Another technique in create new design is:-

Click File > New > Page from Sample > Frame set > Choose Frame set.

In this class, I've choose Fixed Top, Nested Left as the Frame Set.

On the left, we can put Menu Eg: Univesiti Teknologi Malaysia and Fakulti Pendidkan.

We can also hyperlink the Menu so that user can go to the website by click from the Menu .

To hyperlink it, highlight the text (Fakulti Pendidikan), copy the URL of  Fakulti Pendidikan's  website (http://educ.utm/) and paste in Hyperlink box in Properties Bar. The target can also be set as Main Frame or Blank. The picture below will explain the step.

When using hyperlink, we can also change the font color before and after hyperlink. We can just go to Page Properties, then click Link, Link Color and choose color for Visited Link, Rollover Link and Active Link.

It will be nice if we can create a website and make people easy to contact us directly using email. So here I'll share the techniques of email link.

We can put our email address at the Menu Frame, highlight the email address, go to insert at Menu Bar, click Email Link. Try preview to know whether it works or not. Simple isn't?


These are all basic step in creating website. As a beginner, I think the step is not so complicated but fun. I really enjoy in this class and hope to know further about creating website in our next class.

Wassalam......