Professional Documents
Culture Documents
CSE3100-Lab Manual
CSE3100-Lab Manual
LABORATORY MANUAL
Course No.: CSE 3100
Course Title: Software Development-IV
PREFFERED TOOL(S)
1. Sublime text
2. notepad++
3. XAMPP Server,
4. MySQL
TEXT/REFERENCE BOOK(S)
1. Learning PHP, MySQL and JavaScript with jQuery, CSS and HTML5, 4th Edition by
Robin Nixon, O’Reilly Media.
2. PHP Cookbook, Solutions and Examples for PHP programmers, 3rd Edition by Adam
Trachtenberg, David Sklar, O’Reilly Media.
Page | 1
Session 1
OBJECTIVES:
i. Getting acquainted with major components of a C program Understand the principles of
creating a web page using html and CSS
ii. Learn the language of the web: HTML and CSS
HTML: HTML stands for Hypertext Markup Language. HTML is a Client-side language and Very
lightweight. HTML is also known as the skeleton of a webpage.
<!DOCTYPE html>
<html>
<head>
<title>First Page</title>
</head>
<body>
<h1>First Heading</h1>
<p>First paragraph.</p>
</body>
</html>
HTML Attributes
Class - The class attribute specifies one or more class names for an element.
Example:
<h1 class=“title”>Welcome</h1>
<h2 class=“second-title title”>Hello World</h2>
Page | 2
ID - The id attribute specifies a unique id for an HTML element
Example:
<h1 id=“main-title”></h1>
CSS: CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on
screen. Mainly used to design web page. It is a Client-side language.
Internal style
<head>
<style>
h1 {
color: red;
margin-left: 10px;
}
</style>
</head>
Inline style
<h1 style=“color: red; margin-left:10px;”>First Heading</h1>
CSS Syntax
Here,
h1{ h1 – Selection
color: red; color: red; – declaration
margin-left: 10px; color – property
} red - value
Page | 3
CSS Important Property
i. background
ii. color
iii. padding
iv. margin
v. border
vi. width
vii. height
viii. font-size
ix. font-weight
x. text-align
EXERCISES: Building Your First Web Page – Design a web page using HTML & CSS.
Page | 4
Session 2
OBJECTIVES:
i. Responsive Web design
ii. Bootstrap
Responsive Web design: Responsive Web Design is about using HTML and CSS to automatically
resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).
A responsive web design will automatically adjust for different screen sizes and viewports.
To create a responsive website, add the following <meta> tag to all your web pages:
Bootstrap is a CSS framework which uses HTML, CSS and jQuery to make responsive web pages.
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS and it’s a world's most popular
front-end component library. Bootstrap has light but powerful plugin built on jQuery.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-tofit=no">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/main.css" />
<title>Bootstrap</title>
</head>
<body>
<h1>Welcome</h1>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
Page | 5
Bootstrap Elements
Containers: Containers are the most basic layout element in Bootstrap and are required when using our
default grid system.
<div class="container">
<!-- Content here -->
</div>
Grid System: Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align
content.
<div class="container">
<div class="row">
<div class="col-md-4"> One of three columns </div>
<div class="col-md-4"> One of three columns </div>
<div class="col-md-4"> One of three columns </div>
</div>
</div>
Bootstrap Component
Alert:
Page | 6
Button
Collapse
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button"
aria-expanded="false" ariacontrols="collapseExample">
Link with href
</a>
</p>
EXERCISES: Building a responsive Web Page – Design a responsive web page using HTML,
CSS & Bootstrap.
Page | 7
Session 3
OBJECTIVE:
i. Introduction to XAMPP server
ii. Introduction to PHP
XAMPP: XAMPP (/ˈzæmp/ or /ˈɛks. æmp/) is a free and open-source cross-platform web server solution
stack package developed by Apache Friends, consisting mainly of the Apache HTTP Server, MariaDB
database, and interpreters for scripts written in the PHP and Perl programming languages.
PHP: PHP is an acronym for "PHP: Hypertext Preprocessor". It is a widely-used and open source scripting
language. PHP scripts are executed on the server
PHP Syntax
<?php
// PHP code goes here
?>
Page | 8
PHP Variables Declaration
<?php
$txt = "Hello world!";
$x = 5;
$y = 10.5;
?>
PHP Constant
<?php
define("GREETING", "Welcome to W3Schools.com!");
echo GREETING;
?>
<?php
$t = date("H");
if ($t < "20") {
echo "Have a good day!";
}
?>
PHP Loops
<?php <?php
$x = 1; for ($x = 0; $x <= 10; $x++)
while($x <= 5) { {
echo "The number is: $x <br>"; echo "The number is: $x <br>";
$x++; }
} ?>
?>
Page | 9
PHP Function
<?php
function firstFunction() {
echo "Hello world!";
}
PHP Array
• Foreach
foreach($arr as $key=>$val ){…}
EXERCISES: Project selection and build your project web page using HTML, CSS and Bootstrap.
Page | 10
Session 4
1. OBJECTIVES:
i. PHP form
ii. Store data into CVS file
PHP Form
/* Form Element */
– Input
<input type=“” name=“” value=“” class=“” />
– Textarea
<textarea name=“”></textarea>
– Select
<select name=“”>
<option value=“”></option>
</select>
/* INPUT Type */
• Text
• Password
• Radio
• Checkbox
• Reset
• Submit
GET - $_GET[‘’]
POST - $_POST[‘’]
File Upload
Page | 11
/*upload.php file*/
2. LET’S
$target_dir WRITE A PROGRAM TOGETHER:
= "uploads/";
$target_file = $target_dir
Problem: . basename($_FILES["fileToUpload"]["name"]);
Write a program to check whether a given integer is a prime number or not.
move_uploaded_file ($_FILES["fileToUpload"]["tmp_name"], $target_file)
function readCSV($csvFile){
$file_handle = fopen($csvFile, 'r');
while (!feof($file_handle) ) {
$line_of_text[] = fgetcsv($file_handle, 1024);
}
fclose($file_handle);
return $line_of_text;
}
$filename ='FinalMissingData.csv';
$new_csv = fopen($filename, 'w');
$resOrder = array(
0 => "ID",
1 => "Name",
2 => “Email",
3 => “Password“
);
fputcsv($new_csv, $resOrder);
EXERCISES: Create a form which will take input (name, email, phone, message) from user.
Store these data in a CSV file/DB. Create a list view page with user ID (table view).
Page | 12
Session 5 & Session 6
OBJECTIVE:
i. Introduction to Databases with PHP
DB Connection
<?php <?php
$host = 'localhost'; mysqli_close($link);
$user = ‘root'; ?>
$password = '';
$db = ‘lab';
$link = mysqli_connect($host, $user,
$password, $db);
?>
Data Query
/*Select Query*/
<?php
$email = ‘[email protected]‘;
$sql = 'SELECT * FROM user WHERE user_email='.$email; $result = mysqli_query($link,
$sql) or die(mysqli_error());
?>
Page | 13
/* Data Fetch*/
<?php
$noOfData = mysqli_num_rows($result);
while($row = mysqli_fetch_row($result)){
print_r($row);
}
?>
/* Insert Query*/
• <?php
$user_name = ‘Tanzilur Rahman’;
$user_email = ‘[email protected]’;
$password = md5(‘123456’);
date_default_timezone_set('Asia/Dhaka');
$currentTime = date('Y-m-d H:i:s');
*/PHP Session*/
<?php
session_start();
?>
*/PHP Cookies*/
<?php
$cookie_name = "user";
$cookie_value = "John Doe";
setcookie("TestCookie", $value, time()+3600);
?>
*/PHP Redirect*/
<?php
header('Location: http://www.aust.edu/'); die;
?>
Page | 14
Final Project Requirement: You must include following page/ content to your final project.
• Home Page
• About Us Page
• Contact Page
• Login & Registration Option
• User Profile Page
• All Service/All Product Page
• Service/Product Details Page
Page | 15
Session 7
1. OBJECTIVES:
i. Introduction to Virtual Host
ii. Introduction to Java Script
iii. Introduction to MVC & CMS
Virtual Host
Location
C:\xampp\apache\conf\extra\ httpd-vhosts.conf
<VirtualHost *:80>
DocumentRoot
"C:/xampp/htdocs"
ServerName localhost
</VirtualHost>
<VirtualHost *:80>
DocumentRoot
"C:/xampp/htdocs/project_folder_name" ServerName aust.edu
<Directory
"c:/xampp/htdocs/project_folder_name">
Order allow, deny
Allow from all
</Directory>
</VirtualHost>
Virtual Host
Location
C:\Windows\System32\drivers\etc\hosts
127.0.0.1 aust.edu
Java Script
<script src="js/jquery.min.js"></script>
<script src="js/custom.js"></script>
$(document).ready(function(){
$(‘.message .close’).on(‘click’, function(){
$(‘.message’).hide();
})
})
Page | 16
MVC: MVC is a software approach that separates application logic from presentation. In practice, it
permits your web pages to contain minimal scripting since the presentation is separate from the PHP
scripting. The Model represents your data structures.
CMS: CMS means Content Management System. CMS allows developers to develop modules and
applications using core library functions, with PHP as the primary programming language. It provides
capabilities for multiple users with different permission levels to manage (all or a section of) content, data
or information of a website project, or internet / intranet application.
An example of a CMS application is a Web Application that provides the following administration, control
panel or website management functionalities:
Page | 17