Scribd
Upload
90 views10 pages

Itse Lab # 11 and 12

1. The document describes two lab experiments - Lab #11 on developing a login form using HTML and Dreamweaver, and Lab #12 on server-side programming using MySQL. 2. For Lab #11, students are tasked with creating a login form that logs users into an index page. The provided code shows an example login form built with HTML and CSS. 3. For Lab #12, the objective is to understand databases and MySQL. Students must design a database in XAMPP to store user login information. The code shows a registration form that inserts data into a database table.

Uploaded by

Zaniash fatima
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
90 views10 pages

Itse Lab # 11 and 12

1. The document describes two lab experiments - Lab #11 on developing a login form using HTML and Dreamweaver, and Lab #12 on server-side programming using MySQL. 2. For Lab #11, students are tasked with creating a login form that logs users into an index page. The provided code shows an example login form built with HTML and CSS. 3. For Lab #12, the objective is to understand databases and MySQL. Students must design a database in XAMPP to store user login information. The code shows a registration form that inserts data into a database table.

Uploaded by

Zaniash fatima
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

[LAB # 11 AND 12]

Name Roll no

Faiz Mohiuddin 2020F-BSE-014

Maryam Wahid 2020F-BSE-025

Maheen Ilyas 2020F-BSE-017

Zainsh Fatima 2020F-BSE-024


Lab # 11

Web Development Framework Using “Dreamweaver CS 5”


Web Development Dreamweaver and Html, Web Development (Open/Close Source Technologies),
Architecture and Development a Form Based Website.

Objective:
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.

Exercise:

Task:
Create a login form that logs into index page in html.

Source Code:
<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body {font-family: Arial, Helvetica, sans-serif;}

form {border: 3px solid #f1f1f1;}


input[type=text], input[type=password] {

width: 100%;

padding: 12px 20px;

margin: 8px 0;

display: inline-block;

border: 1px solid #ccc;

box-sizing: border-box;

button {

background-color: #04AA6D;

color: white;

padding: 14px 20px;

margin: 8px 0;

border: none;

cursor: pointer;

width: 100%;

button:hover {

opacity: 0.8;

.cancelbtn {

width: auto;
padding: 10px 18px;

background-color: #f44336;

.imgcontainer {

text-align: center;

margin: 24px 0 12px 0;

img.avatar {

width: 40%;

border-radius: 50%;

.container {

padding: 16px;

span.psw {

float: right;

padding-top: 16px;

/* Change styles for span and cancel button on extra small screens */

@media screen and (max-width: 300px) {


span.psw {

display: block;

float: none;

.cancelbtn {

width: 100%;

</style>

</head>

<body>

<h2>Login Form</h2>

<form action="/action_page.php" method="post">

<div class="imgcontainer">

<img src="img_avatar2.png" alt="Avatar" class="avatar">

</div>

<div class="container">

<label for="uname"><b>Username</b></label>

<input type="text" placeholder="Enter Username" name="uname" required>

<label for="psw"><b>Password</b></label>

<input type="password" placeholder="Enter Password" name="psw" required>


<button type="submit">Login</button>

<label>

<input type="checkbox" checked="checked" name="remember"> Remember me

</label>

</div>

<div class="container" style="background-color:#f1f1f1">

<button type="button" class="cancelbtn">Cancel</button>

<span class="psw">Forgot <a href="#">password?</a></span>

</div>

</form>

</body>

</html>
Output:
Lab # 12
Server Programming using MY SQL
Web Development Server Side using MYSQL

Objective:
1. To understand the concept of Database and to get to know about MySQL.
2. To study the relational logical structure and to get an idea of Design and Data Entry Mode.
3. To design a Database in XAMPP (MySQL) and insert a table that holds fields and records of
Login information.

Exercise:
Source Code:
<!DOCTYPE HTML>

<html>

<head>

<title>Register Form</title>

</head>

<body>

<form action="insert.php" method="POST">

<table>

<tr>

<td>Name :</td>

<td><input type="text" name="username" required></td>

</tr>

<tr>
<td>Password :</td>

<td><input type="password" name="password" required></td>

</tr>

<tr>

<td>Gender :</td>

<td>

<input type="radio" name="gender" value="m" required>Male

<input type="radio" name="gender" value="f" required>Female

</td>

</tr>

<tr>

<td>Email :</td>

<td><input type="email" name="email" required></td>

</tr>

<tr>

<td>Phone no :</td>

<td>

<select name="phoneCode" required>

<option selected hidden value="">Select Code</option>

<option value="977">977</option>

<option value="978">978</option>

<option value="979">979</option>

<option value="973">973</option>

<option value="972">972</option>

<option value="974">974</option>
</select>

<input type="phone" name="phone" required>

</td>

</tr>

<tr>

<td><input type="submit" value="Submit" name="submit"></td>

</tr>

</table>

</form>

</body>

</html>

Output:

You might also like