Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114
Lab # 5
Objective: Apply Web Development Framework Using “Dreamweaver CS 5”
1. To understand Web Development Technologies i.e. Open and Close Source
Technologies.
2. To understand Client - Server Architecture
3. To understand the Software Architecture or Architecture of a Web Based Application.
4. To learn Web Development by making a web page for User Side Scripting using
“HTML” for Login purpose.
Theory:
In this lab we are going to understand Web development (open/ close source technologies to be
used) its architecture and developing a frame based website (understanding html tags Frame set
and Table to form a form object Input type.
Objective No. 1:
To understand Web Development Technologies i.e. Open and Close Source Technologies.
Web Development Technologies:
There are two sources of web development technologies:
OPEN SOURCE
CLOSED SOURCE
Open Source Technologies:
Open Source Software’s are freeware i.e. that software that are freely available in market; they do
not require a license or the license is available to everyone. These are in reach of everyone at no
cost and for any intent. This software can be modified or altered as per requirement of the user
because their source codes are open to the public.
The open source software that we are using in this lab is
XAMPP:
Xampp is an open source and free software. It is actually a cross platform web server package.
XAMPP is short for:
X: Cross Platform
A: APACHE Server
M: MySQL
P: PHP
P: Perl
It consists of the following:
CE-202L: Software Engineering Lab
Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114
A Web Server “APACHE”
Database “MySQL”
Interpreter for scripts “Adobe Dreamweaver”
Interpreter for scripts in PHP and Perl Programming Language
APACHE:
APACHE is a public domain open source Web server. Apache is generally recognized as the
world's most popular Web server (HTTP server), originally designed for UNIX environments.
Apache HTTP Server is an established standard in the online distribution of website services,
which gave the initial boost for the expansion of the World Wide Web.
There is a great amount of modules created especially for the Apache server, which support
various scripts and allow dynamic content to be run on the server.
Checking the service of XAMPP:
Open your web browser and type http://localhost, a XAMPP page will appear
If the page does not open, go to the Xampp folder, go to xampp_control and start Apache
and MySQL if not running
Then type http://localhost in your browser
Xampp page will be loaded
Checking the location of htdocs:
Go to the drive where you installed Xampp, then go to Xampp and then look for the folder
htdocs
This is the folder where you will be having all of your work
Creating a Folder:
Go to htdocs in Xampp
Create a new folder named “My Website”
All your work will be saved in this new folder
Objective No. 2:
To learn about the Software Architecture or Architecture of a Web Based Application.
What is Architecture?
Architecture can be defined as the designing of a model with all of its required components.
Architecture is the fundamental organization of a system embodied in its components, their
relationships to each other, and to the environment, and the principles guiding its design and
evolution. Every system has architecture, whether known or not. However, it may lack an
architectural description.
Software Architecture:
Software Architecture is the designing of a software model or a web based application using
certain notations and symbols.
Following are the general steps to follow for developing Architecture for Solution Domain:
CE-202L: Software Engineering Lab
Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114
Move from problem domain to solution domain
Put the system in context, draw context model
System boundary — what’s in, what’s out
Draft overall architecture from by decomposing the system into main modules and show
data flow between them (an information view)
Do this for the system box in the context model
Show also main data flow in and out of system
Divide the data storage logical storage modules, do not assume or decide at this stage
what goes in the same database
Be clear with the notation and symbols you use Provide a clear legend for your diagram
Diagram below depicts the Web Application Architecture Data work flow
The picture below shows the server side scripting and user side scripting:
Step 1: The user enters a new Web page address or clicks a link that requires a new Web page
from the Web server.
Step 2: The Web browser connects the Web server and sends a HTTP GET command with the
path name of the requested Web page.
Step 3: The Web server fetches the HTML document of the requested page or asks an application
server to generate the HTML document.
Step 4: The Server-side scripting step: The Web server scans the HTML document for any
server-side script code embedded in the document. The Web server will remove the embedded
script code and execute it.
When the Web server executes the embedded script code, it will provide many host objects
representing the server host environment. Through those host objects, server-side script code can
easily access the carrying HTML document, the server file system, any databases, and networked
computers.
Usually, server-side script code will update the carrying HTML document with dynamic data
resulted from its computations.
At the end of the server-side script process step, the updated HTML document is ready to be sent
back the client - the Web browser.
Objective No. 3:
To learn Web Development by making a web page for User side Scripting using “HTML” for
Login purpose.
From the idea software architecture, we will now create a login form using “HTML Scripting.”
The steps for the creation of a “Login Web Page” are given below:
Steps:
CE-202L: Software Engineering Lab
Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114
Open Dreamweaver from the shortcut on Desktop
This will open a page like this
Select PHP from Create New, which will open the following page
CE-202L: Software Engineering Lab
Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114
Click on split to have both views (i.e. the code view and the design view)
In HTML the code is written between the beginning and ending tags of body
We have to create a Login Form, so first a form will be inserted
Click insert →Form → Form, this will open a new window, click OK to insert the form
CE-202L: Software Engineering Lab
Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114
The inserted form will look like this
<form id="form1" name="form1" method="get" action="" >
</form>
Now insert a table for the login form from insert → table, Choose 4 rows and 3 columns
for the table
This will insert a table like this
CE-202L: Software Engineering Lab
Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114
Now naming the form
Now
filling the
username and password fields
Now making text field for the user to type his username.
Insert→ Form→ Text Field
CE-202L: Software Engineering Lab
Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114
Keep ID be uname for username
CE-202L: Software Engineering Lab
Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114
The inserted text field will look like this
Now repeat the previous step for password
Insert→ Form→ Text Field
Keep ID be pswd for password. Mark password in properties pane to make it protected
The form will now look like this
CE-202L: Software Engineering Lab
Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114
Adding a submit button
Insert→ Form→ Button
Name the button “submit”
The inserted button will look
like this
CE-202L: Software Engineering Lab
Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114
Now merging the first row, select the first row and merge it from properties
After merging
Now adding background, changing text color and thickening the borders of the form
using Page Properties from the properties pane. Also changing the font of the text.
CE-202L: Software Engineering Lab
Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114
CE-202L: Software Engineering Lab
Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114
Now create a new page
File →New →HTML
CE-202L: Software Engineering Lab
Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114
Now write “WELCOME TO MY PAGE” in between the body tags
CE-202L: Software Engineering Lab
Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114
Adding background picture and changing the font from the properties pane
Now save the two HTML documents by the names “index.php” and “submit.php” in
the folder MyWebsite in htdocs
To link the two documents, the action of the form will be given the destination of
submit.html
CE-202L: Software Engineering Lab
Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114
Browser Output:
Running it on the browser with the link
http://localhost/MyWebsite
Typing username and password and clicking the submit button will give
Now add some html tags for headings and paragraph writing:
Html Headings:
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
CE-202L: Software Engineering Lab
Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114
Html Paragraph
The HTML <p> element defines a paragraph.
Example:
Output:
Html Lists
HTML lists allow web developers to group a set of related items in lists.
Adding a list
Format list unordered list/ordered list
CE-202L: Software Engineering Lab
Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114
A list will appear like this
Exercise:
1) To implement the given form.
CE-202L: Software Engineering Lab
Lab #5: Web development framework using “Dreamweaver CS 5” SSUET/QR/114
2) Explore and implement the other forms of lists (ordered list and definition list).
3) Explore and implement the Email link tag from the insert menu. Insert Emaillink.
CE-202L: Software Engineering Lab
